@greatapps/common 1.1.174 → 1.1.175

package/dist/components/account/hooks/useChangePhoneForm.mjs

@@ -1,66 +1,68 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { useState, useCallback } from "react";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
 import { toast } from "sonner";
 import { Toast } from "../../ui/feedback/Toast";
-import { changePhoneSchema } from "../../../utils/validators/account";
-import { formatPhone } from "../../../utils/format/masks";
 import { requestPhoneChangeAction } from "../../../modules/accounts/actions/account-management.action";
-import { PHONE_COUNTRIES } from "../../ui/form/PhoneInput";
+function splitPhoneValue(fullValue) {
+  const trimmed = fullValue.trim();
+  const spaceIdx = trimmed.indexOf(" ");
+  if (spaceIdx === -1) return { ddi: "+55", local: trimmed };
+  return { ddi: trimmed.slice(0, spaceIdx), local: trimmed.slice(spaceIdx + 1) };
+}
 function useChangePhoneForm() {
   const [showVerification, setShowVerification] = useState(false);
-  const [selectedCountry, setSelectedCountry] = useState(PHONE_COUNTRIES[0]);
-  const form = useForm({
-    resolver: zodResolver(changePhoneSchema),
-    mode: "onChange",
-    defaultValues: { phone: "" }
-  });
-  const phoneValue = form.watch("phone");
-  const errors = form.formState.errors;
-  const isSubmitting = form.formState.isSubmitting;
-  const handlePhoneChange = useCallback(
-    (e) => {
-      const formatted = formatPhone(e.target.value);
-      form.setValue("phone", formatted, { shouldValidate: true });
-    },
-    [form]
-  );
-  const handleCountryChange = useCallback((country) => {
-    setSelectedCountry(country);
-  }, []);
-  const handleContinue = form.handleSubmit(async (data) => {
-    const result = await requestPhoneChangeAction(data.phone, selectedCountry.code);
-    if (!result.success) {
-      toast.custom((t) => /* @__PURE__ */ jsx(
-        Toast,
-        {
-          variant: "error",
-          message: result.error ?? "N\xFAmero j\xE1 existente ou ocorreu um erro. Tente novamente mais tarde.",
-          toastId: t
-        }
-      ));
+  const [phoneValue, setPhoneValue] = useState("");
+  const [phoneError, setPhoneError] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submittedPhone, setSubmittedPhone] = useState({ ddi: "+55", local: "" });
+  const handlePhoneChange = useCallback((value) => {
+    setPhoneValue(value);
+    if (phoneError) setPhoneError("");
+  }, [phoneError]);
+  const handleContinue = useCallback(async (e) => {
+    e.preventDefault();
+    const { ddi, local } = splitPhoneValue(phoneValue);
+    if (!local || local.replace(/\D/g, "").length < 8) {
+      setPhoneError("N\xFAmero de telefone inv\xE1lido");
       return;
     }
-    setShowVerification(true);
-  });
+    setIsSubmitting(true);
+    try {
+      const result = await requestPhoneChangeAction(local, ddi);
+      if (!result.success) {
+        toast.custom((t) => /* @__PURE__ */ jsx(
+          Toast,
+          {
+            variant: "error",
+            message: result.error ?? "N\xFAmero j\xE1 existente ou ocorreu um erro. Tente novamente mais tarde.",
+            toastId: t
+          }
+        ));
+        return;
+      }
+      setSubmittedPhone({ ddi, local });
+      setShowVerification(true);
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [phoneValue]);
   const handleBack = useCallback(() => {
     setShowVerification(false);
   }, []);
   const resetForm = useCallback(() => {
-    form.reset();
+    setPhoneValue("");
+    setPhoneError("");
+    setSubmittedPhone({ ddi: "+55", local: "" });
     setShowVerification(false);
-    setSelectedCountry(PHONE_COUNTRIES[0]);
-  }, [form]);
+  }, []);
   return {
     showVerification,
     phoneValue,
+    phoneError,
     isSubmitting,
-    errors,
-    selectedCountry,
+    submittedPhone,
     handlePhoneChange,
-    handleCountryChange,
     handleContinue,
     handleBack,
     resetForm

package/dist/components/account/hooks/useChangePhoneForm.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/account/hooks/useChangePhoneForm.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useCallback } from 'react';\nimport { useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { toast } from 'sonner';\nimport { Toast } from '../../ui/feedback/Toast';\nimport { changePhoneSchema, type ChangePhoneFormData } from '../../../utils/validators/account';\nimport { formatPhone } from '../../../utils/format/masks';\nimport { requestPhoneChangeAction } from '../../../modules/accounts/actions/account-management.action';\nimport { PHONE_COUNTRIES, type PhoneCountry } from '../../ui/form/PhoneInput';\n\nexport default function useChangePhoneForm() {\n  const [showVerification, setShowVerification] = useState(false);\n  const [selectedCountry, setSelectedCountry] = useState<PhoneCountry>(PHONE_COUNTRIES[0]);\n\n  const form = useForm<ChangePhoneFormData>({\n    resolver: zodResolver(changePhoneSchema),\n    mode: 'onChange',\n    defaultValues: { phone: '' },\n  });\n\n  const phoneValue = form.watch('phone');\n  const errors = form.formState.errors;\n  const isSubmitting = form.formState.isSubmitting;\n\n  const handlePhoneChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const formatted = formatPhone(e.target.value);\n      form.setValue('phone', formatted, { shouldValidate: true });\n    },\n    [form]\n  );\n\n  const handleCountryChange = useCallback((country: PhoneCountry) => {\n    setSelectedCountry(country);\n  }, []);\n\n  const handleContinue = form.handleSubmit(async (data) => {\n    const result = await requestPhoneChangeAction(data.phone, selectedCountry.code);\n\n    if (!result.success) {\n      toast.custom((t) => (\n        <Toast\n          variant=\"error\"\n          message={result.error ?? 'Número já existente ou ocorreu um erro. Tente novamente mais tarde.'}\n          toastId={t}\n        />\n      ));\n      return;\n    }\n\n    setShowVerification(true);\n  });\n\n  const handleBack = useCallback(() => {\n    setShowVerification(false);\n  }, []);\n\n  const resetForm = useCallback(() => {\n    form.reset();\n    setShowVerification(false);\n    setSelectedCountry(PHONE_COUNTRIES[0]);\n  }, [form]);\n\n  return {\n    showVerification,\n    phoneValue,\n    isSubmitting,\n    errors,\n    selectedCountry,\n    handlePhoneChange,\n    handleCountryChange,\n    handleContinue,\n    handleBack,\n    resetForm,\n  };\n}\n"],"mappings":";AA2CQ;AAzCR,SAAS,UAAU,mBAAmB;AACtC,SAAS,eAAe;AACxB,SAAS,mBAAmB;AAC5B,SAAS,aAAa;AACtB,SAAS,aAAa;AACtB,SAAS,yBAAmD;AAC5D,SAAS,mBAAmB;AAC5B,SAAS,gCAAgC;AACzC,SAAS,uBAA0C;AAEpC,SAAR,qBAAsC;AAC3C,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAS,KAAK;AAC9D,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAuB,gBAAgB,CAAC,CAAC;AAEvF,QAAM,OAAO,QAA6B;AAAA,IACxC,UAAU,YAAY,iBAAiB;AAAA,IACvC,MAAM;AAAA,IACN,eAAe,EAAE,OAAO,GAAG;AAAA,EAC7B,CAAC;AAED,QAAM,aAAa,KAAK,MAAM,OAAO;AACrC,QAAM,SAAS,KAAK,UAAU;AAC9B,QAAM,eAAe,KAAK,UAAU;AAEpC,QAAM,oBAAoB;AAAA,IACxB,CAAC,MAA2C;AAC1C,YAAM,YAAY,YAAY,EAAE,OAAO,KAAK;AAC5C,WAAK,SAAS,SAAS,WAAW,EAAE,gBAAgB,KAAK,CAAC;AAAA,IAC5D;AAAA,IACA,CAAC,IAAI;AAAA,EACP;AAEA,QAAM,sBAAsB,YAAY,CAAC,YAA0B;AACjE,uBAAmB,OAAO;AAAA,EAC5B,GAAG,CAAC,CAAC;AAEL,QAAM,iBAAiB,KAAK,aAAa,OAAO,SAAS;AACvD,UAAM,SAAS,MAAM,yBAAyB,KAAK,OAAO,gBAAgB,IAAI;AAE9E,QAAI,CAAC,OAAO,SAAS;AACnB,YAAM,OAAO,CAAC,MACZ;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,SAAS,OAAO,SAAS;AAAA,UACzB,SAAS;AAAA;AAAA,MACX,CACD;AACD;AAAA,IACF;AAEA,wBAAoB,IAAI;AAAA,EAC1B,CAAC;AAED,QAAM,aAAa,YAAY,MAAM;AACnC,wBAAoB,KAAK;AAAA,EAC3B,GAAG,CAAC,CAAC;AAEL,QAAM,YAAY,YAAY,MAAM;AAClC,SAAK,MAAM;AACX,wBAAoB,KAAK;AACzB,uBAAmB,gBAAgB,CAAC,CAAC;AAAA,EACvC,GAAG,CAAC,IAAI,CAAC;AAET,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../../../src/components/account/hooks/useChangePhoneForm.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useCallback } from 'react';\nimport { toast } from 'sonner';\nimport { Toast } from '../../ui/feedback/Toast';\nimport { requestPhoneChangeAction } from '../../../modules/accounts/actions/account-management.action';\n\nfunction splitPhoneValue(fullValue: string): { ddi: string; local: string } {\n  const trimmed = fullValue.trim();\n  const spaceIdx = trimmed.indexOf(' ');\n  if (spaceIdx === -1) return { ddi: '+55', local: trimmed };\n  return { ddi: trimmed.slice(0, spaceIdx), local: trimmed.slice(spaceIdx + 1) };\n}\n\nexport default function useChangePhoneForm() {\n  const [showVerification, setShowVerification] = useState(false);\n  const [phoneValue, setPhoneValue] = useState('');\n  const [phoneError, setPhoneError] = useState('');\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [submittedPhone, setSubmittedPhone] = useState({ ddi: '+55', local: '' });\n\n  const handlePhoneChange = useCallback((value: string) => {\n    setPhoneValue(value);\n    if (phoneError) setPhoneError('');\n  }, [phoneError]);\n\n  const handleContinue = useCallback(async (e: React.FormEvent) => {\n    e.preventDefault();\n\n    const { ddi, local } = splitPhoneValue(phoneValue);\n\n    if (!local || local.replace(/\\D/g, '').length < 8) {\n      setPhoneError('Número de telefone inválido');\n      return;\n    }\n\n    setIsSubmitting(true);\n    try {\n      const result = await requestPhoneChangeAction(local, ddi);\n\n      if (!result.success) {\n        toast.custom((t) => (\n          <Toast\n            variant=\"error\"\n            message={result.error ?? 'Número já existente ou ocorreu um erro. Tente novamente mais tarde.'}\n            toastId={t}\n          />\n        ));\n        return;\n      }\n\n      setSubmittedPhone({ ddi, local });\n      setShowVerification(true);\n    } finally {\n      setIsSubmitting(false);\n    }\n  }, [phoneValue]);\n\n  const handleBack = useCallback(() => {\n    setShowVerification(false);\n  }, []);\n\n  const resetForm = useCallback(() => {\n    setPhoneValue('');\n    setPhoneError('');\n    setSubmittedPhone({ ddi: '+55', local: '' });\n    setShowVerification(false);\n  }, []);\n\n  return {\n    showVerification,\n    phoneValue,\n    phoneError,\n    isSubmitting,\n    submittedPhone,\n    handlePhoneChange,\n    handleContinue,\n    handleBack,\n    resetForm,\n  };\n}\n"],"mappings":";AA0CU;AAxCV,SAAS,UAAU,mBAAmB;AACtC,SAAS,aAAa;AACtB,SAAS,aAAa;AACtB,SAAS,gCAAgC;AAEzC,SAAS,gBAAgB,WAAmD;AAC1E,QAAM,UAAU,UAAU,KAAK;AAC/B,QAAM,WAAW,QAAQ,QAAQ,GAAG;AACpC,MAAI,aAAa,GAAI,QAAO,EAAE,KAAK,OAAO,OAAO,QAAQ;AACzD,SAAO,EAAE,KAAK,QAAQ,MAAM,GAAG,QAAQ,GAAG,OAAO,QAAQ,MAAM,WAAW,CAAC,EAAE;AAC/E;AAEe,SAAR,qBAAsC;AAC3C,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAS,KAAK;AAC9D,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,EAAE;AAC/C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,EAAE;AAC/C,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AACtD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,EAAE,KAAK,OAAO,OAAO,GAAG,CAAC;AAE9E,QAAM,oBAAoB,YAAY,CAAC,UAAkB;AACvD,kBAAc,KAAK;AACnB,QAAI,WAAY,eAAc,EAAE;AAAA,EAClC,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,iBAAiB,YAAY,OAAO,MAAuB;AAC/D,MAAE,eAAe;AAEjB,UAAM,EAAE,KAAK,MAAM,IAAI,gBAAgB,UAAU;AAEjD,QAAI,CAAC,SAAS,MAAM,QAAQ,OAAO,EAAE,EAAE,SAAS,GAAG;AACjD,oBAAc,mCAA6B;AAC3C;AAAA,IACF;AAEA,oBAAgB,IAAI;AACpB,QAAI;AACF,YAAM,SAAS,MAAM,yBAAyB,OAAO,GAAG;AAExD,UAAI,CAAC,OAAO,SAAS;AACnB,cAAM,OAAO,CAAC,MACZ;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,SAAS,OAAO,SAAS;AAAA,YACzB,SAAS;AAAA;AAAA,QACX,CACD;AACD;AAAA,MACF;AAEA,wBAAkB,EAAE,KAAK,MAAM,CAAC;AAChC,0BAAoB,IAAI;AAAA,IAC1B,UAAE;AACA,sBAAgB,KAAK;AAAA,IACvB;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,aAAa,YAAY,MAAM;AACnC,wBAAoB,KAAK;AAAA,EAC3B,GAAG,CAAC,CAAC;AAEL,QAAM,YAAY,YAAY,MAAM;AAClC,kBAAc,EAAE;AAChB,kBAAc,EAAE;AAChB,sBAAkB,EAAE,KAAK,OAAO,OAAO,GAAG,CAAC;AAC3C,wBAAoB,KAAK;AAAA,EAC3B,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

package/dist/components/account/sections/ChangePhoneModal.mjs

@@ -22,11 +22,10 @@ function ChangePhoneModal({ open, onClose }) {
   const {
     showVerification,
     phoneValue,
+    phoneError,
     isSubmitting,
-    errors,
-    selectedCountry,
+    submittedPhone,
     handlePhoneChange,
-    handleCountryChange,
     handleContinue,
     handleBack,
     resetForm
@@ -51,12 +50,12 @@ function ChangePhoneModal({ open, onClose }) {
     onSuccess: handleSuccess,
     successMessage: "Telefone alterado",
     validateFn: async (token) => {
-      const result = await confirmPhoneChangeAction(token, phoneValue, selectedCountry.code);
+      const result = await confirmPhoneChangeAction(token, submittedPhone.local, submittedPhone.ddi);
       return result.success;
     },
     resendFn: async () => {
       const { requestPhoneChangeAction } = await import("../../../modules/accounts/actions/account-management.action");
-      const result = await requestPhoneChangeAction(phoneValue, selectedCountry.code);
+      const result = await requestPhoneChangeAction(submittedPhone.local, submittedPhone.ddi);
       if (!result.success) {
         throw new Error(result.error);
       }
@@ -165,10 +164,8 @@ function ChangePhoneModal({ open, onClose }) {
                 placeholder: "(00) 0 0000-0000",
                 value: phoneValue,
                 onChange: handlePhoneChange,
-                error: !!errors.phone,
-                errorMessage: errors.phone?.message,
-                selectedCountry,
-                onCountryChange: handleCountryChange
+                error: !!phoneError,
+                errorMessage: phoneError
               }
             )
           ] }),

package/dist/components/account/sections/ChangePhoneModal.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/account/sections/ChangePhoneModal.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronLeft, X, MessageSquare } from 'lucide-react';\nimport { Button } from '../../ui/buttons/Button';\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../ui/overlay/Dialog';\nimport { Separator } from '../../ui/data-display/Separator';\nimport { InputOTP, InputOTPGroup, InputOTPSlot } from '../../ui/form/InputOtp';\nimport PhoneInput from '../../ui/form/PhoneInput';\nimport { formatTimer, formatPhone } from '../../../utils/format/masks';\nimport { OTP_CODE_LENGTH } from '../../../utils/validators/account';\nimport { useAuth } from '../../../providers/auth.provider';\nimport { useInvalidateUser } from '../../../modules/auth/hooks/useUserQuery';\nimport { confirmPhoneChangeAction } from '../../../modules/accounts/actions/account-management.action';\nimport useChangePhoneForm from '../hooks/useChangePhoneForm';\nimport useOtpVerification from '../hooks/useOtpVerification';\n\ninterface ChangePhoneModalProps {\n  open: boolean;\n  onClose: () => void;\n}\n\nexport function ChangePhoneModal({ open, onClose }: ChangePhoneModalProps) {\n  const { user } = useAuth();\n  const invalidateUser = useInvalidateUser();\n\n  const currentPhoneDisplay = user?.phone\n    ? formatPhone(\n        user.ddi && user.phone.startsWith(user.ddi) ? user.phone.slice(user.ddi.length) : user.phone\n      )\n    : '';\n\n  const {\n    showVerification,\n    phoneValue,\n    isSubmitting,\n    errors,\n    selectedCountry,\n    handlePhoneChange,\n    handleCountryChange,\n    handleContinue,\n    handleBack,\n    resetForm,\n  } = useChangePhoneForm();\n\n  const handleSuccess = () => {\n    invalidateUser();\n    resetForm();\n    onClose();\n  };\n\n  const {\n    code,\n    isLoading,\n    hasError,\n    timer,\n    canResend,\n    isValidLength,\n    handleCodeChange,\n    handleValidate,\n    handleResend,\n    reset: resetOtp,\n  } = useOtpVerification({\n    onSuccess: handleSuccess,\n    successMessage: 'Telefone alterado',\n    validateFn: async (token) => {\n      const result = await confirmPhoneChangeAction(token, phoneValue, selectedCountry.code);\n      return result.success;\n    },\n    resendFn: async () => {\n      const { requestPhoneChangeAction } = await import('../../../modules/accounts/actions/account-management.action');\n      const result = await requestPhoneChangeAction(phoneValue, selectedCountry.code);\n      if (!result.success) {\n        throw new Error(result.error);\n      }\n    },\n  });\n\n  const handleClose = () => {\n    resetForm();\n    resetOtp();\n    onClose();\n  };\n\n  const handleBackFromVerification = () => {\n    resetOtp();\n    handleBack();\n  };\n\n  return (\n    <Dialog open={open} onOpenChange={handleClose}>\n      <DialogContent\n        showCloseButton={false}\n        overlayClassName=\"z-[1002]\"\n        className=\"flex flex-col p-0 gap-0 max-w-full! border-0 rounded-t-2xl rounded-b-none h-dvh top-0! bottom-0! left-0! right-0! translate-x-0! translate-y-0! lg:max-w-125! lg:h-auto! lg:rounded-lg lg:border lg:top-[50%]! lg:left-[50%]! lg:right-auto! lg:bottom-auto! lg:translate-x-[-50%]! lg:translate-y-[-50%]! z-[1003]!\"\n      >\n        {showVerification ? (\n          <DialogHeader className=\"flex flex-row items-center justify-between px-4 py-3 border-b border-gray-200 lg:border-b-0\">\n            <Button variant=\"ghost\" className=\"size-8! p-0\" onClick={handleBackFromVerification}>\n              <ChevronLeft size={20} className=\"text-gray-950\" />\n            </Button>\n            <DialogTitle className=\"paragraph-medium-semibold text-gray-950 text-center flex-1\">\n              Alterar telefone\n            </DialogTitle>\n            <Button variant=\"ghost\" className=\"size-8! p-0\" onClick={handleClose}>\n              <X size={18} className=\"text-gray-500\" />\n            </Button>\n          </DialogHeader>\n        ) : (\n          <>\n            <DialogHeader className=\"sr-only\">\n              <DialogTitle>Alterar telefone</DialogTitle>\n            </DialogHeader>\n            <div className=\"flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0\">\n              <span className=\"paragraph-medium-semibold text-gray-950 text-center\">\n                Alterar telefone\n              </span>\n              <Button\n                variant=\"ghost\"\n                className=\"absolute right-2 size-8! p-0\"\n                onClick={handleClose}\n              >\n                <X size={18} className=\"text-gray-500\" />\n              </Button>\n            </div>\n          </>\n        )}\n\n        <div className={`${showVerification ? 'w-full' : 'w-1/2'} h-0.75 bg-pages-300`} />\n\n        {showVerification ? (\n          <form\n            onSubmit={(e) => {\n              e.preventDefault();\n              handleValidate();\n            }}\n            className=\"flex flex-col flex-1 lg:flex-none\"\n          >\n            <div className=\"px-4 lg:px-5 py-5 lg:py-6 flex flex-col gap-4 flex-1 lg:flex-none\">\n              <div className=\"flex items-center justify-center size-12 bg-white rounded-lg shadow-xs border border-gray-200\">\n                <MessageSquare size={20} className=\"text-gray-950\" />\n              </div>\n\n              <div className=\"flex flex-col gap-1\">\n                <h3 className=\"paragraph-medium-semibold text-gray-950\">Código de validação</h3>\n                <p className=\"paragraph-small-regular text-gray-600\">\n                  Enviamos um código de validação para o número atual{' '}\n                  <span className=\"font-semibold text-gray-950\">{currentPhoneDisplay}.</span>\n                </p>\n              </div>\n\n              <div className=\"flex flex-col gap-2\">\n                <InputOTP maxLength={OTP_CODE_LENGTH} value={code} onChange={handleCodeChange}>\n                  <InputOTPGroup className=\"flex flex-row gap-2\">\n                    {[...Array(OTP_CODE_LENGTH)].map((_, i) => (\n                      <InputOTPSlot\n                        key={i}\n                        index={i}\n                        className={`uppercase text-2xl font-medium w-11 lg:w-12 h-13 lg:h-14 rounded-lg border bg-white shadow-none [&_div.animate-caret-blink]:bg-gray-950 ${hasError ? 'border-red-500' : 'border-gray-200'}`}\n                      />\n                    ))}\n                  </InputOTPGroup>\n                </InputOTP>\n                {hasError && (\n                  <p className=\"paragraph-small-regular text-red-500\">Código incorreto</p>\n                )}\n              </div>\n\n              {canResend ? (\n                <button\n                  type=\"button\"\n                  onClick={handleResend}\n                  className=\"paragraph-small-medium text-gray-950 underline cursor-pointer hover:text-gray-700 w-fit\"\n                >\n                  Reenviar código\n                </button>\n              ) : (\n                <p className=\"paragraph-small-regular text-gray-500\">\n                  Reenviar em{' '}\n                  <span className=\"paragraph-small-semibold text-gray-950\">\n                    {formatTimer(timer)}\n                  </span>\n                </p>\n              )}\n            </div>\n\n            <Separator />\n\n            <div className=\"flex items-center justify-between px-4 lg:px-5 py-4 lg:py-5 mt-auto lg:mt-0\">\n              <Button variant=\"secondary\" className=\"h-10!\" type=\"button\" onClick={handleClose}>\n                Cancelar\n              </Button>\n              <Button className=\"h-10!\" type=\"submit\" disabled={!isValidLength || isLoading}>\n                {isLoading ? 'Validando...' : 'Alterar telefone'}\n              </Button>\n            </div>\n          </form>\n        ) : (\n          <form onSubmit={handleContinue} className=\"flex flex-col flex-1 lg:flex-none\">\n            <div className=\"flex flex-col gap-5 lg:gap-6 px-4 lg:px-5 py-5 lg:py-6 flex-1 lg:flex-none\">\n              <div className=\"flex flex-col gap-1\">\n                <span className=\"paragraph-medium-semibold text-gray-950\">\n                  Atualizar telefone de contato\n                </span>\n                <span className=\"paragraph-small-regular text-gray-600\">\n                  Informe o novo número para manter seu contato atualizado.\n                </span>\n              </div>\n\n              <PhoneInput\n                label=\"Novo número\"\n                placeholder=\"(00) 0 0000-0000\"\n                value={phoneValue}\n                onChange={handlePhoneChange}\n                error={!!errors.phone}\n                errorMessage={errors.phone?.message}\n                selectedCountry={selectedCountry}\n                onCountryChange={handleCountryChange}\n              />\n            </div>\n\n            <div className=\"flex items-center justify-between p-4 lg:p-5 border-t border-gray-200 mt-auto lg:mt-0\">\n              <Button variant=\"secondary\" className=\"h-10!\" type=\"button\" onClick={handleClose}>\n                Cancelar\n              </Button>\n              <Button className=\"h-10!\" type=\"submit\" disabled={isSubmitting}>\n                {isSubmitting ? 'Enviando...' : 'Continuar'}\n              </Button>\n            </div>\n          </form>\n        )}\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/components/account/sections/ChangePhoneModal.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronLeft, X, MessageSquare } from 'lucide-react';\nimport { Button } from '../../ui/buttons/Button';\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../ui/overlay/Dialog';\nimport { Separator } from '../../ui/data-display/Separator';\nimport { InputOTP, InputOTPGroup, InputOTPSlot } from '../../ui/form/InputOtp';\nimport PhoneInput from '../../ui/form/PhoneInput';\nimport { formatTimer, formatPhone } from '../../../utils/format/masks';\nimport { OTP_CODE_LENGTH } from '../../../utils/validators/account';\nimport { useAuth } from '../../../providers/auth.provider';\nimport { useInvalidateUser } from '../../../modules/auth/hooks/useUserQuery';\nimport { confirmPhoneChangeAction } from '../../../modules/accounts/actions/account-management.action';\nimport useChangePhoneForm from '../hooks/useChangePhoneForm';\nimport useOtpVerification from '../hooks/useOtpVerification';\n\ninterface ChangePhoneModalProps {\n  open: boolean;\n  onClose: () => void;\n}\n\nexport function ChangePhoneModal({ open, onClose }: ChangePhoneModalProps) {\n  const { user } = useAuth();\n  const invalidateUser = useInvalidateUser();\n\n  const currentPhoneDisplay = user?.phone\n    ? formatPhone(\n        user.ddi && user.phone.startsWith(user.ddi) ? user.phone.slice(user.ddi.length) : user.phone\n      )\n    : '';\n\n  const {\n    showVerification,\n    phoneValue,\n    phoneError,\n    isSubmitting,\n    submittedPhone,\n    handlePhoneChange,\n    handleContinue,\n    handleBack,\n    resetForm,\n  } = useChangePhoneForm();\n\n  const handleSuccess = () => {\n    invalidateUser();\n    resetForm();\n    onClose();\n  };\n\n  const {\n    code,\n    isLoading,\n    hasError,\n    timer,\n    canResend,\n    isValidLength,\n    handleCodeChange,\n    handleValidate,\n    handleResend,\n    reset: resetOtp,\n  } = useOtpVerification({\n    onSuccess: handleSuccess,\n    successMessage: 'Telefone alterado',\n    validateFn: async (token) => {\n      const result = await confirmPhoneChangeAction(token, submittedPhone.local, submittedPhone.ddi);\n      return result.success;\n    },\n    resendFn: async () => {\n      const { requestPhoneChangeAction } = await import('../../../modules/accounts/actions/account-management.action');\n      const result = await requestPhoneChangeAction(submittedPhone.local, submittedPhone.ddi);\n      if (!result.success) {\n        throw new Error(result.error);\n      }\n    },\n  });\n\n  const handleClose = () => {\n    resetForm();\n    resetOtp();\n    onClose();\n  };\n\n  const handleBackFromVerification = () => {\n    resetOtp();\n    handleBack();\n  };\n\n  return (\n    <Dialog open={open} onOpenChange={handleClose}>\n      <DialogContent\n        showCloseButton={false}\n        overlayClassName=\"z-[1002]\"\n        className=\"flex flex-col p-0 gap-0 max-w-full! border-0 rounded-t-2xl rounded-b-none h-dvh top-0! bottom-0! left-0! right-0! translate-x-0! translate-y-0! lg:max-w-125! lg:h-auto! lg:rounded-lg lg:border lg:top-[50%]! lg:left-[50%]! lg:right-auto! lg:bottom-auto! lg:translate-x-[-50%]! lg:translate-y-[-50%]! z-[1003]!\"\n      >\n        {showVerification ? (\n          <DialogHeader className=\"flex flex-row items-center justify-between px-4 py-3 border-b border-gray-200 lg:border-b-0\">\n            <Button variant=\"ghost\" className=\"size-8! p-0\" onClick={handleBackFromVerification}>\n              <ChevronLeft size={20} className=\"text-gray-950\" />\n            </Button>\n            <DialogTitle className=\"paragraph-medium-semibold text-gray-950 text-center flex-1\">\n              Alterar telefone\n            </DialogTitle>\n            <Button variant=\"ghost\" className=\"size-8! p-0\" onClick={handleClose}>\n              <X size={18} className=\"text-gray-500\" />\n            </Button>\n          </DialogHeader>\n        ) : (\n          <>\n            <DialogHeader className=\"sr-only\">\n              <DialogTitle>Alterar telefone</DialogTitle>\n            </DialogHeader>\n            <div className=\"flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0\">\n              <span className=\"paragraph-medium-semibold text-gray-950 text-center\">\n                Alterar telefone\n              </span>\n              <Button\n                variant=\"ghost\"\n                className=\"absolute right-2 size-8! p-0\"\n                onClick={handleClose}\n              >\n                <X size={18} className=\"text-gray-500\" />\n              </Button>\n            </div>\n          </>\n        )}\n\n        <div className={`${showVerification ? 'w-full' : 'w-1/2'} h-0.75 bg-pages-300`} />\n\n        {showVerification ? (\n          <form\n            onSubmit={(e) => {\n              e.preventDefault();\n              handleValidate();\n            }}\n            className=\"flex flex-col flex-1 lg:flex-none\"\n          >\n            <div className=\"px-4 lg:px-5 py-5 lg:py-6 flex flex-col gap-4 flex-1 lg:flex-none\">\n              <div className=\"flex items-center justify-center size-12 bg-white rounded-lg shadow-xs border border-gray-200\">\n                <MessageSquare size={20} className=\"text-gray-950\" />\n              </div>\n\n              <div className=\"flex flex-col gap-1\">\n                <h3 className=\"paragraph-medium-semibold text-gray-950\">Código de validação</h3>\n                <p className=\"paragraph-small-regular text-gray-600\">\n                  Enviamos um código de validação para o número atual{' '}\n                  <span className=\"font-semibold text-gray-950\">{currentPhoneDisplay}.</span>\n                </p>\n              </div>\n\n              <div className=\"flex flex-col gap-2\">\n                <InputOTP maxLength={OTP_CODE_LENGTH} value={code} onChange={handleCodeChange}>\n                  <InputOTPGroup className=\"flex flex-row gap-2\">\n                    {[...Array(OTP_CODE_LENGTH)].map((_, i) => (\n                      <InputOTPSlot\n                        key={i}\n                        index={i}\n                        className={`uppercase text-2xl font-medium w-11 lg:w-12 h-13 lg:h-14 rounded-lg border bg-white shadow-none [&_div.animate-caret-blink]:bg-gray-950 ${hasError ? 'border-red-500' : 'border-gray-200'}`}\n                      />\n                    ))}\n                  </InputOTPGroup>\n                </InputOTP>\n                {hasError && (\n                  <p className=\"paragraph-small-regular text-red-500\">Código incorreto</p>\n                )}\n              </div>\n\n              {canResend ? (\n                <button\n                  type=\"button\"\n                  onClick={handleResend}\n                  className=\"paragraph-small-medium text-gray-950 underline cursor-pointer hover:text-gray-700 w-fit\"\n                >\n                  Reenviar código\n                </button>\n              ) : (\n                <p className=\"paragraph-small-regular text-gray-500\">\n                  Reenviar em{' '}\n                  <span className=\"paragraph-small-semibold text-gray-950\">\n                    {formatTimer(timer)}\n                  </span>\n                </p>\n              )}\n            </div>\n\n            <Separator />\n\n            <div className=\"flex items-center justify-between px-4 lg:px-5 py-4 lg:py-5 mt-auto lg:mt-0\">\n              <Button variant=\"secondary\" className=\"h-10!\" type=\"button\" onClick={handleClose}>\n                Cancelar\n              </Button>\n              <Button className=\"h-10!\" type=\"submit\" disabled={!isValidLength || isLoading}>\n                {isLoading ? 'Validando...' : 'Alterar telefone'}\n              </Button>\n            </div>\n          </form>\n        ) : (\n          <form onSubmit={handleContinue} className=\"flex flex-col flex-1 lg:flex-none\">\n            <div className=\"flex flex-col gap-5 lg:gap-6 px-4 lg:px-5 py-5 lg:py-6 flex-1 lg:flex-none\">\n              <div className=\"flex flex-col gap-1\">\n                <span className=\"paragraph-medium-semibold text-gray-950\">\n                  Atualizar telefone de contato\n                </span>\n                <span className=\"paragraph-small-regular text-gray-600\">\n                  Informe o novo número para manter seu contato atualizado.\n                </span>\n              </div>\n\n              <PhoneInput\n                label=\"Novo número\"\n                placeholder=\"(00) 0 0000-0000\"\n                value={phoneValue}\n                onChange={handlePhoneChange}\n                error={!!phoneError}\n                errorMessage={phoneError}\n              />\n            </div>\n\n            <div className=\"flex items-center justify-between p-4 lg:p-5 border-t border-gray-200 mt-auto lg:mt-0\">\n              <Button variant=\"secondary\" className=\"h-10!\" type=\"button\" onClick={handleClose}>\n                Cancelar\n              </Button>\n              <Button className=\"h-10!\" type=\"submit\" disabled={isSubmitting}>\n                {isSubmitting ? 'Enviando...' : 'Continuar'}\n              </Button>\n            </div>\n          </form>\n        )}\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":";AA+FU,SAYA,UAVI,KAFJ;AA7FV,SAAS,aAAa,GAAG,qBAAqB;AAC9C,SAAS,cAAc;AACvB,SAAS,QAAQ,eAAe,cAAc,mBAAmB;AACjE,SAAS,iBAAiB;AAC1B,SAAS,UAAU,eAAe,oBAAoB;AACtD,OAAO,gBAAgB;AACvB,SAAS,aAAa,mBAAmB;AACzC,SAAS,uBAAuB;AAChC,SAAS,eAAe;AACxB,SAAS,yBAAyB;AAClC,SAAS,gCAAgC;AACzC,OAAO,wBAAwB;AAC/B,OAAO,wBAAwB;AAOxB,SAAS,iBAAiB,EAAE,MAAM,QAAQ,GAA0B;AACzE,QAAM,EAAE,KAAK,IAAI,QAAQ;AACzB,QAAM,iBAAiB,kBAAkB;AAEzC,QAAM,sBAAsB,MAAM,QAC9B;AAAA,IACE,KAAK,OAAO,KAAK,MAAM,WAAW,KAAK,GAAG,IAAI,KAAK,MAAM,MAAM,KAAK,IAAI,MAAM,IAAI,KAAK;AAAA,EACzF,IACA;AAEJ,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,mBAAmB;AAEvB,QAAM,gBAAgB,MAAM;AAC1B,mBAAe;AACf,cAAU;AACV,YAAQ;AAAA,EACV;AAEA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,EACT,IAAI,mBAAmB;AAAA,IACrB,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,YAAY,OAAO,UAAU;AAC3B,YAAM,SAAS,MAAM,yBAAyB,OAAO,eAAe,OAAO,eAAe,GAAG;AAC7F,aAAO,OAAO;AAAA,IAChB;AAAA,IACA,UAAU,YAAY;AACpB,YAAM,EAAE,yBAAyB,IAAI,MAAM,OAAO,6DAA6D;AAC/G,YAAM,SAAS,MAAM,yBAAyB,eAAe,OAAO,eAAe,GAAG;AACtF,UAAI,CAAC,OAAO,SAAS;AACnB,cAAM,IAAI,MAAM,OAAO,KAAK;AAAA,MAC9B;AAAA,IACF;AAAA,EACF,CAAC;AAED,QAAM,cAAc,MAAM;AACxB,cAAU;AACV,aAAS;AACT,YAAQ;AAAA,EACV;AAEA,QAAM,6BAA6B,MAAM;AACvC,aAAS;AACT,eAAW;AAAA,EACb;AAEA,SACE,oBAAC,UAAO,MAAY,cAAc,aAChC;AAAA,IAAC;AAAA;AAAA,MACC,iBAAiB;AAAA,MACjB,kBAAiB;AAAA,MACjB,WAAU;AAAA,MAET;AAAA,2BACC,qBAAC,gBAAa,WAAU,+FACtB;AAAA,8BAAC,UAAO,SAAQ,SAAQ,WAAU,eAAc,SAAS,4BACvD,8BAAC,eAAY,MAAM,IAAI,WAAU,iBAAgB,GACnD;AAAA,UACA,oBAAC,eAAY,WAAU,8DAA6D,8BAEpF;AAAA,UACA,oBAAC,UAAO,SAAQ,SAAQ,WAAU,eAAc,SAAS,aACvD,8BAAC,KAAE,MAAM,IAAI,WAAU,iBAAgB,GACzC;AAAA,WACF,IAEA,iCACE;AAAA,8BAAC,gBAAa,WAAU,WACtB,8BAAC,eAAY,8BAAgB,GAC/B;AAAA,UACA,qBAAC,SAAI,WAAU,8FACb;AAAA,gCAAC,UAAK,WAAU,uDAAsD,8BAEtE;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,WAAU;AAAA,gBACV,SAAS;AAAA,gBAET,8BAAC,KAAE,MAAM,IAAI,WAAU,iBAAgB;AAAA;AAAA,YACzC;AAAA,aACF;AAAA,WACF;AAAA,QAGF,oBAAC,SAAI,WAAW,GAAG,mBAAmB,WAAW,OAAO,wBAAwB;AAAA,QAE/E,mBACC;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,CAAC,MAAM;AACf,gBAAE,eAAe;AACjB,6BAAe;AAAA,YACjB;AAAA,YACA,WAAU;AAAA,YAEV;AAAA,mCAAC,SAAI,WAAU,qEACb;AAAA,oCAAC,SAAI,WAAU,iGACb,8BAAC,iBAAc,MAAM,IAAI,WAAU,iBAAgB,GACrD;AAAA,gBAEA,qBAAC,SAAI,WAAU,uBACb;AAAA,sCAAC,QAAG,WAAU,2CAA0C,0CAAmB;AAAA,kBAC3E,qBAAC,OAAE,WAAU,yCAAwC;AAAA;AAAA,oBACC;AAAA,oBACpD,qBAAC,UAAK,WAAU,+BAA+B;AAAA;AAAA,sBAAoB;AAAA,uBAAC;AAAA,qBACtE;AAAA,mBACF;AAAA,gBAEA,qBAAC,SAAI,WAAU,uBACb;AAAA,sCAAC,YAAS,WAAW,iBAAiB,OAAO,MAAM,UAAU,kBAC3D,8BAAC,iBAAc,WAAU,uBACtB,WAAC,GAAG,MAAM,eAAe,CAAC,EAAE,IAAI,CAAC,GAAG,MACnC;AAAA,oBAAC;AAAA;AAAA,sBAEC,OAAO;AAAA,sBACP,WAAW,2IAA2I,WAAW,mBAAmB,iBAAiB;AAAA;AAAA,oBAFhM;AAAA,kBAGP,CACD,GACH,GACF;AAAA,kBACC,YACC,oBAAC,OAAE,WAAU,wCAAuC,iCAAgB;AAAA,mBAExE;AAAA,gBAEC,YACC;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,SAAS;AAAA,oBACT,WAAU;AAAA,oBACX;AAAA;AAAA,gBAED,IAEA,qBAAC,OAAE,WAAU,yCAAwC;AAAA;AAAA,kBACvC;AAAA,kBACZ,oBAAC,UAAK,WAAU,0CACb,sBAAY,KAAK,GACpB;AAAA,mBACF;AAAA,iBAEJ;AAAA,cAEA,oBAAC,aAAU;AAAA,cAEX,qBAAC,SAAI,WAAU,+EACb;AAAA,oCAAC,UAAO,SAAQ,aAAY,WAAU,SAAQ,MAAK,UAAS,SAAS,aAAa,sBAElF;AAAA,gBACA,oBAAC,UAAO,WAAU,SAAQ,MAAK,UAAS,UAAU,CAAC,iBAAiB,WACjE,sBAAY,iBAAiB,oBAChC;AAAA,iBACF;AAAA;AAAA;AAAA,QACF,IAEA,qBAAC,UAAK,UAAU,gBAAgB,WAAU,qCACxC;AAAA,+BAAC,SAAI,WAAU,8EACb;AAAA,iCAAC,SAAI,WAAU,uBACb;AAAA,kCAAC,UAAK,WAAU,2CAA0C,2CAE1D;AAAA,cACA,oBAAC,UAAK,WAAU,yCAAwC,0EAExD;AAAA,eACF;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAM;AAAA,gBACN,aAAY;AAAA,gBACZ,OAAO;AAAA,gBACP,UAAU;AAAA,gBACV,OAAO,CAAC,CAAC;AAAA,gBACT,cAAc;AAAA;AAAA,YAChB;AAAA,aACF;AAAA,UAEA,qBAAC,SAAI,WAAU,yFACb;AAAA,gCAAC,UAAO,SAAQ,aAAY,WAAU,SAAQ,MAAK,UAAS,SAAS,aAAa,sBAElF;AAAA,YACA,oBAAC,UAAO,WAAU,SAAQ,MAAK,UAAS,UAAU,cAC/C,yBAAe,gBAAgB,aAClC;AAAA,aACF;AAAA,WACF;AAAA;AAAA;AAAA,EAEJ,GACF;AAEJ;","names":[]}

package/dist/components/ui/form/PhoneInput.mjs

@@ -1,119 +1,174 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import Image from "next/image";
-import { ChevronDown } from "lucide-react";
-import { Input } from "./Input";
-import { Separator } from "../data-display/Separator";
-import { cn } from "../../../infra/utils/clsx";
-const PHONE_COUNTRIES = [
-  { code: "+55", label: "Brasil", emoji: "\u{1F1E7}\u{1F1F7}" },
-  { code: "+1", label: "EUA", emoji: "\u{1F1FA}\u{1F1F8}" },
-  { code: "+351", label: "Portugal", emoji: "\u{1F1F5}\u{1F1F9}" },
-  { code: "+54", label: "Argentina", emoji: "\u{1F1E6}\u{1F1F7}" },
-  { code: "+56", label: "Chile", emoji: "\u{1F1E8}\u{1F1F1}" },
-  { code: "+52", label: "M\xE9xico", emoji: "\u{1F1F2}\u{1F1FD}" },
-  { code: "+44", label: "Reino Unido", emoji: "\u{1F1EC}\u{1F1E7}" },
-  { code: "+34", label: "Espanha", emoji: "\u{1F1EA}\u{1F1F8}" },
-  { code: "+49", label: "Alemanha", emoji: "\u{1F1E9}\u{1F1EA}" },
-  { code: "+33", label: "Fran\xE7a", emoji: "\u{1F1EB}\u{1F1F7}" },
-  { code: "+57", label: "Col\xF4mbia", emoji: "\u{1F1E8}\u{1F1F4}" },
-  { code: "+598", label: "Uruguai", emoji: "\u{1F1FA}\u{1F1FE}" }
-];
-const PhoneInput = forwardRef(
-  ({
-    label,
-    optional = false,
-    required = false,
-    hintMessage,
-    error = false,
-    errorMessage,
-    countryCode = "+55",
-    countryFlagSrc = "/icons/brazil-flag.svg",
-    countryFlagAlt = "Brazil flag",
-    className,
-    classnameContainer,
-    selectedCountry,
-    onCountryChange,
-    ...props
-  }, ref) => {
-    const finalMessage = error && errorMessage ? errorMessage : hintMessage;
-    const showMessage = finalMessage && finalMessage.trim() !== "";
-    const displayCode = selectedCountry ? selectedCountry.code : countryCode;
-    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1.5"), children: [
-      label && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 paragraph-xsmall-semibold", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-gray-600", children: label }),
-        optional && /* @__PURE__ */ jsx("span", { className: "text-gray-500", children: "(Opcional)" }),
-        required && /* @__PURE__ */ jsx("span", { className: "text-red-600", children: "*" })
-      ] }),
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cn(
-            "flex gap-2 items-center border rounded-lg h-10 transition-colors",
-            error ? "border-red-600 hover:border-red-700" : "border-gray-200 hover:border-gray-400 focus-within:border-gray-950",
-            classnameContainer
-          ),
-          children: [
-            onCountryChange ? /* @__PURE__ */ jsxs("div", { className: "relative flex items-center gap-2 px-4 cursor-pointer shrink-0", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-base leading-none", children: selectedCountry?.emoji ?? "\u{1F1E7}\u{1F1F7}" }),
-              /* @__PURE__ */ jsx("span", { className: "paragraph-small-regular text-gray-950", children: displayCode }),
-              /* @__PURE__ */ jsx(ChevronDown, { size: 14, className: "text-gray-500" }),
-              /* @__PURE__ */ jsx(
-                "select",
-                {
-                  className: "absolute inset-0 opacity-0 cursor-pointer w-full",
-                  value: displayCode,
-                  onChange: (e) => {
-                    const country = PHONE_COUNTRIES.find((c) => c.code === e.target.value);
-                    if (country) onCountryChange(country);
-                  },
-                  children: PHONE_COUNTRIES.map((c) => /* @__PURE__ */ jsxs("option", { value: c.code, children: [
-                    c.emoji,
-                    " ",
-                    c.code,
-                    " \u2014 ",
-                    c.label
-                  ] }, c.code))
-                }
-              )
-            ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-4", children: [
-              /* @__PURE__ */ jsx(
-                Image,
-                {
-                  src: countryFlagSrc,
-                  alt: countryFlagAlt,
-                  width: 20,
-                  height: 20,
-                  className: "h-5! w-5! rounded-full"
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { className: "paragraph-small-regular text-gray-950", children: countryCode })
-            ] }),
-            /* @__PURE__ */ jsx(Separator, { orientation: "vertical" }),
-            /* @__PURE__ */ jsx(
-              Input,
+import { useState, useEffect, useRef } from "react";
+import { AsYouType } from "libphonenumber-js";
+import { Input, Separator, Popover, PopoverTrigger, PopoverContent, cn } from "@greatapps/common";
+import { IconChevronDown, IconSearch } from "@tabler/icons-react";
+import { COUNTRIES, flagUrl, parsePhoneValue } from "../../../utils/countries";
+function formatNational(digits, iso) {
+  const raw = digits.replace(/\D/g, "");
+  if (!raw) return "";
+  return new AsYouType(iso).input(raw);
+}
+function PhoneInput({
+  value,
+  onChange,
+  label,
+  optional = false,
+  required = false,
+  hintMessage,
+  error = false,
+  errorMessage,
+  placeholder,
+  disabled = false,
+  classnameContainer,
+  className
+}) {
+  const parsed = parsePhoneValue(value ?? "");
+  const [selectedCountry, setSelectedCountry] = useState(parsed.country);
+  const [phoneNumber, setPhoneNumber] = useState(parsed.number);
+  const [search, setSearch] = useState("");
+  const [open, setOpen] = useState(false);
+  const prevValueRef = useRef(value);
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (value !== prevValueRef.current) {
+      prevValueRef.current = value;
+      const p = parsePhoneValue(value ?? "");
+      setSelectedCountry(p.country);
+      setPhoneNumber(formatNational(p.number, p.country.iso));
+    }
+  }, [value]);
+  const emit = (country, number) => {
+    onChange?.(`${country.dial} ${number}`);
+  };
+  const handleCountrySelect = (country) => {
+    const reformatted = formatNational(phoneNumber, country.iso);
+    setSelectedCountry(country);
+    setPhoneNumber(reformatted);
+    setOpen(false);
+    setSearch("");
+    emit(country, reformatted);
+  };
+  const handleNumberChange = (e) => {
+    const rawInput = e.target.value;
+    const cursorPos = e.target.selectionStart ?? rawInput.length;
+    const digitsBeforeCursor = rawInput.slice(0, cursorPos).replace(/\D/g, "").length;
+    const formatted = formatNational(rawInput, selectedCountry.iso);
+    setPhoneNumber(formatted);
+    emit(selectedCountry, formatted);
+    requestAnimationFrame(() => {
+      if (!inputRef.current) return;
+      let digitCount = 0;
+      let newPos = formatted.length;
+      for (let i = 0; i < formatted.length; i++) {
+        if (/\d/.test(formatted[i])) {
+          digitCount++;
+          if (digitCount === digitsBeforeCursor) {
+            newPos = i + 1;
+            break;
+          }
+        }
+      }
+      inputRef.current.setSelectionRange(newPos, newPos);
+    });
+  };
+  const filtered = COUNTRIES.filter(
+    (c) => c.name.toLowerCase().includes(search.toLowerCase()) || c.dial.includes(search) || c.iso.toLowerCase().includes(search.toLowerCase())
+  );
+  const finalMessage = error && errorMessage ? errorMessage : hintMessage;
+  const showMessage = finalMessage && finalMessage.trim() !== "";
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+    label && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 paragraph-xsmall-semibold", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-zinc-600", children: label }),
+      optional && /* @__PURE__ */ jsx("span", { className: "text-zinc-500", children: "(Opcional)" }),
+      required && /* @__PURE__ */ jsx("span", { className: "text-red-600", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex gap-2 items-center border rounded-lg h-10 transition-colors",
+          error ? "border-red-600 hover:border-red-700" : "border-zinc-200 hover:border-zinc-400 focus-within:border-zinc-950",
+          disabled && "opacity-50 cursor-not-allowed",
+          classnameContainer
+        ),
+        children: [
+          /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+            /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+              "button",
               {
-                ref,
-                type: "tel",
-                className: cn(
-                  "paragraph-small-medium w-full h-full text-gray-950 border-0 focus-visible:ring-0 focus-visible:ring-offset-0",
-                  className
-                ),
-                ...props
+                type: "button",
+                className: "flex items-center gap-1.5 px-3 h-full shrink-0 focus:outline-none",
+                disabled,
+                children: [
+                  /* @__PURE__ */ jsx("img", { src: flagUrl(selectedCountry.iso), alt: selectedCountry.iso, className: "w-5 h-5 rounded-full" }),
+                  /* @__PURE__ */ jsx("span", { className: "paragraph-small-regular text-zinc-950", children: selectedCountry.dial }),
+                  /* @__PURE__ */ jsx(IconChevronDown, { size: 14, className: cn("text-zinc-500 transition-transform duration-200", open && "rotate-180") })
+                ]
               }
-            )
-          ]
-        }
-      ),
-      showMessage && /* @__PURE__ */ jsx("span", { className: cn("paragraph-xsmall-medium", error ? "text-red-600" : "text-gray-600"), children: finalMessage })
-    ] });
-  }
-);
-PhoneInput.displayName = "PhoneInput";
-var PhoneInput_default = PhoneInput;
+            ) }),
+            /* @__PURE__ */ jsxs(PopoverContent, { className: "w-72 p-0", align: "start", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-2 border-b border-zinc-100", children: [
+                /* @__PURE__ */ jsx(IconSearch, { size: 14, className: "text-zinc-400 shrink-0" }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "text",
+                    className: "flex-1 text-sm outline-none placeholder:text-zinc-400",
+                    placeholder: "Buscar pa\xEDs...",
+                    value: search,
+                    onChange: (e) => setSearch(e.target.value),
+                    autoFocus: true
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "max-h-60 overflow-y-auto overscroll-contain", onTouchMove: (e) => e.stopPropagation(), children: [
+                filtered.map((country) => /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    className: cn(
+                      "flex items-center gap-2.5 w-full px-3 py-2 text-left hover:bg-zinc-50 transition-colors",
+                      selectedCountry.iso === country.iso && "bg-zinc-100"
+                    ),
+                    onClick: () => handleCountrySelect(country),
+                    children: [
+                      /* @__PURE__ */ jsx("img", { src: flagUrl(country.iso), alt: country.iso, className: "w-5 h-5 rounded-full shrink-0" }),
+                      /* @__PURE__ */ jsx("span", { className: "paragraph-small-regular text-zinc-950 flex-1 truncate", children: country.name }),
+                      /* @__PURE__ */ jsx("span", { className: "paragraph-small-regular text-zinc-500 shrink-0", children: country.dial })
+                    ]
+                  },
+                  country.iso
+                )),
+                filtered.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-sm text-zinc-500 p-3 text-center", children: "Nenhum pa\xEDs encontrado" })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(Separator, { orientation: "vertical" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              ref: inputRef,
+              type: "tel",
+              value: phoneNumber,
+              onChange: handleNumberChange,
+              placeholder,
+              disabled,
+              className: cn(
+                "paragraph-small-medium w-full h-full text-zinc-950 border-0 focus-visible:ring-0 focus-visible:ring-offset-0",
+                disabled && "cursor-not-allowed",
+                className
+              )
+            }
+          )
+        ]
+      }
+    ),
+    showMessage && /* @__PURE__ */ jsx("span", { className: cn("paragraph-xsmall-medium", error ? "text-red-600" : "text-zinc-600"), children: finalMessage })
+  ] });
+}
 export {
-  PHONE_COUNTRIES,
-  PhoneInput_default as default
+  PhoneInput as default
 };
 //# sourceMappingURL=PhoneInput.mjs.map

