@riligar/auth-react 1.11.0 → 1.12.0

package/dist/index.js

@@ -942,8 +942,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__*/jsxRuntime.jsxs(core.Stack, {
+    gap: "sm",
+    children: [(logo || title || subtitle) && /*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
+      gap: "xs",
+      children: [logo && /*#__PURE__*/jsxRuntime.jsx(core.Image, {
+        src: logo,
+        alt: "Auth",
+        h: logoHeight,
+        fit: "contain"
+      }), title && /*#__PURE__*/jsxRuntime.jsx(core.Title, {
+        order: 3,
+        children: title
+      }), subtitle && /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+        size: "sm",
+        c: "dimmed",
+        children: subtitle
+      })]
+    }), children]
+  });
+
+  // Renderizar como Modal
+  if (variant === 'modal') {
+    return /*#__PURE__*/jsxRuntime.jsx(core.Modal, {
+      opened: opened,
+      onClose: onClose,
+      size: width + 50,
+      withCloseButton: true,
+      radius: "md",
+      overlayProps: {
+        backgroundOpacity: 0.55,
+        blur: 3
+      },
+      title: logo ? /*#__PURE__*/jsxRuntime.jsx(core.Image, {
+        src: logo,
+        alt: "Auth",
+        h: logoHeight,
+        fit: "contain"
+      }) : title ? /*#__PURE__*/jsxRuntime.jsx(core.Title, {
+        order: 4,
+        children: title
+      }) : null,
+      ...modalProps,
+      children: /*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
+        gap: "sm",
+        children: [subtitle && /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+          size: "sm",
+          c: "dimmed",
+          children: subtitle
+        }), children]
+      })
+    });
+  }
+
+  // Renderizar como Card (default)
   return /*#__PURE__*/jsxRuntime.jsx(core.Paper, {
     withBorder: true,
     shadow: "md",
@@ -951,25 +1011,7 @@ function AuthCard({
     w: width,
     radius: "md",
     ...props,
-    children: /*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
-      gap: "sm",
-      children: [(logo || title || subtitle) && /*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
-        gap: "xs",
-        children: [logo && /*#__PURE__*/jsxRuntime.jsx(core.Image, {
-          src: logo,
-          alt: "Auth",
-          h: logoHeight,
-          fit: "contain"
-        }), title && /*#__PURE__*/jsxRuntime.jsx(core.Title, {
-          order: 3,
-          children: title
-        }), subtitle && /*#__PURE__*/jsxRuntime.jsx(core.Text, {
-          size: "sm",
-          c: "dimmed",
-          children: subtitle
-        })]
-      }), children]
-    })
+    children: content
   });
 }
 
