@withpotter/components 0.13.0-next.101

package/dist/shared/answers-list.js

@@ -0,0 +1,28 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+function AnswersList({
+  answers,
+  className = ""
+}) {
+  if (answers.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    "dl",
+    {
+      className: `divide-y divide-[var(--border-subtle)] ${className}`.trim(),
+      children: answers.map((answer) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex flex-col gap-0.5 py-2 first:pt-0 last:pb-0 sm:flex-row sm:gap-4",
+          children: [
+            /* @__PURE__ */ jsx("dt", { className: "shrink-0 text-xs text-[var(--text-tertiary)] sm:w-40 sm:text-sm", children: answer.label }),
+            /* @__PURE__ */ jsx("dd", { className: "min-w-0 text-sm text-[var(--text-primary)]", children: answer.value })
+          ]
+        },
+        answer.key
+      ))
+    }
+  );
+}
+export {
+  AnswersList
+};
+//# sourceMappingURL=answers-list.js.map

package/dist/shared/answers-list.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/shared/answers-list.tsx"],"sourcesContent":["import type { Answer } from '@withpotter/lib/form-answers';\n\n/**\n * What somebody told us, in the order we asked.\n *\n * A definition list, because that is what this is: a term and its value, and a\n * screen reader should say so. The label column is fixed so the values line up\n * into a scannable edge — a merchant reading twenty enquiries is comparing the\n * same field down the page, not reading each card as prose.\n *\n * On a narrow viewport the pair stacks. Holding a 40-unit label column on a\n * phone leaves the value about eight characters of room, which turns \"12\n * December 2026\" into four lines.\n *\n * The shaping is not here. `toAnswers` in `lib/form-answers.ts` decides what a\n * key is called and what a value looks like, so bookings and enquiries — two\n * surfaces reading two different metadata blobs — cannot drift into two\n * spellings of the same date.\n */\nexport function AnswersList({\n  answers,\n  className = '',\n}: {\n  answers: Answer[];\n  className?: string;\n}) {\n  if (answers.length === 0) return null;\n\n  return (\n    <dl\n      className={`divide-y divide-[var(--border-subtle)] ${className}`.trim()}\n    >\n      {answers.map((answer) => (\n        <div\n          key={answer.key}\n          className=\"flex flex-col gap-0.5 py-2 first:pt-0 last:pb-0 sm:flex-row sm:gap-4\"\n        >\n          <dt className=\"shrink-0 text-xs text-[var(--text-tertiary)] sm:w-40 sm:text-sm\">\n            {answer.label}\n          </dt>\n          <dd className=\"min-w-0 text-sm text-[var(--text-primary)]\">\n            {answer.value}\n          </dd>\n        </div>\n      ))}\n    </dl>\n  );\n}\n"],"mappings":"AAiCQ,SAIE,KAJF;AAdD,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,YAAY;AACd,GAGG;AACD,MAAI,QAAQ,WAAW,EAAG,QAAO;AAEjC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,0CAA0C,SAAS,GAAG,KAAK;AAAA,MAErE,kBAAQ,IAAI,CAAC,WACZ;AAAA,QAAC;AAAA;AAAA,UAEC,WAAU;AAAA,UAEV;AAAA,gCAAC,QAAG,WAAU,mEACX,iBAAO,OACV;AAAA,YACA,oBAAC,QAAG,WAAU,8CACX,iBAAO,OACV;AAAA;AAAA;AAAA,QARK,OAAO;AAAA,MASd,CACD;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/shared/coming-soon-page.d.ts

@@ -0,0 +1,17 @@
+import type { LucideIcon } from 'lucide-react';
+/**
+ * A whole section that is not open yet.
+ *
+ * This replaces the page: a layout renders
+ * it instead of its children, so every route under the section says the same
+ * thing and none of them half-loads.
+ *
+ * Deliberately inert: no button, no date. A control that does
+ * nothing is worse than none, and a date that slips is worse than leaving it
+ * off.
+ */
+export declare function ComingSoonPage({ icon, title, description, }: {
+    icon: LucideIcon;
+    title: string;
+    description: string;
+}): import("react").JSX.Element;

package/dist/shared/coming-soon-page.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { ListPage } from "@withpotter/ui-kit/list-page";
+import { StateView } from "@withpotter/ui-kit/state-view";
+import { useDocumentTitle } from "@withpotter/lib/document-title";
+function ComingSoonPage({
+  icon,
+  title,
+  description
+}) {
+  useDocumentTitle(title);
+  return /* @__PURE__ */ jsx(ListPage, { title, children: /* @__PURE__ */ jsx(
+    StateView,
+    {
+      kind: "empty",
+      icon,
+      title: `${title} is coming soon`,
+      description
+    }
+  ) });
+}
+export {
+  ComingSoonPage
+};
+//# sourceMappingURL=coming-soon-page.js.map

package/dist/shared/coming-soon-page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/shared/coming-soon-page.tsx"],"sourcesContent":["'use client';\n\nimport type { LucideIcon } from 'lucide-react';\nimport { ListPage } from '@withpotter/ui-kit/list-page';\nimport { StateView } from '@withpotter/ui-kit/state-view';\nimport { useDocumentTitle } from '@withpotter/lib/document-title';\n\n/**\n * A whole section that is not open yet.\n *\n * This replaces the page: a layout renders\n * it instead of its children, so every route under the section says the same\n * thing and none of them half-loads.\n *\n * Deliberately inert: no button, no date. A control that does\n * nothing is worse than none, and a date that slips is worse than leaving it\n * off.\n */\nexport function ComingSoonPage({\n  icon,\n  title,\n  description,\n}: {\n  icon: LucideIcon;\n  title: string;\n  description: string;\n}) {\n  useDocumentTitle(title);\n\n  return (\n    <ListPage title={title}>\n      <StateView\n        kind=\"empty\"\n        icon={icon}\n        title={`${title} is coming soon`}\n        description={description}\n      />\n    </ListPage>\n  );\n}\n"],"mappings":";AA+BM;AA5BN,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAC1B,SAAS,wBAAwB;AAa1B,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,mBAAiB,KAAK;AAEtB,SACE,oBAAC,YAAS,OACR;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA,OAAO,GAAG,KAAK;AAAA,MACf;AAAA;AAAA,EACF,GACF;AAEJ;","names":[]}

package/dist/shared/coming-soon.d.ts

@@ -0,0 +1,15 @@
+export interface ComingSoonItem {
+    title: string;
+    description: string;
+}
+/**
+ * Things the wallet will do that it cannot do yet, said plainly on the page
+ * where a merchant would look for them.
+ *
+ * Deliberately inert: no button, no link, no date. A control that does nothing
+ * is worse than none, and a date that slips is worse than leaving it off. The
+ * rows are text and a quiet label, so nothing here reads as something to press.
+ */
+export declare function ComingSoon({ items }: {
+    items: readonly ComingSoonItem[];
+}): import("react").JSX.Element;

package/dist/shared/coming-soon.js

@@ -0,0 +1,22 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ListFrame } from "@withpotter/ui-kit/list-frame";
+function ComingSoon({ items }) {
+  return /* @__PURE__ */ jsx(ListFrame, { title: "Coming soon", children: /* @__PURE__ */ jsx("ul", { className: "divide-y divide-[var(--border-subtle)]", children: items.map((item) => /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: "flex items-start justify-between gap-4 px-4 py-3",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-primary)]", children: item.title }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-tertiary)]", children: item.description })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded-full border border-[var(--border-default)] px-2 py-0.5 text-xs text-[var(--text-tertiary)]", children: "Soon" })
+      ]
+    },
+    item.title
+  )) }) });
+}
+export {
+  ComingSoon
+};
+//# sourceMappingURL=coming-soon.js.map

