@withpotter/components 0.13.0-next.101

package/dist/invoice-editor/line-items-editor.js

@@ -0,0 +1,265 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { X, Plus } from "lucide-react";
+import { useFormatCurrency } from "@withpotter/hooks/use-format-currency";
+import { useTenantCurrency } from "@withpotter/hooks/use-tenant-currency";
+import { motion, useReducedMotion } from "motion/react";
+import { CurrencyInput } from "@withpotter/ui-kit/currency-input";
+import { Button } from "@withpotter/ui-kit/button";
+import { springs } from "@withpotter/lib/motion";
+import { useAuth } from "@withpotter/lib/auth-context";
+import { ProductPicker } from "@withpotter/components/features/product-picker";
+import { Input, NumberField } from "@withpotter/ui-kit";
+function LineItemsEditor({ state, compact }) {
+  const formatCurrency = useFormatCurrency();
+  const tenantCurrency = useTenantCurrency();
+  const { tenant } = useAuth();
+  const reduce = useReducedMotion() ?? false;
+  const [customModeSet, setCustomModeSet] = useState(
+    () => new Set(
+      state.items.flatMap(
+        (item, i) => !item.contentId && item.title ? [i] : []
+      )
+    )
+  );
+  const isCustom = (idx) => customModeSet.has(idx);
+  const enableCustom = (idx) => {
+    setCustomModeSet((prev) => /* @__PURE__ */ new Set([...prev, idx]));
+  };
+  const disableCustom = (idx) => {
+    state.updateItem(idx, "title", "");
+    state.updateItem(idx, "contentId", "");
+    setCustomModeSet((prev) => {
+      const next = new Set(prev);
+      next.delete(idx);
+      return next;
+    });
+  };
+  const handleProductSelect = (idx, product) => {
+    state.updateItem(idx, "contentId", product.id);
+    state.updateItem(idx, "title", product.title);
+    state.updateItem(idx, "unitPrice", Number(product.price) || 0);
+  };
+  const handleAddItem = () => {
+    state.addItem();
+  };
+  const handleRemoveItem = (idx) => {
+    state.removeItem(idx);
+    setCustomModeSet((prev) => {
+      const next = /* @__PURE__ */ new Set();
+      prev.forEach((i) => {
+        if (i < idx) next.add(i);
+        else if (i > idx) next.add(i - 1);
+      });
+      return next;
+    });
+  };
+  if (compact) {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      state.items.map((item, idx) => /* @__PURE__ */ jsxs("div", { className: "surface-inset space-y-3 p-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-2xs font-semibold uppercase tracking-wide text-[var(--mb-text-tertiary)]", children: [
+            "Item ",
+            idx + 1
+          ] }),
+          state.items.length > 1 && /* @__PURE__ */ jsx(
+            "button",
+            {
+              "aria-label": "Remove item",
+              type: "button",
+              onClick: () => handleRemoveItem(idx),
+              className: "rounded-lg p-2 text-[var(--mb-text-tertiary)] hover:text-[var(--mb-bad)]",
+              children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+            }
+          )
+        ] }),
+        isCustom(idx) ? /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              className: "min-h-11",
+              value: item.title,
+              onChange: (e) => state.updateItem(idx, "title", e.target.value),
+              placeholder: "Item title",
+              autoFocus: true
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => disableCustom(idx),
+              className: "text-xs text-brand-500 hover:text-brand-600",
+              children: "\u2190 Pick from catalog"
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          tenant?.slug && /* @__PURE__ */ jsx(
+            ProductPicker,
+            {
+              value: item,
+              onSelect: (p) => handleProductSelect(idx, p),
+              tenantSlug: tenant.slug,
+              formatCurrency
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => enableCustom(idx),
+              className: "text-xs text-[var(--text-muted)] hover:text-[var(--text-secondary)]",
+              children: "Add a custom service instead"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "mb-1 block text-xs font-medium text-[var(--mb-text-secondary)]", children: "Qty" }),
+            /* @__PURE__ */ jsx(
+              NumberField,
+              {
+                min: 1,
+                decimal: false,
+                value: item.quantity,
+                onChange: (v) => state.updateItem(idx, "quantity", v ?? 1),
+                className: "min-h-11 text-center"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "mb-1 block text-xs font-medium text-[var(--mb-text-secondary)]", children: "Price" }),
+            /* @__PURE__ */ jsx(
+              CurrencyInput,
+              {
+                value: item.unitPrice || void 0,
+                onChange: (val) => state.updateItem(idx, "unitPrice", val ?? 0),
+                currencyCode: tenantCurrency,
+                placeholder: "0.00",
+                className: "min-h-11"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-t border-[var(--mb-border)] pt-3 text-sm", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-[var(--mb-text-secondary)]", children: "Line total" }),
+          /* @__PURE__ */ jsx("span", { className: "font-semibold text-[var(--mb-text)]", children: formatCurrency(item.quantity * item.unitPrice) })
+        ] })
+      ] }, idx)),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          onClick: handleAddItem,
+          className: "w-full border border-dashed border-brand-500/30 text-brand-500 active:bg-brand-500/5",
+          children: [
+            /* @__PURE__ */ jsx(Plus, { className: "size-4" }),
+            "Add purchase"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "pt-2 border-t border-[var(--border-default)] text-right", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm text-[var(--text-secondary)]", children: "Total: " }),
+        /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold text-[var(--text-primary)]", children: formatCurrency(state.totalAmount) })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsx("div", { className: "space-y-3", children: state.items.map((item, idx) => (
+      // A line you just added should ARRIVE. Keyed by index, so this only
+      // animates the row appended at the end, not the whole list reshuffling.
+      /* @__PURE__ */ jsxs(
+        motion.div,
+        {
+          initial: reduce ? false : { opacity: 0, y: -6 },
+          animate: { opacity: 1, y: 0 },
+          transition: springs.snappy,
+          className: "space-y-2 rounded-md border border-[var(--border-subtle)] p-3",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+              /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: isCustom(idx) ? /* @__PURE__ */ jsx(
+                Input,
+                {
+                  type: "text",
+                  value: item.title,
+                  onChange: (e) => state.updateItem(idx, "title", e.target.value),
+                  placeholder: "What are you charging for?",
+                  autoFocus: true
+                }
+              ) : tenant?.slug && /* @__PURE__ */ jsx(
+                ProductPicker,
+                {
+                  value: item,
+                  onSelect: (p) => handleProductSelect(idx, p),
+                  tenantSlug: tenant.slug,
+                  formatCurrency
+                }
+              ) }),
+              state.items.length > 1 && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  onClick: () => handleRemoveItem(idx),
+                  title: "Remove this item",
+                  children: /* @__PURE__ */ jsx(X, {})
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(
+                NumberField,
+                {
+                  min: 1,
+                  decimal: false,
+                  value: item.quantity,
+                  onChange: (v) => state.updateItem(idx, "quantity", v ?? 1),
+                  className: "w-16 text-center",
+                  "aria-label": "Quantity"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--text-muted)]", children: "\xD7" }),
+              /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+                CurrencyInput,
+                {
+                  value: item.unitPrice || void 0,
+                  onChange: (val) => state.updateItem(idx, "unitPrice", val ?? 0),
+                  currencyCode: tenantCurrency,
+                  placeholder: "Price"
+                }
+              ) }),
+              /* @__PURE__ */ jsx("span", { className: "w-24 text-right text-sm font-medium tabular-nums text-[var(--text-primary)]", children: formatCurrency(item.quantity * item.unitPrice) })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => isCustom(idx) ? disableCustom(idx) : enableCustom(idx),
+                className: "text-xs text-[var(--text-muted)] underline underline-offset-2 transition-colors hover:text-[var(--text-secondary)]",
+                children: isCustom(idx) ? "Pick from your catalogue" : "Type it instead"
+              }
+            )
+          ]
+        },
+        idx
+      )
+    )) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs(Button, { variant: "secondary", size: "sm", onClick: handleAddItem, children: [
+        /* @__PURE__ */ jsx(Plus, {}),
+        "Add another"
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "text-sm text-[var(--text-tertiary)]", children: [
+        "Total",
+        " ",
+        /* @__PURE__ */ jsx("span", { className: "font-semibold tabular-nums text-[var(--text-primary)]", children: formatCurrency(state.totalAmount) })
+      ] })
+    ] })
+  ] });
+}
+export {
+  LineItemsEditor
+};
+//# sourceMappingURL=line-items-editor.js.map