@@ -981,6 +1023,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,
@@ -1055,6 +1102,10 @@ function SignIn({
     logo: finalLogo,
     title: title,
     subtitle: subtitle,
+    variant: variant,
+    opened: opened,
+    onClose: onClose,
+    modalProps: modalProps,
     ...cardProps,
     children: [/*#__PURE__*/jsxRuntime.jsx("form", {
       onSubmit: form$1.onSubmit(handleSubmit),
@@ -1148,6 +1199,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,
@@ -1194,6 +1250,10 @@ function SignUp({
     logo: finalLogo,
     title: title,
     subtitle: subtitle,
+    variant: variant,
+    opened: opened,
+    onClose: onClose,
+    modalProps: modalProps,
     ...cardProps,
     children: [/*#__PURE__*/jsxRuntime.jsx("form", {
       onSubmit: form$1.onSubmit(handleSubmit),
@@ -1282,6 +1342,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
@@ -1319,6 +1384,10 @@ function MagicLink({
     logo: finalLogo,
     title: title,
     subtitle: subtitle,
+    variant: variant,
+    opened: opened,
+    onClose: onClose,
+    modalProps: modalProps,
     ...cardProps,
     children: [/*#__PURE__*/jsxRuntime.jsx("form", {
       onSubmit: form$1.onSubmit(handleSubmit),
@@ -1470,6 +1539,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
@@ -1507,6 +1581,10 @@ function ForgotPassword({
     logo: finalLogo,
     title: title,
     subtitle: subtitle,
+    variant: variant,
+    opened: opened,
+    onClose: onClose,
+    modalProps: modalProps,
     ...cardProps,
     children: [/*#__PURE__*/jsxRuntime.jsx("form", {
       onSubmit: form$1.onSubmit(handleSubmit),
@@ -1847,7 +1925,8 @@ function VerifyEmail({
 }
 
 function UserProfile({
-  // Controle do modal
+  // Variant
+  variant = 'modal',
   opened,
   onClose,
   // Callbacks
@@ -1864,11 +1943,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] = react.useState(null); // 'password' | 'email' | 'name' | 'avatar' | null
@@ -2182,39 +2264,10 @@ function UserProfile({
       })]
     })
   });
-  return /*#__PURE__*/jsxRuntime.jsxs(core.Modal, {
-    opened: opened,
-    onClose: onClose,
-    size: 550,
-    withCloseButton: true,
-    radius: "lg",
-    overlayProps: {
-      backgroundOpacity: 0.55,
-      blur: 3
-    },
-    title: /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
-      gap: "md",
-      children: [/*#__PURE__*/jsxRuntime.jsx(core.ThemeIcon, {
-        size: 44,
-        variant: "light",
-        children: /*#__PURE__*/jsxRuntime.jsx(iconsReact.IconUserCircle, {
-          size: 24
-        })
-      }), /*#__PURE__*/jsxRuntime.jsxs(core.Box, {
-        children: [/*#__PURE__*/jsxRuntime.jsx(core.Title, {
-          order: 4,
-          children: title
-        }), /*#__PURE__*/jsxRuntime.jsx(core.Text, {
-          size: "sm",
-          c: "dimmed",
-          children: subtitle
-        })]
-      })]
-    }),
-    ...modalProps,
-    children: [/*#__PURE__*/jsxRuntime.jsx(core.Divider, {
-      mb: "md"
-    }), (showAvatar || showName || showEmail) && /*#__PURE__*/jsxRuntime.jsxs(core.Box, {
+
+  // Conteúdo interno compartilhado
+  const profileContent = /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [(showAvatar || showName || showEmail) && /*#__PURE__*/jsxRuntime.jsxs(core.Box, {
       mb: "xl",
       children: [/*#__PURE__*/jsxRuntime.jsx(SectionHeader, {
         icon: iconsReact.IconUser,
@@ -2519,6 +2572,82 @@ function UserProfile({
       })]
     })]
   });
+
+  // Renderizar como Modal
+  if (variant === 'modal') {
+    return /*#__PURE__*/jsxRuntime.jsxs(core.Modal, {
+      opened: opened,
+      onClose: onClose,
+      size: width + 50,
+      withCloseButton: true,
+      radius: "md",
+      overlayProps: {
+        backgroundOpacity: 0.55,
+        blur: 3
+      },
+      title: /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
+        gap: "md",
+        children: [/*#__PURE__*/jsxRuntime.jsx(core.ThemeIcon, {
+          size: 44,
+          variant: "light",
+          children: /*#__PURE__*/jsxRuntime.jsx(iconsReact.IconUserCircle, {
+            size: 24
+          })
+        }), /*#__PURE__*/jsxRuntime.jsxs(core.Box, {
+          children: [/*#__PURE__*/jsxRuntime.jsx(core.Title, {
+            order: 4,
+            children: title
+          }), /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+            size: "sm",
+            c: "dimmed",
+            children: subtitle
+          })]
+        })]
+      }),
+      ...containerProps,
+      children: [/*#__PURE__*/jsxRuntime.jsx(core.Divider, {
+        mb: "md"
+      }), profileContent]
+    });
+  }
+
+  // Renderizar como Card
+  return /*#__PURE__*/jsxRuntime.jsx(core.Paper, {
+    withBorder: true
+    // shadow="md"
+    ,
+    p: "md",
+    w: width,
+    radius: "md",
+    ...containerProps,
+    children: /*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
+      gap: "sm",
+      children: [/*#__PURE__*/jsxRuntime.jsxs(core.Group, {
+        gap: "md",
+        children: [logo ? /*#__PURE__*/jsxRuntime.jsx(core.Image, {
+          src: logo,
+          alt: "Auth",
+          h: logoHeight,
+          fit: "contain"
+        }) : /*#__PURE__*/jsxRuntime.jsx(core.ThemeIcon, {
+          size: 44,
+          variant: "light",
+          children: /*#__PURE__*/jsxRuntime.jsx(iconsReact.IconUserCircle, {
+            size: 24
+          })
+        }), /*#__PURE__*/jsxRuntime.jsxs(core.Box, {
+          children: [/*#__PURE__*/jsxRuntime.jsx(core.Title, {
+            order: 4,
+            children: title
+          }), /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+            size: "sm",
+            c: "dimmed",
+            children: subtitle
+          })]
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsx(core.Divider, {}), profileContent]
+    })
+  });
 }
 
 /**