@withpotter/components 0.13.0-next.101

package/dist/customer-editor/customer-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/customer-editor/customer-editor.tsx"],"sourcesContent":["'use client';\n\nimport { useIsMobile } from '@withpotter/hooks/use-mobile';\nimport { FloatingSaveBar } from '@withpotter/components/editor-shared';\nimport { Save, Archive, Users } from 'lucide-react';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { DetailPage } from '@withpotter/ui-kit/detail-page';\nimport { BackBar } from '@withpotter/components/mobile/primitives';\nimport { MobileCustomerEditor } from './mobile-customer-editor';\nimport { CustomerEditorContent } from './customer-editor-content';\nimport type { useCustomerFormState } from '@withpotter/hooks/use-customer-form-state';\nimport { useErrorToast } from '@withpotter/ui-kit';\n\ntype CustomerFormState = ReturnType<typeof useCustomerFormState>;\n\ninterface CustomerEditorProps {\n  state: CustomerFormState;\n  isDirty: boolean;\n  onSave: () => void;\n  /** Guarded navigation for the breadcrumb + Discard (confirms when dirty). */\n  onNavigateAway: (href: string) => void;\n  /** Where Back/Discard goes (list on create, the record on edit). */\n  backUrl: string;\n  onDelete?: () => void;\n  deleting?: boolean;\n  /**\n   * Open the importer. Only offered when creating: on an existing record,\n   * \"import a list\" is an action about somebody else.\n   */\n  onImport?: () => void;\n}\n\nexport function CustomerEditor({\n  state,\n  isDirty,\n  onSave,\n  onNavigateAway,\n  backUrl,\n  onDelete,\n  deleting,\n  onImport,\n}: CustomerEditorProps) {\n  const isMobile = useIsMobile();\n  useErrorToast(state.error, () => state.setError(null));\n\n  const actions = (\n    <>\n      {/* Import lives here, not in the list toolbar.\n          Adding one person and adding two hundred are the same intention —\n          \"get these people into Box\" — and splitting them across two places\n          made Import a thing you had to already know about. On the page where\n          somebody has come to add a person, it is the answer to \"there are too\n          many to type\". */}\n      {!state.isEditing && onImport && (\n        <Button variant=\"secondary\" onClick={onImport}>\n          Import a list\n        </Button>\n      )}\n      {state.isEditing && onDelete && (\n        <Button\n          variant=\"secondary\"\n          onClick={onDelete}\n          loading={deleting}\n          icon={<Archive />}\n          className=\"text-[var(--error)] hover:text-[var(--error)]\"\n        >\n          Archive\n        </Button>\n      )}\n      <Button variant=\"secondary\" onClick={() => onNavigateAway(backUrl)}>\n        Discard\n      </Button>\n      <Button\n        variant=\"primary\"\n        onClick={onSave}\n        loading={state.saving}\n        icon={<Save />}\n      >\n        {state.isEditing ? 'Save changes' : 'Create customer'}\n      </Button>\n    </>\n  );\n\n  if (isMobile) {\n    return (\n      <>\n        {/* DetailPage is desktop-only here, so the frame's mobile chrome never\n            reaches this branch and the screen opened with no title and no way\n            off it but the browser's own back. Same wording as the last crumb. */}\n        <BackBar\n          title={state.isEditing ? state.name || 'Customer' : 'New customer'}\n          onBack={() => onNavigateAway('/dashboard/customers')}\n        />\n        <div className=\"px-4\">\n          <MobileCustomerEditor state={state} />\n          <FloatingSaveBar\n            isDirty={isDirty}\n            saving={state.saving}\n            isEditing={state.isEditing}\n            entityName=\"Customer\"\n            onSave={onSave}\n          />\n        </div>\n      </>\n    );\n  }\n\n  // Desktop: the shared detail/editor frame — same breadcrumb header, column,\n  // and rhythm as every other detail page (no more bespoke editor frame).\n  return (\n    <>\n      <DetailPage\n        breadcrumbs={[\n          {\n            label: 'Customers',\n            href: '/dashboard/customers',\n            icon: <Users />,\n          },\n          {\n            label: state.isEditing ? state.name || 'Customer' : 'New customer',\n          },\n        ]}\n        onNavigate={onNavigateAway}\n        actions={actions}\n        maxWidth=\"max-w-4xl\"\n      >\n        <CustomerEditorContent state={state} />\n      </DetailPage>\n    </>\n  );\n}\n"],"mappings":";AA8CI,mBAQI,KARJ;AA5CJ,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB;AAChC,SAAS,MAAM,SAAS,aAAa;AACrC,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,eAAe;AACxB,SAAS,4BAA4B;AACrC,SAAS,6BAA6B;AAEtC,SAAS,qBAAqB;AAqBvB,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAwB;AACtB,QAAM,WAAW,YAAY;AAC7B,gBAAc,MAAM,OAAO,MAAM,MAAM,SAAS,IAAI,CAAC;AAErD,QAAM,UACJ,iCAOG;AAAA,KAAC,MAAM,aAAa,YACnB,oBAAC,UAAO,SAAQ,aAAY,SAAS,UAAU,2BAE/C;AAAA,IAED,MAAM,aAAa,YAClB;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,SAAS;AAAA,QACT,SAAS;AAAA,QACT,MAAM,oBAAC,WAAQ;AAAA,QACf,WAAU;AAAA,QACX;AAAA;AAAA,IAED;AAAA,IAEF,oBAAC,UAAO,SAAQ,aAAY,SAAS,MAAM,eAAe,OAAO,GAAG,qBAEpE;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,SAAS;AAAA,QACT,SAAS,MAAM;AAAA,QACf,MAAM,oBAAC,QAAK;AAAA,QAEX,gBAAM,YAAY,iBAAiB;AAAA;AAAA,IACtC;AAAA,KACF;AAGF,MAAI,UAAU;AACZ,WACE,iCAIE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,MAAM,YAAY,MAAM,QAAQ,aAAa;AAAA,UACpD,QAAQ,MAAM,eAAe,sBAAsB;AAAA;AAAA,MACrD;AAAA,MACA,qBAAC,SAAI,WAAU,QACb;AAAA,4BAAC,wBAAqB,OAAc;AAAA,QACpC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,QAAQ,MAAM;AAAA,YACd,WAAW,MAAM;AAAA,YACjB,YAAW;AAAA,YACX;AAAA;AAAA,QACF;AAAA,SACF;AAAA,OACF;AAAA,EAEJ;AAIA,SACE,gCACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,QACX;AAAA,UACE,OAAO;AAAA,UACP,MAAM;AAAA,UACN,MAAM,oBAAC,SAAM;AAAA,QACf;AAAA,QACA;AAAA,UACE,OAAO,MAAM,YAAY,MAAM,QAAQ,aAAa;AAAA,QACtD;AAAA,MACF;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,MACA,UAAS;AAAA,MAET,8BAAC,yBAAsB,OAAc;AAAA;AAAA,EACvC,GACF;AAEJ;","names":[]}

package/dist/customer-editor/index.d.ts

@@ -0,0 +1,2 @@
+export { CustomerEditorPage } from './customer-editor-page';
+export { CustomerEditor } from './customer-editor';

package/dist/customer-editor/index.js

@@ -0,0 +1,7 @@
+import { CustomerEditorPage } from "./customer-editor-page";
+import { CustomerEditor } from "./customer-editor";
+export {
+  CustomerEditor,
+  CustomerEditorPage
+};
+//# sourceMappingURL=index.js.map

package/dist/customer-editor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/customer-editor/index.ts"],"sourcesContent":["export { CustomerEditorPage } from './customer-editor-page';\nexport { CustomerEditor } from './customer-editor';\n"],"mappings":"AAAA,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;","names":[]}

package/dist/customer-editor/member-plan-picker.d.ts

@@ -0,0 +1,7 @@
+interface MemberPlanPickerProps {
+    value: string;
+    onChange: (planId: string) => void;
+    required?: boolean;
+}
+export declare function MemberPlanPicker({ value, onChange, required, }: MemberPlanPickerProps): import("react").JSX.Element;
+export {};

package/dist/customer-editor/member-plan-picker.js

@@ -0,0 +1,118 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, CreditCard, Loader2 } from "lucide-react";
+import { useApiQuery } from "@withpotter/hooks/use-api-query";
+import { merchantSubscriptionsApi } from "@withpotter/lib/api";
+function formatPlanPrice(amount, currency) {
+  return new Intl.NumberFormat(void 0, {
+    style: "currency",
+    currency,
+    maximumFractionDigits: 2
+  }).format(amount);
+}
+function MemberPlanPicker({
+  value,
+  onChange,
+  required = false
+}) {
+  const {
+    data: plans = [],
+    isLoading,
+    error
+  } = useApiQuery(
+    ["member-create-plans"],
+    (slug) => merchantSubscriptionsApi.getActivePlans(slug)
+  );
+  const selectedPlan = plans.find((plan) => plan.id === value);
+  const selectablePlans = plans.filter(
+    (plan) => plan.pricingKind !== "sum-of-items"
+  );
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
+      "label",
+      {
+        htmlFor: "member-plan",
+        className: "mb-1 block text-sm font-medium text-[var(--text-secondary)]",
+        children: [
+          /* @__PURE__ */ jsx(CreditCard, { className: "mr-1.5 inline size-4 -mt-0.5" }),
+          "Membership plan",
+          " ",
+          required ? "*" : /* @__PURE__ */ jsx("span", { className: "font-normal", children: "(optional)" })
+        ]
+      }
+    ),
+    isLoading ? /* @__PURE__ */ jsxs("div", { className: "flex h-10 items-center gap-2 border border-[var(--border-default)] px-3 text-sm text-[var(--text-tertiary)]", children: [
+      /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" }),
+      "Loading plans..."
+    ] }) : error ? /* @__PURE__ */ jsx("p", { className: "border-l-2 border-[var(--error)] px-3 py-2 text-sm text-[var(--error)]", children: "Plans could not be loaded. Try again before enrolling this member." }) : /* @__PURE__ */ jsxs(
+      "select",
+      {
+        id: "member-plan",
+        required,
+        value,
+        onChange: (event) => onChange(event.target.value),
+        className: "w-full border border-[var(--border-default)] bg-[var(--bg-base)] px-3 py-2 text-sm text-[var(--text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--interactive-focus)]",
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "", children: required ? "Select an existing plan" : "No plan" }),
+          plans.map((plan) => {
+            const requiresItems = plan.pricingKind === "sum-of-items";
+            const price = formatPlanPrice(plan.amount / 100, plan.currency);
+            return /* @__PURE__ */ jsxs("option", { value: plan.id, disabled: requiresItems, children: [
+              plan.name,
+              " \xB7 ",
+              price,
+              "/",
+              plan.interval,
+              requiresItems ? " \xB7 Configure items first" : ""
+            ] }, plan.id);
+          })
+        ]
+      }
+    ),
+    !isLoading && !error && selectablePlans.length === 0 && /* @__PURE__ */ jsx("p", { className: "mt-2 border-l-2 border-[var(--warning)] px-3 py-2 text-sm text-[var(--warning)]", children: "No fixed active plan is available. Create or activate a plan before enrolling a member." }),
+    selectedPlan && /* @__PURE__ */ jsxs("div", { className: "mt-3 border border-[var(--border-default)] bg-[var(--bg-subtle)] p-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx("p", { className: "font-medium text-[var(--text-primary)]", children: selectedPlan.name }),
+          selectedPlan.description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-[var(--text-tertiary)]", children: selectedPlan.description })
+        ] }),
+        /* @__PURE__ */ jsxs("p", { className: "shrink-0 text-right text-sm font-semibold text-[var(--text-primary)]", children: [
+          formatPlanPrice(
+            selectedPlan.amount / 100,
+            selectedPlan.currency
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "block text-xs font-normal capitalize text-[var(--text-tertiary)]", children: [
+            "every",
+            " ",
+            selectedPlan.intervalCount > 1 ? `${selectedPlan.intervalCount} ` : "",
+            selectedPlan.interval
+          ] })
+        ] })
+      ] }),
+      selectedPlan.trialDays ? /* @__PURE__ */ jsxs("p", { className: "mt-3 text-xs font-medium text-[var(--success)]", children: [
+        "Includes a ",
+        selectedPlan.trialDays,
+        "-day trial"
+      ] }) : null,
+      selectedPlan.features.some((feature) => feature.included) && /* @__PURE__ */ jsx("ul", { className: "mt-3 grid gap-2 sm:grid-cols-2", children: selectedPlan.features.filter((feature) => feature.included).map((feature) => /* @__PURE__ */ jsxs(
+        "li",
+        {
+          className: "flex items-start gap-2 text-xs text-[var(--text-secondary)]",
+          children: [
+            /* @__PURE__ */ jsx(Check, { className: "mt-0.5 size-[13px] shrink-0 text-[var(--success)]" }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              feature.name,
+              feature.limit ? ` (${feature.limit})` : ""
+            ] })
+          ]
+        },
+        feature.name
+      )) })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs text-[var(--text-tertiary)]", children: "Plans requiring item choices must be configured through their dedicated subscription flow." })
+  ] });
+}
+export {
+  MemberPlanPicker
+};
+//# sourceMappingURL=member-plan-picker.js.map

