@greatapps/common 1.1.218 → 1.1.219

package/dist/utils/safeServerAction.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/safeServerAction.ts"],"sourcesContent":["import { isRedirectError } from 'next/dist/client/components/redirect-error';\nimport { ApiError } from '../infra/api/types';\nimport type { ActionResult } from '../infra/api/types';\n\nexport async function safeServerAction<T>(\n  fn: () => Promise<T>\n): Promise<ActionResult<T>> {\n  try {\n    const data = await fn();\n    return { success: true, data };\n  } catch (error) {\n    if (isRedirectError(error)) throw error;\n    const message =\n      error instanceof ApiError\n        ? error.message\n        : error instanceof Error\n          ? error.message\n          : 'Erro desconhecido';\n    return { success: false, error: message };\n  }\n}\n"],"mappings":"AAAA,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AAGzB,eAAsB,iBACpB,IAC0B;AAC1B,MAAI;AACF,UAAM,OAAO,MAAM,GAAG;AACtB,WAAO,EAAE,SAAS,MAAM,KAAK;AAAA,EAC/B,SAAS,OAAO;AACd,QAAI,gBAAgB,KAAK,EAAG,OAAM;AAClC,UAAM,UACJ,iBAAiB,WACb,MAAM,UACN,iBAAiB,QACf,MAAM,UACN;AACR,WAAO,EAAE,SAAS,OAAO,OAAO,QAAQ;AAAA,EAC1C;AACF;","names":[]}
+{"version":3,"sources":["../../src/utils/safeServerAction.ts"],"sourcesContent":["import { isRedirectError } from 'next/dist/client/components/redirect-error';\r\nimport { ApiError } from '../infra/api/types';\r\nimport type { ActionResult } from '../infra/api/types';\r\n\r\nexport async function safeServerAction<T>(\r\n  fn: () => Promise<T>\r\n): Promise<ActionResult<T>> {\r\n  try {\r\n    const data = await fn();\r\n    return { success: true, data };\r\n  } catch (error) {\r\n    if (isRedirectError(error)) throw error;\r\n    const message =\r\n      error instanceof ApiError\r\n        ? error.message\r\n        : error instanceof Error\r\n          ? error.message\r\n          : 'Erro desconhecido';\r\n    return { success: false, error: message };\r\n  }\r\n}\r\n"],"mappings":"AAAA,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AAGzB,eAAsB,iBACpB,IAC0B;AAC1B,MAAI;AACF,UAAM,OAAO,MAAM,GAAG;AACtB,WAAO,EAAE,SAAS,MAAM,KAAK;AAAA,EAC/B,SAAS,OAAO;AACd,QAAI,gBAAgB,KAAK,EAAG,OAAM;AAClC,UAAM,UACJ,iBAAiB,WACb,MAAM,UACN,iBAAiB,QACf,MAAM,UACN;AACR,WAAO,EAAE,SAAS,OAAO,OAAO,QAAQ;AAAA,EAC1C;AACF;","names":[]}

package/dist/utils/withAction.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/withAction.ts"],"sourcesContent":["import type { ActionResult } from '../infra/api/types';\n\nexport function withAction<TArgs extends any[], TData>(\n  action: (...args: TArgs) => Promise<ActionResult<TData>>\n): (...args: TArgs) => Promise<TData> {\n  return async (...args) => {\n    const result = await action(...args);\n    if (!result.success) {\n      throw new Error(result.error ?? 'Erro desconhecido');\n    }\n    return result.data as TData;\n  };\n}\n"],"mappings":"AAEO,SAAS,WACd,QACoC;AACpC,SAAO,UAAU,SAAS;AACxB,UAAM,SAAS,MAAM,OAAO,GAAG,IAAI;AACnC,QAAI,CAAC,OAAO,SAAS;AACnB,YAAM,IAAI,MAAM,OAAO,SAAS,mBAAmB;AAAA,IACrD;AACA,WAAO,OAAO;AAAA,EAChB;AACF;","names":[]}
+{"version":3,"sources":["../../src/utils/withAction.ts"],"sourcesContent":["import type { ActionResult } from '../infra/api/types';\r\n\r\nexport function withAction<TArgs extends any[], TData>(\r\n  action: (...args: TArgs) => Promise<ActionResult<TData>>\r\n): (...args: TArgs) => Promise<TData> {\r\n  return async (...args) => {\r\n    const result = await action(...args);\r\n    if (!result.success) {\r\n      throw new Error(result.error ?? 'Erro desconhecido');\r\n    }\r\n    return result.data as TData;\r\n  };\r\n}\r\n"],"mappings":"AAEO,SAAS,WACd,QACoC;AACpC,SAAO,UAAU,SAAS;AACxB,UAAM,SAAS,MAAM,OAAO,GAAG,IAAI;AACnC,QAAI,CAAC,OAAO,SAAS;AACnB,YAAM,IAAI,MAAM,OAAO,SAAS,mBAAmB;AAAA,IACrD;AACA,WAAO,OAAO;AAAA,EAChB;AACF;","names":[]}

