@greatapps/common 1.1.23 → 1.1.25

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/account/sections/MyProfileSection.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { useState, useRef } from 'react';\r\nimport Image from 'next/image';\r\nimport { useForm } from 'react-hook-form';\r\nimport { zodResolver } from '@hookform/resolvers/zod';\r\nimport { toast } from 'sonner';\r\nimport { Upload, Trash } from 'lucide-react';\r\nimport { Button } from '../../ui/buttons/Button';\r\nimport { Separator } from '../../ui/data-display/Separator';\r\nimport { Toast } from '../../ui/feedback/Toast';\r\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../ui/overlay/Dialog';\r\nimport { FormField } from '../../ui/form/FormField';\r\nimport { SelectField } from '../../ui/form/SelectField';\r\nimport PhoneInput from '../../ui/form/PhoneInput';\r\nimport { useAuth } from '../../../providers/auth.provider';\r\nimport { UserProfile } from '../../../modules/users/schema';\r\nimport { myProfileSchema, type MyProfileFormData } from '../../../utils/validators/account';\r\nimport {\r\n  useUpdateAccountUser,\r\n  useDeleteAccount,\r\n  useDeleteAccountUser,\r\n} from '../../../modules/accounts/hooks/useAccountManagement';\r\nimport { GENDER_OPTIONS } from '../constants';\r\nimport { ChangePhoneModal } from './ChangePhoneModal';\r\nimport { ChangeEmailModal } from './ChangeEmailModal';\r\n\r\ninterface MyProfileSectionProps {\r\n  onClose: () => void;\r\n  storageUrl?: string;\r\n}\r\n\r\nexport function MyProfileSection({ onClose, storageUrl }: MyProfileSectionProps) {\r\n  const { user, logout } = useAuth();\r\n  const updateAccountUser = useUpdateAccountUser();\r\n  const deleteAccount = useDeleteAccount();\r\n  const deleteAccountUser = useDeleteAccountUser();\r\n  const fileInputRef = useRef<HTMLInputElement>(null);\r\n  const [selectedPhoto, setSelectedPhoto] = useState<File | null>(null);\r\n  const [photoRemoved, setPhotoRemoved] = useState(false);\r\n  const [changePhoneOpen, setChangePhoneOpen] = useState(false);\r\n  const [changeEmailOpen, setChangeEmailOpen] = useState(false);\r\n  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);\r\n\r\n  const isOwner = user?.profile === UserProfile.owner;\r\n  const isDeleting = deleteAccount.isPending || deleteAccountUser.isPending;\r\n\r\n  const form = useForm<MyProfileFormData>({\r\n    resolver: zodResolver(myProfileSchema),\r\n    mode: 'onChange',\r\n    defaultValues: {\r\n      name: user?.name ?? '',\r\n      gender: GENDER_OPTIONS.find((g) => g.apiValue === user?.gender)?.value ?? '',\r\n    },\r\n  });\r\n\r\n  const {\r\n    register,\r\n    handleSubmit,\r\n    watch,\r\n    setValue,\r\n    formState: { errors, isSubmitting },\r\n  } = form;\r\n\r\n  const baseStorageUrl = storageUrl ?? process.env.NEXT_PUBLIC_STORAGE_URL ?? '';\r\n\r\n  const avatarPreview = selectedPhoto\r\n    ? URL.createObjectURL(selectedPhoto)\r\n    : !photoRemoved && user?.photo\r\n      ? `${baseStorageUrl}/${user.photo}`\r\n      : null;\r\n\r\n  const handlePhotoChange = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n    const file = e.target.files?.[0] ?? null;\r\n    if (file) {\r\n      setSelectedPhoto(file);\r\n      setPhotoRemoved(false);\r\n    }\r\n  };\r\n\r\n  const handleRemovePhoto = () => {\r\n    setSelectedPhoto(null);\r\n    setPhotoRemoved(true);\r\n  };\r\n\r\n  const handleDelete = async () => {\r\n    const result = isOwner\r\n      ? await deleteAccount.mutateAsync()\r\n      : await deleteAccountUser.mutateAsync(user!.id);\r\n\r\n    if (!result.success) {\r\n      toast.custom((t) => (\r\n        <Toast\r\n          variant=\"error\"\r\n          message={result.error ?? 'Erro ao excluir. Tente novamente.'}\r\n          toastId={t}\r\n        />\r\n      ));\r\n      setDeleteConfirmOpen(false);\r\n      return;\r\n    }\r\n\r\n    await logout();\r\n  };\r\n\r\n  const onSubmit = async (data: MyProfileFormData) => {\r\n    const result = await updateAccountUser.mutateAsync({\r\n      name: data.name,\r\n      gender: GENDER_OPTIONS.find((g) => g.value === data.gender)?.apiValue,\r\n      ...(selectedPhoto ? { photo: selectedPhoto } : {}),\r\n      ...(photoRemoved ? { photo: '' } : {}),\r\n    });\r\n\r\n    if (!result.success) {\r\n      toast.custom((t) => (\r\n        <Toast variant=\"error\" message={result.error ?? 'Erro ao atualizar perfil'} toastId={t} />\r\n      ));\r\n      return;\r\n    }\r\n\r\n    form.reset(data);\r\n    setSelectedPhoto(null);\r\n    setPhotoRemoved(false);\r\n    toast.custom((t) => (\r\n      <Toast variant=\"success\" message=\"Perfil atualizado com sucesso\" toastId={t} />\r\n    ));\r\n    onClose();\r\n  };\r\n\r\n  return (\r\n    <>\r\n      <form onSubmit={handleSubmit(onSubmit)} className=\"lg:h-full lg:flex lg:flex-col\">\r\n        <input\r\n          ref={fileInputRef}\r\n          type=\"file\"\r\n          accept=\"image/*\"\r\n          className=\"hidden\"\r\n          onChange={handlePhotoChange}\r\n        />\r\n        <div className=\"absolute inset-0 overflow-y-auto overscroll-contain px-4 pb-20 lg:p-5 lg:static lg:flex-1 lg:min-h-0 lg:overscroll-auto flex flex-col gap-5 lg:gap-6\">\r\n          <span className=\"paragraph-medium-semibold text-gray-950 hidden lg:block\">\r\n            Meu perfil\r\n          </span>\r\n          <div className=\"flex flex-col gap-5\">\r\n            <div className=\"flex items-center gap-4\">\r\n              {avatarPreview ? (\r\n                <Image\r\n                  src={avatarPreview}\r\n                  alt=\"Foto do usuário\"\r\n                  width={48}\r\n                  height={48}\r\n                  className=\"size-12 rounded-full object-cover cursor-pointer\"\r\n                  onClick={() => fileInputRef.current?.click()}\r\n                />\r\n              ) : (\r\n                <div\r\n                  className=\"size-12 rounded-full bg-gray-50 border border-dashed border-gray-200 flex items-center justify-center cursor-pointer\"\r\n                  onClick={() => fileInputRef.current?.click()}\r\n                >\r\n                  <Upload size={20} className=\"text-gray-400\" />\r\n                </div>\r\n              )}\r\n              {avatarPreview ? (\r\n                <div className=\"flex items-center gap-2\">\r\n                  <Button\r\n                    variant=\"secondary\"\r\n                    className=\"w-fit h-8!\"\r\n                    type=\"button\"\r\n                    onClick={() => fileInputRef.current?.click()}\r\n                  >\r\n                    Alterar foto\r\n                  </Button>\r\n                  <Button\r\n                    type=\"button\"\r\n                    variant=\"ghost\"\r\n                    className=\"h-8!\"\r\n                    onClick={handleRemovePhoto}\r\n                  >\r\n                    <Trash size={16} className=\"text-gray-500\" />\r\n                  </Button>\r\n                </div>\r\n              ) : (\r\n                <Button\r\n                  variant=\"secondary\"\r\n                  className=\"w-fit h-8!\"\r\n                  type=\"button\"\r\n                  onClick={() => fileInputRef.current?.click()}\r\n                >\r\n                  Alterar foto\r\n                </Button>\r\n              )}\r\n            </div>\r\n\r\n            <div className=\"flex flex-col gap-8\">\r\n              <div className=\"flex flex-col gap-4\">\r\n                <FormField\r\n                  label=\"Nome completo\"\r\n                  placeholder=\"Digite seu nome\"\r\n                  error={!!errors.name}\r\n                  errorMessage={errors.name?.message}\r\n                  {...register('name')}\r\n                />\r\n                <SelectField\r\n                  label=\"Gênero\"\r\n                  placeholder=\"Selecione seu gênero\"\r\n                  options={GENDER_OPTIONS}\r\n                  value={watch('gender')}\r\n                  className=\"h-10!\"\r\n                  onChange={(value) => setValue('gender', value as string)}\r\n                />\r\n                <div className=\"relative\">\r\n                  <PhoneInput\r\n                    label=\"Telefone\"\r\n                    value={user?.phone ?? ''}\r\n                    disabled\r\n                    classnameContainer=\"bg-gray-50 border-0!\"\r\n                  />\r\n                  <button\r\n                    type=\"button\"\r\n                    className=\"absolute right-3 top-5.5 h-10 flex items-center paragraph-xsmall-semibold text-gray-950 underline cursor-pointer\"\r\n                    onClick={() => setChangePhoneOpen(true)}\r\n                  >\r\n                    Alterar\r\n                  </button>\r\n                </div>\r\n              </div>\r\n\r\n              <Separator />\r\n\r\n              <div className=\"flex flex-col gap-4\">\r\n                <span className=\"paragraph-medium-semibold text-gray-600\">Dados de acesso</span>\r\n                <div className=\"relative\">\r\n                  <FormField\r\n                    label=\"E-mail\"\r\n                    value={user?.email ?? ''}\r\n                    disabled\r\n                    classnameContainer=\"bg-gray-50 border-0!\"\r\n                  />\r\n                  <button\r\n                    type=\"button\"\r\n                    className=\"absolute right-3 top-5.5 h-10 flex items-center paragraph-xsmall-semibold text-gray-950 underline cursor-pointer\"\r\n                    onClick={() => setChangeEmailOpen(true)}\r\n                  >\r\n                    Alterar\r\n                  </button>\r\n                </div>\r\n              </div>\r\n\r\n              <Separator />\r\n\r\n              <div className=\"flex flex-col gap-3\">\r\n                <span className=\"paragraph-medium-semibold text-gray-600\">Zona de risco</span>\r\n                <div className=\"flex items-center justify-between\">\r\n                  <div className=\"flex flex-col gap-0.5\">\r\n                    <span className=\"paragraph-small-medium text-gray-950\">\r\n                      {isOwner ? 'Excluir conta' : 'Excluir usuário'}\r\n                    </span>\r\n                    <span className=\"paragraph-xsmall-medium text-gray-500\">\r\n                      {isOwner\r\n                        ? 'Esta ação é irreversível e apagará todos os dados.'\r\n                        : 'Você será removido permanentemente desta conta.'}\r\n                    </span>\r\n                  </div>\r\n                  <Button\r\n                    type=\"button\"\r\n                    variant=\"ghost\"\r\n                    className=\"h-8! text-red-600 hover:text-red-700 hover:bg-red-50 shrink-0\"\r\n                    onClick={() => setDeleteConfirmOpen(true)}\r\n                  >\r\n                    Excluir\r\n                  </Button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div className=\"fixed bottom-0 left-0 right-0 lg:static flex items-center h-20 px-4 lg:px-5 border-t border-gray-200 justify-between bg-white z-10\">\r\n          <Button\r\n            variant=\"secondary\"\r\n            className=\"h-10!\"\r\n            type=\"button\"\r\n            disabled={isSubmitting}\r\n            onClick={() => {\r\n              form.reset();\r\n              setSelectedPhoto(null);\r\n              setPhotoRemoved(false);\r\n              onClose();\r\n            }}\r\n          >\r\n            Cancelar\r\n          </Button>\r\n          <Button className=\"h-10! cursor-pointer\" type=\"submit\" disabled={isSubmitting}>\r\n            {isSubmitting ? 'Salvando...' : 'Salvar alterações'}\r\n          </Button>\r\n        </div>\r\n      </form>\r\n\r\n      <ChangePhoneModal open={changePhoneOpen} onClose={() => setChangePhoneOpen(false)} />\r\n      <ChangeEmailModal open={changeEmailOpen} onClose={() => setChangeEmailOpen(false)} />\r\n\r\n      <Dialog open={deleteConfirmOpen} onOpenChange={setDeleteConfirmOpen}>\r\n        <DialogContent className=\"max-w-sm! gap-5\">\r\n          <DialogHeader>\r\n            <DialogTitle className=\"paragraph-large-semibold text-gray-950\">\r\n              {isOwner ? 'Excluir conta' : 'Excluir usuário'}\r\n            </DialogTitle>\r\n          </DialogHeader>\r\n          <p className=\"paragraph-small-regular text-gray-600\">\r\n            {isOwner\r\n              ? 'Tem certeza que deseja excluir sua conta? Todos os dados serão apagados permanentemente e essa ação não pode ser desfeita.'\r\n              : 'Tem certeza que deseja excluir seu usuário? Você perderá acesso a esta conta permanentemente.'}\r\n          </p>\r\n          <div className=\"flex items-center gap-3 justify-end\">\r\n            <Button\r\n              type=\"button\"\r\n              variant=\"secondary\"\r\n              className=\"h-10!\"\r\n              disabled={isDeleting}\r\n              onClick={() => setDeleteConfirmOpen(false)}\r\n            >\r\n              Cancelar\r\n            </Button>\r\n            <Button\r\n              type=\"button\"\r\n              className=\"h-10! bg-red-600 hover:bg-red-700 text-white border-0!\"\r\n              disabled={isDeleting}\r\n              onClick={handleDelete}\r\n            >\r\n              {isDeleting ? 'Excluindo...' : 'Confirmar exclusão'}\r\n            </Button>\r\n          </div>\r\n        </DialogContent>\r\n      </Dialog>\r\n    </>\r\n  );\r\n}\r\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,246 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { Lock, Mail, MessageCircle } from "lucide-react";
+import { Button } from "../../ui/buttons/Button";
+import { Separator } from "../../ui/data-display/Separator";
+import { Toast } from "../../ui/feedback/Toast";
+import { ComboboxField } from "../../ui/form/ComboboxField";
+import { SelectField } from "../../ui/form/SelectField";
+import SwitchOptionFieldWithIcon from "../../ui/form/SwitchOptionFieldWithIcon";
+import ConfirmGlobalPreferencesModal from "../ConfirmGlobalPreferencesModal";
+import { useAuth } from "../../../providers/auth.provider";
+import { UserProfile } from "../../../modules/users/schema";
+import {
+  useUpdateAccountUser,
+  useUpdateAccount
+} from "../../../modules/accounts/hooks/useAccountManagement";
+import {
+  LANGUAGE_OPTIONS,
+  TIMEZONE_OPTIONS,
+  TIME_FORMAT_OPTIONS,
+  NOTIFICATION_TYPES
+} from "../constants";
+function PreferencesSection({ onClose, currencies = [] }) {
+  const { user, account } = useAuth();
+  const canEditPreferences = user?.profile === UserProfile.owner || user?.profile === UserProfile.admin;
+  const updateAccountUser = useUpdateAccountUser();
+  const updateAccount = useUpdateAccount();
+  const [confirmGlobalOpen, setConfirmGlobalOpen] = useState(false);
+  const [pendingSubmit, setPendingSubmit] = useState(null);
+  const [isSaving, setIsSaving] = useState(false);
+  const { watch, setValue, handleSubmit, reset, formState: { dirtyFields } } = useForm({
+    defaultValues: {
+      language: "",
+      currency: "",
+      timezone: "",
+      timeFormat: "24h",
+      receive_sms: false,
+      receive_email: false
+    }
+  });
+  useEffect(() => {
+    if (!user || !account) return;
+    reset({
+      language: LANGUAGE_OPTIONS.find(
+        (o) => o.apiValue === user.language?.toLowerCase()
+      )?.value ?? "pt-BR",
+      currency: account.currency,
+      timezone: account.timezone,
+      timeFormat: "24h",
+      receive_sms: user.receive_sms ?? false,
+      receive_email: user.receive_email ?? false
+    });
+  }, [user, account, reset]);
+  const receiveSms = watch("receive_sms");
+  const receiveEmail = watch("receive_email");
+  const doSave = async (data, accountFields) => {
+    setIsSaving(true);
+    try {
+      const apiLanguage = LANGUAGE_OPTIONS.find((o) => o.value === data.language)?.apiValue ?? data.language.toLowerCase();
+      const userResult = await updateAccountUser.mutateAsync({
+        language: apiLanguage,
+        receive_sms: data.receive_sms,
+        receive_email: data.receive_email
+      });
+      if (!userResult.success) {
+        toast.custom((t) => /* @__PURE__ */ jsx(Toast, { variant: "error", message: userResult.error ?? "Erro ao salvar prefer\xEAncias", toastId: t }));
+        return;
+      }
+      if (canEditPreferences && Object.keys(accountFields).length > 0) {
+        const accountResult = await updateAccount.mutateAsync(accountFields);
+        if (!accountResult.success) {
+          toast.custom((t) => /* @__PURE__ */ jsx(Toast, { variant: "error", message: accountResult.error ?? "Erro ao salvar prefer\xEAncias da conta", toastId: t }));
+          return;
+        }
+      }
+      reset(data);
+      toast.custom((t) => /* @__PURE__ */ jsx(Toast, { variant: "success", message: "Prefer\xEAncias salvas com sucesso", toastId: t }));
+      onClose();
+    } finally {
+      setIsSaving(false);
+    }
+  };
+  const onSubmit = (data) => {
+    const accountFields = {
+      ...canEditPreferences && dirtyFields.currency && { currency: data.currency },
+      ...canEditPreferences && dirtyFields.timezone && { timezone: data.timezone }
+    };
+    const globalFieldChanged = Object.keys(accountFields).length > 0;
+    if (globalFieldChanged) {
+      setPendingSubmit({ data, accountFields });
+      setConfirmGlobalOpen(true);
+    } else {
+      doSave(data, accountFields);
+    }
+  };
+  const handleConfirmGlobal = () => {
+    setConfirmGlobalOpen(false);
+    if (pendingSubmit) {
+      doSave(pendingSubmit.data, pendingSubmit.accountFields);
+      setPendingSubmit(null);
+    }
+  };
+  const handleCancelGlobal = () => {
+    setConfirmGlobalOpen(false);
+    setPendingSubmit(null);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit(onSubmit), className: "lg:h-full lg:flex lg:flex-col", children: [
+      /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 overflow-y-auto overscroll-contain px-4 pb-36 lg:p-5 lg:static lg:flex-1 lg:min-h-0 lg:overscroll-auto flex flex-col gap-5 lg:gap-6", children: [
+        /* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-gray-950", children: "Prefer\xEAncias" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col lg:flex-row items-center gap-3", children: [
+            /* @__PURE__ */ jsx(
+              ComboboxField,
+              {
+                label: "Idioma",
+                placeholder: "Selecione o idioma",
+                searchPlaceholder: "Buscar idioma...",
+                containerClassName: "w-full",
+                options: LANGUAGE_OPTIONS,
+                value: watch("language"),
+                onChange: (value) => setValue("language", value, { shouldDirty: true })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ComboboxField,
+              {
+                label: "Moeda",
+                placeholder: "Selecione a moeda",
+                searchPlaceholder: "Buscar moeda...",
+                containerClassName: "w-full",
+                options: currencies,
+                value: watch("currency"),
+                onChange: (value) => setValue("currency", value, { shouldDirty: true }),
+                icon: !canEditPreferences ? /* @__PURE__ */ jsx(Lock, { className: "size-4 text-gray-400" }) : void 0,
+                disabled: !canEditPreferences
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(Separator, {}),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+            /* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-gray-600", children: "Exibi\xE7\xE3o hora" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col lg:flex-row items-center gap-3", children: [
+              /* @__PURE__ */ jsx(
+                ComboboxField,
+                {
+                  label: "Fuso hor\xE1rio",
+                  placeholder: "Selecione o fuso hor\xE1rio",
+                  searchPlaceholder: "Buscar fuso hor\xE1rio...",
+                  containerClassName: "w-full",
+                  options: TIMEZONE_OPTIONS,
+                  value: watch("timezone"),
+                  onChange: (value) => setValue("timezone", value, { shouldDirty: true }),
+                  icon: !canEditPreferences ? /* @__PURE__ */ jsx(Lock, { className: "size-4 text-gray-400" }) : void 0,
+                  disabled: !canEditPreferences
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                SelectField,
+                {
+                  label: "Formato hora",
+                  placeholder: "Selecione o formato",
+                  className: "h-10!",
+                  containerClassName: "w-full",
+                  options: TIME_FORMAT_OPTIONS,
+                  value: watch("timeFormat"),
+                  onChange: (value) => setValue("timeFormat", value, { shouldDirty: true }),
+                  icon: /* @__PURE__ */ jsx(Lock, { className: "size-4 text-gray-400" }),
+                  disabled: true
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(Separator, {}),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+            /* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-gray-600", children: "Notifica\xE7\xF5es" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col border border-gray-200 rounded-lg", children: [
+                /* @__PURE__ */ jsx(
+                  SwitchOptionFieldWithIcon,
+                  {
+                    icon: MessageCircle,
+                    label: "WhatsApp",
+                    description: "Receber notifica\xE7\xF5es importantes por WhatsApp",
+                    checked: receiveSms,
+                    onCheckedChange: (val) => setValue("receive_sms", val, { shouldDirty: true })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  SwitchOptionFieldWithIcon,
+                  {
+                    icon: Mail,
+                    label: "E-mail",
+                    description: "Receber notifica\xE7\xF5es e atualiza\xE7\xF5es por email",
+                    checked: receiveEmail,
+                    onCheckedChange: (val) => setValue("receive_email", val, { shouldDirty: true }),
+                    hideBorderBottom: true
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 p-5 pb-6 rounded-lg bg-gray-50", children: [
+                /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-gray-950", children: "Tipos de notifica\xE7\xF5es incluem:" }),
+                /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: NOTIFICATION_TYPES.map((type) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx("div", { className: "size-1 rounded-full bg-gray-600" }),
+                  /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-gray-600", children: type })
+                ] }, type)) })
+              ] })
+            ] })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "fixed bottom-0 left-0 right-0 lg:static flex items-center h-20 px-4 lg:px-5 border-t border-gray-200 justify-between bg-white z-10", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "secondary",
+            className: "h-10!",
+            type: "button",
+            disabled: isSaving,
+            onClick: () => {
+              reset();
+              onClose();
+            },
+            children: "Cancelar"
+          }
+        ),
+        /* @__PURE__ */ jsx(Button, { className: "h-10!", type: "submit", disabled: isSaving, children: isSaving ? "Salvando..." : "Salvar altera\xE7\xF5es" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      ConfirmGlobalPreferencesModal,
+      {
+        open: confirmGlobalOpen,
+        onConfirm: handleConfirmGlobal,
+        onCancel: handleCancelGlobal
+      }
+    )
+  ] });
+}
+export {
+  PreferencesSection
+};
+//# sourceMappingURL=PreferencesSection.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/account/sections/PreferencesSection.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { useState, useEffect } from 'react';\r\nimport { useForm } from 'react-hook-form';\r\nimport { toast } from 'sonner';\r\nimport { Lock, Mail, MessageCircle } from 'lucide-react';\r\nimport { Button } from '../../ui/buttons/Button';\r\nimport { Separator } from '../../ui/data-display/Separator';\r\nimport { Toast } from '../../ui/feedback/Toast';\r\nimport { ComboboxField, type ComboboxOption } from '../../ui/form/ComboboxField';\r\nimport { SelectField } from '../../ui/form/SelectField';\r\nimport SwitchOptionFieldWithIcon from '../../ui/form/SwitchOptionFieldWithIcon';\r\nimport ConfirmGlobalPreferencesModal from '../ConfirmGlobalPreferencesModal';\r\nimport { useAuth } from '../../../providers/auth.provider';\r\nimport { UserProfile } from '../../../modules/users/schema';\r\nimport type { UpdateAccountRequest } from '../../../modules/accounts/types';\r\nimport {\r\n  useUpdateAccountUser,\r\n  useUpdateAccount,\r\n} from '../../../modules/accounts/hooks/useAccountManagement';\r\nimport {\r\n  LANGUAGE_OPTIONS,\r\n  TIMEZONE_OPTIONS,\r\n  TIME_FORMAT_OPTIONS,\r\n  NOTIFICATION_TYPES,\r\n} from '../constants';\r\n\r\ninterface PreferencesFormValues {\r\n  language: string;\r\n  currency: string;\r\n  timezone: string;\r\n  timeFormat: string;\r\n  receive_sms: boolean;\r\n  receive_email: boolean;\r\n}\r\n\r\ninterface PreferencesSectionProps {\r\n  onClose: () => void;\r\n  currencies?: ComboboxOption[];\r\n}\r\n\r\nexport function PreferencesSection({ onClose, currencies = [] }: PreferencesSectionProps) {\r\n  const { user, account } = useAuth();\r\n  const canEditPreferences =\r\n    user?.profile === UserProfile.owner || user?.profile === UserProfile.admin;\r\n  const updateAccountUser = useUpdateAccountUser();\r\n  const updateAccount = useUpdateAccount();\r\n  const [confirmGlobalOpen, setConfirmGlobalOpen] = useState(false);\r\n  const [pendingSubmit, setPendingSubmit] = useState<{\r\n    data: PreferencesFormValues;\r\n    accountFields: UpdateAccountRequest;\r\n  } | null>(null);\r\n  const [isSaving, setIsSaving] = useState(false);\r\n\r\n  const { watch, setValue, handleSubmit, reset, formState: { dirtyFields } } =\r\n    useForm<PreferencesFormValues>({\r\n      defaultValues: {\r\n        language: '',\r\n        currency: '',\r\n        timezone: '',\r\n        timeFormat: '24h',\r\n        receive_sms: false,\r\n        receive_email: false,\r\n      },\r\n    });\r\n\r\n  useEffect(() => {\r\n    if (!user || !account) return;\r\n    reset({\r\n      language: LANGUAGE_OPTIONS.find(\r\n        (o) => o.apiValue === user.language?.toLowerCase()\r\n      )?.value ?? 'pt-BR',\r\n      currency: account.currency,\r\n      timezone: account.timezone,\r\n      timeFormat: '24h',\r\n      receive_sms: user.receive_sms ?? false,\r\n      receive_email: user.receive_email ?? false,\r\n    });\r\n  }, [user, account, reset]);\r\n\r\n  const receiveSms = watch('receive_sms');\r\n  const receiveEmail = watch('receive_email');\r\n\r\n  const doSave = async (data: PreferencesFormValues, accountFields: UpdateAccountRequest) => {\r\n    setIsSaving(true);\r\n    try {\r\n      const apiLanguage = LANGUAGE_OPTIONS.find((o) => o.value === data.language)?.apiValue ?? data.language.toLowerCase();\r\n      const userResult = await updateAccountUser.mutateAsync({\r\n        language: apiLanguage,\r\n        receive_sms: data.receive_sms,\r\n        receive_email: data.receive_email,\r\n      });\r\n\r\n      if (!userResult.success) {\r\n        toast.custom((t) => (\r\n          <Toast variant=\"error\" message={userResult.error ?? 'Erro ao salvar preferências'} toastId={t} />\r\n        ));\r\n        return;\r\n      }\r\n\r\n      if (canEditPreferences && Object.keys(accountFields).length > 0) {\r\n        const accountResult = await updateAccount.mutateAsync(accountFields);\r\n\r\n        if (!accountResult.success) {\r\n          toast.custom((t) => (\r\n            <Toast variant=\"error\" message={accountResult.error ?? 'Erro ao salvar preferências da conta'} toastId={t} />\r\n          ));\r\n          return;\r\n        }\r\n      }\r\n\r\n      reset(data);\r\n      toast.custom((t) => (\r\n        <Toast variant=\"success\" message=\"Preferências salvas com sucesso\" toastId={t} />\r\n      ));\r\n      onClose();\r\n    } finally {\r\n      setIsSaving(false);\r\n    }\r\n  };\r\n\r\n  const onSubmit = (data: PreferencesFormValues) => {\r\n    const accountFields: UpdateAccountRequest = {\r\n      ...(canEditPreferences && dirtyFields.currency && { currency: data.currency }),\r\n      ...(canEditPreferences && dirtyFields.timezone && { timezone: data.timezone }),\r\n    };\r\n    const globalFieldChanged = Object.keys(accountFields).length > 0;\r\n\r\n    if (globalFieldChanged) {\r\n      setPendingSubmit({ data, accountFields });\r\n      setConfirmGlobalOpen(true);\r\n    } else {\r\n      doSave(data, accountFields);\r\n    }\r\n  };\r\n\r\n  const handleConfirmGlobal = () => {\r\n    setConfirmGlobalOpen(false);\r\n    if (pendingSubmit) {\r\n      doSave(pendingSubmit.data, pendingSubmit.accountFields);\r\n      setPendingSubmit(null);\r\n    }\r\n  };\r\n\r\n  const handleCancelGlobal = () => {\r\n    setConfirmGlobalOpen(false);\r\n    setPendingSubmit(null);\r\n  };\r\n\r\n  return (\r\n    <>\r\n      <form onSubmit={handleSubmit(onSubmit)} className=\"lg:h-full lg:flex lg:flex-col\">\r\n        <div className=\"absolute inset-0 overflow-y-auto overscroll-contain px-4 pb-36 lg:p-5 lg:static lg:flex-1 lg:min-h-0 lg:overscroll-auto flex flex-col gap-5 lg:gap-6\">\r\n          <span className=\"paragraph-medium-semibold text-gray-950\">Preferências</span>\r\n          <div className=\"flex flex-col gap-8\">\r\n            <div className=\"flex flex-col lg:flex-row items-center gap-3\">\r\n              <ComboboxField\r\n                label=\"Idioma\"\r\n                placeholder=\"Selecione o idioma\"\r\n                searchPlaceholder=\"Buscar idioma...\"\r\n                containerClassName=\"w-full\"\r\n                options={LANGUAGE_OPTIONS}\r\n                value={watch('language')}\r\n                onChange={(value) => setValue('language', value, { shouldDirty: true })}\r\n              />\r\n              <ComboboxField\r\n                label=\"Moeda\"\r\n                placeholder=\"Selecione a moeda\"\r\n                searchPlaceholder=\"Buscar moeda...\"\r\n                containerClassName=\"w-full\"\r\n                options={currencies}\r\n                value={watch('currency')}\r\n                onChange={(value) => setValue('currency', value, { shouldDirty: true })}\r\n                icon={!canEditPreferences ? <Lock className=\"size-4 text-gray-400\" /> : undefined}\r\n                disabled={!canEditPreferences}\r\n              />\r\n            </div>\r\n\r\n            <Separator />\r\n\r\n            <div className=\"flex flex-col gap-4\">\r\n              <span className=\"paragraph-medium-semibold text-gray-600\">Exibição hora</span>\r\n              <div className=\"flex flex-col lg:flex-row items-center gap-3\">\r\n                <ComboboxField\r\n                  label=\"Fuso horário\"\r\n                  placeholder=\"Selecione o fuso horário\"\r\n                  searchPlaceholder=\"Buscar fuso horário...\"\r\n                  containerClassName=\"w-full\"\r\n                  options={TIMEZONE_OPTIONS}\r\n                  value={watch('timezone')}\r\n                  onChange={(value) => setValue('timezone', value, { shouldDirty: true })}\r\n                  icon={!canEditPreferences ? <Lock className=\"size-4 text-gray-400\" /> : undefined}\r\n                  disabled={!canEditPreferences}\r\n                />\r\n                <SelectField\r\n                  label=\"Formato hora\"\r\n                  placeholder=\"Selecione o formato\"\r\n                  className=\"h-10!\"\r\n                  containerClassName=\"w-full\"\r\n                  options={TIME_FORMAT_OPTIONS}\r\n                  value={watch('timeFormat')}\r\n                  onChange={(value) =>\r\n                    setValue('timeFormat', value as string, { shouldDirty: true })\r\n                  }\r\n                  icon={<Lock className=\"size-4 text-gray-400\" />}\r\n                  disabled\r\n                />\r\n              </div>\r\n            </div>\r\n\r\n            <Separator />\r\n\r\n            <div className=\"flex flex-col gap-4\">\r\n              <span className=\"paragraph-medium-semibold text-gray-600\">Notificações</span>\r\n              <div className=\"flex flex-col gap-3\">\r\n                <div className=\"flex flex-col border border-gray-200 rounded-lg\">\r\n                  <SwitchOptionFieldWithIcon\r\n                    icon={MessageCircle}\r\n                    label=\"WhatsApp\"\r\n                    description=\"Receber notificações importantes por WhatsApp\"\r\n                    checked={receiveSms}\r\n                    onCheckedChange={(val: boolean) => setValue('receive_sms', val, { shouldDirty: true })}\r\n                  />\r\n                  <SwitchOptionFieldWithIcon\r\n                    icon={Mail}\r\n                    label=\"E-mail\"\r\n                    description=\"Receber notificações e atualizações por email\"\r\n                    checked={receiveEmail}\r\n                    onCheckedChange={(val: boolean) => setValue('receive_email', val, { shouldDirty: true })}\r\n                    hideBorderBottom={true}\r\n                  />\r\n                </div>\r\n                <div className=\"flex flex-col gap-4 p-5 pb-6 rounded-lg bg-gray-50\">\r\n                  <span className=\"paragraph-small-semibold text-gray-950\">\r\n                    Tipos de notificações incluem:\r\n                  </span>\r\n                  <div className=\"flex flex-col\">\r\n                    {NOTIFICATION_TYPES.map((type) => (\r\n                      <div key={type} className=\"flex items-center gap-2\">\r\n                        <div className=\"size-1 rounded-full bg-gray-600\" />\r\n                        <span className=\"paragraph-small-medium text-gray-600\">{type}</span>\r\n                      </div>\r\n                    ))}\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div className=\"fixed bottom-0 left-0 right-0 lg:static flex items-center h-20 px-4 lg:px-5 border-t border-gray-200 justify-between bg-white z-10\">\r\n          <Button\r\n            variant=\"secondary\"\r\n            className=\"h-10!\"\r\n            type=\"button\"\r\n            disabled={isSaving}\r\n            onClick={() => {\r\n              reset();\r\n              onClose();\r\n            }}\r\n          >\r\n            Cancelar\r\n          </Button>\r\n          <Button className=\"h-10!\" type=\"submit\" disabled={isSaving}>\r\n            {isSaving ? 'Salvando...' : 'Salvar alterações'}\r\n          </Button>\r\n        </div>\r\n      </form>\r\n\r\n      <ConfirmGlobalPreferencesModal\r\n        open={confirmGlobalOpen}\r\n        onConfirm={handleConfirmGlobal}\r\n        onCancel={handleCancelGlobal}\r\n      />\r\n    </>\r\n  );\r\n}\r\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,147 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import { Lock, Wrench } from "lucide-react";
+import { Badge } from "../../ui/data-display/Badge";
+import { Button } from "../../ui/buttons/Button";
+import { useAuth } from "../../../providers/auth.provider";
+import { useQueryClient } from "@tanstack/react-query";
+import { USER_QUERY_KEY } from "../../../modules/auth/hooks/useUserQuery";
+import { AccountSectionType } from "../../../enums/AccountSectionType";
+import TwoFactorAuthModal from "../TwoFactorAuthModal";
+import DisableTwoFactorAuthModal from "../DisableTwoFactorAuthModal";
+function SecuritySection({
+  setActiveSection,
+  onClose,
+  hasActiveSubscription,
+  onDeleteAccount
+}) {
+  const { user } = useAuth();
+  const queryClient = useQueryClient();
+  const twoFactorAuth = user?.two_factor_authentication ?? false;
+  const [twoFactorOpen, setTwoFactorOpen] = useState(false);
+  const [disableTwoFactorOpen, setDisableTwoFactorOpen] = useState(false);
+  const handleToggleTwoFactor = useCallback(() => {
+    if (twoFactorAuth) {
+      setDisableTwoFactorOpen(true);
+    } else {
+      setTwoFactorOpen(true);
+    }
+  }, [twoFactorAuth]);
+  const handleDisableTwoFactorSuccess = useCallback(() => {
+    queryClient.invalidateQueries({ queryKey: USER_QUERY_KEY });
+    setDisableTwoFactorOpen(false);
+  }, [queryClient]);
+  const handleEnableTwoFactorSuccess = useCallback(() => {
+    queryClient.invalidateQueries({ queryKey: USER_QUERY_KEY });
+    setTwoFactorOpen(false);
+  }, [queryClient]);
+  const handleDeleteAccount = useCallback(() => {
+    onDeleteAccount?.();
+  }, [onDeleteAccount]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "h-full overflow-y-auto overscroll-contain px-4 pb-20 lg:p-5 lg:pt-5 flex flex-col gap-5 lg:gap-6 lg:pb-31 lg:overscroll-auto", children: [
+      /* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-gray-950 hidden lg:block", children: "Seguran\xE7a" }),
+      /* @__PURE__ */ jsxs("div", { className: "border border-gray-200 rounded-lg overflow-hidden", children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex flex-col lg:flex-row lg:items-center gap-4 lg:gap-5 p-4 lg:p-5 border-b border-gray-200 cursor-pointer hover:bg-gray-25 transition-colors",
+            onClick: handleToggleTwoFactor,
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-start lg:items-center gap-4 lg:gap-5", children: [
+                /* @__PURE__ */ jsx("div", { className: "size-10 rounded-lg bg-gray-50 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(Wrench, { size: 20, className: "text-gray-950" }) }),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5 flex-1", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+                    /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-gray-950", children: "Autentica\xE7\xE3o de dois fatores" }),
+                    /* @__PURE__ */ jsx(
+                      Badge,
+                      {
+                        className: `paragraph-xsmall-semibold rounded-lg ${twoFactorAuth ? "text-green-600 bg-green-50" : "text-gray-600 bg-gray-50"}`,
+                        children: twoFactorAuth ? "Habilitado" : "Desabilitado"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { className: "paragraph-small-regular text-gray-600", children: "Envio de c\xF3digo de seguran\xE7a (e-mail ou sms) para o usu\xE1rio acessar o sistema" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "secondary",
+                  className: "h-10! shrink-0 w-full lg:w-auto",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    handleToggleTwoFactor();
+                  },
+                  children: twoFactorAuth ? "Desabilitar" : "Habilitar"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex flex-col lg:flex-row lg:items-center gap-4 lg:gap-5 p-4 lg:p-5 cursor-pointer hover:bg-gray-25 transition-colors",
+            onClick: () => setActiveSection(AccountSectionType.CHANGE_PASSWORD),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-start lg:items-center gap-4 lg:gap-5", children: [
+                /* @__PURE__ */ jsx("div", { className: "size-10 rounded-lg bg-gray-50 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(Lock, { size: 20, className: "text-gray-950" }) }),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5 flex-1", children: [
+                  /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-gray-950", children: "Alterar senha de acesso" }),
+                  /* @__PURE__ */ jsx("span", { className: "paragraph-small-regular text-gray-600", children: "Atualize sua senha sempre que necess\xE1rio para manter sua conta segura." })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "secondary",
+                  className: "h-10! shrink-0 w-full lg:w-auto",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    setActiveSection(AccountSectionType.CHANGE_PASSWORD);
+                  },
+                  children: "Alterar senha"
+                }
+              )
+            ]
+          }
+        )
+      ] }),
+      onDeleteAccount && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "paragraph-small-semibold text-red-600 bg-red-50 rounded-lg px-3 py-2 cursor-pointer hover:bg-red-100 transition-colors w-fit",
+          onClick: handleDeleteAccount,
+          children: "Excluir minha conta"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "fixed bottom-0 left-0 right-0 lg:absolute flex items-center h-20 px-4 lg:px-5 border-t border-gray-200 justify-between bg-white z-10", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "secondary", className: "h-10!", type: "button", onClick: onClose, children: "Cancelar" }),
+      /* @__PURE__ */ jsx(Button, { className: "h-10!", onClick: onClose, children: "Salvar altera\xE7\xF5es" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      DisableTwoFactorAuthModal,
+      {
+        open: disableTwoFactorOpen,
+        onClose: () => setDisableTwoFactorOpen(false),
+        onSuccess: handleDisableTwoFactorSuccess
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      TwoFactorAuthModal,
+      {
+        open: twoFactorOpen,
+        onClose: () => setTwoFactorOpen(false),
+        onSuccess: handleEnableTwoFactorSuccess
+      }
+    )
+  ] });
+}
+export {
+  SecuritySection
+};
+//# sourceMappingURL=SecuritySection.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/account/sections/SecuritySection.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { useState, useCallback } from 'react';\r\nimport { Lock, Wrench } from 'lucide-react';\r\nimport { Badge } from '../../ui/data-display/Badge';\r\nimport { Button } from '../../ui/buttons/Button';\r\nimport { useAuth } from '../../../providers/auth.provider';\r\nimport { useQueryClient } from '@tanstack/react-query';\r\nimport { USER_QUERY_KEY } from '../../../modules/auth/hooks/useUserQuery';\r\nimport { AccountSectionType } from '../../../enums/AccountSectionType';\r\nimport TwoFactorAuthModal from '../TwoFactorAuthModal';\r\nimport DisableTwoFactorAuthModal from '../DisableTwoFactorAuthModal';\r\n\r\ninterface SecuritySectionProps {\r\n  setActiveSection: (section: AccountSectionType) => void;\r\n  onClose: () => void;\r\n  hasActiveSubscription?: boolean;\r\n  onDeleteAccount?: () => void;\r\n}\r\n\r\nexport function SecuritySection({\r\n  setActiveSection,\r\n  onClose,\r\n  hasActiveSubscription,\r\n  onDeleteAccount,\r\n}: SecuritySectionProps) {\r\n  const { user } = useAuth();\r\n  const queryClient = useQueryClient();\r\n\r\n  const twoFactorAuth = user?.two_factor_authentication ?? false;\r\n  const [twoFactorOpen, setTwoFactorOpen] = useState(false);\r\n  const [disableTwoFactorOpen, setDisableTwoFactorOpen] = useState(false);\r\n\r\n  const handleToggleTwoFactor = useCallback(() => {\r\n    if (twoFactorAuth) {\r\n      setDisableTwoFactorOpen(true);\r\n    } else {\r\n      setTwoFactorOpen(true);\r\n    }\r\n  }, [twoFactorAuth]);\r\n\r\n  const handleDisableTwoFactorSuccess = useCallback(() => {\r\n    queryClient.invalidateQueries({ queryKey: USER_QUERY_KEY });\r\n    setDisableTwoFactorOpen(false);\r\n  }, [queryClient]);\r\n\r\n  const handleEnableTwoFactorSuccess = useCallback(() => {\r\n    queryClient.invalidateQueries({ queryKey: USER_QUERY_KEY });\r\n    setTwoFactorOpen(false);\r\n  }, [queryClient]);\r\n\r\n  const handleDeleteAccount = useCallback(() => {\r\n    onDeleteAccount?.();\r\n  }, [onDeleteAccount]);\r\n\r\n  return (\r\n    <>\r\n      <div className=\"h-full overflow-y-auto overscroll-contain px-4 pb-20 lg:p-5 lg:pt-5 flex flex-col gap-5 lg:gap-6 lg:pb-31 lg:overscroll-auto\">\r\n        <span className=\"paragraph-medium-semibold text-gray-950 hidden lg:block\">Segurança</span>\r\n\r\n        <div className=\"border border-gray-200 rounded-lg overflow-hidden\">\r\n          <div\r\n            className=\"flex flex-col lg:flex-row lg:items-center gap-4 lg:gap-5 p-4 lg:p-5 border-b border-gray-200 cursor-pointer hover:bg-gray-25 transition-colors\"\r\n            onClick={handleToggleTwoFactor}\r\n          >\r\n            <div className=\"flex flex-1 items-start lg:items-center gap-4 lg:gap-5\">\r\n              <div className=\"size-10 rounded-lg bg-gray-50 flex items-center justify-center shrink-0\">\r\n                <Wrench size={20} className=\"text-gray-950\" />\r\n              </div>\r\n              <div className=\"flex flex-col gap-1.5 flex-1\">\r\n                <div className=\"flex flex-wrap items-center gap-2\">\r\n                  <span className=\"paragraph-small-semibold text-gray-950\">\r\n                    Autenticação de dois fatores\r\n                  </span>\r\n                  <Badge\r\n                    className={`paragraph-xsmall-semibold rounded-lg ${twoFactorAuth ? 'text-green-600 bg-green-50' : 'text-gray-600 bg-gray-50'}`}\r\n                  >\r\n                    {twoFactorAuth ? 'Habilitado' : 'Desabilitado'}\r\n                  </Badge>\r\n                </div>\r\n                <span className=\"paragraph-small-regular text-gray-600\">\r\n                  Envio de código de segurança (e-mail ou sms) para o usuário acessar o sistema\r\n                </span>\r\n              </div>\r\n            </div>\r\n            <Button\r\n              variant=\"secondary\"\r\n              className=\"h-10! shrink-0 w-full lg:w-auto\"\r\n              onClick={(e) => {\r\n                e.stopPropagation();\r\n                handleToggleTwoFactor();\r\n              }}\r\n            >\r\n              {twoFactorAuth ? 'Desabilitar' : 'Habilitar'}\r\n            </Button>\r\n          </div>\r\n\r\n          <div\r\n            className=\"flex flex-col lg:flex-row lg:items-center gap-4 lg:gap-5 p-4 lg:p-5 cursor-pointer hover:bg-gray-25 transition-colors\"\r\n            onClick={() => setActiveSection(AccountSectionType.CHANGE_PASSWORD)}\r\n          >\r\n            <div className=\"flex flex-1 items-start lg:items-center gap-4 lg:gap-5\">\r\n              <div className=\"size-10 rounded-lg bg-gray-50 flex items-center justify-center shrink-0\">\r\n                <Lock size={20} className=\"text-gray-950\" />\r\n              </div>\r\n              <div className=\"flex flex-col gap-1.5 flex-1\">\r\n                <span className=\"paragraph-small-semibold text-gray-950\">\r\n                  Alterar senha de acesso\r\n                </span>\r\n                <span className=\"paragraph-small-regular text-gray-600\">\r\n                  Atualize sua senha sempre que necessário para manter sua conta segura.\r\n                </span>\r\n              </div>\r\n            </div>\r\n            <Button\r\n              variant=\"secondary\"\r\n              className=\"h-10! shrink-0 w-full lg:w-auto\"\r\n              onClick={(e) => {\r\n                e.stopPropagation();\r\n                setActiveSection(AccountSectionType.CHANGE_PASSWORD);\r\n              }}\r\n            >\r\n              Alterar senha\r\n            </Button>\r\n          </div>\r\n        </div>\r\n\r\n        {onDeleteAccount && (\r\n          <button\r\n            type=\"button\"\r\n            className=\"paragraph-small-semibold text-red-600 bg-red-50 rounded-lg px-3 py-2 cursor-pointer hover:bg-red-100 transition-colors w-fit\"\r\n            onClick={handleDeleteAccount}\r\n          >\r\n            Excluir minha conta\r\n          </button>\r\n        )}\r\n      </div>\r\n\r\n      <div className=\"fixed bottom-0 left-0 right-0 lg:absolute flex items-center h-20 px-4 lg:px-5 border-t border-gray-200 justify-between bg-white z-10\">\r\n        <Button variant=\"secondary\" className=\"h-10!\" type=\"button\" onClick={onClose}>\r\n          Cancelar\r\n        </Button>\r\n        <Button className=\"h-10!\" onClick={onClose}>\r\n          Salvar alterações\r\n        </Button>\r\n      </div>\r\n\r\n      <DisableTwoFactorAuthModal\r\n        open={disableTwoFactorOpen}\r\n        onClose={() => setDisableTwoFactorOpen(false)}\r\n        onSuccess={handleDisableTwoFactorSuccess}\r\n      />\r\n      <TwoFactorAuthModal\r\n        open={twoFactorOpen}\r\n        onClose={() => setTwoFactorOpen(false)}\r\n        onSuccess={handleEnableTwoFactorSuccess}\r\n      />\r\n    </>\r\n  );\r\n}\r\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,130 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useMemo } from "react";
+import { CheckIcon, ChevronDownIcon, SearchIcon } from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "../overlay/Popover";
+import { cn } from "../../../infra/utils/clsx";
+function ComboboxField({
+  options,
+  label,
+  placeholder = "Selecione uma op\xE7\xE3o",
+  searchPlaceholder = "Buscar...",
+  emptyMessage = "Nenhuma op\xE7\xE3o encontrada.",
+  value,
+  onChange,
+  disabled = false,
+  icon,
+  className,
+  containerClassName
+}) {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const selectedOption = useMemo(
+    () => options.find((o) => o.value === value),
+    [options, value]
+  );
+  const filteredOptions = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    if (!q) return options;
+    return options.filter((o) => o.label.toLowerCase().includes(q));
+  }, [options, search]);
+  const handleSelect = (optionValue) => {
+    onChange?.(optionValue);
+    setOpen(false);
+    setSearch("");
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1.5", containerClassName), children: [
+    label && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 paragraph-xsmall-semibold", children: /* @__PURE__ */ jsx("span", { className: "text-gray-600", children: label }) }),
+    /* @__PURE__ */ jsxs(
+      Popover,
+      {
+        open,
+        onOpenChange: (v) => {
+          if (!disabled) {
+            setOpen(v);
+            if (!v) setSearch("");
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              disabled,
+              className: cn(
+                "paragraph-small-medium w-full h-10 text-gray-950 px-4 transition-colors",
+                "flex items-center justify-between gap-2 rounded-md border bg-transparent",
+                "border-gray-200 hover:border-gray-400 focus:border-gray-950 focus:outline-none",
+                disabled && "cursor-not-allowed opacity-50",
+                className
+              ),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: cn("truncate text-left", !selectedOption && "text-gray-400"), children: selectedOption ? selectedOption.displayValue ?? selectedOption.label : placeholder }),
+                icon ?? /* @__PURE__ */ jsx(
+                  ChevronDownIcon,
+                  {
+                    className: cn(
+                      "size-4 opacity-50 shrink-0 transition-all duration-200",
+                      open && "rotate-180 opacity-100 text-gray-950"
+                    )
+                  }
+                )
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(
+            PopoverContent,
+            {
+              className: "p-0 overflow-hidden rounded-md border shadow-md",
+              align: "start",
+              sideOffset: 4,
+              style: { width: "var(--radix-popover-trigger-width)" },
+              onWheel: (e) => e.stopPropagation(),
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-gray-100 px-3 h-9", children: [
+                  /* @__PURE__ */ jsx(SearchIcon, { className: "size-4 shrink-0 opacity-50 text-gray-500" }),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      autoFocus: true,
+                      placeholder: searchPlaceholder,
+                      value: search,
+                      onChange: (e) => setSearch(e.target.value),
+                      className: "flex h-full w-full bg-transparent text-sm outline-none placeholder:text-gray-400 paragraph-small-medium text-gray-950"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "overflow-y-auto max-h-[280px] p-1", children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx("p", { className: "py-6 text-center paragraph-small-medium text-gray-500", children: emptyMessage }) : filteredOptions.map((option) => {
+                  const isSelected = value === option.value;
+                  return /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: cn(
+                        "flex items-center gap-2 rounded-sm px-2 h-9 cursor-pointer select-none",
+                        "paragraph-small-medium text-gray-950",
+                        "hover:bg-gray-100",
+                        isSelected && "bg-gray-50"
+                      ),
+                      onClick: () => handleSelect(option.value),
+                      children: [
+                        /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: option.label }),
+                        isSelected && /* @__PURE__ */ jsx(CheckIcon, { className: "size-4 shrink-0 text-pages-600" })
+                      ]
+                    },
+                    option.value
+                  );
+                }) })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+var ComboboxField_default = ComboboxField;
+export {
+  ComboboxField,
+  ComboboxField_default as default
+};
+//# sourceMappingURL=ComboboxField.mjs.map