@riligar/auth-react 1.11.0 → 1.13.0

package/dist/index.esm.js

@@ -3,7 +3,7 @@ import { useMemo, useEffect, createContext, useState, useRef } from 'react';
 import { useShallow } from 'zustand/react/shallow';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Navigate, Outlet, useNavigate } from 'react-router-dom';
-import { Paper, Stack, Image, Title, Text, TextInput, PasswordInput, Anchor, Button, Divider, Group, Center, Loader, Modal, Box, Avatar, Collapse, Card, Tooltip, ThemeIcon } from '@mantine/core';
+import { Modal, Stack, Text, Image, Title, Paper, TextInput, PasswordInput, Anchor, Button, Divider, Group, Center, Loader, Box, Avatar, Collapse, Card, Tooltip, ThemeIcon } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { IconMail, IconLock, IconArrowRight, IconBrandGoogle, IconBrandGithub, IconUser, IconSend, IconCheck, IconX, IconRefresh, IconPhoto, IconTrash, IconPencil, IconShield, IconKey, IconUserCircle } from '@tabler/icons-react';
 import { notifications } from '@mantine/notifications';
@@ -939,8 +939,68 @@ function AuthCard({
   logo,
   logoHeight = 28,
   width = 350,
+  // Variant props
+  variant = 'card',
+  opened,
+  onClose,
+  modalProps = {},
   ...props
 }) {
+  // Conteúdo interno compartilhado entre Card e Modal
+  const content = /*#__PURE__*/jsxs(Stack, {
+    gap: "sm",
+    children: [(logo || title || subtitle) && /*#__PURE__*/jsxs(Stack, {
+      gap: "xs",
+      children: [logo && /*#__PURE__*/jsx(Image, {
+        src: logo,
+        alt: "Auth",
+        h: logoHeight,
+        fit: "contain"
+      }), title && /*#__PURE__*/jsx(Title, {
+        order: 3,
+        children: title
+      }), subtitle && /*#__PURE__*/jsx(Text, {
+        size: "sm",
+        c: "dimmed",
+        children: subtitle
+      })]
+    }), children]
+  });
+
+  // Renderizar como Modal
+  if (variant === 'modal') {
+    return /*#__PURE__*/jsx(Modal, {
+      opened: opened,
+      onClose: onClose,
+      size: width + 50,
+      withCloseButton: true,
+      radius: "md",
+      overlayProps: {
+        backgroundOpacity: 0.55,
+        blur: 3
+      },
+      title: logo ? /*#__PURE__*/jsx(Image, {
+        src: logo,
+        alt: "Auth",
+        h: logoHeight,
+        fit: "contain"
+      }) : title ? /*#__PURE__*/jsx(Title, {
+        order: 4,
+        children: title
+      }) : null,
+      ...modalProps,
+      children: /*#__PURE__*/jsxs(Stack, {
+        gap: "sm",
+        children: [subtitle && /*#__PURE__*/jsx(Text, {
+          size: "sm",
+          c: "dimmed",
+          children: subtitle
+        }), children]
+      })
+    });
+  }
+
+  // Renderizar como Card (default)
   return /*#__PURE__*/jsx(Paper, {
     withBorder: true,
     shadow: "md",
@@ -948,25 +1008,7 @@ function AuthCard({
     w: width,
     radius: "md",
     ...props,
-    children: /*#__PURE__*/jsxs(Stack, {
-      gap: "sm",
-      children: [(logo || title || subtitle) && /*#__PURE__*/jsxs(Stack, {
-        gap: "xs",
-        children: [logo && /*#__PURE__*/jsx(Image, {
-          src: logo,
-          alt: "Auth",
-          h: logoHeight,
-          fit: "contain"
-        }), title && /*#__PURE__*/jsx(Title, {
-          order: 3,
-          children: title
-        }), subtitle && /*#__PURE__*/jsx(Text, {
-          size: "sm",
-          c: "dimmed",
-          children: subtitle
-        })]
-      }), children]
-    })
+    children: content
   });
 }
 
@@ -978,6 +1020,11 @@ function SignIn({
   // Removido default, será calculado abaixo
   title = 'Entrar',
   subtitle = 'Acesse sua conta para continuar',
+  // Variant
+  variant = 'card',
+  opened,
+  onClose,
+  modalProps = {},
   // Features
   showMagicLink = true,
   showForgotPassword = true,
@@ -1052,6 +1099,10 @@ function SignIn({
     logo: finalLogo,
     title: title,
     subtitle: subtitle,
+    variant: variant,
+    opened: opened,
+    onClose: onClose,
+    modalProps: modalProps,
     ...cardProps,
     children: [/*#__PURE__*/jsx("form", {
       onSubmit: form.onSubmit(handleSubmit),
@@ -1145,6 +1196,11 @@ function SignUp({
   logo,
   title = 'Criar Conta',
   subtitle = 'Preencha os dados para se cadastrar',
+  // Variant
+  variant = 'card',
+  opened,
+  onClose,
+  modalProps = {},
   // Features
   requireName = true,
   showSignInLink = true,
@@ -1191,6 +1247,10 @@ function SignUp({
     logo: finalLogo,
     title: title,
     subtitle: subtitle,
+    variant: variant,
+    opened: opened,
+    onClose: onClose,
+    modalProps: modalProps,
     ...cardProps,
     children: [/*#__PURE__*/jsx("form", {
       onSubmit: form.onSubmit(handleSubmit),
@@ -1279,6 +1339,11 @@ function MagicLink({
   logo,
   title = 'Login sem Senha',
   subtitle = 'Receba um link de acesso no seu email',
+  // Variant
+  variant = 'card',
+  opened,
+  onClose,
+  modalProps = {},
   // Features
   showSignInLink = true,
   // Links
@@ -1316,6 +1381,10 @@ function MagicLink({
     logo: finalLogo,
     title: title,
     subtitle: subtitle,
+    variant: variant,
+    opened: opened,
+    onClose: onClose,
+    modalProps: modalProps,
     ...cardProps,
     children: [/*#__PURE__*/jsx("form", {
       onSubmit: form.onSubmit(handleSubmit),
@@ -1467,6 +1536,11 @@ function ForgotPassword({
   logo,
   title = 'Recuperar Senha',
   subtitle = 'Enviaremos um link para redefinir sua senha',
+  // Variant
+  variant = 'card',
+  opened,
+  onClose,
+  modalProps = {},
   // Features
   showSignInLink = true,
   // Links
@@ -1504,6 +1578,10 @@ function ForgotPassword({
     logo: finalLogo,
     title: title,
     subtitle: subtitle,
+    variant: variant,
+    opened: opened,
+    onClose: onClose,
+    modalProps: modalProps,
     ...cardProps,
     children: [/*#__PURE__*/jsx("form", {
       onSubmit: form.onSubmit(handleSubmit),
@@ -1844,7 +1922,8 @@ function VerifyEmail({
 }
 
 function UserProfile({
-  // Controle do modal
+  // Variant
+  variant = 'modal',
   opened,
   onClose,
   // Callbacks
@@ -1861,11 +1940,14 @@ function UserProfile({
   labels = {},
   title = 'Account',
   subtitle = 'Manage your account info.',
+  logo,
+  logoHeight = 28,
+  width = 500,
   // Avatar config
   maxAvatarSize = 500 * 1024,
   // 500KB
 
-  ...modalProps
+  ...containerProps
 }) {
   // Local state - which section is expanded
   const [editingSection, setEditingSection] = useState(null); // 'password' | 'email' | 'name' | 'avatar' | null
@@ -2179,39 +2261,10 @@ function UserProfile({
       })]
     })
   });
-  return /*#__PURE__*/jsxs(Modal, {
-    opened: opened,
-    onClose: onClose,
-    size: 550,
-    withCloseButton: true,
-    radius: "lg",
-    overlayProps: {
-      backgroundOpacity: 0.55,
-      blur: 3
-    },
-    title: /*#__PURE__*/jsxs(Group, {
-      gap: "md",
-      children: [/*#__PURE__*/jsx(ThemeIcon, {
-        size: 44,
-        variant: "light",
-        children: /*#__PURE__*/jsx(IconUserCircle, {
-          size: 24
-        })
-      }), /*#__PURE__*/jsxs(Box, {
-        children: [/*#__PURE__*/jsx(Title, {
-          order: 4,
-          children: title
-        }), /*#__PURE__*/jsx(Text, {
-          size: "sm",
-          c: "dimmed",
-          children: subtitle
-        })]
-      })]
-    }),
-    ...modalProps,
-    children: [/*#__PURE__*/jsx(Divider, {
-      mb: "md"
-    }), (showAvatar || showName || showEmail) && /*#__PURE__*/jsxs(Box, {
+
+  // Conteúdo interno compartilhado
+  const profileContent = /*#__PURE__*/jsxs(Fragment, {
+    children: [(showAvatar || showName || showEmail) && /*#__PURE__*/jsxs(Box, {
       mb: "xl",
       children: [/*#__PURE__*/jsx(SectionHeader, {
         icon: IconUser,
@@ -2516,6 +2569,82 @@ function UserProfile({
       })]
     })]
   });
+
+  // Renderizar como Modal
+  if (variant === 'modal') {
+    return /*#__PURE__*/jsxs(Modal, {
+      opened: opened,
+      onClose: onClose,
+      size: width + 50,
+      withCloseButton: true,
+      radius: "md",
+      overlayProps: {
+        backgroundOpacity: 0.55,
+        blur: 3
+      },
+      title: /*#__PURE__*/jsxs(Group, {
+        gap: "md",
+        children: [/*#__PURE__*/jsx(ThemeIcon, {
+          size: 44,
+          variant: "light",
+          children: /*#__PURE__*/jsx(IconUserCircle, {
+            size: 24
+          })
+        }), /*#__PURE__*/jsxs(Box, {
+          children: [/*#__PURE__*/jsx(Title, {
+            order: 4,
+            children: title
+          }), /*#__PURE__*/jsx(Text, {
+            size: "sm",
+            c: "dimmed",
+            children: subtitle
+          })]
+        })]
+      }),
+      ...containerProps,
+      children: [/*#__PURE__*/jsx(Divider, {
+        mb: "md"
+      }), profileContent]
+    });
+  }
+
+  // Renderizar como Card
+  return /*#__PURE__*/jsx(Paper, {
+    withBorder: true
+    // shadow="md"
+    ,
+    p: "md",
+    w: width,
+    radius: "md",
+    ...containerProps,
+    children: /*#__PURE__*/jsxs(Stack, {
+      gap: "sm",
+      children: [/*#__PURE__*/jsxs(Group, {
+        gap: "md",
+        children: [logo ? /*#__PURE__*/jsx(Image, {
+          src: logo,
+          alt: "Auth",
+          h: logoHeight,
+          fit: "contain"
+        }) : /*#__PURE__*/jsx(ThemeIcon, {
+          size: 44,
+          variant: "light",
+          children: /*#__PURE__*/jsx(IconUserCircle, {
+            size: 24
+          })
+        }), /*#__PURE__*/jsxs(Box, {
+          children: [/*#__PURE__*/jsx(Title, {
+            order: 4,
+            children: title
+          }), /*#__PURE__*/jsx(Text, {
+            size: "sm",
+            c: "dimmed",
+            children: subtitle
+          })]
+        })]
+      }), /*#__PURE__*/jsx(Divider, {}), profileContent]
+    })
+  });
 }
 
 /**