package/package.json

@@ -1,90 +1,89 @@
-{
-  "name": "@greatapps/common",
-  "version": "1.1.218",
-  "description": "Shared library for GreatApps frontend applications",
-  "main": "./dist/index.mjs",
-  "types": "./src/index.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/index.mjs",
-      "types": "./src/index.ts"
-    },
-    "./server": {
-      "import": "./dist/server.mjs",
-      "types": "./src/server.ts"
-    },
-    "./middleware": {
-      "import": "./dist/middleware.mjs",
-      "types": "./src/middleware.ts"
-    }
-  },
-  "files": [
-    "dist",
-    "src"
-  ],
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "typecheck": "tsc --noEmit"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "@greatapps/cache": "^2.0.1",
-    "@radix-ui/react-accordion": "^1.2.12",
-    "@radix-ui/react-checkbox": "^1.3.3",
-    "@radix-ui/react-popover": "^1.1.15",
-    "@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",
-    "@radix-ui/react-tooltip": "^1.2.8",
-    "@tabler/icons-react": "^3.40.0",
-    "@tanstack/query-broadcast-client-experimental": "^5.95.2",
-    "@tanstack/react-query-persist-client": "^5.95.2",
-    "axios": "^1.13.6",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "cmdk": "^1.1.1",
-    "date-fns": "^4.1.0",
-    "idb-keyval": "^6.2.2",
-    "input-otp": "^1.4.2",
-    "libphonenumber-js": "^1.12.40",
-    "lucide-react": "^0.575.0",
-    "react-day-picker": "^9.14.0",
-    "server-only": "^0.0.1",
-    "sonner": ">=2.0.0",
-    "tailwind-merge": "^3.5.0",
-    "zod": "^4.3.6"
-  },
-  "devDependencies": {
-    "@hookform/resolvers": "^5.2.2",
-    "@tanstack/react-query": "^5.95.2",
-    "@tanstack/react-query-devtools": "^5.95.2",
-    "@types/node": "^25.5.0",
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
-    "glob": "^13.0.6",
-    "next": "16.2.1",
-    "react": "19.1.4",
-    "react-dom": "19.1.4",
-    "react-hook-form": "^7.72.0",
-    "tsup": "^8.5.1",
-    "typescript": "^5.9.3",
-    "zustand": "^5.0.12"
-  },
-  "peerDependencies": {
-    "@hookform/resolvers": ">=3.0.0",
-    "@tanstack/react-query": ">=5.0.0",
-    "next": ">=16.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"
-  }
-}
+{
+  "name": "@greatapps/common",
+  "version": "1.1.219",
+  "description": "Shared library for GreatApps frontend applications",
+  "main": "./dist/index.mjs",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "types": "./src/index.ts"
+    },
+    "./server": {
+      "import": "./dist/server.mjs",
+      "types": "./src/server.ts"
+    },
+    "./middleware": {
+      "import": "./dist/middleware.mjs",
+      "types": "./src/middleware.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@greatapps/cache": "^2.0.1",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@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",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@tabler/icons-react": "^3.40.0",
+    "@tanstack/query-broadcast-client-experimental": "^5.95.2",
+    "@tanstack/react-query-persist-client": "^5.95.2",
+    "axios": "^1.13.6",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "idb-keyval": "^6.2.2",
+    "input-otp": "^1.4.2",
+    "libphonenumber-js": "^1.12.40",
+    "react-day-picker": "^9.14.0",
+    "server-only": "^0.0.1",
+    "sonner": ">=2.0.0",
+    "tailwind-merge": "^3.5.0",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "@hookform/resolvers": "^5.2.2",
+    "@tanstack/react-query": "^5.95.2",
+    "@tanstack/react-query-devtools": "^5.95.2",
+    "@types/node": "^25.5.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "glob": "^13.0.6",
+    "next": "16.2.1",
+    "react": "19.1.4",
+    "react-dom": "19.1.4",
+    "react-hook-form": "^7.72.0",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "zustand": "^5.0.12"
+  },
+  "peerDependencies": {
+    "@hookform/resolvers": ">=3.0.0",
+    "@tanstack/react-query": ">=5.0.0",
+    "next": ">=16.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

@@ -1,6 +1,6 @@
 'use client';
 
-import { Lock, Settings2, User, X } from 'lucide-react';
+import { IconLock, IconSettings2, IconUser, IconX } from '@tabler/icons-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';
@@ -78,7 +78,7 @@ export default function ConfigurationsMyAccountModal() {
             className="size-8 flex items-center justify-center text-gray-500 cursor-pointer"
             onClick={close}
           >
-            <X size={18} />
+            <IconX size={18} />
           </button>
         </div>
         <Tabs
@@ -105,17 +105,17 @@ export default function ConfigurationsMyAccountModal() {
 
             <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" />
+                <IconUser 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" />
+                <IconSettings2 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" />
+                <IconLock size={20} className="shrink-0" />
                 <span className="paragraph-small-medium">Segurança</span>
               </TabsTrigger>
             </div>

package/src/components/account/ConfirmDeleteAccountModal.tsx

@@ -1,55 +1,55 @@
-'use client';
-
-import { TriangleAlert } from 'lucide-react';
-import { toast } from 'sonner';
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';
-import { Button } from '../ui/buttons/Button';
-import { Toast } from '../ui/feedback/Toast';
-import { useAccountModals } from '../../store/useAccountModals';
-
-export default function ConfirmDeleteAccountModal() {
-  const { activeModal, pagesCount, close } = useAccountModals();
-  const open = activeModal === 'confirmDelete';
-
-  const handleConfirm = () => {
-    toast.custom((t) => (
-      <Toast variant="success" message="Conta excluída com sucesso" toastId={t} />
-    ));
-    close();
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={close}>
-      <DialogContent className="flex flex-col p-0 gap-0 max-w-[calc(100%-2rem)]! w-full rounded-lg border sm:max-w-[400px]! lg:max-w-[470px]! lg:top-[50%]! lg:left-[50%]! lg:right-auto! lg:bottom-auto! lg:translate-x-[-50%]! lg:translate-y-[-50%]!">
-        <div className="flex flex-col gap-5 p-4 lg:p-5">
-          <DialogHeader className="p-0">
-            <DialogTitle className="paragraph-medium-semibold text-gray-950">
-              Uma pena te ver ir!
-            </DialogTitle>
-          </DialogHeader>
-
-          <div className="bg-red-50 p-4 lg:p-5 rounded-lg flex items-center gap-4">
-            <TriangleAlert size={20} className="text-red-500 shrink-0" strokeWidth={2} />
-            <p className="paragraph-small-regular text-gray-600">
-              Todas suas{' '}
-              <span className="font-semibold text-gray-950">{pagesCount} páginas</span>{' '}
-              serão deletadas permanentemente. Essa ação é{' '}
-              <span className="font-semibold text-gray-950">irreversível!</span>
-            </p>
-          </div>
-        </div>
-
-        <div className="h-px bg-gray-200" />
-
-        <div className="flex items-center gap-2 p-4 lg:p-5">
-          <Button className="h-10 flex-1" onClick={close}>
-            Manter minha conta
-          </Button>
-          <Button variant="secondary" className="h-10! flex-1" onClick={handleConfirm}>
-            Excluir mesmo assim
-          </Button>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}
+'use client';
+
+import { IconAlertTriangle } from '@tabler/icons-react';
+import { toast } from 'sonner';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';
+import { Button } from '../ui/buttons/Button';
+import { Toast } from '../ui/feedback/Toast';
+import { useAccountModals } from '../../store/useAccountModals';
+
+export default function ConfirmDeleteAccountModal() {
+  const { activeModal, pagesCount, close } = useAccountModals();
+  const open = activeModal === 'confirmDelete';
+
+  const handleConfirm = () => {
+    toast.custom((t) => (
+      <Toast variant="success" message="Conta excluída com sucesso" toastId={t} />
+    ));
+    close();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={close}>
+      <DialogContent className="flex flex-col p-0 gap-0 max-w-[calc(100%-2rem)]! w-full rounded-lg border sm:max-w-[400px]! lg:max-w-[470px]! lg:top-[50%]! lg:left-[50%]! lg:right-auto! lg:bottom-auto! lg:translate-x-[-50%]! lg:translate-y-[-50%]!">
+        <div className="flex flex-col gap-5 p-4 lg:p-5">
+          <DialogHeader className="p-0">
+            <DialogTitle className="paragraph-medium-semibold text-gray-950">
+              Uma pena te ver ir!
+            </DialogTitle>
+          </DialogHeader>
+
+          <div className="bg-red-50 p-4 lg:p-5 rounded-lg flex items-center gap-4">
+            <IconAlertTriangle size={20} className="text-red-500 shrink-0" strokeWidth={2} />
+            <p className="paragraph-small-regular text-gray-600">
+              Todas suas{' '}
+              <span className="font-semibold text-gray-950">{pagesCount} páginas</span>{' '}
+              serão deletadas permanentemente. Essa ação é{' '}
+              <span className="font-semibold text-gray-950">irreversível!</span>
+            </p>
+          </div>
+        </div>
+
+        <div className="h-px bg-gray-200" />
+
+        <div className="flex items-center gap-2 p-4 lg:p-5">
+          <Button className="h-10 flex-1" onClick={close}>
+            Manter minha conta
+          </Button>
+          <Button variant="secondary" className="h-10! flex-1" onClick={handleConfirm}>
+            Excluir mesmo assim
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/account/ConfirmGlobalPreferencesModal.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { TriangleAlert } from 'lucide-react';
+import { IconAlertTriangle } from '@tabler/icons-react';
 import { Button } from '../ui/buttons/Button';
 import {
   Dialog,
@@ -34,7 +34,7 @@ export default function ConfirmGlobalPreferencesModal({
 
         <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" />
+            <IconAlertTriangle size={24} className="text-gray-950" />
           </div>
           <div className="flex flex-col gap-2">
             <span className="paragraph-medium-semibold text-gray-950">

package/src/components/account/DeleteAccountModal.tsx

@@ -1,130 +1,130 @@
-'use client';
-
-import { useState, useCallback } from 'react';
-import { Lock, TriangleAlert } from 'lucide-react';
-import { toast } from 'sonner';
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';
-import { Button } from '../ui/buttons/Button';
-import { FormField } from '../ui/form/FormField';
-import { SelectField } from '../ui/form/SelectField';
-import { TextAreaField } from '../ui/form/TextAreaField';
-import { Toast } from '../ui/feedback/Toast';
-import usePasswordVisibility from '../../hooks/usePasswordVisibility';
-import { useAccountModals } from '../../store/useAccountModals';
-import { AccountSectionType } from '../../enums/AccountSectionType';
-
-const REASON_OPTIONS = [
-  { value: 'sem-funcao', label: 'A ferramenta não possui uma função que eu preciso' },
-  { value: 'problemas', label: 'Encontrei problemas técnicos ou erros no sistema' },
-  { value: 'suporte', label: 'Tive problemas com o suporte ou atendimento' },
-  { value: 'demora', label: 'As atualizações demoram mais do que o esperado' },
-  { value: 'temporario', label: 'O cancelamento é temporário' },
-  { value: 'outro', label: 'Outro motivo' },
-];
-
-export default function DeleteAccountModal() {
-  const { activeModal, pagesCount, openConfigurations, openConfirmDelete, close } = useAccountModals();
-  const open = activeModal === 'deleteAccount';
-
-  const [reason, setReason] = useState('');
-  const [description, setDescription] = useState('');
-  const [password, setPassword] = useState('');
-  const { showPassword, togglePassword } = usePasswordVisibility();
-
-  const isFormValid = Boolean(reason && description && password);
-
-  const resetForm = useCallback(() => {
-    setReason('');
-    setDescription('');
-    setPassword('');
-  }, []);
-
-  const handleClose = () => {
-    resetForm();
-    openConfigurations(AccountSectionType.SECURITY);
-  };
-
-  const handleDelete = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!isFormValid) {
-      toast.custom((t) => (
-        <Toast variant="error" message="Preencha todos os campos obrigatórios" toastId={t} />
-      ));
-      return;
-    }
-    resetForm();
-    openConfirmDelete(pagesCount);
-  };
-
-  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-[100dvh] top-0! bottom-0! left-0! right-0! translate-x-0! translate-y-0! lg:max-w-lg! 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%]! overflow-y-auto">
-        <form onSubmit={handleDelete} className="flex flex-col flex-1 lg:flex-none">
-          <div className="flex flex-col gap-6 p-4 lg:p-6 flex-1 lg:flex-none">
-            <DialogHeader className="p-0">
-              <div className="flex items-center justify-center w-fit bg-red-50 rounded-lg p-2.5 mb-5">
-                <TriangleAlert size={20} className="text-red-500" />
-              </div>
-              <DialogTitle>Excluir conta</DialogTitle>
-              <DialogDescription className="paragraph-small-regular">
-                Esta ação é <span className="font-semibold text-gray-950">irreversível</span>. Ao
-                confirmar, sua conta e todos os seus dados serão excluídos.
-              </DialogDescription>
-            </DialogHeader>
-
-            <SelectField
-              label="Motivo do cancelamento"
-              required
-              placeholder="Selecione"
-              options={REASON_OPTIONS}
-              value={reason}
-              onChange={(value) => setReason(value as string)}
-              className="h-10!"
-            />
-
-            <div>
-              <TextAreaField
-                label="Descreva o que levou a tomar essa decisão"
-                required
-                placeholder="Explique sua decisão..."
-                value={description}
-                onChange={(e) => setDescription(e.target.value)}
-                rows={4}
-                maxLength={400}
-              />
-              <span className="paragraph-xsmall-medium text-gray-600 text-left mt-1 block">
-                {description.length}/400 caracteres
-              </span>
-            </div>
-
-            <FormField
-              className="text-gray-600"
-              label="Senha"
-              type="password"
-              placeholder="Informe sua senha"
-              leftIcon={Lock}
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              classnameContainer="h-10!"
-              showPassword={showPassword}
-              onTogglePassword={togglePassword}
-            />
-          </div>
-
-          <div className="flex flex-row items-center gap-2 p-4 lg:p-6 border-t border-gray-200 bg-white mt-auto lg:mt-0">
-            <Button
-              variant="default"
-              className="h-10 flex-1 bg-gray-950 text-white hover:bg-gray-800"
-              type="submit"
-            >
-              Excluir conta
-            </Button>
-            <Button variant="secondary" className="h-10 flex-1" type="button" onClick={handleClose}>
-              Fechar
-            </Button>
-          </div>
-        </form>
-      </DialogContent>
-    </Dialog>
-  );
-}
+'use client';
+
+import { useState, useCallback } from 'react';
+import { IconLock, IconAlertTriangle } from '@tabler/icons-react';
+import { toast } from 'sonner';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';
+import { Button } from '../ui/buttons/Button';
+import { FormField } from '../ui/form/FormField';
+import { SelectField } from '../ui/form/SelectField';
+import { TextAreaField } from '../ui/form/TextAreaField';
+import { Toast } from '../ui/feedback/Toast';
+import usePasswordVisibility from '../../hooks/usePasswordVisibility';
+import { useAccountModals } from '../../store/useAccountModals';
+import { AccountSectionType } from '../../enums/AccountSectionType';
+
+const REASON_OPTIONS = [
+  { value: 'sem-funcao', label: 'A ferramenta não possui uma função que eu preciso' },
+  { value: 'problemas', label: 'Encontrei problemas técnicos ou erros no sistema' },
+  { value: 'suporte', label: 'Tive problemas com o suporte ou atendimento' },
+  { value: 'demora', label: 'As atualizações demoram mais do que o esperado' },
+  { value: 'temporario', label: 'O cancelamento é temporário' },
+  { value: 'outro', label: 'Outro motivo' },
+];
+
+export default function DeleteAccountModal() {
+  const { activeModal, pagesCount, openConfigurations, openConfirmDelete, close } = useAccountModals();
+  const open = activeModal === 'deleteAccount';
+
+  const [reason, setReason] = useState('');
+  const [description, setDescription] = useState('');
+  const [password, setPassword] = useState('');
+  const { showPassword, togglePassword } = usePasswordVisibility();
+
+  const isFormValid = Boolean(reason && description && password);
+
+  const resetForm = useCallback(() => {
+    setReason('');
+    setDescription('');
+    setPassword('');
+  }, []);
+
+  const handleClose = () => {
+    resetForm();
+    openConfigurations(AccountSectionType.SECURITY);
+  };
+
+  const handleDelete = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!isFormValid) {
+      toast.custom((t) => (
+        <Toast variant="error" message="Preencha todos os campos obrigatórios" toastId={t} />
+      ));
+      return;
+    }
+    resetForm();
+    openConfirmDelete(pagesCount);
+  };
+
+  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-[100dvh] top-0! bottom-0! left-0! right-0! translate-x-0! translate-y-0! lg:max-w-lg! 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%]! overflow-y-auto">
+        <form onSubmit={handleDelete} className="flex flex-col flex-1 lg:flex-none">
+          <div className="flex flex-col gap-6 p-4 lg:p-6 flex-1 lg:flex-none">
+            <DialogHeader className="p-0">
+              <div className="flex items-center justify-center w-fit bg-red-50 rounded-lg p-2.5 mb-5">
+                <IconAlertTriangle size={20} className="text-red-500" />
+              </div>
+              <DialogTitle>Excluir conta</DialogTitle>
+              <DialogDescription className="paragraph-small-regular">
+                Esta ação é <span className="font-semibold text-gray-950">irreversível</span>. Ao
+                confirmar, sua conta e todos os seus dados serão excluídos.
+              </DialogDescription>
+            </DialogHeader>
+
+            <SelectField
+              label="Motivo do cancelamento"
+              required
+              placeholder="Selecione"
+              options={REASON_OPTIONS}
+              value={reason}
+              onChange={(value) => setReason(value as string)}
+              className="h-10!"
+            />
+
+            <div>
+              <TextAreaField
+                label="Descreva o que levou a tomar essa decisão"
+                required
+                placeholder="Explique sua decisão..."
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                rows={4}
+                maxLength={400}
+              />
+              <span className="paragraph-xsmall-medium text-gray-600 text-left mt-1 block">
+                {description.length}/400 caracteres
+              </span>
+            </div>
+
+            <FormField
+              className="text-gray-600"
+              label="Senha"
+              type="password"
+              placeholder="Informe sua senha"
+              leftIcon={IconLock}
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              classnameContainer="h-10!"
+              showPassword={showPassword}
+              onTogglePassword={togglePassword}
+            />
+          </div>
+
+          <div className="flex flex-row items-center gap-2 p-4 lg:p-6 border-t border-gray-200 bg-white mt-auto lg:mt-0">
+            <Button
+              variant="default"
+              className="h-10 flex-1 bg-gray-950 text-white hover:bg-gray-800"
+              type="submit"
+            >
+              Excluir conta
+            </Button>
+            <Button variant="secondary" className="h-10 flex-1" type="button" onClick={handleClose}>
+              Fechar
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}