@greatapps/common 1.1.24 → 1.1.26

package/dist/utils/intl/timezones.mjs

@@ -0,0 +1,41 @@
+function parseOffsetMinutes(offsetStr) {
+  const match = offsetStr.match(/GMT([+-])(\d+)(?::(\d+))?/);
+  if (!match) return 0;
+  const sign = match[1] === "+" ? 1 : -1;
+  return sign * (parseInt(match[2], 10) * 60 + parseInt(match[3] ?? "0", 10));
+}
+const FALLBACK_TIMEZONES = [
+  { value: "America/Noronha", label: "(GMT-2) America/Noronha", displayValue: "(GMT-2) Noronha" },
+  { value: "America/Sao_Paulo", label: "(GMT-3) America/Sao Paulo", displayValue: "(GMT-3) Sao Paulo" },
+  { value: "America/Manaus", label: "(GMT-4) America/Manaus", displayValue: "(GMT-4) Manaus" },
+  { value: "America/Rio_Branco", label: "(GMT-5) America/Rio Branco", displayValue: "(GMT-5) Rio Branco" },
+  { value: "America/New_York", label: "(GMT-5) America/New York", displayValue: "(GMT-5) New York" },
+  { value: "America/Los_Angeles", label: "(GMT-8) America/Los Angeles", displayValue: "(GMT-8) Los Angeles" },
+  { value: "Europe/London", label: "(GMT+0) Europe/London", displayValue: "(GMT+0) London" },
+  { value: "Europe/Paris", label: "(GMT+1) Europe/Paris", displayValue: "(GMT+1) Paris" },
+  { value: "Asia/Tokyo", label: "(GMT+9) Asia/Tokyo", displayValue: "(GMT+9) Tokyo" }
+];
+function buildTimezoneOptions() {
+  try {
+    const zones = Intl.supportedValuesOf("timeZone");
+    const now = /* @__PURE__ */ new Date();
+    const items = zones.map((tz) => {
+      const offsetStr = new Intl.DateTimeFormat("en", { timeZone: tz, timeZoneName: "shortOffset" }).formatToParts(now).find((p) => p.type === "timeZoneName")?.value ?? "GMT";
+      const city = tz.split("/").slice(1).join("/").replace(/_/g, " ") || tz;
+      return {
+        value: tz,
+        label: `(${offsetStr}) ${tz.replace(/_/g, " ")}`,
+        displayValue: `(${offsetStr}) ${city}`,
+        sort: parseOffsetMinutes(offsetStr)
+      };
+    });
+    items.sort((a, b) => a.sort - b.sort || a.label.localeCompare(b.label));
+    return items.map(({ value, label, displayValue }) => ({ value, label, displayValue }));
+  } catch {
+    return FALLBACK_TIMEZONES;
+  }
+}
+export {
+  buildTimezoneOptions
+};
+//# sourceMappingURL=timezones.mjs.map

