@fairmint/ui 0.2.12 → 0.2.13

package/dist/components/form/PhoneField.d.ts

@@ -1,8 +1,37 @@
 import { z } from 'zod';
 import { TextInputProps } from '../primitives/TextInput/TextInput';
-export declare const phoneSchema: z.ZodString;
+/**
+ * Validates that a phone string contains enough digits to be a real number.
+ * - Characters allowed: digits, spaces, `(`, `)`, `.`, `-`, and optional leading `+`
+ * - Domestic (no +): exactly 10 digits, or 11 digits starting with `1`
+ * - US/CA (+1): exactly 11 digits total
+ * - Other international (+): 8–15 digits (E.164 range)
+ */
+export declare const phoneSchema: z.ZodEffects<z.ZodString, string, string>;
+/**
+ * Formats a phone string for display, progressively as digits are added.
+ *
+ * - Domestic (no +): `(XXX) XXX-XXXX`
+ * - US/CA with +1:   `+1 (XXX) XXX-XXXX`
+ * - Other international: `+{digits}` (no structural formatting)
+ *
+ * Idempotent: passing an already-formatted string returns the same result.
+ */
+export declare function formatPhone(raw: string): string;
+/**
+ * Strips a formatted phone string to E.164-ish digits for API storage.
+ *
+ * - `(260) 255-5555`       → `+12602555555`
+ * - `+1 (260) 255-5555`    → `+12602555555`
+ * - `+44 20 7946 0958`     → `+442079460958`
+ *
+ * Note: 10-digit numbers without `+` are assumed to be US/CA and get `+1`.
+ */
+export declare function normalizePhone(formatted: string): string;
+/** @deprecated Use `formatPhone` instead. */
+export declare const formatPhoneDisplay: typeof formatPhone;
 export interface PhoneFieldProps extends Omit<TextInputProps, "type"> {
     error?: string;
 }