package/dist/customer-editor/member-plan-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/customer-editor/member-plan-picker.tsx"],"sourcesContent":["'use client';\n\nimport { Check, CreditCard, Loader2 } from 'lucide-react';\nimport { useApiQuery } from '@withpotter/hooks/use-api-query';\nimport { merchantSubscriptionsApi } from '@withpotter/lib/api';\n\ninterface MemberPlanPickerProps {\n  value: string;\n  onChange: (planId: string) => void;\n  required?: boolean;\n}\n\nfunction formatPlanPrice(amount: number, currency: string) {\n  return new Intl.NumberFormat(undefined, {\n    style: 'currency',\n    currency,\n    maximumFractionDigits: 2,\n  }).format(amount);\n}\n\nexport function MemberPlanPicker({\n  value,\n  onChange,\n  required = false,\n}: MemberPlanPickerProps) {\n  const {\n    data: plans = [],\n    isLoading,\n    error,\n  } = useApiQuery(['member-create-plans'], (slug) =>\n    merchantSubscriptionsApi.getActivePlans(slug),\n  );\n  const selectedPlan = plans.find((plan) => plan.id === value);\n  const selectablePlans = plans.filter(\n    (plan) => plan.pricingKind !== 'sum-of-items',\n  );\n\n  return (\n    <div>\n      <label\n        htmlFor=\"member-plan\"\n        className=\"mb-1 block text-sm font-medium text-[var(--text-secondary)]\"\n      >\n        <CreditCard className=\"mr-1.5 inline size-4 -mt-0.5\" />\n        Membership plan{' '}\n        {required ? '*' : <span className=\"font-normal\">(optional)</span>}\n      </label>\n      {isLoading ? (\n        <div className=\"flex h-10 items-center gap-2 border border-[var(--border-default)] px-3 text-sm text-[var(--text-tertiary)]\">\n          <Loader2 className=\"size-4 animate-spin\" />\n          Loading plans...\n        </div>\n      ) : error ? (\n        <p className=\"border-l-2 border-[var(--error)] px-3 py-2 text-sm text-[var(--error)]\">\n          Plans could not be loaded. Try again before enrolling this member.\n        </p>\n      ) : (\n        <select\n          id=\"member-plan\"\n          required={required}\n          value={value}\n          onChange={(event) => onChange(event.target.value)}\n          className=\"w-full border border-[var(--border-default)] bg-[var(--bg-base)] px-3 py-2 text-sm text-[var(--text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--interactive-focus)]\"\n        >\n          <option value=\"\">\n            {required ? 'Select an existing plan' : 'No plan'}\n          </option>\n          {plans.map((plan) => {\n            const requiresItems = plan.pricingKind === 'sum-of-items';\n            const price = formatPlanPrice(plan.amount / 100, plan.currency);\n            return (\n              <option key={plan.id} value={plan.id} disabled={requiresItems}>\n                {plan.name} · {price}/{plan.interval}\n                {requiresItems ? ' · Configure items first' : ''}\n              </option>\n            );\n          })}\n        </select>\n      )}\n      {!isLoading && !error && selectablePlans.length === 0 && (\n        <p className=\"mt-2 border-l-2 border-[var(--warning)] px-3 py-2 text-sm text-[var(--warning)]\">\n          No fixed active plan is available. Create or activate a plan before\n          enrolling a member.\n        </p>\n      )}\n      {selectedPlan && (\n        <div className=\"mt-3 border border-[var(--border-default)] bg-[var(--bg-subtle)] p-4\">\n          <div className=\"flex items-start justify-between gap-4\">\n            <div className=\"min-w-0\">\n              <p className=\"font-medium text-[var(--text-primary)]\">\n                {selectedPlan.name}\n              </p>\n              {selectedPlan.description && (\n                <p className=\"mt-1 text-sm text-[var(--text-tertiary)]\">\n                  {selectedPlan.description}\n                </p>\n              )}\n            </div>\n            <p className=\"shrink-0 text-right text-sm font-semibold text-[var(--text-primary)]\">\n              {formatPlanPrice(\n                selectedPlan.amount / 100,\n                selectedPlan.currency,\n              )}\n              <span className=\"block text-xs font-normal capitalize text-[var(--text-tertiary)]\">\n                every{' '}\n                {selectedPlan.intervalCount > 1\n                  ? `${selectedPlan.intervalCount} `\n                  : ''}\n                {selectedPlan.interval}\n              </span>\n            </p>\n          </div>\n          {selectedPlan.trialDays ? (\n            <p className=\"mt-3 text-xs font-medium text-[var(--success)]\">\n              Includes a {selectedPlan.trialDays}-day trial\n            </p>\n          ) : null}\n          {selectedPlan.features.some((feature) => feature.included) && (\n            <ul className=\"mt-3 grid gap-2 sm:grid-cols-2\">\n              {selectedPlan.features\n                .filter((feature) => feature.included)\n                .map((feature) => (\n                  <li\n                    key={feature.name}\n                    className=\"flex items-start gap-2 text-xs text-[var(--text-secondary)]\"\n                  >\n                    <Check className=\"mt-0.5 size-[13px] shrink-0 text-[var(--success)]\" />\n                    <span>\n                      {feature.name}\n                      {feature.limit ? ` (${feature.limit})` : ''}\n                    </span>\n                  </li>\n                ))}\n            </ul>\n          )}\n        </div>\n      )}\n      <p className=\"mt-2 text-xs text-[var(--text-tertiary)]\">\n        Plans requiring item choices must be configured through their dedicated\n        subscription flow.\n      </p>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,7 @@
+import type { useCustomerFormState } from '@withpotter/hooks/use-customer-form-state';
+type CustomerFormState = ReturnType<typeof useCustomerFormState>;
+interface MobileCustomerEditorProps {
+    state: CustomerFormState;
+}
+export declare function MobileCustomerEditor({ state }: MobileCustomerEditorProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,138 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MobileEditorSection } from "@withpotter/components/editor-shared";
+import { User, Tag, Settings } from "lucide-react";
+import { Select } from "@withpotter/ui-kit/select";
+import { PhoneInput } from "./phone-input";
+import { Input } from "@withpotter/ui-kit";
+const STATUS_OPTIONS = [
+  { value: "active", label: "Active" },
+  { value: "suspended", label: "Suspended" },
+  { value: "archived", label: "Archived" }
+];
+function MobileCustomerEditor({ state }) {
+  const contactSummary = state.name || state.phone || state.email || "Untitled";
+  const tagsSummary = state.tags ? state.tags.split(",").filter((t) => t.trim()).length + " tag(s)" : "None";
+  const settingsSummary = state.isEditing ? state.status === "active" ? "Active" : state.status === "suspended" ? "Suspended" : "Archived" : state.acceptsMarketing ? "Marketing: Yes" : "Marketing: No";
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3 pb-32", children: [
+    /* @__PURE__ */ jsx(
+      MobileEditorSection,
+      {
+        id: "contact",
+        icon: User,
+        iconTint: "bg-blue-500/10 text-blue-500",
+        label: "Contact info",
+        summary: contactSummary,
+        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: "Name" }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                type: "text",
+                value: state.name,
+                onChange: (e) => state.setName(e.target.value),
+                placeholder: "Name, nickname, or how they're saved"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: "Phone" }),
+            /* @__PURE__ */ jsx(
+              PhoneInput,
+              {
+                value: state.phone,
+                onChange: state.setPhone,
+                variant: "mobile",
+                className: "w-full text-sm"
+              }
+            )
+          ] }),
+          /* @__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",
+                value: state.email,
+                onChange: (e) => state.setEmail(e.target.value),
+                placeholder: "customer@example.com"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-tertiary)]", children: "Add at least a phone number or an email so you can reach them." })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MobileEditorSection,
+      {
+        id: "tags",
+        icon: Tag,
+        iconTint: "bg-purple-500/10 text-purple-500",
+        label: "Tags",
+        summary: tagsSummary,
+        children: /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "text",
+              value: state.tags,
+              onChange: (e) => state.setTags(e.target.value),
+              placeholder: "vip, wholesale (comma-separated)"
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-tertiary)] mt-2", children: "Separate tags with commas" })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MobileEditorSection,
+      {
+        id: "settings",
+        icon: Settings,
+        iconTint: "bg-gray-500/10 text-gray-500",
+        label: "Settings",
+        summary: settingsSummary,
+        children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--text-primary)]", children: "Accepts marketing" }),
+              /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-tertiary)]", children: "Customer consents to receive promotional messages" })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => state.setAcceptsMarketing(!state.acceptsMarketing),
+                className: `relative w-[51px] h-[31px] rounded-full transition-colors ${state.acceptsMarketing ? "bg-brand-500" : "bg-[var(--border-default)]"}`,
+                children: /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: `absolute top-[2px] left-[2px] w-[27px] h-[27px] rounded-full bg-white transition-transform ${state.acceptsMarketing ? "translate-x-[20px]" : ""}`
+                  }
+                )
+              }
+            )
+          ] }),
+          state.isEditing && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: "Status" }),
+            /* @__PURE__ */ jsx(
+              Select,
+              {
+                value: state.status,
+                onChange: (value) => state.setStatus(value),
+                options: STATUS_OPTIONS
+              }
+            )
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+export {
+  MobileCustomerEditor
+};
+//# sourceMappingURL=mobile-customer-editor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/customer-editor/mobile-customer-editor.tsx"],"sourcesContent":["'use client';\n\nimport { MobileEditorSection } from '@withpotter/components/editor-shared';\nimport { User, Tag, Settings } from 'lucide-react';\nimport { Select } from '@withpotter/ui-kit/select';\nimport type { useCustomerFormState } from '@withpotter/hooks/use-customer-form-state';\nimport { PhoneInput } from './phone-input';\nimport { Input } from '@withpotter/ui-kit';\n\ntype CustomerFormState = ReturnType<typeof useCustomerFormState>;\n\nconst STATUS_OPTIONS = [\n  { value: 'active', label: 'Active' },\n  { value: 'suspended', label: 'Suspended' },\n  { value: 'archived', label: 'Archived' },\n] as const;\n\ninterface MobileCustomerEditorProps {\n  state: CustomerFormState;\n}\n\nexport function MobileCustomerEditor({ state }: MobileCustomerEditorProps) {\n  const contactSummary = state.name || state.phone || state.email || 'Untitled';\n  const tagsSummary = state.tags\n    ? state.tags.split(',').filter((t) => t.trim()).length + ' tag(s)'\n    : 'None';\n  const settingsSummary = state.isEditing\n    ? state.status === 'active'\n      ? 'Active'\n      : state.status === 'suspended'\n        ? 'Suspended'\n        : 'Archived'\n    : state.acceptsMarketing\n      ? 'Marketing: Yes'\n      : 'Marketing: No';\n\n  return (\n    <div className=\"space-y-3 pb-32\">\n      {/* Contact Info Section */}\n      <MobileEditorSection\n        id=\"contact\"\n        icon={User}\n        iconTint=\"bg-blue-500/10 text-blue-500\"\n        label=\"Contact info\"\n        summary={contactSummary}\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              Name\n            </label>\n            <Input\n              type=\"text\"\n              value={state.name}\n              onChange={(e) => state.setName(e.target.value)}\n              placeholder=\"Name, nickname, or how they're saved\"\n            />\n          </div>\n\n          <div>\n            <label className=\"block text-sm font-medium text-[var(--text-secondary)] mb-1\">\n              Phone\n            </label>\n            <PhoneInput\n              value={state.phone}\n              onChange={state.setPhone}\n              variant=\"mobile\"\n              className=\"w-full text-sm\"\n            />\n          </div>\n\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              value={state.email}\n              onChange={(e) => state.setEmail(e.target.value)}\n              placeholder=\"customer@example.com\"\n            />\n          </div>\n\n          <p className=\"text-xs text-[var(--text-tertiary)]\">\n            Add at least a phone number or an email so you can reach them.\n          </p>\n        </div>\n      </MobileEditorSection>\n\n      {/* Tags Section */}\n      <MobileEditorSection\n        id=\"tags\"\n        icon={Tag}\n        iconTint=\"bg-purple-500/10 text-purple-500\"\n        label=\"Tags\"\n        summary={tagsSummary}\n      >\n        <div>\n          <Input\n            type=\"text\"\n            value={state.tags}\n            onChange={(e) => state.setTags(e.target.value)}\n            placeholder=\"vip, wholesale (comma-separated)\"\n          />\n          <p className=\"text-xs text-[var(--text-tertiary)] mt-2\">\n            Separate tags with commas\n          </p>\n        </div>\n      </MobileEditorSection>\n\n      {/* Settings Section */}\n      <MobileEditorSection\n        id=\"settings\"\n        icon={Settings}\n        iconTint=\"bg-gray-500/10 text-gray-500\"\n        label=\"Settings\"\n        summary={settingsSummary}\n      >\n        <div className=\"space-y-4\">\n          <div className=\"flex items-center justify-between\">\n            <div>\n              <p className=\"text-sm font-medium text-[var(--text-primary)]\">\n                Accepts marketing\n              </p>\n              <p className=\"text-sm text-[var(--text-tertiary)]\">\n                Customer consents to receive promotional messages\n              </p>\n            </div>\n            <button\n              type=\"button\"\n              onClick={() => state.setAcceptsMarketing(!state.acceptsMarketing)}\n              className={`relative w-[51px] h-[31px] rounded-full transition-colors ${\n                state.acceptsMarketing\n                  ? 'bg-brand-500'\n                  : 'bg-[var(--border-default)]'\n              }`}\n            >\n              <span\n                className={`absolute top-[2px] left-[2px] w-[27px] h-[27px] rounded-full bg-white transition-transform ${\n                  state.acceptsMarketing ? 'translate-x-[20px]' : ''\n                }`}\n              />\n            </button>\n          </div>\n\n          {state.isEditing && (\n            <div>\n              <label className=\"block text-sm font-medium text-[var(--text-secondary)] mb-1\">\n                Status\n              </label>\n              <Select\n                value={state.status}\n                onChange={(value) =>\n                  state.setStatus(value as 'active' | 'suspended' | 'archived')\n                }\n                options={STATUS_OPTIONS}\n              />\n            </div>\n          )}\n        </div>\n      </MobileEditorSection>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/customer-editor/phone-input.d.ts