package/dist/utils/intl/timezones.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/intl/timezones.ts"],"sourcesContent":["export type TimezoneOption = {\r\n  value: string;\r\n  label: string;\r\n  displayValue: string;\r\n};\r\n\r\nfunction parseOffsetMinutes(offsetStr: string): number {\r\n  const match = offsetStr.match(/GMT([+-])(\\d+)(?::(\\d+))?/);\r\n  if (!match) return 0;\r\n  const sign = match[1] === '+' ? 1 : -1;\r\n  return sign * (parseInt(match[2], 10) * 60 + parseInt(match[3] ?? '0', 10));\r\n}\r\n\r\nconst FALLBACK_TIMEZONES: TimezoneOption[] = [\r\n  { value: 'America/Noronha', label: '(GMT-2) America/Noronha', displayValue: '(GMT-2) Noronha' },\r\n  { value: 'America/Sao_Paulo', label: '(GMT-3) America/Sao Paulo', displayValue: '(GMT-3) Sao Paulo' },\r\n  { value: 'America/Manaus', label: '(GMT-4) America/Manaus', displayValue: '(GMT-4) Manaus' },\r\n  { value: 'America/Rio_Branco', label: '(GMT-5) America/Rio Branco', displayValue: '(GMT-5) Rio Branco' },\r\n  { value: 'America/New_York', label: '(GMT-5) America/New York', displayValue: '(GMT-5) New York' },\r\n  { value: 'America/Los_Angeles', label: '(GMT-8) America/Los Angeles', displayValue: '(GMT-8) Los Angeles' },\r\n  { value: 'Europe/London', label: '(GMT+0) Europe/London', displayValue: '(GMT+0) London' },\r\n  { value: 'Europe/Paris', label: '(GMT+1) Europe/Paris', displayValue: '(GMT+1) Paris' },\r\n  { value: 'Asia/Tokyo', label: '(GMT+9) Asia/Tokyo', displayValue: '(GMT+9) Tokyo' },\r\n];\r\n\r\nexport function buildTimezoneOptions(): TimezoneOption[] {\r\n  try {\r\n    const zones = Intl.supportedValuesOf('timeZone');\r\n    const now = new Date();\r\n\r\n    const items = zones.map((tz) => {\r\n      const offsetStr =\r\n        new Intl.DateTimeFormat('en', { timeZone: tz, timeZoneName: 'shortOffset' })\r\n          .formatToParts(now)\r\n          .find((p) => p.type === 'timeZoneName')?.value ?? 'GMT';\r\n\r\n      const city = tz.split('/').slice(1).join('/').replace(/_/g, ' ') || tz;\r\n\r\n      return {\r\n        value: tz,\r\n        label: `(${offsetStr}) ${tz.replace(/_/g, ' ')}`,\r\n        displayValue: `(${offsetStr}) ${city}`,\r\n        sort: parseOffsetMinutes(offsetStr),\r\n      };\r\n    });\r\n\r\n    items.sort((a, b) => a.sort - b.sort || a.label.localeCompare(b.label));\r\n\r\n    return items.map(({ value, label, displayValue }) => ({ value, label, displayValue }));\r\n  } catch {\r\n    return FALLBACK_TIMEZONES;\r\n  }\r\n}\r\n"],"mappings":"AAMA,SAAS,mBAAmB,WAA2B;AACrD,QAAM,QAAQ,UAAU,MAAM,2BAA2B;AACzD,MAAI,CAAC,MAAO,QAAO;AACnB,QAAM,OAAO,MAAM,CAAC,MAAM,MAAM,IAAI;AACpC,SAAO,QAAQ,SAAS,MAAM,CAAC,GAAG,EAAE,IAAI,KAAK,SAAS,MAAM,CAAC,KAAK,KAAK,EAAE;AAC3E;AAEA,MAAM,qBAAuC;AAAA,EAC3C,EAAE,OAAO,mBAAmB,OAAO,2BAA2B,cAAc,kBAAkB;AAAA,EAC9F,EAAE,OAAO,qBAAqB,OAAO,6BAA6B,cAAc,oBAAoB;AAAA,EACpG,EAAE,OAAO,kBAAkB,OAAO,0BAA0B,cAAc,iBAAiB;AAAA,EAC3F,EAAE,OAAO,sBAAsB,OAAO,8BAA8B,cAAc,qBAAqB;AAAA,EACvG,EAAE,OAAO,oBAAoB,OAAO,4BAA4B,cAAc,mBAAmB;AAAA,EACjG,EAAE,OAAO,uBAAuB,OAAO,+BAA+B,cAAc,sBAAsB;AAAA,EAC1G,EAAE,OAAO,iBAAiB,OAAO,yBAAyB,cAAc,iBAAiB;AAAA,EACzF,EAAE,OAAO,gBAAgB,OAAO,wBAAwB,cAAc,gBAAgB;AAAA,EACtF,EAAE,OAAO,cAAc,OAAO,sBAAsB,cAAc,gBAAgB;AACpF;AAEO,SAAS,uBAAyC;AACvD,MAAI;AACF,UAAM,QAAQ,KAAK,kBAAkB,UAAU;AAC/C,UAAM,MAAM,oBAAI,KAAK;AAErB,UAAM,QAAQ,MAAM,IAAI,CAAC,OAAO;AAC9B,YAAM,YACJ,IAAI,KAAK,eAAe,MAAM,EAAE,UAAU,IAAI,cAAc,cAAc,CAAC,EACxE,cAAc,GAAG,EACjB,KAAK,CAAC,MAAM,EAAE,SAAS,cAAc,GAAG,SAAS;AAEtD,YAAM,OAAO,GAAG,MAAM,GAAG,EAAE,MAAM,CAAC,EAAE,KAAK,GAAG,EAAE,QAAQ,MAAM,GAAG,KAAK;AAEpE,aAAO;AAAA,QACL,OAAO;AAAA,QACP,OAAO,IAAI,SAAS,KAAK,GAAG,QAAQ,MAAM,GAAG,CAAC;AAAA,QAC9C,cAAc,IAAI,SAAS,KAAK,IAAI;AAAA,QACpC,MAAM,mBAAmB,SAAS;AAAA,MACpC;AAAA,IACF,CAAC;AAED,UAAM,KAAK,CAAC,GAAG,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,EAAE,KAAK,CAAC;AAEtE,WAAO,MAAM,IAAI,CAAC,EAAE,OAAO,OAAO,aAAa,OAAO,EAAE,OAAO,OAAO,aAAa,EAAE;AAAA,EACvF,QAAQ;AACN,WAAO;AAAA,EACT;AACF;","names":[]}