package/dist/shared/coming-soon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/shared/coming-soon.tsx"],"sourcesContent":["import { ListFrame } from '@withpotter/ui-kit/list-frame';\n\nexport interface ComingSoonItem {\n  title: string;\n  description: string;\n}\n\n/**\n * Things the wallet will do that it cannot do yet, said plainly on the page\n * where a merchant would look for them.\n *\n * Deliberately inert: no button, no link, no date. A control that does nothing\n * is worse than none, and a date that slips is worse than leaving it off. The\n * rows are text and a quiet label, so nothing here reads as something to press.\n */\nexport function ComingSoon({ items }: { items: readonly ComingSoonItem[] }) {\n  return (\n    <ListFrame title=\"Coming soon\">\n      <ul className=\"divide-y divide-[var(--border-subtle)]\">\n        {items.map((item) => (\n          <li\n            key={item.title}\n            className=\"flex items-start justify-between gap-4 px-4 py-3\"\n          >\n            <div className=\"min-w-0\">\n              <p className=\"text-sm text-[var(--text-primary)]\">{item.title}</p>\n              <p className=\"text-xs text-[var(--text-tertiary)]\">\n                {item.description}\n              </p>\n            </div>\n            <span className=\"shrink-0 rounded-full border border-[var(--border-default)] px-2 py-0.5 text-xs text-[var(--text-tertiary)]\">\n              Soon\n            </span>\n          </li>\n        ))}\n      </ul>\n    </ListFrame>\n  );\n}\n"],"mappings":"AAwBY,SACE,KADF;AAxBZ,SAAS,iBAAiB;AAenB,SAAS,WAAW,EAAE,MAAM,GAAyC;AAC1E,SACE,oBAAC,aAAU,OAAM,eACf,8BAAC,QAAG,WAAU,0CACX,gBAAM,IAAI,CAAC,SACV;AAAA,IAAC;AAAA;AAAA,MAEC,WAAU;AAAA,MAEV;AAAA,6BAAC,SAAI,WAAU,WACb;AAAA,8BAAC,OAAE,WAAU,sCAAsC,eAAK,OAAM;AAAA,UAC9D,oBAAC,OAAE,WAAU,uCACV,eAAK,aACR;AAAA,WACF;AAAA,QACA,oBAAC,UAAK,WAAU,+GAA8G,kBAE9H;AAAA;AAAA;AAAA,IAXK,KAAK;AAAA,EAYZ,CACD,GACH,GACF;AAEJ;","names":[]}

package/dist/shared/customer-picker.d.ts