package/dist/invoice-editor/line-items-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/invoice-editor/line-items-editor.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { X, Plus } from 'lucide-react';\nimport { useFormatCurrency } from '@withpotter/hooks/use-format-currency';\nimport { useTenantCurrency } from '@withpotter/hooks/use-tenant-currency';\nimport { motion, useReducedMotion } from 'motion/react';\nimport { CurrencyInput } from '@withpotter/ui-kit/currency-input';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { springs } from '@withpotter/lib/motion';\nimport { useAuth } from '@withpotter/lib/auth-context';\nimport { ProductPicker } from '@withpotter/components/features/product-picker';\nimport type { InventoryProduct } from '@withpotter/lib/api/types';\nimport type { useInvoiceFormState } from '@withpotter/hooks/use-invoice-form-state';\nimport { Input, NumberField } from '@withpotter/ui-kit';\n\ntype InvoiceFormState = ReturnType<typeof useInvoiceFormState>;\n\ninterface LineItemsEditorProps {\n  state: InvoiceFormState;\n  compact?: boolean;\n}\n\nexport function LineItemsEditor({ state, compact }: LineItemsEditorProps) {\n  const formatCurrency = useFormatCurrency();\n  const tenantCurrency = useTenantCurrency();\n  const { tenant } = useAuth();\n  const reduce = useReducedMotion() ?? false;\n\n  // Track which items are in \"custom title\" mode (ad-hoc items without a product).\n  // Initialise based on existing items: if an item already has a title but no\n  // contentId it's a legacy ad-hoc item and should start in custom mode.\n  const [customModeSet, setCustomModeSet] = useState<Set<number>>(\n    () =>\n      new Set(\n        state.items.flatMap((item, i) =>\n          !item.contentId && item.title ? [i] : [],\n        ),\n      ),\n  );\n\n  const isCustom = (idx: number) => customModeSet.has(idx);\n\n  const enableCustom = (idx: number) => {\n    setCustomModeSet((prev) => new Set([...prev, idx]));\n  };\n\n  const disableCustom = (idx: number) => {\n    // Clear title + contentId and switch back to picker\n    state.updateItem(idx, 'title', '');\n    state.updateItem(idx, 'contentId', '');\n    setCustomModeSet((prev) => {\n      const next = new Set(prev);\n      next.delete(idx);\n      return next;\n    });\n  };\n\n  const handleProductSelect = (idx: number, product: InventoryProduct) => {\n    state.updateItem(idx, 'contentId', product.id);\n    state.updateItem(idx, 'title', product.title);\n    // API can return price as a string (Postgres DECIMAL); coerce so the\n    // invoice payload passes class-validator @IsNumber.\n    state.updateItem(idx, 'unitPrice', Number(product.price) || 0);\n  };\n\n  const handleAddItem = () => {\n    state.addItem();\n    // new item index = current length (before add, so length === next index)\n    // new items start in picker mode — no action needed since customModeSet won't contain the new index\n  };\n\n  const handleRemoveItem = (idx: number) => {\n    state.removeItem(idx);\n    // Rebuild the custom mode set — indices above idx shift down by one\n    setCustomModeSet((prev) => {\n      const next = new Set<number>();\n      prev.forEach((i) => {\n        if (i < idx) next.add(i);\n        else if (i > idx) next.add(i - 1);\n        // i === idx is removed\n      });\n      return next;\n    });\n  };\n\n  if (compact) {\n    // Mobile: card-per-item layout\n    return (\n      <div className=\"space-y-3\">\n        {state.items.map((item, idx) => (\n          <div key={idx} className=\"surface-inset space-y-3 p-4\">\n            <div className=\"flex items-start justify-between\">\n              <span className=\"text-2xs font-semibold uppercase tracking-wide text-[var(--mb-text-tertiary)]\">\n                Item {idx + 1}\n              </span>\n              {state.items.length > 1 && (\n                <button\n                  aria-label=\"Remove item\"\n                  type=\"button\"\n                  onClick={() => handleRemoveItem(idx)}\n                  className=\"rounded-lg p-2 text-[var(--mb-text-tertiary)] hover:text-[var(--mb-bad)]\"\n                >\n                  <X className=\"size-4\" />\n                </button>\n              )}\n            </div>\n\n            {/* Title: product picker or custom text input */}\n            {isCustom(idx) ? (\n              <div className=\"space-y-1\">\n                <Input\n                  className=\"min-h-11\"\n                  value={item.title}\n                  onChange={(e) =>\n                    state.updateItem(idx, 'title', e.target.value)\n                  }\n                  placeholder=\"Item title\"\n                  autoFocus\n                />\n                <button\n                  type=\"button\"\n                  onClick={() => disableCustom(idx)}\n                  className=\"text-xs text-brand-500 hover:text-brand-600\"\n                >\n                  ← Pick from catalog\n                </button>\n              </div>\n            ) : (\n              <div className=\"space-y-1\">\n                {tenant?.slug && (\n                  <ProductPicker\n                    value={item}\n                    onSelect={(p) => handleProductSelect(idx, p)}\n                    tenantSlug={tenant.slug}\n                    formatCurrency={formatCurrency}\n                  />\n                )}\n                <button\n                  type=\"button\"\n                  onClick={() => enableCustom(idx)}\n                  className=\"text-xs text-[var(--text-muted)] hover:text-[var(--text-secondary)]\"\n                >\n                  Add a custom service instead\n                </button>\n              </div>\n            )}\n\n            <div className=\"grid grid-cols-2 gap-3\">\n              <div>\n                <label className=\"mb-1 block text-xs font-medium text-[var(--mb-text-secondary)]\">\n                  Qty\n                </label>\n                <NumberField\n                  min={1}\n                  decimal={false}\n                  value={item.quantity}\n                  onChange={(v) => state.updateItem(idx, 'quantity', v ?? 1)}\n                  className=\"min-h-11 text-center\"\n                />\n              </div>\n              <div>\n                <label className=\"mb-1 block text-xs font-medium text-[var(--mb-text-secondary)]\">\n                  Price\n                </label>\n                <CurrencyInput\n                  value={item.unitPrice || undefined}\n                  onChange={(val) =>\n                    state.updateItem(idx, 'unitPrice', val ?? 0)\n                  }\n                  currencyCode={tenantCurrency}\n                  placeholder=\"0.00\"\n                  className=\"min-h-11\"\n                />\n              </div>\n            </div>\n            <div className=\"flex items-center justify-between border-t border-[var(--mb-border)] pt-3 text-sm\">\n              <span className=\"text-[var(--mb-text-secondary)]\">\n                Line total\n              </span>\n              <span className=\"font-semibold text-[var(--mb-text)]\">\n                {formatCurrency(item.quantity * item.unitPrice)}\n              </span>\n            </div>\n          </div>\n        ))}\n\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          onClick={handleAddItem}\n          className=\"w-full border border-dashed border-brand-500/30 text-brand-500 active:bg-brand-500/5\"\n        >\n          <Plus className=\"size-4\" />\n          Add purchase\n        </Button>\n\n        <div className=\"pt-2 border-t border-[var(--border-default)] text-right\">\n          <span className=\"text-sm text-[var(--text-secondary)]\">Total: </span>\n          <span className=\"text-lg font-semibold text-[var(--text-primary)]\">\n            {formatCurrency(state.totalAmount)}\n          </span>\n        </div>\n      </div>\n    );\n  }\n\n  // Desktop. One item per row, stacked: the editing column is 420px wide and a\n  // product name, a quantity, a price and a total do not fit across it. The old\n  // single row squeezed the picker to ~130px, where \"Select a product…\" wrapped\n  // onto two lines.\n  return (\n    <div className=\"space-y-3\">\n      <div className=\"space-y-3\">\n        {state.items.map((item, idx) => (\n          // A line you just added should ARRIVE. Keyed by index, so this only\n          // animates the row appended at the end, not the whole list reshuffling.\n          <motion.div\n            key={idx}\n            initial={reduce ? false : { opacity: 0, y: -6 }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={springs.snappy}\n            className=\"space-y-2 rounded-md border border-[var(--border-subtle)] p-3\"\n          >\n            {/* What it is: a catalogue product, or something typed once */}\n            <div className=\"flex items-start gap-2\">\n              <div className=\"min-w-0 flex-1\">\n                {isCustom(idx) ? (\n                  <Input\n                    type=\"text\"\n                    value={item.title}\n                    onChange={(e) =>\n                      state.updateItem(idx, 'title', e.target.value)\n                    }\n                    placeholder=\"What are you charging for?\"\n                    autoFocus\n                  />\n                ) : (\n                  tenant?.slug && (\n                    <ProductPicker\n                      value={item}\n                      onSelect={(p) => handleProductSelect(idx, p)}\n                      tenantSlug={tenant.slug}\n                      formatCurrency={formatCurrency}\n                    />\n                  )\n                )}\n              </div>\n              {state.items.length > 1 && (\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  onClick={() => handleRemoveItem(idx)}\n                  title=\"Remove this item\"\n                >\n                  <X />\n                </Button>\n              )}\n            </div>\n\n            <div className=\"flex items-center gap-2\">\n              <NumberField\n                min={1}\n                decimal={false}\n                value={item.quantity}\n                onChange={(v) => state.updateItem(idx, 'quantity', v ?? 1)}\n                className=\"w-16 text-center\"\n                aria-label=\"Quantity\"\n              />\n              <span className=\"text-xs text-[var(--text-muted)]\">×</span>\n              <div className=\"flex-1\">\n                <CurrencyInput\n                  value={item.unitPrice || undefined}\n                  onChange={(val) =>\n                    state.updateItem(idx, 'unitPrice', val ?? 0)\n                  }\n                  currencyCode={tenantCurrency}\n                  placeholder=\"Price\"\n                />\n              </div>\n              <span className=\"w-24 text-right text-sm font-medium tabular-nums text-[var(--text-primary)]\">\n                {formatCurrency(item.quantity * item.unitPrice)}\n              </span>\n            </div>\n\n            <button\n              type=\"button\"\n              onClick={() =>\n                isCustom(idx) ? disableCustom(idx) : enableCustom(idx)\n              }\n              className=\"text-xs text-[var(--text-muted)] underline underline-offset-2 transition-colors hover:text-[var(--text-secondary)]\"\n            >\n              {isCustom(idx) ? 'Pick from your catalogue' : 'Type it instead'}\n            </button>\n          </motion.div>\n        ))}\n      </div>\n\n      <div className=\"flex items-center justify-between gap-3\">\n        <Button variant=\"secondary\" size=\"sm\" onClick={handleAddItem}>\n          <Plus />\n          Add another\n        </Button>\n        <span className=\"text-sm text-[var(--text-tertiary)]\">\n          Total{' '}\n          <span className=\"font-semibold tabular-nums text-[var(--text-primary)]\">\n            {formatCurrency(state.totalAmount)}\n          </span>\n        </span>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/invoice-editor/mobile-invoice-editor.d.ts

@@ -0,0 +1,7 @@
+import type { useInvoiceFormState } from '@withpotter/hooks/use-invoice-form-state';
+type InvoiceFormState = ReturnType<typeof useInvoiceFormState>;
+interface MobileInvoiceEditorProps {
+    state: InvoiceFormState;
+}
+export declare function MobileInvoiceEditor({ state }: MobileInvoiceEditorProps): import("react").JSX.Element;
+export {};

package/dist/invoice-editor/mobile-invoice-editor.js

@@ -0,0 +1,159 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MobileEditorSection } from "@withpotter/components/editor-shared";
+import { LineItemsEditor } from "./line-items-editor";
+import { DateField } from "@withpotter/ui-kit/date-field";
+import { Input, Textarea } from "@withpotter/ui-kit";
+function MobileInvoiceEditor({ state }) {
+  const customerSummary = state.customerName || state.customerEmail || "Untitled";
+  const namedItems = state.items.map((item) => item.title.trim()).filter(Boolean);
+  const itemsSummary = namedItems.length > 0 ? `${namedItems.length} purchase${namedItems.length === 1 ? "" : "s"}` : "Add purchases";
+  const datesSummary = state.dueDate ? `Due ${(/* @__PURE__ */ new Date(state.dueDate + "T00:00:00")).toLocaleDateString("en-US", { month: "short", day: "numeric" })}` : "No due date";
+  const notesSummary = [
+    state.note ? "Note" : "",
+    state.terms ? "Terms" : "",
+    state.internalNote ? "Internal" : ""
+  ].filter(Boolean).join(", ") || "None";
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4 pt-4 pb-[79.5px]", children: [
+    /* @__PURE__ */ jsx(
+      MobileEditorSection,
+      {
+        id: "customer",
+        label: "Customer",
+        summary: customerSummary,
+        defaultExpanded: true,
+        children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: "Email *" }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                type: "email",
+                className: "min-h-11",
+                value: state.customerEmail,
+                onChange: (e) => state.setCustomerEmail(e.target.value),
+                placeholder: "customer@example.com"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: "Name" }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                className: "min-h-11",
+                value: state.customerName,
+                onChange: (e) => state.setCustomerName(e.target.value),
+                placeholder: "Jane Doe"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: "Phone" }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                type: "tel",
+                className: "min-h-11",
+                value: state.customerPhone,
+                onChange: (e) => state.setCustomerPhone(e.target.value),
+                placeholder: "+234..."
+              }
+            )
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MobileEditorSection,
+      {
+        id: "items",
+        label: "Purchases",
+        summary: itemsSummary,
+        defaultExpanded: true,
+        children: /* @__PURE__ */ jsx(LineItemsEditor, { state, compact: true })
+      }
+    ),
+    /* @__PURE__ */ jsx(MobileEditorSection, { id: "dates", label: "Dates", summary: datesSummary, children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: "Due Date *" }),
+        /* @__PURE__ */ jsx(
+          DateField,
+          {
+            value: state.dueDate,
+            onChange: state.setDueDate,
+            className: "w-full"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: "Issue date" }),
+        /* @__PURE__ */ jsx(
+          DateField,
+          {
+            value: state.issueDate,
+            onChange: state.setIssueDate,
+            className: "w-full"
+          }
+        ),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-tertiary)] mt-2", children: "Defaults to today if left blank" })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      MobileEditorSection,
+      {
+        id: "notes",
+        label: "Notes & terms",
+        summary: notesSummary,
+        children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: "Customer note" }),
+            /* @__PURE__ */ jsx(
+              Textarea,
+              {
+                value: state.note,
+                onChange: (e) => state.setNote(e.target.value),
+                rows: 2,
+                className: "resize-none",
+                placeholder: "Visible to customer"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: "Terms & conditions" }),
+            /* @__PURE__ */ jsx(
+              Textarea,
+              {
+                value: state.terms,
+                onChange: (e) => state.setTerms(e.target.value),
+                rows: 2,
+                className: "resize-none",
+                placeholder: "Payment terms, late fees, refund policy"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: [
+              "Internal note",
+              /* @__PURE__ */ jsx("span", { className: "ml-1.5 text-xs font-normal text-[var(--text-muted)]", children: "(not visible to customer)" })
+            ] }),
+            /* @__PURE__ */ jsx(
+              Textarea,
+              {
+                value: state.internalNote,
+                onChange: (e) => state.setInternalNote(e.target.value),
+                rows: 2,
+                className: "resize-none",
+                placeholder: "Private notes for your team"
+              }
+            )
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+export {
+  MobileInvoiceEditor
+};
+//# sourceMappingURL=mobile-invoice-editor.js.map

