@riligar/auth-react 1.29.0 → 1.30.1

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 { Modal, Stack, Text, Image, Title, Paper, TextInput, PasswordInput, Anchor, Button, Divider, Group, Center, Loader, Box, Avatar, Collapse, Card, Tooltip, ThemeIcon, Badge } from '@mantine/core';
+import { Modal, Stack, Text, Image, Title, Paper, TextInput, PasswordInput, Anchor, Button, Divider, Group, Center, Loader, Box, Avatar, Collapse, FileButton, Tooltip, ThemeIcon, Badge } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { IconMail, IconLock, IconArrowRight, IconBrandGoogle, IconBrandGithub, IconUser, IconSend, IconCheck, IconX, IconRefresh, IconPhoto, IconTrash, IconPencil, IconShield, IconKey, IconDevices, IconDeviceMobile, IconLogout, IconUserCircle } from '@tabler/icons-react';
 
@@ -1288,8 +1288,10 @@ function SignIn({
     }), showMagicLink && /*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsx(Divider, {
         label: labels.orContinueWith || 'Ou continue com'
-      }), /*#__PURE__*/jsx(Button, {
-        variant: "light",
+      }), /*#__PURE__*/jsx(Button
+      // color="dark"
+      , {
+        variant: "outline",
         fullWidth: true,
         loading: loadingMagicLink,
         leftSection: /*#__PURE__*/jsx(IconMail, {
@@ -1303,7 +1305,7 @@ function SignIn({
       children: [/*#__PURE__*/jsx(Divider, {}), /*#__PURE__*/jsxs(Group, {
         grow: true,
         children: [/*#__PURE__*/jsx(Button, {
-          variant: "light",
+          variant: "outline",
           leftSection: /*#__PURE__*/jsx(IconBrandGoogle, {
             size: 16
           }),
@@ -1311,7 +1313,7 @@ function SignIn({
           disabled: isLoading,
           children: "Google"
         }), /*#__PURE__*/jsx(Button, {
-          variant: "light",
+          variant: "outline",
           leftSection: /*#__PURE__*/jsx(IconBrandGithub, {
             size: 16
           }),
@@ -1324,7 +1326,8 @@ function SignIn({
       children: /*#__PURE__*/jsxs(Text, {
         size: "sm",
         c: "dimmed",
-        children: [labels.noAccount || 'Não tem uma conta?', " ", /*#__PURE__*/jsx(Anchor, {
+        children: [labels.noAccount || 'Não tem uma conta?', ' ', /*#__PURE__*/jsx(Anchor, {
+          underline: false,
           href: signUpUrl,
           children: labels.createAccount || 'Criar conta'
         })]
@@ -2381,14 +2384,17 @@ function UserProfile({
     mb: "lg",
     children: [/*#__PURE__*/jsx(ThemeIcon, {
       size: 36,
-      variant: "light",
+      variant: "subtle",
+      color: "gray",
       children: /*#__PURE__*/jsx(Icon, {
-        size: 18
+        size: 28,
+        stroke: 1.5
       })
-    }), /*#__PURE__*/jsxs(Box, {
+    }), /*#__PURE__*/jsxs(Stack, {
+      gap: 0,
       children: [/*#__PURE__*/jsx(Text, {
         fw: 600,
-        size: "md",
+        size: "sm",
         children: sectionTitle
       }), description && /*#__PURE__*/jsx(Text, {
         size: "xs",
@@ -2406,12 +2412,12 @@ function UserProfile({
     actionLabel,
     onClick,
     expanded
-  }) => /*#__PURE__*/jsx(Card, {
-    p: "xs",
-    withBorder: false,
+  }) => /*#__PURE__*/jsx(Box, {
+    py: "xs",
     children: /*#__PURE__*/jsxs(Group, {
       justify: "space-between",
       wrap: "nowrap",
+      align: "center",
       children: [/*#__PURE__*/jsxs(Group, {
         gap: "xl",
         wrap: "nowrap",
@@ -2420,9 +2426,6 @@ function UserProfile({
           size: "sm",
           c: "dimmed",
           w: 100,
-          style: {
-            flexShrink: 0
-          },
           children: label
         }), /*#__PURE__*/jsx(Box, {
           flex: 1,
@@ -2432,10 +2435,11 @@ function UserProfile({
         label: actionLabel || action,
         position: "left",
         children: /*#__PURE__*/jsx(Anchor, {
-          size: "sm",
-          fw: 500,
+          size: "xs",
+          fw: 300,
           onClick: onClick,
-          c: expanded ? 'red' : 'blue',
+          c: "gray",
+          underline: "none",
           children: expanded ? labels.cancel || 'Cancel' : action
         })
       })]
@@ -2465,56 +2469,51 @@ function UserProfile({
                 src: user?.image,
                 name: user?.name || user?.email,
                 size: 48,
-                radius: "xl",
-                color: "initials"
+                radius: "xl"
+                // color="initials"
               })
             })
           }), /*#__PURE__*/jsx(Collapse, {
             in: editingSection === 'avatar',
-            children: /*#__PURE__*/jsx(Card, {
-              p: "md",
+            children: /*#__PURE__*/jsx(Paper, {
+              p: "sm",
               withBorder: true,
+              radius: "sm",
               children: /*#__PURE__*/jsxs(Stack, {
                 gap: "md",
                 align: "center",
-                children: [/*#__PURE__*/jsx("input", {
-                  type: "file",
-                  id: "avatar-upload",
+                children: [/*#__PURE__*/jsx(FileButton, {
+                  onChange: handleAvatarFileChange,
                   accept: "image/*",
-                  style: {
-                    display: 'none'
-                  },
-                  onChange: e => handleAvatarFileChange(e.target.files?.[0])
-                }), /*#__PURE__*/jsx(Tooltip, {
-                  label: labels.clickToChange || 'Clique para alterar',
-                  position: "bottom",
-                  children: /*#__PURE__*/jsxs(Box, {
-                    onClick: () => document.getElementById('avatar-upload')?.click(),
-                    style: {
-                      position: 'relative',
-                      cursor: 'pointer',
-                      borderRadius: '50%'
-                    },
-                    children: [/*#__PURE__*/jsx(Avatar, {
-                      src: avatarPreview || user?.image,
-                      name: user?.name || user?.email,
-                      size: 100,
-                      radius: 100,
-                      color: "initials"
-                    }), /*#__PURE__*/jsx(ThemeIcon, {
-                      size: 32,
-                      radius: "xl",
-                      color: "blue",
+                  children: props => /*#__PURE__*/jsx(Tooltip, {
+                    label: labels.clickToChange || 'Clique para alterar',
+                    position: "bottom",
+                    children: /*#__PURE__*/jsxs(Box, {
+                      ...props,
+                      pos: "relative",
                       style: {
-                        position: 'absolute',
+                        cursor: 'pointer'
+                      },
+                      children: [/*#__PURE__*/jsx(Avatar, {
+                        src: avatarPreview || user?.image,
+                        name: user?.name || user?.email,
+                        size: 80,
+                        radius: 80,
+                        color: "gray"
+                      }), /*#__PURE__*/jsx(ThemeIcon, {
+                        size: 26,
+                        radius: "xl",
+                        color: "gray",
+                        pos: "absolute",
                         bottom: 0,
                         right: 0,
-                        border: '2px solid var(--mantine-color-body)'
-                      },
-                      children: /*#__PURE__*/jsx(IconPhoto, {
-                        size: 16
-                      })
-                    })]
+                        bd: "2px solid body",
+                        children: /*#__PURE__*/jsx(IconPhoto, {
+                          size: 14,
+                          stroke: 1.5
+                        })
+                      })]
+                    })
                   })
                 }), /*#__PURE__*/jsx(Text, {
                   size: "xs",
@@ -2523,20 +2522,18 @@ function UserProfile({
                   children: labels.avatarHint || `Máximo ${Math.round(maxAvatarSize / 1024)}KB • JPG, PNG, GIF, WebP`
                 }), /*#__PURE__*/jsxs(Group, {
                   justify: "center",
-                  gap: "sm",
-                  children: [user?.image && /*#__PURE__*/jsx(Tooltip, {
-                    label: labels.removePhoto || 'Remover foto',
-                    children: /*#__PURE__*/jsx(Button, {
-                      variant: "light",
-                      color: "red",
-                      size: "xs",
-                      onClick: handleRemoveAvatar,
-                      loading: loadingUpdateProfile,
-                      leftSection: /*#__PURE__*/jsx(IconTrash, {
-                        size: 14
-                      }),
-                      children: labels.remove || 'Remover'
-                    })
+                  gap: "xs",
+                  children: [user?.image && /*#__PURE__*/jsx(Button, {
+                    variant: "subtle",
+                    color: "gray",
+                    size: "xs",
+                    onClick: handleRemoveAvatar,
+                    loading: loadingUpdateProfile,
+                    leftSection: /*#__PURE__*/jsx(IconTrash, {
+                      size: 14,
+                      stroke: 1.5
+                    }),
+                    children: labels.remove || 'Remover'
                   }), /*#__PURE__*/jsx(Button, {
                     variant: "default",
                     size: "xs",
@@ -2546,7 +2543,8 @@ function UserProfile({
                     size: "xs",
                     loading: loadingUpdateProfile,
                     leftSection: /*#__PURE__*/jsx(IconCheck, {
-                      size: 14
+                      size: 14,
+                      stroke: 1.5
                     }),
                     onClick: handleChangeAvatar,
                     disabled: !avatarPreview || avatarPreview === user?.image,
@@ -2566,7 +2564,8 @@ function UserProfile({
             children: /*#__PURE__*/jsxs(Group, {
               gap: "xs",
               children: [/*#__PURE__*/jsx(IconPencil, {
-                size: 16,
+                size: 18,
+                stroke: 1.5,
                 color: "var(--mantine-color-dimmed)"
               }), /*#__PURE__*/jsx(Text, {
                 size: "sm",
@@ -2575,10 +2574,10 @@ function UserProfile({
             })
           }), /*#__PURE__*/jsx(Collapse, {
             in: editingSection === 'name',
-            children: /*#__PURE__*/jsx(Card, {
-              p: "md"
-              // withBorder
-              ,
+            children: /*#__PURE__*/jsx(Paper, {
+              p: "sm",
+              withBorder: true,
+              radius: "sm",
               children: /*#__PURE__*/jsx("form", {
                 onSubmit: nameForm.onSubmit(handleChangeName),
                 children: /*#__PURE__*/jsxs(Stack, {
@@ -2587,26 +2586,25 @@ function UserProfile({
                     label: labels.name || 'Nome',
                     placeholder: labels.namePlaceholder || 'Digite seu nome',
                     leftSection: /*#__PURE__*/jsx(IconUser, {
-                      size: 16
+                      size: 16,
+                      stroke: 1.5
                     }),
                     ...nameForm.getInputProps('name')
                   }), /*#__PURE__*/jsxs(Group, {
                     justify: "flex-end",
-                    gap: "sm",
+                    gap: "xs",
                     children: [/*#__PURE__*/jsx(Button, {
                       variant: "default",
                       size: "xs",
                       onClick: () => handleToggleSection('name'),
-                      leftSection: /*#__PURE__*/jsx(IconX, {
-                        size: 14
-                      }),
                       children: labels.cancel || 'Cancelar'
                     }), /*#__PURE__*/jsx(Button, {
                       type: "submit",
                       size: "xs",
                       loading: loadingUpdateProfile,
                       leftSection: /*#__PURE__*/jsx(IconCheck, {
-                        size: 14
+                        size: 14,
+                        stroke: 1.5
                       }),
                       children: labels.save || 'Salvar'
                     })]
@@ -2625,7 +2623,8 @@ function UserProfile({
             children: /*#__PURE__*/jsxs(Group, {
               gap: "xs",
               children: [/*#__PURE__*/jsx(IconMail, {
-                size: 16,
+                size: 18,
+                stroke: 1.5,
                 color: "var(--mantine-color-dimmed)"
               }), /*#__PURE__*/jsx(Text, {
                 size: "sm",
@@ -2634,9 +2633,10 @@ function UserProfile({
             })
           }), /*#__PURE__*/jsx(Collapse, {
             in: editingSection === 'email',
-            children: /*#__PURE__*/jsx(Card, {
-              p: "md",
+            children: /*#__PURE__*/jsx(Paper, {
+              p: "sm",
               withBorder: true,
+              radius: "sm",
               children: /*#__PURE__*/jsx("form", {
                 onSubmit: emailForm.onSubmit(handleChangeEmail),
                 children: /*#__PURE__*/jsxs(Stack, {
@@ -2645,26 +2645,25 @@ function UserProfile({
                     label: labels.newEmail || 'Novo Email',
                     placeholder: labels.newEmailPlaceholder || 'Digite o novo email',
                     leftSection: /*#__PURE__*/jsx(IconMail, {
-                      size: 16
+                      size: 16,
+                      stroke: 1.5
                     }),
                     ...emailForm.getInputProps('newEmail')
                   }), /*#__PURE__*/jsxs(Group, {
                     justify: "flex-end",
-                    gap: "sm",
+                    gap: "xs",
                     children: [/*#__PURE__*/jsx(Button, {
                       variant: "default",
                       size: "xs",
                       onClick: () => handleToggleSection('email'),
-                      leftSection: /*#__PURE__*/jsx(IconX, {
-                        size: 14
-                      }),
                       children: labels.cancel || 'Cancelar'
                     }), /*#__PURE__*/jsx(Button, {
                       type: "submit",
                       size: "xs",
                       loading: loadingChangeEmail,
                       leftSection: /*#__PURE__*/jsx(IconCheck, {
-                        size: 14
+                        size: 14,
+                        stroke: 1.5
                       }),
                       children: labels.save || 'Salvar'
                     })]
@@ -2693,7 +2692,8 @@ function UserProfile({
             children: /*#__PURE__*/jsxs(Group, {
               gap: "xs",
               children: [/*#__PURE__*/jsx(IconKey, {
-                size: 16,
+                size: 18,
+                stroke: 1.5,
                 color: "var(--mantine-color-dimmed)"
               }), /*#__PURE__*/jsx(Text, {
                 size: "sm",
@@ -2703,9 +2703,10 @@ function UserProfile({
             })
           }), /*#__PURE__*/jsx(Collapse, {
             in: editingSection === 'password',
-            children: /*#__PURE__*/jsx(Card, {
-              p: "md",
+            children: /*#__PURE__*/jsx(Paper, {
+              p: "sm",
               withBorder: true,
+              radius: "sm",
               children: /*#__PURE__*/jsx("form", {
                 onSubmit: passwordForm.onSubmit(handleChangePassword),
                 children: /*#__PURE__*/jsxs(Stack, {
@@ -2730,16 +2731,14 @@ function UserProfile({
                       variant: "default",
                       size: "xs",
                       onClick: () => handleToggleSection('password'),
-                      leftSection: /*#__PURE__*/jsx(IconX, {
-                        size: 14
-                      }),
                       children: labels.cancel || 'Cancelar'
                     }), /*#__PURE__*/jsx(Button, {
                       type: "submit",
                       size: "xs",
                       loading: loadingChangePassword,
                       leftSection: /*#__PURE__*/jsx(IconCheck, {
-                        size: 14
+                        size: 14,
+                        stroke: 1.5
                       }),
                       children: labels.save || 'Salvar'
                     })]
@@ -2758,7 +2757,8 @@ function UserProfile({
             children: /*#__PURE__*/jsxs(Group, {
               gap: "xs",
               children: [/*#__PURE__*/jsx(IconDevices, {
-                size: 16,
+                size: 18,
+                stroke: 1.5,
                 color: "var(--mantine-color-dimmed)"
               }), /*#__PURE__*/jsx(Text, {
                 size: "sm",
@@ -2768,62 +2768,62 @@ function UserProfile({
             })
           }), /*#__PURE__*/jsx(Collapse, {
             in: editingSection === 'sessions',
-            children: /*#__PURE__*/jsx(Card, {
-              p: "md",
+            children: /*#__PURE__*/jsx(Paper, {
+              p: "sm",
               withBorder: true,
+              radius: "sm",
               children: /*#__PURE__*/jsx(Stack, {
-                gap: "md",
+                gap: "xs",
                 children: loadingListSessions ? /*#__PURE__*/jsx(Text, {
-                  size: "sm",
+                  size: "xs",
                   c: "dimmed",
                   ta: "center",
+                  py: "md",
                   children: labels.loadingSessions || 'Carregando sessões...'
                 }) : sessions.length === 0 ? /*#__PURE__*/jsx(Text, {
-                  size: "sm",
+                  size: "xs",
                   c: "dimmed",
                   ta: "center",
+                  py: "md",
                   children: labels.noSessionsFound || 'Nenhuma sessão encontrada'
                 }) : /*#__PURE__*/jsxs(Fragment, {
                   children: [sessions.map(sessionItem => {
                     const isCurrentSession = sessionItem.id === currentSession?.id;
                     const deviceInfo = parseUserAgent(sessionItem.userAgent);
                     const createdDate = new Date(sessionItem.createdAt);
-                    return /*#__PURE__*/jsx(Card, {
-                      p: "sm",
-                      style: {
-                        borderColor: isCurrentSession ? 'var(--mantine-color-blue-5)' : undefined,
-                        backgroundColor: isCurrentSession ? 'var(--mantine-color-blue-light)' : undefined
-                      },
+                    return /*#__PURE__*/jsx(Paper, {
+                      p: "xs",
+                      withBorder: isCurrentSession,
+                      bd: isCurrentSession ? '1px solid gray' : undefined,
+                      radius: "sm",
                       children: /*#__PURE__*/jsxs(Group, {
                         justify: "space-between",
                         wrap: "nowrap",
+                        align: "center",
                         children: [/*#__PURE__*/jsxs(Group, {
                           gap: "sm",
                           wrap: "nowrap",
-                          style: {
-                            flex: 1
-                          },
+                          flex: 1,
                           children: [/*#__PURE__*/jsx(ThemeIcon, {
-                            size: 36,
-                            variant: "light",
-                            color: isCurrentSession ? 'blue' : 'gray',
+                            size: 32,
+                            variant: "subtle",
+                            color: "gray",
                             children: /*#__PURE__*/jsx(IconDeviceMobile, {
-                              size: 18
+                              size: 18,
+                              stroke: 1.5
                             })
                           }), /*#__PURE__*/jsxs(Box, {
-                            style: {
-                              flex: 1
-                            },
+                            flex: 1,
                             children: [/*#__PURE__*/jsxs(Group, {
                               gap: "xs",
                               children: [/*#__PURE__*/jsx(Text, {
-                                size: "sm",
-                                fw: 500,
+                                size: "xs",
+                                fw: 600,
                                 children: deviceInfo.browser
                               }), isCurrentSession && /*#__PURE__*/jsx(Badge, {
                                 size: "xs",
-                                variant: "filled",
-                                color: "blue",
+                                variant: "light",
+                                color: "gray",
                                 children: labels.thisDevice || 'Este dispositivo'
                               })]
                             }), /*#__PURE__*/jsxs(Text, {
@@ -2842,13 +2842,14 @@ function UserProfile({
                         }), /*#__PURE__*/jsx(Tooltip, {
                           label: isCurrentSession ? labels.signOutAndEnd || 'Encerrar e sair' : labels.endSession || 'Encerrar sessão',
                           children: /*#__PURE__*/jsx(Button, {
-                            variant: "light",
-                            color: "red",
+                            variant: "subtle",
+                            color: "gray",
                             size: "xs",
                             onClick: () => handleRevokeSession(sessionItem.id),
                             loading: loadingRevokeSession === sessionItem.id,
                             leftSection: /*#__PURE__*/jsx(IconLogout, {
-                              size: 14
+                              size: 14,
+                              stroke: 1.5
                             }),
                             children: labels.end || 'Encerrar'
                           })
@@ -2857,14 +2858,16 @@ function UserProfile({
                     }, sessionItem.id);
                   }), sessions.length > 1 && /*#__PURE__*/jsx(Group, {
                     justify: "flex-end",
+                    mt: "xs",
                     children: /*#__PURE__*/jsx(Button, {
-                      variant: "light",
-                      color: "red",
+                      variant: "subtle",
+                      color: "gray",
                       size: "xs",
                       onClick: handleRevokeOtherSessions,
                       loading: loadingRevokeSession === 'all',
                       leftSection: /*#__PURE__*/jsx(IconLogout, {
-                        size: 14
+                        size: 14,
+                        stroke: 1.5
                       }),
                       children: labels.endOtherSessions || 'Encerrar todas as outras sessões'
                     })
@@ -2883,27 +2886,31 @@ function UserProfile({
     return /*#__PURE__*/jsxs(Modal, {
       opened: opened,
       onClose: onClose,
-      size: width + 50,
+      size: width,
       withCloseButton: true,
       radius: "md",
       overlayProps: {
-        backgroundOpacity: 0.55,
-        blur: 3
+        backgroundOpacity: 0.5,
+        blur: 4
       },
       title: /*#__PURE__*/jsxs(Group, {
-        gap: "md",
+        gap: "sm",
         children: [/*#__PURE__*/jsx(ThemeIcon, {
-          size: 44,
-          variant: "light",
+          size: 32,
+          variant: "subtle",
+          color: "gray",
           children: /*#__PURE__*/jsx(IconUserCircle, {
-            size: 24
+            size: 24,
+            stroke: 1.5
           })
-        }), /*#__PURE__*/jsxs(Box, {
+        }), /*#__PURE__*/jsxs(Stack, {
+          gap: 0,
           children: [/*#__PURE__*/jsx(Title, {
-            order: 4,
+            order: 5,
+            fw: 600,
             children: title
           }), /*#__PURE__*/jsx(Text, {
-            size: "sm",
+            size: "xs",
             c: "dimmed",
             children: subtitle
           })]
@@ -2928,24 +2935,28 @@ function UserProfile({
     children: /*#__PURE__*/jsxs(Stack, {
       gap: "sm",
       children: [/*#__PURE__*/jsxs(Group, {
-        gap: "md",
+        gap: "sm",
         children: [logo ? /*#__PURE__*/jsx(Image, {
           src: logo,
           alt: "Auth",
           h: logoHeight,
           fit: "contain"
         }) : /*#__PURE__*/jsx(ThemeIcon, {
-          size: 44,
-          variant: "light",
+          size: 32,
+          variant: "subtle",
+          color: "gray",
           children: /*#__PURE__*/jsx(IconUserCircle, {
-            size: 24
+            size: 24,
+            stroke: 1.5
           })
-        }), /*#__PURE__*/jsxs(Box, {
+        }), /*#__PURE__*/jsxs(Stack, {
+          gap: 0,
           children: [/*#__PURE__*/jsx(Title, {
-            order: 4,
+            order: 5,
+            fw: 600,
             children: title
           }), /*#__PURE__*/jsx(Text, {
-            size: "sm",
+            size: "xs",
             c: "dimmed",
             children: subtitle
           })]