-export declare function PhoneField({ error, ...rest }: PhoneFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function PhoneField({ error, onChange, value, ...rest }: PhoneFieldProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=PhoneField.d.ts.map

package/dist/components/form/PhoneField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneField.d.ts","sourceRoot":"","sources":["../../../src/components/form/PhoneField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGxE,eAAO,MAAM,WAAW,aAE+C,CAAC;AAExE,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,eAAe,2CAW7D"}
+{"version":3,"file":"PhoneField.d.ts","sourceRoot":"","sources":["../../../src/components/form/PhoneField.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGxE;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,2CAUe,CAAC;AAExC;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAwB/C;AAED;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAOxD;AAED,6CAA6C;AAC7C,eAAO,MAAM,kBAAkB,oBAAc,CAAC;AAE9C,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,eAAe,2CAqD9E"}

package/dist/components/specific/InvestorProfileCard/InvestorProfileCard.d.ts

@@ -16,6 +16,10 @@ export interface InvestorProfileCardProps {
     children?: ReactNode;
     /** If undefined, no pencil icon is shown. */
     onEditName?: () => void;
+    /** When true, the pencil icon is shown but disabled. Requires `onEditName` to be provided. */
+    editNameDisabled?: boolean;
+    /** Tooltip label shown on the disabled pencil icon. Only used when `editNameDisabled` is true. */
+    editNameTooltip?: string;
     /** If undefined, no camera overlay is shown. */
     onUploadPhoto?: () => void;
     /** Shows a centered Loader over the avatar during upload. */
@@ -31,5 +35,5 @@ export interface InvestorProfileCardProps {
      */
     uploadPhotoIcon?: ReactNode;
 }
-export declare function InvestorProfileCard({ name, email, avatarUrl, verificationStatus, memberSince, subtitle, children, onEditName, onUploadPhoto, photoUploading, editNameIcon, uploadPhotoIcon, }: InvestorProfileCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function InvestorProfileCard({ name, email, avatarUrl, verificationStatus, memberSince, subtitle, children, onEditName, editNameDisabled, editNameTooltip, onUploadPhoto, photoUploading, editNameIcon, uploadPhotoIcon, }: InvestorProfileCardProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=InvestorProfileCard.d.ts.map

package/dist/components/specific/InvestorProfileCard/InvestorProfileCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InvestorProfileCard.d.ts","sourceRoot":"","sources":["../../../../src/components/specific/InvestorProfileCard/InvestorProfileCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AASjD,MAAM,WAAW,wBAAwB;IACvC,4BAA4B;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uEAAuE;IACvE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,wJAAwJ;IACxJ,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,gDAAgD;IAChD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,6DAA6D;IAC7D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;OAGG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;CAC7B;AA6CD,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,KAAK,EACL,SAAS,EACT,kBAAkB,EAClB,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,aAAa,EACb,cAAc,EACd,YAAY,EACZ,eAAe,GAChB,EAAE,wBAAwB,2CAsH1B"}
+{"version":3,"file":"InvestorProfileCard.d.ts","sourceRoot":"","sources":["../../../../src/components/specific/InvestorProfileCard/InvestorProfileCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAUjD,MAAM,WAAW,wBAAwB;IACvC,4BAA4B;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uEAAuE;IACvE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,wJAAwJ;IACxJ,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,8FAA8F;IAC9F,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,kGAAkG;IAClG,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gDAAgD;IAChD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,6DAA6D;IAC7D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;OAGG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;CAC7B;AA6CD,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,KAAK,EACL,SAAS,EACT,kBAAkB,EAClB,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,gBAAgB,EAChB,eAAe,EACf,aAAa,EACb,cAAc,EACd,YAAY,EACZ,eAAe,GAChB,EAAE,wBAAwB,2CAuI1B"}

package/dist/fairmint-ui.cjs

@@ -26886,7 +26886,7 @@ const Tabs = Object.assign(TabsBase, {
 const TextInput = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(TextInput$1, { size: "md", ...props, ref }));
 TextInput.displayName = "TextInput";
 function Tooltip(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Tooltip$1, { ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(Tooltip$1, { fz: "xs", ...props });
 }
 function ErrorFallback({
   title = "Something went wrong",
@@ -28245,17 +28245,77 @@ function PasswordField({ error: error2, ...rest }) {
     }
   );
 }
-const phoneSchema = stringType().regex(/^\+?[\d\s\-().]{7,20}$/, "Please enter a valid phone number");
-function PhoneField({ error: error2, ...rest }) {
+const phoneSchema = stringType().refine((value) => {
+  if (!/^\+?[\d\s\-().]*$/.test(value)) return false;
+  const digits = value.replace(/\D/g, "");
+  if (value.startsWith("+")) {
+    if (digits.startsWith("1")) return digits.length === 11;
+    return digits.length >= 8 && digits.length <= 15;
+  }
+  return digits.length === 10 || digits.length === 11 && digits.startsWith("1");
+}, "Please enter a valid phone number");
+function formatPhone(raw) {
+  const hasPlus = raw.startsWith("+");
+  const digits = raw.replace(/\D/g, "");
+  if (!digits) return hasPlus ? "+" : "";
+  if (!hasPlus && digits.length === 11 && digits.startsWith("1")) {
+    return formatPhone(`+${digits}`);
+  }
+  if (hasPlus && digits.startsWith("1")) {
+    const local = digits.slice(1);
+    if (!local.length) return "+1";
+    if (local.length <= 3) return `+1 (${local}`;
+    if (local.length <= 6) return `+1 (${local.slice(0, 3)}) ${local.slice(3)}`;
+    return `+1 (${local.slice(0, 3)}) ${local.slice(3, 6)}-${local.slice(6, 10)}`;
+  }
+  if (hasPlus) return `+${digits}`;
+  if (digits.length <= 3) return digits;
+  if (digits.length <= 6) return `(${digits.slice(0, 3)}) ${digits.slice(3)}`;
+  return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6, 10)}`;
+}
+function normalizePhone(formatted) {
+  const hasPlus = formatted.startsWith("+");
+  const digits = formatted.replace(/\D/g, "");
+  if (!digits) return "";
+  if (hasPlus) return `+${digits}`;
+  if (digits.length === 10) return `+1${digits}`;
+  return `+${digits}`;
+}
+const formatPhoneDisplay = formatPhone;
+function PhoneField({ error: error2, onChange, value, ...rest }) {
+  const inputRef = React.useRef(null);
+  const handleChange = (e) => {
+    const raw = e.target.value;
+    const hasPlus = raw.startsWith("+");
+    let digits = raw.replace(/\D/g, "");
+    const shouldFormatAsUsCountryCode = digits.startsWith("1") && (hasPlus || !hasPlus && digits.length > 10);
+    if (shouldFormatAsUsCountryCode) {
+      digits = digits.slice(0, 11);
+    } else {
+      digits = digits.slice(0, hasPlus ? 15 : 10);
+    }
+    const formatted = formatPhone(hasPlus || shouldFormatAsUsCountryCode ? `+${digits}` : digits);
+    e.target.value = formatted;
+    onChange?.(e);
+  };
+  const displayValue = typeof value === "string" ? formatPhone(value) : value;
+  React.useEffect(() => {
+    if (inputRef.current && displayValue != null && inputRef.current.value !== String(displayValue)) {
+      inputRef.current.value = String(displayValue);
+    }
+  }, [displayValue]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     TextInput,
     {
+      ref: inputRef,
       type: "tel",
       label: rest.label ?? "Phone",
-      placeholder: rest.placeholder ?? "+1 (555) 000-0000",
+      placeholder: rest.placeholder ?? "(555) 000-0000",
       autoComplete: "tel",
+      ...rest,
       error: error2,
-      ...rest
+      value: displayValue,
+      onChange: handleChange
     }
   );
 }
@@ -30373,6 +30433,8 @@ function InvestorProfileCard({
   subtitle,
   children,
   onEditName,
+  editNameDisabled,
+  editNameTooltip,
   onUploadPhoto,
   photoUploading,
   editNameIcon,
@@ -30461,7 +30523,21 @@ function InvestorProfileCard({
         /* @__PURE__ */ jsxRuntime.jsxs(Group, { gap: "xs", wrap: "nowrap", align: "center", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Text, { fw: 600, size: "md", children: displayName }),
           verificationStatus && /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { status: verificationStatus, size: "xs" }),
-          onEditName && /* @__PURE__ */ jsxRuntime.jsx(ActionIcon, { variant: "subtle", size: "sm", onClick: onEditName, "aria-label": "Edit name", children: editNameIcon ?? /* @__PURE__ */ jsxRuntime.jsx(DefaultPencilIcon, {}) })
+          onEditName && (editNameDisabled ? /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { label: editNameTooltip ?? "Coming soon", children: /* @__PURE__ */ jsxRuntime.jsx(
+            ActionIcon,
+            {
+              variant: "subtle",
+              size: "sm",
+              "aria-label": "Edit name",
+              "aria-disabled": "true",
+              onClick: (event) => {
+                event.preventDefault();
+                event.stopPropagation();
+              },
+              style: { opacity: 0.5, cursor: "not-allowed" },
+              children: editNameIcon ?? /* @__PURE__ */ jsxRuntime.jsx(DefaultPencilIcon, {})
+            }
+          ) }) : /* @__PURE__ */ jsxRuntime.jsx(ActionIcon, { variant: "subtle", size: "sm", onClick: onEditName, "aria-label": "Edit name", children: editNameIcon ?? /* @__PURE__ */ jsxRuntime.jsx(DefaultPencilIcon, {}) }))
         ] }),
         email && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "sm", c: `${colors.neutral}.5`, children: email }),
         memberSinceText && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", c: `${colors.neutral}.4`, children: memberSinceText }),
@@ -30787,10 +30863,13 @@ exports.formatCurrencyPrecise = formatCurrencyPrecise;
 exports.formatDate = formatDate;
 exports.formatNumber = formatNumber;
 exports.formatPercent = formatPercent;
+exports.formatPhone = formatPhone;
+exports.formatPhoneDisplay = formatPhoneDisplay;
 exports.formatPreciseWithCurrency = formatPreciseWithCurrency;
 exports.getAvatarColor = getAvatarColor;
 exports.isEthereumAddress = isEthereumAddress;
 exports.neutralColors = neutralColors;
+exports.normalizePhone = normalizePhone;
 exports.notify = notify;
 exports.passwordSchema = passwordSchema;
 exports.phoneSchema = phoneSchema;