@greatapps/common 1.1.23 → 1.1.25

package/dist/utils/validators/common.mjs

@@ -0,0 +1,47 @@
+function isValidEmail(value) {
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return emailRegex.test(value.trim());
+}
+function isNumericString(value) {
+  return /^\d+$/.test(value);
+}
+function clampNumber(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function isInRange(value, min, max) {
+  return !isNaN(value) && value >= min && value <= max;
+}
+function isConfirmationMatch(input, expected) {
+  return input === expected;
+}
+function hasExactLength(value, length) {
+  return value.length === length;
+}
+function hasMinLength(value, minLength) {
+  return value.length >= minLength;
+}
+function areFieldsRequired(...values) {
+  return values.every((v) => v.trim().length > 0);
+}
+const MIN_PHONE_LENGTH = 14;
+function isNonEmptyString(value) {
+  return value.trim().length > 0;
+}
+function trimOrDefault(value, fallback) {
+  const trimmed = value.trim();
+  return trimmed.length > 0 ? trimmed : fallback;
+}
+export {
+  MIN_PHONE_LENGTH,
+  areFieldsRequired,
+  clampNumber,
+  hasExactLength,
+  hasMinLength,
+  isConfirmationMatch,
+  isInRange,
+  isNonEmptyString,
+  isNumericString,
+  isValidEmail,
+  trimOrDefault
+};
+//# sourceMappingURL=common.mjs.map

package/dist/utils/validators/common.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/validators/common.ts"],"sourcesContent":["export function isValidEmail(value: string): boolean {\r\n  const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\r\n  return emailRegex.test(value.trim());\r\n}\r\n\r\nexport function isNumericString(value: string): boolean {\r\n  return /^\\d+$/.test(value);\r\n}\r\n\r\nexport function clampNumber(value: number, min: number, max: number): number {\r\n  return Math.min(Math.max(value, min), max);\r\n}\r\n\r\nexport function isInRange(value: number, min: number, max: number): boolean {\r\n  return !isNaN(value) && value >= min && value <= max;\r\n}\r\n\r\nexport function isConfirmationMatch(input: string, expected: string): boolean {\r\n  return input === expected;\r\n}\r\n\r\nexport function hasExactLength(value: string, length: number): boolean {\r\n  return value.length === length;\r\n}\r\n\r\nexport function hasMinLength(value: string, minLength: number): boolean {\r\n  return value.length >= minLength;\r\n}\r\n\r\nexport function areFieldsRequired(...values: string[]): boolean {\r\n  return values.every((v) => v.trim().length > 0);\r\n}\r\n\r\nexport const MIN_PHONE_LENGTH = 14;\r\n\r\nexport function isNonEmptyString(value: string): boolean {\r\n  return value.trim().length > 0;\r\n}\r\n\r\nexport function trimOrDefault(value: string, fallback: string): string {\r\n  const trimmed = value.trim();\r\n  return trimmed.length > 0 ? trimmed : fallback;\r\n}\r\n"],"mappings":"AAAO,SAAS,aAAa,OAAwB;AACnD,QAAM,aAAa;AACnB,SAAO,WAAW,KAAK,MAAM,KAAK,CAAC;AACrC;AAEO,SAAS,gBAAgB,OAAwB;AACtD,SAAO,QAAQ,KAAK,KAAK;AAC3B;AAEO,SAAS,YAAY,OAAe,KAAa,KAAqB;AAC3E,SAAO,KAAK,IAAI,KAAK,IAAI,OAAO,GAAG,GAAG,GAAG;AAC3C;AAEO,SAAS,UAAU,OAAe,KAAa,KAAsB;AAC1E,SAAO,CAAC,MAAM,KAAK,KAAK,SAAS,OAAO,SAAS;AACnD;AAEO,SAAS,oBAAoB,OAAe,UAA2B;AAC5E,SAAO,UAAU;AACnB;AAEO,SAAS,eAAe,OAAe,QAAyB;AACrE,SAAO,MAAM,WAAW;AAC1B;AAEO,SAAS,aAAa,OAAe,WAA4B;AACtE,SAAO,MAAM,UAAU;AACzB;AAEO,SAAS,qBAAqB,QAA2B;AAC9D,SAAO,OAAO,MAAM,CAAC,MAAM,EAAE,KAAK,EAAE,SAAS,CAAC;AAChD;AAEO,MAAM,mBAAmB;AAEzB,SAAS,iBAAiB,OAAwB;AACvD,SAAO,MAAM,KAAK,EAAE,SAAS;AAC/B;AAEO,SAAS,cAAc,OAAe,UAA0B;AACrE,QAAM,UAAU,MAAM,KAAK;AAC3B,SAAO,QAAQ,SAAS,IAAI,UAAU;AACxC;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greatapps/common",
-  "version": "1.1.23",
+  "version": "1.1.25",
   "description": "Shared library for GreatApps frontend applications",
   "main": "./dist/index.mjs",
   "types": "./src/index.ts",
@@ -34,6 +34,7 @@
     "@radix-ui/react-progress": "^1.1.8",
     "@radix-ui/react-radio-group": "^1.3.8",
     "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
@@ -52,6 +53,7 @@
     "zod": "^4.3.6"
   },
   "devDependencies": {
+    "@hookform/resolvers": "^5.2.2",
     "@tanstack/react-query": "^5.90.5",
     "@tanstack/react-query-devtools": "^5.90.2",
     "@types/node": "^25.3.2",
@@ -61,15 +63,18 @@
     "next": "15.5.9",
     "react": "19.1.4",
     "react-dom": "19.1.4",
+    "react-hook-form": "^7.71.2",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",
     "zustand": "^5.0.11"
   },
   "peerDependencies": {
+    "@hookform/resolvers": ">=3.0.0",
     "@tanstack/react-query": ">=5.0.0",
     "next": ">=15.0.0",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
+    "react-hook-form": ">=7.0.0",
     "sonner": ">=2.0.0",
     "zustand": ">=4.0.0"
   }