package/dist/invoice-editor/mobile-invoice-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/invoice-editor/mobile-invoice-editor.tsx"],"sourcesContent":["'use client';\n\nimport { MobileEditorSection } from '@withpotter/components/editor-shared';\nimport { LineItemsEditor } from './line-items-editor';\nimport type { useInvoiceFormState } from '@withpotter/hooks/use-invoice-form-state';\nimport { DateField } from '@withpotter/ui-kit/date-field';\nimport { Input, Textarea } from '@withpotter/ui-kit';\n\ntype InvoiceFormState = ReturnType<typeof useInvoiceFormState>;\n\ninterface MobileInvoiceEditorProps {\n  state: InvoiceFormState;\n}\n\nexport function MobileInvoiceEditor({ state }: MobileInvoiceEditorProps) {\n  const customerSummary =\n    state.customerName || state.customerEmail || 'Untitled';\n  const namedItems = state.items\n    .map((item) => item.title.trim())\n    .filter(Boolean);\n  const itemsSummary =\n    namedItems.length > 0\n      ? `${namedItems.length} purchase${namedItems.length === 1 ? '' : 's'}`\n      : 'Add purchases';\n  const datesSummary = state.dueDate\n    ? `Due ${new Date(state.dueDate + 'T00:00:00').toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}`\n    : 'No due date';\n  const notesSummary =\n    [\n      state.note ? 'Note' : '',\n      state.terms ? 'Terms' : '',\n      state.internalNote ? 'Internal' : '',\n    ]\n      .filter(Boolean)\n      .join(', ') || 'None';\n\n  return (\n    <div className=\"space-y-4 pt-4 pb-[79.5px]\">\n      {/* Customer Section */}\n      <MobileEditorSection\n        id=\"customer\"\n        label=\"Customer\"\n        summary={customerSummary}\n        defaultExpanded\n      >\n        <div className=\"space-y-4\">\n          <div>\n            <label className=\"block text-sm font-medium text-[var(--text-secondary)] mb-1\">\n              Email *\n            </label>\n            <Input\n              type=\"email\"\n              className=\"min-h-11\"\n              value={state.customerEmail}\n              onChange={(e) => state.setCustomerEmail(e.target.value)}\n              placeholder=\"customer@example.com\"\n            />\n          </div>\n          <div>\n            <label className=\"block text-sm font-medium text-[var(--text-secondary)] mb-1\">\n              Name\n            </label>\n            <Input\n              className=\"min-h-11\"\n              value={state.customerName}\n              onChange={(e) => state.setCustomerName(e.target.value)}\n              placeholder=\"Jane Doe\"\n            />\n          </div>\n          <div>\n            <label className=\"block text-sm font-medium text-[var(--text-secondary)] mb-1\">\n              Phone\n            </label>\n            <Input\n              type=\"tel\"\n              className=\"min-h-11\"\n              value={state.customerPhone}\n              onChange={(e) => state.setCustomerPhone(e.target.value)}\n              placeholder=\"+234...\"\n            />\n          </div>\n        </div>\n      </MobileEditorSection>\n\n      {/* Line Items Section */}\n      <MobileEditorSection\n        id=\"items\"\n        label=\"Purchases\"\n        summary={itemsSummary}\n        defaultExpanded\n      >\n        <LineItemsEditor state={state} compact />\n      </MobileEditorSection>\n\n      {/* Dates Section */}\n      <MobileEditorSection id=\"dates\" label=\"Dates\" summary={datesSummary}>\n        <div className=\"space-y-4\">\n          <div>\n            <label className=\"block text-sm font-medium text-[var(--text-secondary)] mb-1\">\n              Due Date *\n            </label>\n            <DateField\n              value={state.dueDate}\n              onChange={state.setDueDate}\n              className=\"w-full\"\n            />\n          </div>\n          <div>\n            <label className=\"block text-sm font-medium text-[var(--text-secondary)] mb-1\">\n              Issue date\n            </label>\n            <DateField\n              value={state.issueDate}\n              onChange={state.setIssueDate}\n              className=\"w-full\"\n            />\n            <p className=\"text-xs text-[var(--text-tertiary)] mt-2\">\n              Defaults to today if left blank\n            </p>\n          </div>\n        </div>\n      </MobileEditorSection>\n\n      {/* Notes Section */}\n      <MobileEditorSection\n        id=\"notes\"\n        label=\"Notes & terms\"\n        summary={notesSummary}\n      >\n        <div className=\"space-y-4\">\n          <div>\n            <label className=\"block text-sm font-medium text-[var(--text-secondary)] mb-1\">\n              Customer note\n            </label>\n            <Textarea\n              value={state.note}\n              onChange={(e) => state.setNote(e.target.value)}\n              rows={2}\n              className=\"resize-none\"\n              placeholder=\"Visible to customer\"\n            />\n          </div>\n          <div>\n            <label className=\"block text-sm font-medium text-[var(--text-secondary)] mb-1\">\n              Terms & conditions\n            </label>\n            <Textarea\n              value={state.terms}\n              onChange={(e) => state.setTerms(e.target.value)}\n              rows={2}\n              className=\"resize-none\"\n              placeholder=\"Payment terms, late fees, refund policy\"\n            />\n          </div>\n          <div>\n            <label className=\"block text-sm font-medium text-[var(--text-secondary)] mb-1\">\n              Internal note\n              <span className=\"ml-1.5 text-xs font-normal text-[var(--text-muted)]\">\n                (not visible to customer)\n              </span>\n            </label>\n            <Textarea\n              value={state.internalNote}\n              onChange={(e) => state.setInternalNote(e.target.value)}\n              rows={2}\n              className=\"resize-none\"\n              placeholder=\"Private notes for your team\"\n            />\n          </div>\n        </div>\n      </MobileEditorSection>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/invoice-editor/paper-fields.d.ts

@@ -0,0 +1,53 @@
+/**
+ * A control standing ON the sheet.
+ *
+ * `Button variant="ghost"` answers to the app's tokens, and the app's ink is
+ * near-white in dark mode — on white paper the glyph disappeared entirely. The
+ * sheet is theme-independent by design (it prints, and the PDF renders the same
+ * layout), so anything drawn on it takes paper greys.
+ */
+export declare const paperControl = "text-neutral-500 hover:text-neutral-900 hover:bg-neutral-900/[0.06]";
+/** One line of the document that happens to be typeable. */
+export declare function PaperText({ value, onChange, placeholder, className, type, align, ariaLabel, maxLength, }: {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    /** The document's own type for this line — size, weight, colour. */
+    className?: string;
+    type?: 'text' | 'email' | 'tel';
+    align?: 'left' | 'right';
+    ariaLabel: string;
+    maxLength?: number;
+}): import("react").JSX.Element;
+/** A paragraph on the sheet: notes, terms, a line's own description. */
+export declare function PaperParagraph({ value, onChange, placeholder, className, ariaLabel, }: {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    className?: string;
+    ariaLabel: string;
+}): import("react").JSX.Element;
+/** A date, printed the way the document prints it, opening our own calendar. */
+export declare function PaperDate({ value, onChange, min, ariaLabel, className, }: {
+    value: string;
+    onChange: (value: string) => void;
+    min?: string;
+    ariaLabel: string;
+    className?: string;
+}): import("react").JSX.Element;
+/**
+ * Money on the sheet.
+ *
+ * Not `CurrencyInput`: that draws a bordered field with a symbol pinned inside
+ * it, which is right in a form and wrong on a document, where the amount is
+ * already in a column headed by a currency. It formats on blur and hands back
+ * the raw number, which is the only part worth keeping.
+ */
+export declare function PaperMoney({ value, onChange, ariaLabel, className, format, }: {
+    value: number;
+    onChange: (value: number) => void;
+    ariaLabel: string;
+    className?: string;
+    /** How the document prints a settled figure, for the unfocused state. */
+    format: (amount: number) => string;
+}): import("react").JSX.Element;

package/dist/invoice-editor/paper-fields.js

@@ -0,0 +1,107 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Input } from "@withpotter/ui-kit/input";
+import { AutoGrowTextarea } from "@withpotter/ui-kit/auto-grow-textarea";
+import { DateField } from "@withpotter/ui-kit/date-field";
+const paperTint = "rounded-[3px] transition-colors duration-[var(--motion-fast)] hover:bg-neutral-900/[0.04] focus:bg-neutral-900/[0.06] focus:outline-none focus:ring-1 focus:ring-neutral-900/15";
+const paperInk = "text-inherit placeholder:text-neutral-400";
+const paperControl = "text-neutral-500 hover:text-neutral-900 hover:bg-neutral-900/[0.06]";
+function PaperText({
+  value,
+  onChange,
+  placeholder,
+  className = "",
+  type = "text",
+  align = "left",
+  ariaLabel,
+  maxLength
+}) {
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      variant: "bare",
+      type,
+      value,
+      maxLength,
+      "aria-label": ariaLabel,
+      onChange: (e) => onChange(e.target.value),
+      placeholder,
+      className: `${paperInk} ${paperTint} ${align === "right" ? "text-right" : ""} px-1 ${className}`
+    }
+  );
+}
+function PaperParagraph({
+  value,
+  onChange,
+  placeholder,
+  className = "",
+  ariaLabel
+}) {
+  return /* @__PURE__ */ jsx(
+    AutoGrowTextarea,
+    {
+      value,
+      "aria-label": ariaLabel,
+      onChange: (e) => onChange(e.target.value),
+      placeholder,
+      className: `w-full bg-transparent ${paperInk} ${paperTint} px-1 ${className}`
+    }
+  );
+}
+function PaperDate({
+  value,
+  onChange,
+  min,
+  ariaLabel,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx(
+    DateField,
+    {
+      variant: "bare",
+      value,
+      min,
+      onChange,
+      "aria-label": ariaLabel,
+      placeholder: "Pick a date",
+      className: `${paperTint} inline-block px-1 ${className}`
+    }
+  );
+}
+function PaperMoney({
+  value,
+  onChange,
+  ariaLabel,
+  className = "",
+  format
+}) {
+  const [typing, setTyping] = useState(null);
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      variant: "bare",
+      inputMode: "decimal",
+      "aria-label": ariaLabel,
+      value: typing ?? (value ? format(value) : ""),
+      placeholder: format(0),
+      onFocus: () => setTyping(value ? String(value) : ""),
+      onBlur: () => setTyping(null),
+      onChange: (e) => {
+        const cleaned = e.target.value.replace(/[^0-9.]/g, "");
+        setTyping(cleaned);
+        const parsed = Number.parseFloat(cleaned);
+        onChange(Number.isFinite(parsed) ? parsed : 0);
+      },
+      className: `${paperInk} ${paperTint} px-1 text-right tabular-nums ${className}`
+    }
+  );
+}
+export {
+  PaperDate,
+  PaperMoney,
+  PaperParagraph,
+  PaperText,
+  paperControl
+};
+//# sourceMappingURL=paper-fields.js.map