@@ -0,0 +1,43 @@
+export interface PickedCustomer {
+    /**
+     * The member record behind the pick.
+     *
+     * The picker always knew this — it selects from `Member[]` — and dropped it
+     * on the way out, so a caller could prefill a name and an email but could
+     * not link what it was creating back to the customer it was created for.
+     * An order or invoice raised that way stands alone under a name instead of
+     * appearing in that customer's history.
+     */
+    id: string;
+    email: string;
+    name: string;
+    phone: string;
+}
+/**
+ * Typeahead over existing customers. Type a name, email, or phone; pick a match
+ * to prefill the invoice's customer fields. Since we already have a customers
+ * system, billing a repeat customer shouldn't mean re-typing their details —
+ * but free entry below still works for someone not yet in the system.
+ *
+ * A PICK LEAVES A MARK NOW, and it did not before. Choosing a match emptied
+ * the search box and shut the list, so the only trace of the choice was two
+ * fields further down the form filling themselves in — John, on the payment
+ * link: *"when you search for a customer and click on it, it doesn't save"*.
+ * It had saved. Nothing on the control that took the answer said so, and the
+ * field you had just typed into went blank, which is what a rejected entry
+ * looks like.
+ *
+ * So the resolved pick replaces the search box until it is cleared. Pass
+ * `selected` and `onClear` to get it; without them the picker behaves exactly
+ * as it did.
+ */
+export declare function CustomerPicker({ onSelect, selected, onClear, }: {
+    onSelect: (c: PickedCustomer) => void;
+    /** The customer already chosen, if the caller is holding one. */
+    selected?: {
+        name?: string;
+        email?: string;
+    } | null;
+    /** Absent means the pick cannot be undone from here, so no clear button. */
+    onClear?: () => void;
+}): import("react").JSX.Element;

package/dist/shared/customer-picker.js

@@ -0,0 +1,131 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Search, Loader2, UserPlus, X } from "lucide-react";
+import { useAuth } from "@withpotter/lib/auth-context";
+import { membersApi } from "@withpotter/lib/api/members";
+import { GeneratedAvatar } from "@withpotter/ui-kit/generated-avatar";
+import { Input } from "@withpotter/ui-kit";
+function CustomerPicker({
+  onSelect,
+  selected,
+  onClear
+}) {
+  const { tenant } = useAuth();
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [open, setOpen] = useState(false);
+  const timer = useRef(null);
+  useEffect(() => {
+    const q = query.trim();
+    if (timer.current) clearTimeout(timer.current);
+    if (!tenant?.slug || q.length < 2) {
+      setResults([]);
+      setLoading(false);
+      return;
+    }
+    setLoading(true);
+    timer.current = setTimeout(async () => {
+      try {
+        const res = await membersApi.list(tenant.slug, { search: q, limit: 6 });
+        setResults(res.members);
+      } catch {
+        setResults([]);
+      } finally {
+        setLoading(false);
+      }
+    }, 300);
+    return () => {
+      if (timer.current) clearTimeout(timer.current);
+    };
+  }, [query, tenant?.slug]);
+  const pick = (m) => {
+    onSelect({
+      id: m.id,
+      email: m.email ?? "",
+      name: m.name ?? "",
+      phone: m.phone ?? ""
+    });
+    setQuery("");
+    setResults([]);
+    setOpen(false);
+  };
+  if (selected) {
+    const label = selected.name || selected.email || "This customer";
+    return /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium text-[var(--text-secondary)]", children: "Customer" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 rounded-lg border border-[var(--border-default)] bg-[var(--bg-muted)] px-3 py-2", children: [
+        /* @__PURE__ */ jsx(GeneratedAvatar, { name: label, className: "h-7 w-7 shrink-0" }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium text-[var(--text-primary)]", children: label }),
+          selected.email && selected.name && /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-[var(--text-tertiary)]", children: selected.email })
+        ] }),
+        onClear && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onClear,
+            "aria-label": "Choose a different customer",
+            className: "shrink-0 rounded-md p-1 text-[var(--text-muted)] transition-colors hover:bg-[var(--interactive-hover)] hover:text-[var(--text-secondary)]",
+            children: /* @__PURE__ */ jsx(X, {})
+          }
+        )
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium text-[var(--text-secondary)]", children: "Find a customer" }),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 text-[var(--text-muted)]" }),
+      loading && /* @__PURE__ */ jsx(Loader2, { className: "absolute right-3 top-1/2 -translate-y-1/2 animate-spin text-[var(--text-muted)]" }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "text",
+          value: query,
+          onChange: (e) => {
+            setQuery(e.target.value);
+            setOpen(true);
+          },
+          onFocus: () => setOpen(true),
+          onBlur: () => setTimeout(() => setOpen(false), 120),
+          placeholder: "Search by name, email or phone\u2026",
+          className: "w-full pl-9 pr-8"
+        }
+      )
+    ] }),
+    open && query.trim().length >= 2 && (results.length > 0 || !loading) && /* @__PURE__ */ jsx("div", { className: "absolute z-30 mt-1 w-full overflow-hidden rounded-md border border-[var(--border-default)] bg-[var(--bg-base)] shadow-[var(--shadow-md)]", children: results.length > 0 ? results.map((m) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onMouseDown: (e) => {
+          e.preventDefault();
+          pick(m);
+        },
+        className: "flex w-full items-center gap-3 px-3 py-2 text-left hover:bg-[var(--interactive-hover)]",
+        children: [
+          /* @__PURE__ */ jsx(
+            GeneratedAvatar,
+            {
+              name: m.name || m.email,
+              className: "h-7 w-7 shrink-0"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium text-[var(--text-primary)]", children: m.name || m.email }),
+            /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-[var(--text-tertiary)]", children: [m.email, m.phone].filter(Boolean).join(" \xB7 ") || "\u2014" })
+          ] })
+        ]
+      },
+      m.id
+    )) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-3 text-sm text-[var(--text-tertiary)]", children: [
+      /* @__PURE__ */ jsx(UserPlus, {}),
+      "No match \u2014 enter the details below to bill someone new."
+    ] }) })
+  ] });
+}
+export {
+  CustomerPicker
+};
+//# sourceMappingURL=customer-picker.js.map