package/src/components/account/ConfigurationsMyAccountModal.tsx

@@ -0,0 +1,147 @@
+'use client';
+
+import { Lock, Settings2, User, X } from 'lucide-react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '../ui/data-display/Tabs';
+import { Button } from '../ui/buttons/Button';
+import { cn } from '../../infra/utils/clsx';
+import { AccountSectionType } from '../../enums/AccountSectionType';
+import { MyProfileSection } from './sections/MyProfileSection';
+import { PreferencesSection } from './sections/PreferencesSection';
+import { ChangePasswordSection } from './sections/ChangePasswordSection';
+import { SecuritySection } from './sections/SecuritySection';
+import useConfigurationsModal from './hooks/useConfigurationsModal';
+import useIsMobile from '../../hooks/useIsMobile';
+import type { ComboboxOption } from '../ui/form/ComboboxField';
+
+interface ConfigurationsMyAccountModalProps {
+  open: boolean;
+  onClose: () => void;
+  initialSection?: AccountSectionType;
+  hasActiveSubscription?: boolean;
+  currencies?: ComboboxOption[];
+  storageUrl?: string;
+  onDeleteAccount?: () => void;
+}
+
+export default function ConfigurationsMyAccountModal({
+  open,
+  onClose,
+  initialSection,
+  hasActiveSubscription,
+  currencies = [],
+  storageUrl,
+  onDeleteAccount,
+}: ConfigurationsMyAccountModalProps) {
+  const isMobile = useIsMobile();
+  const { activeSection, setActiveSection } = useConfigurationsModal({
+    isOpen: open,
+    initialSection,
+  });
+
+  const tabTriggerClasses = cn(
+    'border-0! px-0 py-0',
+
+    'lg:rounded-md lg:flex lg:items-center lg:gap-2 lg:p-3 lg:justify-start lg:w-full',
+    'lg:bg-white lg:hover:bg-gray-100 lg:active:bg-gray-50 lg:border-0',
+    'lg:data-[state=active]:bg-gray-50',
+
+    'flex items-center gap-1.5 px-3 py-3 justify-center whitespace-nowrap',
+    'border-b-2 border-transparent',
+    'data-[state=active]:bg-gray-50 rounded-lg',
+
+    'text-gray-500 data-[state=active]:text-gray-950',
+    'hover:text-gray-900 transition-colors'
+  );
+
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent
+        showCloseButton={!isMobile}
+        overlayClassName="bg-black/20 lg:bg-black/50"
+        className="
+          flex flex-col p-0 gap-0 max-w-full! overflow-x-hidden border-0
+          rounded-t-2xl rounded-b-none h-[100dvh] top-0! bottom-0! left-0! right-0! translate-x-0! translate-y-0!
+          lg:flex-row lg:w-[892px]! lg:max-w-[892px]! lg:h-[626px]! lg:rounded-lg lg:border
+          lg:top-[50%]! lg:bottom-auto! lg:left-[50%]! lg:right-auto! lg:translate-x-[-50%]! lg:translate-y-[-50%]!"
+      >
+        <DialogHeader className="sr-only">
+          <DialogTitle>Configurações</DialogTitle>
+        </DialogHeader>
+        <div className="md:hidden flex items-center justify-between px-5 py-3 border-b border-gray-200">
+          <span className="text-gray-950 paragraph-medium-semibold">Configurações</span>
+          <button
+            type="button"
+            className="size-8 flex items-center justify-center text-gray-500 cursor-pointer"
+            onClick={onClose}
+          >
+            <X size={18} />
+          </button>
+        </div>
+        <Tabs
+          value={activeSection}
+          onValueChange={(value) => setActiveSection(value as AccountSectionType)}
+          orientation="vertical"
+          className="flex lg:flex-row flex-col w-full h-full flex-1 lg:h-full lg:pt-0 lg:gap-0"
+        >
+          <TabsList
+            className={cn(
+              'flex gap-0 bg-transparent border-b-0',
+
+              'lg:flex-col lg:items-stretch lg:justify-start lg:w-auto lg:min-w-60',
+              'lg:border-r lg:border-gray-200 lg:pl-5 lg:pr-5 lg:pt-5 lg:gap-5 lg:overflow-x-visible lg:self-stretch',
+
+              'flex-row items-center justify-start w-full overflow-x-auto scrollbar-hide shrink-0',
+              'px-4 py-3',
+              '[mask-image:linear-gradient(to_right,transparent,black_16px,black_calc(100%-24px),transparent)] lg:[mask-image:none]'
+            )}
+          >
+            <span className="hidden lg:block paragraph-medium-semibold text-gray-950 mb-0">
+              Configurações
+            </span>
+
+            <div className="lg:flex lg:flex-col flex flex-row lg:gap-0 gap-0 lg:w-full">
+              <TabsTrigger value={AccountSectionType.MY_PROFILE} className={tabTriggerClasses}>
+                <User size={20} className="shrink-0" />
+                <span className="paragraph-small-medium">Meu perfil</span>
+              </TabsTrigger>
+
+              <TabsTrigger value={AccountSectionType.PREFERENCES} className={tabTriggerClasses}>
+                <Settings2 size={20} className="shrink-0" />
+                <span className="paragraph-small-medium">Preferências</span>
+              </TabsTrigger>
+
+              <TabsTrigger value={AccountSectionType.SECURITY} className={tabTriggerClasses}>
+                <Lock size={20} className="shrink-0" />
+                <span className="paragraph-small-medium">Segurança</span>
+              </TabsTrigger>
+            </div>
+          </TabsList>
+
+          <div className="w-full flex-1 min-h-0 lg:h-full overflow-hidden lg:overflow-visible relative">
+            <TabsContent value={AccountSectionType.MY_PROFILE} className="h-full! relative overflow-hidden">
+              <MyProfileSection onClose={onClose} storageUrl={storageUrl} />
+            </TabsContent>
+
+            <TabsContent value={AccountSectionType.SECURITY} className="h-full! relative overflow-hidden">
+              <SecuritySection
+                setActiveSection={setActiveSection}
+                onClose={onClose}
+                hasActiveSubscription={hasActiveSubscription}
+                onDeleteAccount={onDeleteAccount}
+              />
+            </TabsContent>
+
+            <TabsContent value={AccountSectionType.CHANGE_PASSWORD} className="h-full! relative overflow-hidden">
+              <ChangePasswordSection onBack={() => setActiveSection(AccountSectionType.SECURITY)} />
+            </TabsContent>
+
+            <TabsContent value={AccountSectionType.PREFERENCES} className="h-full! relative overflow-hidden">
+              <PreferencesSection onClose={onClose} currencies={currencies} />
+            </TabsContent>
+          </div>
+        </Tabs>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/account/ConfirmGlobalPreferencesModal.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { TriangleAlert } from 'lucide-react';
+import { Button } from '../ui/buttons/Button';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from '../ui/overlay/Dialog';
+import { Separator } from '../ui/data-display/Separator';
+
+interface ConfirmGlobalPreferencesModalProps {
+  open: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export default function ConfirmGlobalPreferencesModal({
+  open,
+  onConfirm,
+  onCancel,
+}: ConfirmGlobalPreferencesModalProps) {
+  return (
+    <Dialog open={open} onOpenChange={onCancel}>
+      <DialogContent className="flex flex-col p-0 gap-0 md:w-[386px]! lg:w-[386px]! max-w-[386px]! max-[386px]:w-[calc(100%-32px)]">
+        <DialogHeader className="sr-only">
+          <DialogTitle>Alterar preferências globais</DialogTitle>
+          <DialogDescription>
+            Confirmação de alteração de preferências globais da conta
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-3 p-5">
+          <div className="flex items-center justify-center bg-gray-50 rounded-lg size-10">
+            <TriangleAlert size={24} className="text-gray-950" />
+          </div>
+          <div className="flex flex-col gap-2">
+            <span className="paragraph-medium-semibold text-gray-950">
+              Alterar preferências globais
+            </span>
+            <span className="paragraph-small-regular text-gray-600">
+              Você está alterando configurações que impactam{' '}
+              <span className="paragraph-small-semibold text-gray-950">
+                todos os usuários da conta
+              </span>
+              . Deseja confirmar?
+            </span>
+          </div>
+        </div>
+
+        <Separator className="w-full" />
+
+        <div className="flex items-center gap-2 p-5">
+          <Button onClick={onConfirm} className="h-10!">
+            Confirmar
+          </Button>
+          <Button variant="secondary" onClick={onCancel} className="h-10!">
+            Cancelar
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/account/DisableTwoFactorAuthModal.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import { ShieldCheck } from 'lucide-react';
+import { Button } from '../ui/buttons/Button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '../ui/overlay/Dialog';
+import { InputOTP, InputOTPGroup, InputOTPSlot } from '../ui/form/InputOtp';
+import useDisableTwoFactorAuthForm from './hooks/useDisableTwoFactorAuthForm';
+
+interface DisableTwoFactorAuthModalProps {
+  open: boolean;
+  onClose: () => void;
+  onSuccess?: () => void;
+}
+
+export default function DisableTwoFactorAuthModal({
+  open,
+  onClose,
+  onSuccess,
+}: DisableTwoFactorAuthModalProps) {
+  const { code, setCode, isValid, isLoading, handleClose, handleSubmit } =
+    useDisableTwoFactorAuthForm({ onClose, onSuccess });
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent 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-117.5! 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%]!">
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            handleSubmit();
+          }}
+          className="flex flex-col flex-1 lg:flex-none"
+        >
+          <div className="flex flex-col gap-4 lg:gap-5 p-4 lg:p-5 flex-1 lg:flex-none">
+            <div className="flex items-center justify-center w-fit bg-gray-50 rounded-lg p-2">
+              <ShieldCheck size={20} className="text-gray-600" />
+            </div>
+            <DialogHeader className="p-0 gap-2">
+              <DialogTitle className="paragraph-medium-semibold text-gray-950">
+                Desabilitar autenticação 2FA
+              </DialogTitle>
+              <DialogDescription className="paragraph-small-regular text-gray-600">
+                Informe o código de 6 dígitos do seu aplicativo autenticador para confirmar a
+                desativação.
+              </DialogDescription>
+            </DialogHeader>
+
+            <div className="flex flex-col gap-2">
+              <span className="paragraph-small-medium text-gray-700">Código do autenticador</span>
+              <InputOTP maxLength={6} value={code} onChange={setCode}>
+                <InputOTPGroup className="gap-2">
+                  {Array.from({ length: 6 }).map((_, i) => (
+                    <InputOTPSlot
+                      key={i}
+                      index={i}
+                      className="w-11! lg:w-12! h-13! lg:h-14! rounded-lg! text-lg border-gray-200"
+                    />
+                  ))}
+                </InputOTPGroup>
+              </InputOTP>
+            </div>
+          </div>
+
+          <div className="flex flex-row items-center gap-2 p-4 lg:p-5 border-t border-gray-200 mt-auto lg:mt-0">
+            <Button className="h-10! flex-1" disabled={!isValid || isLoading} type="submit">
+              {isLoading ? 'Desabilitando...' : 'Desabilitar 2FA'}
+            </Button>
+            <Button
+              variant="secondary"
+              className="h-10! flex-1"
+              type="button"
+              onClick={handleClose}
+            >
+              Cancelar
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/account/TwoFactorAuthModal.tsx

@@ -0,0 +1,221 @@
+'use client';
+
+import { ArrowLeft, X, Copy, RefreshCw } from 'lucide-react';
+import { Button } from '../ui/buttons/Button';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';
+import { Separator } from '../ui/data-display/Separator';
+import { InputOTP, InputOTPGroup, InputOTPSlot } from '../ui/form/InputOtp';
+import useTwoFactorAuthForm from './hooks/useTwoFactorAuthForm';
+
+interface TwoFactorAuthModalProps {
+  open: boolean;
+  onClose: () => void;
+  onSuccess?: () => void;
+}
+
+export default function TwoFactorAuthModal({ open, onClose, onSuccess }: TwoFactorAuthModalProps) {
+  const {
+    code,
+    setCode,
+    isCodeComplete,
+    isGenerating,
+    isConfirming,
+    generateFailed,
+    retryGenerate,
+    qrcode,
+    backupCodes,
+    step,
+    handleSubmit,
+    handleFinalize,
+    handleCopyCodes,
+    resetForm,
+  } = useTwoFactorAuthForm({ onSuccess, open });
+
+  const handleClose = () => {
+    resetForm();
+    onClose();
+  };
+
+  if (step === 'recovery') {
+    return (
+      <Dialog open={open} onOpenChange={handleClose}>
+        <DialogContent
+          showCloseButton={false}
+          className="flex flex-col p-0 gap-0 max-w-full! border-0 rounded-t-2xl rounded-b-none h-[100dvh] top-0! bottom-0! left-0! right-0! translate-x-0! translate-y-0! lg:max-w-[470px]! 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%]!"
+        >
+          <DialogHeader className="sr-only">
+            <DialogTitle>Códigos de segurança</DialogTitle>
+          </DialogHeader>
+          <div className="flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0">
+            <span className="paragraph-medium-semibold text-gray-950 text-center">
+              Códigos de segurança
+            </span>
+            <Button
+              type="button"
+              variant="ghost"
+              className="size-8! p-0 absolute right-4"
+              onClick={handleClose}
+            >
+              <X size={18} />
+            </Button>
+          </div>
+
+          <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">
+            <div className="flex flex-col gap-2">
+              <h3 className="paragraph-medium-semibold text-gray-950 max-w-[269px]">
+                Salve estes códigos de recuperação de emergência
+              </h3>
+              <div className="paragraph-small-regular text-gray-600">
+                <p>
+                  Se você perder acesso ao seu telefone, não será possível fazer login em sua conta
+                  sem um código de dois fatores.
+                </p>
+                <br />
+                <p>Imprima, copie ou escreva em um local seguro os códigos abaixo.</p>
+              </div>
+            </div>
+
+            <div className="bg-gray-50 rounded-lg p-4 flex flex-col gap-4">
+              <div className="paragraph-small-medium text-gray-950 whitespace-nowrap">
+                {backupCodes.map((backupCode, i) => (
+                  <p key={i}>{backupCode}</p>
+                ))}
+              </div>
+              <Button
+                type="button"
+                variant="secondary"
+                className="h-8! w-fit"
+                onClick={handleCopyCodes}
+              >
+                <Copy size={16} />
+                Copiar códigos
+              </Button>
+            </div>
+          </div>
+
+          <div className="flex items-center p-4 lg:p-5 border-t border-gray-200 justify-between mt-auto lg:mt-0">
+            <Button variant="secondary" className="h-10!" type="button" onClick={handleClose}>
+              Cancelar
+            </Button>
+            <Button className="h-10!" type="button" onClick={handleFinalize}>
+              Finalizar
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent
+        showCloseButton={false}
+        className="flex flex-col p-0 gap-0 max-w-full! border-0 rounded-t-2xl rounded-b-none h-[100dvh] top-0! bottom-0! left-0! right-0! translate-x-0! translate-y-0! lg:max-w-[470px]! lg:h-auto! lg:max-h-[90vh] 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%]!"
+      >
+        <DialogHeader className="sr-only">
+          <DialogTitle>Autenticação de dois fatores</DialogTitle>
+        </DialogHeader>
+        <div className="shrink-0 flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0">
+          <Button
+            type="button"
+            variant="ghost"
+            className="size-8! p-0 absolute left-4"
+            onClick={handleClose}
+          >
+            <ArrowLeft size={20} />
+          </Button>
+          <span className="paragraph-medium-semibold text-gray-950 text-center">
+            Autenticação de dois fatores
+          </span>
+          <Button
+            type="button"
+            variant="ghost"
+            className="size-8! p-0 absolute right-4"
+            onClick={handleClose}
+          >
+            <X size={18} />
+          </Button>
+        </div>
+
+        <form
+          className="flex-1 min-h-0 flex flex-col"
+          onSubmit={(e) => {
+            e.preventDefault();
+            if (isCodeComplete) handleSubmit();
+          }}
+        >
+          <div className="flex-1 min-h-0 overflow-y-auto overscroll-contain lg:overflow-visible">
+            <div className="flex flex-col items-center gap-4 lg:gap-8 px-4 lg:px-5 py-4 lg:py-6 pb-60 lg:pb-6">
+              <p className="paragraph-small-regular text-gray-950 text-center max-w-full lg:max-w-[412px]">
+                Instale um aplicativo autenticador no seu celular (ex.:{' '}
+                <a
+                  href="https://support.google.com/accounts/answer/1066447"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="paragraph-small-medium underline"
+                >
+                  Google Authenticator
+                </a>
+                ), escaneie o QR Code ao lado ou copie a chave no aplicativo e, em seguida, digite o
+                código de 6 dígitos gerado para continuar.
+              </p>
+
+              <div className="border border-gray-200 rounded-lg overflow-hidden p-2 lg:p-3 flex items-center justify-center w-[136px] h-[136px] lg:w-[203px] lg:h-[203px]">
+                {generateFailed ? (
+                  <button
+                    type="button"
+                    onClick={() => retryGenerate()}
+                    className="flex flex-col items-center gap-1.5 text-center"
+                  >
+                    <RefreshCw size={20} className="text-gray-400" />
+                    <span className="paragraph-xsmall-medium text-gray-500">Tentar novamente</span>
+                  </button>
+                ) : isGenerating || !qrcode ? (
+                  <div className="w-full h-full rounded bg-gray-100 animate-pulse" />
+                ) : (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img
+                    src={qrcode}
+                    alt="QR Code para autenticação de dois fatores"
+                    className="w-full h-full"
+                  />
+                )}
+              </div>
+
+              <div className="flex items-center gap-3 w-full">
+                <Separator className="flex-1" />
+                <span className="paragraph-xsmall-medium text-gray-500 opacity-80 whitespace-nowrap">
+                  Cole os 6 dígitos abaixo
+                </span>
+                <Separator className="flex-1" />
+              </div>
+
+              <div className="scroll-mt-20">
+                <InputOTP maxLength={6} value={code} onChange={setCode}>
+                  <InputOTPGroup className="gap-2">
+                    {Array.from({ length: 6 }).map((_, i) => (
+                      <InputOTPSlot
+                        key={i}
+                        index={i}
+                        className="w-11! lg:w-12! h-13! lg:h-14! rounded-lg! text-lg border-gray-200"
+                      />
+                    ))}
+                  </InputOTPGroup>
+                </InputOTP>
+              </div>
+            </div>
+          </div>
+
+          <div className="shrink-0 flex items-center p-4 lg:p-5 border-t border-gray-200 justify-between gap-2 bg-white">
+            <Button variant="secondary" className="h-10!" type="button" onClick={handleClose}>
+              Cancelar
+            </Button>
+            <Button type="submit" className="h-10!" disabled={!isCodeComplete || isConfirming}>
+              {isConfirming ? 'Ativando...' : 'Ativar autenticação'}
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/account/constants.ts

@@ -0,0 +1,29 @@
+import { buildTimezoneOptions } from '../../utils/intl/timezones';
+import { buildLocaleOptions } from '../../utils/intl/locales';
+
+export const GENDER_OPTIONS = [
+  { value: 'masculino', label: 'Masculino', apiValue: 1 },
+  { value: 'feminino', label: 'Feminino', apiValue: 0 },
+];
+
+export const LANGUAGE_OPTIONS = buildLocaleOptions();
+
+export const CURRENCY_OPTIONS = [
+  { value: 'BRL', label: 'BRL (R$)', displayValue: 'BRL (R$)' },
+  { value: 'USD', label: 'USD ($)', displayValue: 'USD ($)' },
+  { value: 'EUR', label: 'EUR (€)', displayValue: 'EUR (€)' },
+];
+
+export const TIMEZONE_OPTIONS = buildTimezoneOptions();
+
+export const TIME_FORMAT_OPTIONS = [
+  { value: '24h', label: '24 horas', displayValue: '24 horas' },
+  { value: '12h', label: '12 horas (AM/PM)', displayValue: '12 horas (AM/PM)' },
+];
+
+export const NOTIFICATION_TYPES = [
+  'Atualizações de projetos',
+  'Alertas de segurança',
+  'Mudanças no plano ou faturamento',
+  'Manutenções programadas',
+];