@fairmint/ui 0.2.12 → 0.2.13

package/dist/fairmint-ui.js

@@ -26868,7 +26868,7 @@ const Tabs = Object.assign(TabsBase, {
 const TextInput = forwardRef((props, ref) => /* @__PURE__ */ jsx(TextInput$1, { size: "md", ...props, ref }));
 TextInput.displayName = "TextInput";
 function Tooltip(props) {
-  return /* @__PURE__ */ jsx(Tooltip$1, { ...props });
+  return /* @__PURE__ */ jsx(Tooltip$1, { fz: "xs", ...props });
 }
 function ErrorFallback({
   title = "Something went wrong",
@@ -28227,17 +28227,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__default.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__default.useEffect(() => {
+    if (inputRef.current && displayValue != null && inputRef.current.value !== String(displayValue)) {
+      inputRef.current.value = String(displayValue);
+    }
+  }, [displayValue]);
   return /* @__PURE__ */ 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
     }
   );
 }
@@ -30355,6 +30415,8 @@ function InvestorProfileCard({
   subtitle,
   children,
   onEditName,
+  editNameDisabled,
+  editNameTooltip,
   onUploadPhoto,
   photoUploading,
   editNameIcon,
@@ -30443,7 +30505,21 @@ function InvestorProfileCard({
         /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", align: "center", children: [
           /* @__PURE__ */ jsx(Text, { fw: 600, size: "md", children: displayName }),
           verificationStatus && /* @__PURE__ */ jsx(StatusBadge, { status: verificationStatus, size: "xs" }),
-          onEditName && /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", size: "sm", onClick: onEditName, "aria-label": "Edit name", children: editNameIcon ?? /* @__PURE__ */ jsx(DefaultPencilIcon, {}) })
+          onEditName && (editNameDisabled ? /* @__PURE__ */ jsx(Tooltip, { label: editNameTooltip ?? "Coming soon", children: /* @__PURE__ */ 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__ */ jsx(DefaultPencilIcon, {})
+            }
+          ) }) : /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", size: "sm", onClick: onEditName, "aria-label": "Edit name", children: editNameIcon ?? /* @__PURE__ */ jsx(DefaultPencilIcon, {}) }))
         ] }),
         email && /* @__PURE__ */ jsx(Text, { size: "sm", c: `${colors.neutral}.5`, children: email }),
         memberSinceText && /* @__PURE__ */ jsx(Text, { size: "xs", c: `${colors.neutral}.4`, children: memberSinceText }),
@@ -30770,10 +30846,13 @@ export {
   formatDate,
   formatNumber,
   formatPercent,
+  formatPhone,
+  formatPhoneDisplay,
   formatPreciseWithCurrency,
   getAvatarColor,
   isEthereumAddress,
   neutralColors,
+  normalizePhone,
   notify,
   passwordSchema,
   phoneSchema,