@@ -0,0 +1,15 @@
+import { type CountryCode } from 'libphonenumber-js';
+interface PhoneInputProps {
+    /** The current E.164 value stored in state (e.g. "+2348012345678"). */
+    value: string;
+    /** Called with the new E.164 string whenever the user changes anything. */
+    onChange: (e164: string) => void;
+    /** Optional CSS class for the wrapper div. */
+    className?: string;
+    /** Style variant: "desktop" (transparent) or "mobile" (filled row). */
+    variant?: 'desktop' | 'mobile';
+    /** Default country override (e.g. from tenant.country). */
+    defaultCountry?: CountryCode;
+}
+export declare function PhoneInput({ value, onChange, className, variant, defaultCountry, }: PhoneInputProps): import("react").JSX.Element;
+export {};

package/dist/customer-editor/phone-input.js

@@ -0,0 +1,254 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useEffect, useRef } from "react";
+import { ChevronDown } from "lucide-react";
+import { parsePhoneNumber } from "libphonenumber-js";
+import { Input } from "@withpotter/ui-kit";
+const COUNTRIES = [
+  { code: "AF", name: "Afghanistan", dialCode: "+93" },
+  { code: "AL", name: "Albania", dialCode: "+355" },
+  { code: "DZ", name: "Algeria", dialCode: "+213" },
+  { code: "AR", name: "Argentina", dialCode: "+54" },
+  { code: "AU", name: "Australia", dialCode: "+61" },
+  { code: "AT", name: "Austria", dialCode: "+43" },
+  { code: "BE", name: "Belgium", dialCode: "+32" },
+  { code: "BR", name: "Brazil", dialCode: "+55" },
+  { code: "CA", name: "Canada", dialCode: "+1" },
+  { code: "CL", name: "Chile", dialCode: "+56" },
+  { code: "CN", name: "China", dialCode: "+86" },
+  { code: "CO", name: "Colombia", dialCode: "+57" },
+  { code: "CD", name: "Congo (DRC)", dialCode: "+243" },
+  { code: "EG", name: "Egypt", dialCode: "+20" },
+  { code: "ET", name: "Ethiopia", dialCode: "+251" },
+  { code: "FI", name: "Finland", dialCode: "+358" },
+  { code: "FR", name: "France", dialCode: "+33" },
+  { code: "DE", name: "Germany", dialCode: "+49" },
+  { code: "GH", name: "Ghana", dialCode: "+233" },
+  { code: "GR", name: "Greece", dialCode: "+30" },
+  { code: "IN", name: "India", dialCode: "+91" },
+  { code: "ID", name: "Indonesia", dialCode: "+62" },
+  { code: "IE", name: "Ireland", dialCode: "+353" },
+  { code: "IL", name: "Israel", dialCode: "+972" },
+  { code: "IT", name: "Italy", dialCode: "+39" },
+  { code: "JP", name: "Japan", dialCode: "+81" },
+  { code: "KE", name: "Kenya", dialCode: "+254" },
+  { code: "MX", name: "Mexico", dialCode: "+52" },
+  { code: "MA", name: "Morocco", dialCode: "+212" },
+  { code: "NL", name: "Netherlands", dialCode: "+31" },
+  { code: "NZ", name: "New Zealand", dialCode: "+64" },
+  { code: "NG", name: "Nigeria", dialCode: "+234" },
+  { code: "NO", name: "Norway", dialCode: "+47" },
+  { code: "PK", name: "Pakistan", dialCode: "+92" },
+  { code: "PH", name: "Philippines", dialCode: "+63" },
+  { code: "PL", name: "Poland", dialCode: "+48" },
+  { code: "PT", name: "Portugal", dialCode: "+351" },
+  { code: "RO", name: "Romania", dialCode: "+40" },
+  { code: "RU", name: "Russia", dialCode: "+7" },
+  { code: "SA", name: "Saudi Arabia", dialCode: "+966" },
+  { code: "SN", name: "Senegal", dialCode: "+221" },
+  { code: "ZA", name: "South Africa", dialCode: "+27" },
+  { code: "KR", name: "South Korea", dialCode: "+82" },
+  { code: "ES", name: "Spain", dialCode: "+34" },
+  { code: "SE", name: "Sweden", dialCode: "+46" },
+  { code: "CH", name: "Switzerland", dialCode: "+41" },
+  { code: "TZ", name: "Tanzania", dialCode: "+255" },
+  { code: "TH", name: "Thailand", dialCode: "+66" },
+  { code: "TR", name: "Turkey", dialCode: "+90" },
+  { code: "UG", name: "Uganda", dialCode: "+256" },
+  { code: "UA", name: "Ukraine", dialCode: "+380" },
+  { code: "AE", name: "United Arab Emirates", dialCode: "+971" },
+  { code: "GB", name: "United Kingdom", dialCode: "+44" },
+  { code: "US", name: "United States", dialCode: "+1" },
+  { code: "VN", name: "Vietnam", dialCode: "+84" },
+  { code: "ZM", name: "Zambia", dialCode: "+260" },
+  { code: "ZW", name: "Zimbabwe", dialCode: "+263" }
+];
+const DEFAULT_COUNTRY = "NG";
+function parseE164(value) {
+  if (!value) return { country: DEFAULT_COUNTRY, local: "" };
+  try {
+    const parsed = parsePhoneNumber(value);
+    if (parsed?.isValid()) {
+      return {
+        country: parsed.country ?? DEFAULT_COUNTRY,
+        local: parsed.nationalNumber
+      };
+    }
+  } catch {
+  }
+  return { country: DEFAULT_COUNTRY, local: value.replace(/^\+\d+\s*/, "") };
+}
+function cleanLocal(raw) {
+  return raw.replace(/[^\d\s]/g, "");
+}
+function getDialCode(country) {
+  return COUNTRIES.find((c) => c.code === country)?.dialCode ?? "+234";
+}
+function PhoneInput({
+  value,
+  onChange,
+  className,
+  variant = "desktop",
+  defaultCountry = DEFAULT_COUNTRY
+}) {
+  const [country, setCountry] = useState(() => {
+    const parsed = parseE164(value);
+    return parsed.local ? parsed.country : defaultCountry;
+  });
+  const [localNumber, setLocalNumber] = useState(() => {
+    return parseE164(value).local;
+  });
+  const [touched, setTouched] = useState(false);
+  useEffect(() => {
+    if (!value) return;
+    const { country: parsedCountry, local } = parseE164(value);
+    if (local) {
+      setCountry(parsedCountry);
+      setLocalNumber(local);
+    }
+  }, [value]);
+  const handleCountryChange = useCallback(
+    (newCountry) => {
+      setCountry(newCountry);
+      const dialCode = getDialCode(newCountry);
+      const digits2 = localNumber.replace(/\s/g, "");
+      if (digits2) {
+        onChange(`${dialCode}${digits2}`);
+      } else {
+        onChange("");
+      }
+    },
+    [localNumber, onChange]
+  );
+  const handleLocalChange = useCallback(
+    (raw) => {
+      const cleaned = cleanLocal(raw);
+      setLocalNumber(cleaned);
+      setTouched(true);
+      const dialCode = getDialCode(country);
+      const digits2 = cleaned.replace(/\s/g, "");
+      if (digits2) {
+        onChange(`${dialCode}${digits2}`);
+      } else {
+        onChange("");
+      }
+    },
+    [country, onChange]
+  );
+  const digits = localNumber.replace(/\s/g, "");
+  const totalLength = getDialCode(country).replace("+", "").length + digits.length;
+  const hasError = touched && digits.length > 0 && (totalLength < 8 || totalLength > 16);
+  const py = variant === "mobile" ? "py-3" : "py-2";
+  const bg = variant === "mobile" ? "bg-[var(--bg-base)]" : "";
+  const rowState = hasError ? "border-[var(--error)] focus-within:ring-1 focus-within:ring-[var(--error)]" : "border-[var(--border-default)] focus-within:border-brand-500 focus-within:ring-1 focus-within:ring-brand-500";
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `flex rounded-lg border transition-colors ${bg} ${rowState}`,
+        children: [
+          /* @__PURE__ */ jsx(
+            CountrySelect,
+            {
+              country,
+              onChange: handleCountryChange,
+              py
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              variant: "bare",
+              type: "tel",
+              value: localNumber,
+              onChange: (e) => handleLocalChange(e.target.value),
+              onBlur: () => setTouched(true),
+              className: `min-w-0 flex-1 px-3 ${py}`,
+              placeholder: "8012345678",
+              inputMode: "tel",
+              "aria-label": "Phone number",
+              "aria-invalid": hasError
+            }
+          )
+        ]
+      }
+    ),
+    hasError && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-[var(--error)]", children: "Please enter a valid phone number (8 to 16 digits total)." })
+  ] });
+}
+function flagEmoji(code) {
+  return code.toUpperCase().replace(/./g, (c) => String.fromCodePoint(127397 + c.charCodeAt(0)));
+}
+function CountrySelect({ country, onChange, py }) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!open) return;
+    const onDoc = (e) => {
+      if (!ref.current?.contains(e.target)) setOpen(false);
+    };
+    const onKey = (e) => e.key === "Escape" && setOpen(false);
+    document.addEventListener("mousedown", onDoc);
+    window.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDoc);
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  const dialCode = getDialCode(country);
+  return /* @__PURE__ */ jsxs("div", { ref, className: "relative shrink-0", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((v) => !v),
+        "aria-label": "Country code",
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        className: `flex h-full items-center gap-1 border-r border-[var(--border-default)] px-3 ${py} text-sm text-[var(--text-primary)] transition-colors hover:bg-[var(--interactive-hover)] focus:outline-none`,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "text-lg leading-none", children: flagEmoji(country) }),
+          /* @__PURE__ */ jsx("span", { children: dialCode }),
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              className: `h-3.5 w-3.5 text-[var(--text-muted)] transition-transform ${open ? "rotate-180" : ""}`
+            }
+          )
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "listbox",
+        className: "absolute left-0 top-full z-30 mt-1 max-h-64 w-64 overflow-auto rounded-lg border border-[var(--border-subtle)] bg-[var(--bg-base)] py-1 shadow-lg",
+        children: COUNTRIES.map((c) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            role: "option",
+            "aria-selected": c.code === country,
+            onClick: () => {
+              onChange(c.code);
+              setOpen(false);
+            },
+            className: `flex w-full items-center justify-between gap-3 px-3 py-2 text-left text-sm transition-colors ${c.code === country ? "bg-brand-500/[0.08] text-brand-500" : "text-[var(--text-secondary)] hover:bg-[var(--interactive-hover)] hover:text-[var(--text-primary)]"}`,
+            children: [
+              /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-lg leading-none", children: flagEmoji(c.code) }),
+                /* @__PURE__ */ jsx("span", { className: "truncate", children: c.name })
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[var(--text-tertiary)]", children: c.dialCode })
+            ]
+          },
+          c.code
+        ))
+      }
+    )
+  ] });
+}
+export {
+  PhoneInput
+};
+//# sourceMappingURL=phone-input.js.map