package/dist/shared/customer-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/shared/customer-picker.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef, useState } from 'react';\nimport { Search, Loader2, UserPlus, X } from 'lucide-react';\nimport { useAuth } from '@withpotter/lib/auth-context';\nimport { membersApi } from '@withpotter/lib/api/members';\nimport type { Member } from '@withpotter/lib/api/types';\nimport { GeneratedAvatar } from '@withpotter/ui-kit/generated-avatar';\nimport { Input } from '@withpotter/ui-kit';\n\nexport interface PickedCustomer {\n  /**\n   * The member record behind the pick.\n   *\n   * The picker always knew this — it selects from `Member[]` — and dropped it\n   * on the way out, so a caller could prefill a name and an email but could\n   * not link what it was creating back to the customer it was created for.\n   * An order or invoice raised that way stands alone under a name instead of\n   * appearing in that customer's history.\n   */\n  id: string;\n  email: string;\n  name: string;\n  phone: string;\n}\n\n/**\n * Typeahead over existing customers. Type a name, email, or phone; pick a match\n * to prefill the invoice's customer fields. Since we already have a customers\n * system, billing a repeat customer shouldn't mean re-typing their details —\n * but free entry below still works for someone not yet in the system.\n *\n * A PICK LEAVES A MARK NOW, and it did not before. Choosing a match emptied\n * the search box and shut the list, so the only trace of the choice was two\n * fields further down the form filling themselves in — John, on the payment\n * link: *\"when you search for a customer and click on it, it doesn't save\"*.\n * It had saved. Nothing on the control that took the answer said so, and the\n * field you had just typed into went blank, which is what a rejected entry\n * looks like.\n *\n * So the resolved pick replaces the search box until it is cleared. Pass\n * `selected` and `onClear` to get it; without them the picker behaves exactly\n * as it did.\n */\nexport function CustomerPicker({\n  onSelect,\n  selected,\n  onClear,\n}: {\n  onSelect: (c: PickedCustomer) => void;\n  /** The customer already chosen, if the caller is holding one. */\n  selected?: { name?: string; email?: string } | null;\n  /** Absent means the pick cannot be undone from here, so no clear button. */\n  onClear?: () => void;\n}) {\n  const { tenant } = useAuth();\n  const [query, setQuery] = useState('');\n  const [results, setResults] = useState<Member[]>([]);\n  const [loading, setLoading] = useState(false);\n  const [open, setOpen] = useState(false);\n  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    const q = query.trim();\n    if (timer.current) clearTimeout(timer.current);\n    if (!tenant?.slug || q.length < 2) {\n      setResults([]);\n      setLoading(false);\n      return;\n    }\n    setLoading(true);\n    timer.current = setTimeout(async () => {\n      try {\n        const res = await membersApi.list(tenant.slug, { search: q, limit: 6 });\n        setResults(res.members);\n      } catch {\n        setResults([]);\n      } finally {\n        setLoading(false);\n      }\n    }, 300);\n    return () => {\n      if (timer.current) clearTimeout(timer.current);\n    };\n  }, [query, tenant?.slug]);\n\n  const pick = (m: Member) => {\n    onSelect({\n      id: m.id,\n      email: m.email ?? '',\n      name: m.name ?? '',\n      phone: m.phone ?? '',\n    });\n    setQuery('');\n    setResults([]);\n    setOpen(false);\n  };\n\n  if (selected) {\n    const label = selected.name || selected.email || 'This customer';\n    return (\n      <div>\n        <label className=\"mb-1 block text-sm font-medium text-[var(--text-secondary)]\">\n          Customer\n        </label>\n        <div className=\"flex items-center gap-3 rounded-lg border border-[var(--border-default)] bg-[var(--bg-muted)] px-3 py-2\">\n          <GeneratedAvatar name={label} className=\"h-7 w-7 shrink-0\" />\n          <div className=\"min-w-0 flex-1\">\n            <p className=\"truncate text-sm font-medium text-[var(--text-primary)]\">\n              {label}\n            </p>\n            {selected.email && selected.name && (\n              <p className=\"truncate text-xs text-[var(--text-tertiary)]\">\n                {selected.email}\n              </p>\n            )}\n          </div>\n          {onClear && (\n            <button\n              type=\"button\"\n              onClick={onClear}\n              aria-label=\"Choose a different customer\"\n              className=\"shrink-0 rounded-md p-1 text-[var(--text-muted)] transition-colors hover:bg-[var(--interactive-hover)] hover:text-[var(--text-secondary)]\"\n            >\n              <X />\n            </button>\n          )}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"relative\">\n      <label className=\"mb-1 block text-sm font-medium text-[var(--text-secondary)]\">\n        Find a customer\n      </label>\n      <div className=\"relative\">\n        <Search className=\"absolute left-3 top-1/2 -translate-y-1/2 text-[var(--text-muted)]\" />\n        {loading && (\n          <Loader2 className=\"absolute right-3 top-1/2 -translate-y-1/2 animate-spin text-[var(--text-muted)]\" />\n        )}\n        <Input\n          type=\"text\"\n          value={query}\n          onChange={(e) => {\n            setQuery(e.target.value);\n            setOpen(true);\n          }}\n          onFocus={() => setOpen(true)}\n          onBlur={() => setTimeout(() => setOpen(false), 120)}\n          placeholder=\"Search by name, email or phone…\"\n          className=\"w-full pl-9 pr-8\"\n        />\n      </div>\n\n      {open && query.trim().length >= 2 && (results.length > 0 || !loading) && (\n        <div className=\"absolute z-30 mt-1 w-full overflow-hidden rounded-md border border-[var(--border-default)] bg-[var(--bg-base)] shadow-[var(--shadow-md)]\">\n          {results.length > 0 ? (\n            results.map((m) => (\n              <button\n                key={m.id}\n                type=\"button\"\n                // onMouseDown fires before the input's onBlur closes the list.\n                onMouseDown={(e) => {\n                  e.preventDefault();\n                  pick(m);\n                }}\n                className=\"flex w-full items-center gap-3 px-3 py-2 text-left hover:bg-[var(--interactive-hover)]\"\n              >\n                <GeneratedAvatar\n                  name={m.name || m.email}\n                  className=\"h-7 w-7 shrink-0\"\n                />\n                <div className=\"min-w-0\">\n                  <p className=\"truncate text-sm font-medium text-[var(--text-primary)]\">\n                    {m.name || m.email}\n                  </p>\n                  <p className=\"truncate text-xs text-[var(--text-tertiary)]\">\n                    {[m.email, m.phone].filter(Boolean).join(' · ') || '—'}\n                  </p>\n                </div>\n              </button>\n            ))\n          ) : (\n            <div className=\"flex items-center gap-2 px-3 py-3 text-sm text-[var(--text-tertiary)]\">\n              <UserPlus />\n              No match — enter the details below to bill someone new.\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/shared/stat-card.d.ts

@@ -0,0 +1,50 @@
+import type { LucideIcon } from 'lucide-react';
+/**
+ * Standardised stat card used across every dashboard page.
+ *
+ * Supports optional features:
+ * - `subtext` — small helper text beneath the value
+ * - `href`   — makes the card a clickable link
+ * - `change` — percentage change indicator (+/−) with colour
+ * - `iconVariant` — tinted background behind the icon
+ * - `info`  — info tooltip text (renders ℹ️ icon)
+ *
+ * All stat-card / metric-card / stats-grid variants across the
+ * codebase should use this single component.
+ */
+declare const ICON_VARIANTS: {
+    readonly default: "text-[var(--text-muted)]";
+    readonly success: "bg-[var(--success-bg)] text-[var(--success)]";
+    readonly error: "bg-[var(--error-bg)] text-[var(--error)]";
+    readonly warning: "bg-[var(--warning-bg)] text-[var(--warning)]";
+    readonly info: "bg-[var(--info-bg)] text-[var(--info)]";
+    readonly accent: "bg-[var(--accent-secondary)]/20 text-[var(--accent-secondary)]";
+    readonly muted: "bg-[var(--bg-subtle)] text-[var(--text-tertiary)]";
+};
+export type IconVariant = keyof typeof ICON_VARIANTS;
+export interface StatCardProps {
+    label: string;
+    value: string | number;
+    subtext?: React.ReactNode;
+    icon?: LucideIcon | React.ElementType;
+    iconVariant?: IconVariant;
+    href?: string;
+    /** Percentage change — positive = green ↑, negative = red ↓ */
+    change?: number | null;
+    /**
+     * Shadow-mode / not-yet-authoritative figure (e.g. pending payout). The value
+     * is de-weighted (never the accent) and tagged "Estimated" so a merchant can't
+     * mistake it for cash in hand. See DESIGN_REFERENCES.md → "State system".
+     */
+    provisional?: boolean;
+    className?: string;
+}
+export declare function StatCard({ label, value, subtext, icon: Icon, iconVariant, href, change, provisional, className, }: StatCardProps): import("react").JSX.Element;
+export interface StatsGridProps {
+    stats: StatCardProps[];
+    /** Tailwind grid columns class. Defaults to responsive 2→4. */
+    columns?: string;
+    className?: string;
+}
+export declare function StatsGrid({ stats, columns, className, }: StatsGridProps): import("react").JSX.Element;
+export {};

package/dist/shared/stat-card.js

@@ -0,0 +1,91 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cardClass } from "@withpotter/ui-kit/card";
+import Link from "next/link";
+import { ArrowUpRight, ArrowDownRight } from "lucide-react";
+import { TextMorph } from "@withpotter/ui-kit/text-morph";
+const ICON_VARIANTS = {
+  default: "text-[var(--text-muted)]",
+  success: "bg-[var(--success-bg)] text-[var(--success)]",
+  error: "bg-[var(--error-bg)] text-[var(--error)]",
+  warning: "bg-[var(--warning-bg)] text-[var(--warning)]",
+  info: "bg-[var(--info-bg)] text-[var(--info)]",
+  accent: "bg-[var(--accent-secondary)]/20 text-[var(--accent-secondary)]",
+  muted: "bg-[var(--bg-subtle)] text-[var(--text-tertiary)]"
+};
+function StatCard({
+  label,
+  value,
+  subtext,
+  icon: Icon,
+  iconVariant,
+  href,
+  change,
+  provisional,
+  className = ""
+}) {
+  const variantClass = ICON_VARIANTS[iconVariant ?? "default"];
+  const hasIconBg = !!iconVariant && iconVariant !== "default";
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+      /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 text-xs font-medium text-[var(--text-tertiary)]", children: [
+        label,
+        provisional && /* @__PURE__ */ jsx("span", { className: "rounded bg-[var(--bg-muted)] px-2 py-0.5 text-3xs font-medium uppercase tracking-wide text-[var(--text-tertiary)]", children: "Estimated" })
+      ] }),
+      Icon && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: hasIconBg ? `p-2 rounded-md max-lg:rounded-ios-sm transition-transform duration-[var(--motion-fast)] group-hover:scale-110 ${variantClass}` : variantClass,
+          children: /* @__PURE__ */ jsx(Icon, { className: "w-4 h-4" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-end justify-between gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx(
+          TextMorph,
+          {
+            as: "p",
+            className: `text-xl font-semibold ${provisional ? "text-[var(--text-tertiary)]" : "text-[var(--text-primary)]"}`,
+            children: String(value)
+          }
+        ),
+        subtext && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-tertiary)] mt-1", children: subtext })
+      ] }),
+      change != null && change !== 0 && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `flex items-center gap-0.5 text-sm font-medium shrink-0 ${change > 0 ? "text-[var(--success)]" : "text-[var(--error)]"}`,
+          children: [
+            change > 0 ? /* @__PURE__ */ jsx(ArrowUpRight, {}) : /* @__PURE__ */ jsx(ArrowDownRight, {}),
+            Math.abs(change).toFixed(1),
+            "%"
+          ]
+        }
+      )
+    ] })
+  ] });
+  const baseClass = `group ${cardClass} max-lg:bg-[var(--bg-subtle)] max-lg:border-transparent max-lg:rounded-ios-lg max-lg:shadow-none p-4 ${className}`;
+  if (href) {
+    return /* @__PURE__ */ jsx(
+      Link,
+      {
+        href,
+        className: `${baseClass} hover:border-[var(--border-strong)] max-lg:hover:border-transparent transition-colors block`,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { className: baseClass, children: content });
+}
+function StatsGrid({
+  stats,
+  columns = "grid-cols-2 md:grid-cols-4",
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx("div", { className: `grid ${columns} gap-4 ${className}`, children: stats.map((s) => /* @__PURE__ */ jsx(StatCard, { ...s }, s.label)) });
+}
+export {
+  StatCard,
+  StatsGrid
+};
+//# sourceMappingURL=stat-card.js.map

package/dist/shared/stat-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/shared/stat-card.tsx"],"sourcesContent":["import { cardClass } from '@withpotter/ui-kit/card';\nimport Link from 'next/link';\nimport { ArrowUpRight, ArrowDownRight } from 'lucide-react';\nimport type { LucideIcon } from 'lucide-react';\nimport { TextMorph } from '@withpotter/ui-kit/text-morph';\n\n/**\n * Standardised stat card used across every dashboard page.\n *\n * Supports optional features:\n * - `subtext` — small helper text beneath the value\n * - `href`   — makes the card a clickable link\n * - `change` — percentage change indicator (+/−) with colour\n * - `iconVariant` — tinted background behind the icon\n * - `info`  — info tooltip text (renders ℹ️ icon)\n *\n * All stat-card / metric-card / stats-grid variants across the\n * codebase should use this single component.\n */\n\nconst ICON_VARIANTS = {\n  default: 'text-[var(--text-muted)]',\n  success: 'bg-[var(--success-bg)] text-[var(--success)]',\n  error: 'bg-[var(--error-bg)] text-[var(--error)]',\n  warning: 'bg-[var(--warning-bg)] text-[var(--warning)]',\n  info: 'bg-[var(--info-bg)] text-[var(--info)]',\n  accent: 'bg-[var(--accent-secondary)]/20 text-[var(--accent-secondary)]',\n  muted: 'bg-[var(--bg-subtle)] text-[var(--text-tertiary)]',\n} as const;\n\nexport type IconVariant = keyof typeof ICON_VARIANTS;\n\n// Summary-card icons are monochrome. They used to get a soft colour sticker\n// picked by hashing the label, which meant the colour carried no meaning: two\n// cards sat next to each other in violet and amber for no reason a reader could\n// name, and the same metric changed colour when its label was reworded. Colour\n// on a stat card is reserved for `iconVariant`, where it says something\n// (success, error, warning).\n\nexport interface StatCardProps {\n  label: string;\n  value: string | number;\n  subtext?: React.ReactNode;\n  icon?: LucideIcon | React.ElementType;\n  iconVariant?: IconVariant;\n  href?: string;\n  /** Percentage change — positive = green ↑, negative = red ↓ */\n  change?: number | null;\n  /**\n   * Shadow-mode / not-yet-authoritative figure (e.g. pending payout). The value\n   * is de-weighted (never the accent) and tagged \"Estimated\" so a merchant can't\n   * mistake it for cash in hand. See DESIGN_REFERENCES.md → \"State system\".\n   */\n  provisional?: boolean;\n  className?: string;\n}\n\nexport function StatCard({\n  label,\n  value,\n  subtext,\n  icon: Icon,\n  iconVariant,\n  href,\n  change,\n  provisional,\n  className = '',\n}: StatCardProps) {\n  const variantClass = ICON_VARIANTS[iconVariant ?? 'default'];\n  // Only a semantic variant earns a tinted plate behind the glyph.\n  const hasIconBg = !!iconVariant && iconVariant !== 'default';\n\n  const content = (\n    <>\n      <div className=\"flex items-center justify-between mb-2\">\n        <span className=\"flex items-center gap-2 text-xs font-medium text-[var(--text-tertiary)]\">\n          {label}\n          {provisional && (\n            <span className=\"rounded bg-[var(--bg-muted)] px-2 py-0.5 text-3xs font-medium uppercase tracking-wide text-[var(--text-tertiary)]\">\n              Estimated\n            </span>\n          )}\n        </span>\n        {Icon && (\n          <div\n            className={\n              hasIconBg\n                ? `p-2 rounded-md max-lg:rounded-ios-sm transition-transform duration-[var(--motion-fast)] group-hover:scale-110 ${variantClass}`\n                : variantClass\n            }\n          >\n            <Icon className=\"w-4 h-4\" />\n          </div>\n        )}\n      </div>\n      <div className=\"flex items-end justify-between gap-2\">\n        <div className=\"min-w-0\">\n          <TextMorph\n            as=\"p\"\n            className={`text-xl font-semibold ${\n              provisional\n                ? 'text-[var(--text-tertiary)]'\n                : 'text-[var(--text-primary)]'\n            }`}\n          >\n            {String(value)}\n          </TextMorph>\n          {subtext && (\n            <p className=\"text-xs text-[var(--text-tertiary)] mt-1\">\n              {subtext}\n            </p>\n          )}\n        </div>\n        {change != null && change !== 0 && (\n          <div\n            className={`flex items-center gap-0.5 text-sm font-medium shrink-0 ${\n              change > 0 ? 'text-[var(--success)]' : 'text-[var(--error)]'\n            }`}\n          >\n            {change > 0 ? <ArrowUpRight /> : <ArrowDownRight />}\n            {Math.abs(change).toFixed(1)}%\n          </div>\n        )}\n      </div>\n    </>\n  );\n\n  const baseClass = `group ${cardClass} max-lg:bg-[var(--bg-subtle)] max-lg:border-transparent max-lg:rounded-ios-lg max-lg:shadow-none p-4 ${className}`;\n\n  if (href) {\n    return (\n      <Link\n        href={href}\n        className={`${baseClass} hover:border-[var(--border-strong)] max-lg:hover:border-transparent transition-colors block`}\n      >\n        {content}\n      </Link>\n    );\n  }\n\n  return <div className={baseClass}>{content}</div>;\n}\n\n/* ------------------------------------------------------------------ */\n/*  StatsGrid — convenience wrapper for a row of StatCards            */\n/* ------------------------------------------------------------------ */\nexport interface StatsGridProps {\n  stats: StatCardProps[];\n  /** Tailwind grid columns class. Defaults to responsive 2→4. */\n  columns?: string;\n  className?: string;\n}\n\nexport function StatsGrid({\n  stats,\n  columns = 'grid-cols-2 md:grid-cols-4',\n  className = '',\n}: StatsGridProps) {\n  return (\n    <div className={`grid ${columns} gap-4 ${className}`}>\n      {stats.map((s) => (\n        <StatCard key={s.label} {...s} />\n      ))}\n    </div>\n  );\n}\n"],"mappings":"AAyEI,mBAKQ,KAHJ,YAFJ;AAzEJ,SAAS,iBAAiB;AAC1B,OAAO,UAAU;AACjB,SAAS,cAAc,sBAAsB;AAE7C,SAAS,iBAAiB;AAgB1B,MAAM,gBAAgB;AAAA,EACpB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AACT;AA6BO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AACd,GAAkB;AAChB,QAAM,eAAe,cAAc,eAAe,SAAS;AAE3D,QAAM,YAAY,CAAC,CAAC,eAAe,gBAAgB;AAEnD,QAAM,UACJ,iCACE;AAAA,yBAAC,SAAI,WAAU,0CACb;AAAA,2BAAC,UAAK,WAAU,2EACb;AAAA;AAAA,QACA,eACC,oBAAC,UAAK,WAAU,qHAAoH,uBAEpI;AAAA,SAEJ;AAAA,MACC,QACC;AAAA,QAAC;AAAA;AAAA,UACC,WACE,YACI,iHAAiH,YAAY,KAC7H;AAAA,UAGN,8BAAC,QAAK,WAAU,WAAU;AAAA;AAAA,MAC5B;AAAA,OAEJ;AAAA,IACA,qBAAC,SAAI,WAAU,wCACb;AAAA,2BAAC,SAAI,WAAU,WACb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,WAAW,yBACT,cACI,gCACA,4BACN;AAAA,YAEC,iBAAO,KAAK;AAAA;AAAA,QACf;AAAA,QACC,WACC,oBAAC,OAAE,WAAU,4CACV,mBACH;AAAA,SAEJ;AAAA,MACC,UAAU,QAAQ,WAAW,KAC5B;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,0DACT,SAAS,IAAI,0BAA0B,qBACzC;AAAA,UAEC;AAAA,qBAAS,IAAI,oBAAC,gBAAa,IAAK,oBAAC,kBAAe;AAAA,YAChD,KAAK,IAAI,MAAM,EAAE,QAAQ,CAAC;AAAA,YAAE;AAAA;AAAA;AAAA,MAC/B;AAAA,OAEJ;AAAA,KACF;AAGF,QAAM,YAAY,SAAS,SAAS,wGAAwG,SAAS;AAErJ,MAAI,MAAM;AACR,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,SAAS;AAAA,QAEtB;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SAAO,oBAAC,SAAI,WAAW,WAAY,mBAAQ;AAC7C;AAYO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA,UAAU;AAAA,EACV,YAAY;AACd,GAAmB;AACjB,SACE,oBAAC,SAAI,WAAW,QAAQ,OAAO,UAAU,SAAS,IAC/C,gBAAM,IAAI,CAAC,MACV,oBAAC,YAAwB,GAAG,KAAb,EAAE,KAAc,CAChC,GACH;AAEJ;","names":[]}

package/dist/shared/status-badge.d.ts

@@ -0,0 +1,96 @@
+import type { ReactNode } from 'react';
+import { type BadgeSize } from '@withpotter/ui-kit/badge';
+import { SCOPE_COLORS } from './status-colors';
+/**
+ * Reusable status badge component used across domains, subscriptions,
+ * finance, billing, and other pages.
+ */
+interface StatusBadgeProps {
+    status: string;
+    /**
+     * How the status is presented. The MAPPING above is shared by all three;
+     * only the shape differs.
+     *
+     * - `default` — a pill. A status column of its own.
+     * - `text`    — a coloured word, no pill. For a status that is a FOOTNOTE to
+     *               a figure: the ledger prints it small under the amount, and
+     *               the invoice table prints it beside one. Both kept private
+     *               copies of "success is green, failed is red" to get this
+     *               shape, and one of those copies had already drifted — it
+     *               painted `pending` amber, which this file reserves for "this
+     *               needs you" and argues at length.
+     * - `dot`     — a coloured dot and a label.
+     */
+    variant?: 'default' | 'dot' | 'text';
+    /**
+     * Drop the colour, keep the word.
+     *
+     * For a table carrying MORE THAN ONE status column. Orders has three —
+     * Status, Payment, Fulfillment — and colouring them put up to three hues in
+     * every row, restating words that already said the same thing. Colour ranks
+     * rows, and three competing rankings rank nothing; worse, it ranked wrong,
+     * pulling the eye to a finished order in red on a page whose real priority
+     * is money waiting on a human.
+     *
+     * The rule the app settles on: COLOUR MARKS ATTENTION, NOT STATE. One status
+     * column may carry it, because there the colour means "this one needs you".
+     * More than one, and the column set goes neutral.
+     */
+    neutral?: boolean;
+    /**
+     * The domain asking, for the words two domains disagree about.
+     *
+     * Only `invoice` needs one today: a `sent` campaign is finished and a `sent`
+     * invoice is money still out. Everything else resolves from the one map.
+     */
+    scope?: keyof typeof SCOPE_COLORS;
+    /** A glyph inside the pill, as the order and booking chips carry. */
+    icon?: ReactNode;
+    /**
+     * The two heights Badge has, and for the same reason.
+     *
+     * `sm` (22px) is a pill inside a table row or a list, where a full-height
+     * one would set the row height. `md` (28px) matches a `md` Button exactly,
+     * for a pill that sits beside one in a header.
+     *
+     * It exists because a header holding both kinds of pill could not make them
+     * agree: `Badge` had the sizes and this did not, so the facts stood at 28px
+     * beside 22px statuses and the only fix available at the call site was a
+     * hand-typed height — which is how `px-3` ended up in a page and failed
+     * the spacing rule.
+     */
+    size?: BadgeSize;
+    /**
+     * Say the label outright, and let `status` decide only the colour.
+     *
+     * The archetype lists resolve their own wording first — an events merchant's
+     * config names `checked_in` "Checked In", a gym's might name it "Entered" —
+     * and the sentence-casing below would have flattened those to "Checked in"
+     * and re-decided a word the merchant's own config had already chosen.
+     */
+    label?: string;
+    className?: string;
+}
+/**
+ * What colour a status is, without the pill.
+ *
+ * Three logs on the money surface annotate a status inline rather than badging
+ * it, for reasons each of them is right about: the ledger prints it small under
+ * the amount because it is a footnote to the figure, and the payouts table
+ * prints the settled date instead whenever there is one. So they were never
+ * going to render this component, and each kept its own copy of "success is
+ * green, failed is red" instead.
+ *
+ * A duplicated colour map is the part that actually costs something: it drifts,
+ * and it already had — one copy painted `pending` amber while this file
+ * reserves amber for "this needs you" and documents why at length. So the
+ * mapping is shared and the presentation is not.
+ */
+export declare function statusTextClass(status: string, scope?: keyof typeof SCOPE_COLORS): string;
+export declare function StatusBadge({ status, variant, neutral, scope, icon, size, label: labelOverride, className, }: StatusBadgeProps): import("react").JSX.Element;
+/** Get color config for a status string without rendering a component. */
+export declare function getStatusColors(status: string): {
+    bg: string;
+    text: string;
+};
+export {};