package/dist/utils/validators/account.mjs

@@ -0,0 +1,26 @@
+import { z } from "zod";
+const myProfileSchema = z.object({
+  name: z.string().min(1, "Nome \xE9 obrigat\xF3rio"),
+  gender: z.string().optional()
+});
+const changePasswordSchema = z.object({
+  currentPassword: z.string().min(1, "Senha atual \xE9 obrigat\xF3ria"),
+  newPassword: z.string().min(1, "Nova senha \xE9 obrigat\xF3ria").min(8, "Nova senha deve ter no m\xEDnimo 8 caracteres")
+});
+const changePhoneSchema = z.object({
+  phone: z.string().min(1, "N\xFAmero de telefone \xE9 obrigat\xF3rio").regex(/^\(\d{2}\) (\d \d{4}|\d{4})-\d{4}$/, "N\xFAmero de telefone inv\xE1lido")
+});
+const changeEmailSchema = z.object({
+  email: z.string().min(1, "E-mail \xE9 obrigat\xF3rio").email("E-mail inv\xE1lido")
+});
+const OTP_CODE_LENGTH = 5;
+const VALID_OTP_CODE = "12345";
+export {
+  OTP_CODE_LENGTH,
+  VALID_OTP_CODE,
+  changeEmailSchema,
+  changePasswordSchema,
+  changePhoneSchema,
+  myProfileSchema
+};
+//# sourceMappingURL=account.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/validators/account.ts"],"sourcesContent":["import { z } from 'zod';\r\n\r\nexport const myProfileSchema = z.object({\r\n  name: z.string().min(1, 'Nome é obrigatório'),\r\n  gender: z.string().optional(),\r\n});\r\n\r\nexport type MyProfileFormData = z.infer<typeof myProfileSchema>;\r\n\r\nexport const changePasswordSchema = z.object({\r\n  currentPassword: z.string().min(1, 'Senha atual é obrigatória'),\r\n  newPassword: z\r\n    .string()\r\n    .min(1, 'Nova senha é obrigatória')\r\n    .min(8, 'Nova senha deve ter no mínimo 8 caracteres'),\r\n});\r\n\r\nexport type ChangePasswordFormData = z.infer<typeof changePasswordSchema>;\r\n\r\nexport const changePhoneSchema = z.object({\r\n  phone: z\r\n    .string()\r\n    .min(1, 'Número de telefone é obrigatório')\r\n    .regex(/^\\(\\d{2}\\) (\\d \\d{4}|\\d{4})-\\d{4}$/, 'Número de telefone inválido'),\r\n});\r\n\r\nexport type ChangePhoneFormData = z.infer<typeof changePhoneSchema>;\r\n\r\nexport const changeEmailSchema = z.object({\r\n  email: z.string().min(1, 'E-mail é obrigatório').email('E-mail inválido'),\r\n});\r\n\r\nexport type ChangeEmailFormData = z.infer<typeof changeEmailSchema>;\r\n\r\nexport const OTP_CODE_LENGTH = 5;\r\nexport const VALID_OTP_CODE = '12345';\r\n"],"mappings":"AAAA,SAAS,SAAS;AAEX,MAAM,kBAAkB,EAAE,OAAO;AAAA,EACtC,MAAM,EAAE,OAAO,EAAE,IAAI,GAAG,0BAAoB;AAAA,EAC5C,QAAQ,EAAE,OAAO,EAAE,SAAS;AAC9B,CAAC;AAIM,MAAM,uBAAuB,EAAE,OAAO;AAAA,EAC3C,iBAAiB,EAAE,OAAO,EAAE,IAAI,GAAG,iCAA2B;AAAA,EAC9D,aAAa,EACV,OAAO,EACP,IAAI,GAAG,gCAA0B,EACjC,IAAI,GAAG,+CAA4C;AACxD,CAAC;AAIM,MAAM,oBAAoB,EAAE,OAAO;AAAA,EACxC,OAAO,EACJ,OAAO,EACP,IAAI,GAAG,2CAAkC,EACzC,MAAM,sCAAsC,mCAA6B;AAC9E,CAAC;AAIM,MAAM,oBAAoB,EAAE,OAAO;AAAA,EACxC,OAAO,EAAE,OAAO,EAAE,IAAI,GAAG,4BAAsB,EAAE,MAAM,oBAAiB;AAC1E,CAAC;AAIM,MAAM,kBAAkB;AACxB,MAAM,iBAAiB;","names":[]}

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.24",
+  "version": "1.1.26",
   "description": "Shared library for GreatApps frontend applications",
   "main": "./dist/index.mjs",
   "types": "./src/index.ts",
@@ -53,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",
@@ -62,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>
+  );
+}