package/dist/components/ui/form/PhoneInput.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ui/form/PhoneInput.tsx"],"sourcesContent":["'use client';\n\nimport { ComponentPropsWithoutRef, forwardRef } from 'react';\nimport Image from 'next/image';\nimport { ChevronDown } from 'lucide-react';\nimport { Input } from './Input';\nimport { Separator } from '../data-display/Separator';\nimport { cn } from '../../../infra/utils/clsx';\n\nexport interface PhoneCountry {\n  code: string;\n  label: string;\n  emoji: string;\n}\n\nexport const PHONE_COUNTRIES: PhoneCountry[] = [\n  { code: '+55', label: 'Brasil', emoji: '🇧🇷' },\n  { code: '+1', label: 'EUA', emoji: '🇺🇸' },\n  { code: '+351', label: 'Portugal', emoji: '🇵🇹' },\n  { code: '+54', label: 'Argentina', emoji: '🇦🇷' },\n  { code: '+56', label: 'Chile', emoji: '🇨🇱' },\n  { code: '+52', label: 'México', emoji: '🇲🇽' },\n  { code: '+44', label: 'Reino Unido', emoji: '🇬🇧' },\n  { code: '+34', label: 'Espanha', emoji: '🇪🇸' },\n  { code: '+49', label: 'Alemanha', emoji: '🇩🇪' },\n  { code: '+33', label: 'França', emoji: '🇫🇷' },\n  { code: '+57', label: 'Colômbia', emoji: '🇨🇴' },\n  { code: '+598', label: 'Uruguai', emoji: '🇺🇾' },\n];\n\ninterface PhoneInputProps extends Omit<ComponentPropsWithoutRef<'input'>, 'type'> {\n  label?: string;\n  optional?: boolean;\n  required?: boolean;\n  hintMessage?: string;\n  error?: boolean;\n  errorMessage?: string;\n  countryCode?: string;\n  countryFlagSrc?: string;\n  countryFlagAlt?: string;\n  classnameContainer?: string;\n  selectedCountry?: PhoneCountry;\n  onCountryChange?: (country: PhoneCountry) => void;\n}\n\nconst PhoneInput = forwardRef<HTMLInputElement, PhoneInputProps>(\n  (\n    {\n      label,\n      optional = false,\n      required = false,\n      hintMessage,\n      error = false,\n      errorMessage,\n      countryCode = '+55',\n      countryFlagSrc = '/icons/brazil-flag.svg',\n      countryFlagAlt = 'Brazil flag',\n      className,\n      classnameContainer,\n      selectedCountry,\n      onCountryChange,\n      ...props\n    },\n    ref\n  ) => {\n    const finalMessage = error && errorMessage ? errorMessage : hintMessage;\n    const showMessage = finalMessage && finalMessage.trim() !== '';\n\n    const displayCode = selectedCountry ? selectedCountry.code : countryCode;\n\n    return (\n      <div className={cn('flex flex-col gap-1.5')}>\n        {label && (\n          <div className=\"flex items-center gap-1 paragraph-xsmall-semibold\">\n            <span className=\"text-gray-600\">{label}</span>\n            {optional && <span className=\"text-gray-500\">(Opcional)</span>}\n            {required && <span className=\"text-red-600\">*</span>}\n          </div>\n        )}\n\n        <div\n          className={cn(\n            'flex gap-2 items-center border rounded-lg h-10 transition-colors',\n            error\n              ? 'border-red-600 hover:border-red-700'\n              : 'border-gray-200 hover:border-gray-400 focus-within:border-gray-950',\n            classnameContainer\n          )}\n        >\n          {onCountryChange ? (\n            <div className=\"relative flex items-center gap-2 px-4 cursor-pointer shrink-0\">\n              <span className=\"text-base leading-none\">{selectedCountry?.emoji ?? '🇧🇷'}</span>\n              <span className=\"paragraph-small-regular text-gray-950\">{displayCode}</span>\n              <ChevronDown size={14} className=\"text-gray-500\" />\n              <select\n                className=\"absolute inset-0 opacity-0 cursor-pointer w-full\"\n                value={displayCode}\n                onChange={(e) => {\n                  const country = PHONE_COUNTRIES.find((c) => c.code === e.target.value);\n                  if (country) onCountryChange(country);\n                }}\n              >\n                {PHONE_COUNTRIES.map((c) => (\n                  <option key={c.code} value={c.code}>\n                    {c.emoji} {c.code} — {c.label}\n                  </option>\n                ))}\n              </select>\n            </div>\n          ) : (\n            <div className=\"flex items-center gap-2 px-4\">\n              <Image\n                src={countryFlagSrc}\n                alt={countryFlagAlt}\n                width={20}\n                height={20}\n                className=\"h-5! w-5! rounded-full\"\n              />\n              <span className=\"paragraph-small-regular text-gray-950\">{countryCode}</span>\n            </div>\n          )}\n\n          <Separator orientation=\"vertical\" />\n\n          <Input\n            ref={ref}\n            type=\"tel\"\n            className={cn(\n              'paragraph-small-medium w-full h-full text-gray-950 border-0 focus-visible:ring-0 focus-visible:ring-offset-0',\n              className\n            )}\n            {...props}\n          />\n        </div>\n\n        {showMessage && (\n          <span className={cn('paragraph-xsmall-medium', error ? 'text-red-600' : 'text-gray-600')}>\n            {finalMessage}\n          </span>\n        )}\n      </div>\n    );\n  }\n);\n\nPhoneInput.displayName = 'PhoneInput';\n\nexport default PhoneInput;\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/components/ui/form/PhoneInput.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useEffect, useRef } from 'react';\nimport { AsYouType, CountryCode } from 'libphonenumber-js';\nimport { Input, Separator, Popover, PopoverTrigger, PopoverContent, cn } from '@greatapps/common';\nimport { IconChevronDown, IconSearch } from '@tabler/icons-react';\nimport { COUNTRIES, Country, flagUrl, parsePhoneValue } from '../../../utils/countries';\n\nfunction formatNational(digits: string, iso: string): string {\n  const raw = digits.replace(/\\D/g, '');\n  if (!raw) return '';\n  return new AsYouType(iso as CountryCode).input(raw);\n}\n\ninterface PhoneInputProps {\n  value?: string;\n  onChange?: (value: string) => void;\n  label?: string;\n  optional?: boolean;\n  required?: boolean;\n  hintMessage?: string;\n  error?: boolean;\n  errorMessage?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  classnameContainer?: string;\n  className?: string;\n}\n\nexport default function PhoneInput({\n  value,\n  onChange,\n  label,\n  optional = false,\n  required = false,\n  hintMessage,\n  error = false,\n  errorMessage,\n  placeholder,\n  disabled = false,\n  classnameContainer,\n  className,\n}: PhoneInputProps) {\n  const parsed = parsePhoneValue(value ?? '');\n  const [selectedCountry, setSelectedCountry] = useState<Country>(parsed.country);\n  const [phoneNumber, setPhoneNumber] = useState(parsed.number);\n  const [search, setSearch] = useState('');\n  const [open, setOpen] = useState(false);\n  const prevValueRef = useRef(value);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (value !== prevValueRef.current) {\n      prevValueRef.current = value;\n      const p = parsePhoneValue(value ?? '');\n      setSelectedCountry(p.country);\n      setPhoneNumber(formatNational(p.number, p.country.iso));\n    }\n  }, [value]);\n\n  const emit = (country: Country, number: string) => {\n    onChange?.(`${country.dial} ${number}`);\n  };\n\n  const handleCountrySelect = (country: Country) => {\n    const reformatted = formatNational(phoneNumber, country.iso);\n    setSelectedCountry(country);\n    setPhoneNumber(reformatted);\n    setOpen(false);\n    setSearch('');\n    emit(country, reformatted);\n  };\n\n  const handleNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const rawInput = e.target.value;\n    const cursorPos = e.target.selectionStart ?? rawInput.length;\n    const digitsBeforeCursor = rawInput.slice(0, cursorPos).replace(/\\D/g, '').length;\n\n    const formatted = formatNational(rawInput, selectedCountry.iso);\n    setPhoneNumber(formatted);\n    emit(selectedCountry, formatted);\n\n    requestAnimationFrame(() => {\n      if (!inputRef.current) return;\n      let digitCount = 0;\n      let newPos = formatted.length;\n      for (let i = 0; i < formatted.length; i++) {\n        if (/\\d/.test(formatted[i])) {\n          digitCount++;\n          if (digitCount === digitsBeforeCursor) {\n            newPos = i + 1;\n            break;\n          }\n        }\n      }\n      inputRef.current.setSelectionRange(newPos, newPos);\n    });\n  };\n\n  const filtered = COUNTRIES.filter(\n    (c) =>\n      c.name.toLowerCase().includes(search.toLowerCase()) ||\n      c.dial.includes(search) ||\n      c.iso.toLowerCase().includes(search.toLowerCase())\n  );\n\n  const finalMessage = error && errorMessage ? errorMessage : hintMessage;\n  const showMessage = finalMessage && finalMessage.trim() !== '';\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <div className=\"flex items-center gap-1 paragraph-xsmall-semibold\">\n          <span className=\"text-zinc-600\">{label}</span>\n          {optional && <span className=\"text-zinc-500\">(Opcional)</span>}\n          {required && <span className=\"text-red-600\">*</span>}\n        </div>\n      )}\n\n      <div\n        className={cn(\n          'flex gap-2 items-center border rounded-lg h-10 transition-colors',\n          error\n            ? 'border-red-600 hover:border-red-700'\n            : 'border-zinc-200 hover:border-zinc-400 focus-within:border-zinc-950',\n          disabled && 'opacity-50 cursor-not-allowed',\n          classnameContainer\n        )}\n      >\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <button\n              type=\"button\"\n              className=\"flex items-center gap-1.5 px-3 h-full shrink-0 focus:outline-none\"\n              disabled={disabled}\n            >\n              <img src={flagUrl(selectedCountry.iso)} alt={selectedCountry.iso} className=\"w-5 h-5 rounded-full\" />\n              <span className=\"paragraph-small-regular text-zinc-950\">{selectedCountry.dial}</span>\n              <IconChevronDown size={14} className={cn(\"text-zinc-500 transition-transform duration-200\", open && \"rotate-180\")} />\n            </button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-72 p-0\" align=\"start\">\n            <div className=\"flex items-center gap-2 p-2 border-b border-zinc-100\">\n              <IconSearch size={14} className=\"text-zinc-400 shrink-0\" />\n              <input\n                type=\"text\"\n                className=\"flex-1 text-sm outline-none placeholder:text-zinc-400\"\n                placeholder=\"Buscar país...\"\n                value={search}\n                onChange={(e) => setSearch(e.target.value)}\n                autoFocus\n              />\n            </div>\n            <div className=\"max-h-60 overflow-y-auto overscroll-contain\" onTouchMove={(e) => e.stopPropagation()}>\n              {filtered.map((country) => (\n                <button\n                  key={country.iso}\n                  type=\"button\"\n                  className={cn(\n                    'flex items-center gap-2.5 w-full px-3 py-2 text-left hover:bg-zinc-50 transition-colors',\n                    selectedCountry.iso === country.iso && 'bg-zinc-100'\n                  )}\n                  onClick={() => handleCountrySelect(country)}\n                >\n                  <img src={flagUrl(country.iso)} alt={country.iso} className=\"w-5 h-5 rounded-full shrink-0\" />\n                  <span className=\"paragraph-small-regular text-zinc-950 flex-1 truncate\">\n                    {country.name}\n                  </span>\n                  <span className=\"paragraph-small-regular text-zinc-500 shrink-0\">\n                    {country.dial}\n                  </span>\n                </button>\n              ))}\n              {filtered.length === 0 && (\n                <p className=\"text-sm text-zinc-500 p-3 text-center\">Nenhum país encontrado</p>\n              )}\n            </div>\n          </PopoverContent>\n        </Popover>\n\n        <Separator orientation=\"vertical\" />\n\n        <Input\n          ref={inputRef}\n          type=\"tel\"\n          value={phoneNumber}\n          onChange={handleNumberChange}\n          placeholder={placeholder}\n          disabled={disabled}\n          className={cn(\n            'paragraph-small-medium w-full h-full text-zinc-950 border-0 focus-visible:ring-0 focus-visible:ring-offset-0',\n            disabled && 'cursor-not-allowed',\n            className\n          )}\n        />\n      </div>\n\n      {showMessage && (\n        <span className={cn('paragraph-xsmall-medium', error ? 'text-red-600' : 'text-zinc-600')}>\n          {finalMessage}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}