@riligar/auth-react 1.34.0 → 1.35.1

package/README.md

@@ -68,6 +68,7 @@ function Header() {
 | `<ResetPassword />`     | Password reset form                          |
 | `<VerifyEmail />`       | Email verification                           |
 | `<UserProfile />`       | User profile management modal                |
+| `<UserInformation />`   | Flexible user details and account menu       |
 
 ### Control Components
 

package/dist/index.esm.js

@@ -3,9 +3,9 @@ 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, FileButton, 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, rem, ActionIcon } 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';
+import { IconMail, IconLock, IconArrowRight, IconBrandGoogle, IconBrandGithub, IconUser, IconSend, IconCheck, IconX, IconRefresh, IconPhoto, IconTrash, IconPencil, IconShield, IconKey, IconDevices, IconDeviceMobile, IconLogout, IconUserCircle, IconSettings, IconCreditCard, IconShieldCheck } from '@tabler/icons-react';
 
 // Config - API Base URL fixa para o serviço de autenticação
 let API_BASE = 'https://manager.myauth.click';
@@ -2963,6 +2963,157 @@ function UserProfile({
   });
 }
 
+function UserInformation({
+  user,
+  signOut,
+  onAccountClick,
+  onBillingClick,
+  accountLabel = 'Conta',
+  billingLabel = 'Assinatura',
+  padded = true,
+  size = 'sm',
+  style,
+  ...others
+}) {
+  if (!user) return null;
+
+  // Size mappings
+  const avatarSizeMap = {
+    sm: 32,
+    md: 40,
+    lg: 48
+  };
+  const fontSizeTitleMap = {
+    sm: 'sm',
+    md: 'md',
+    lg: 'lg'
+  };
+  const fontSizeEmailMap = {
+    sm: '10px',
+    md: 'xs',
+    lg: 'sm'
+  };
+  const btnSizeMap = {
+    sm: 'xs',
+    md: 'sm',
+    lg: 'md'
+  };
+  const gapMap = {
+    sm: 'xs',
+    md: 'sm',
+    lg: 'md'
+  };
+  const widthMap = {
+    sm: 280,
+    md: 320,
+    lg: 400
+  };
+  const name = user.fullName || user.name || 'User';
+  const email = user.primaryEmailAddress || user.email || '';
+  const initials = name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
+  return /*#__PURE__*/jsx(Box, {
+    p: padded ? gapMap[size] : 0,
+    w: widthMap[size],
+    style: style,
+    ...others,
+    children: /*#__PURE__*/jsxs(Stack, {
+      gap: gapMap[size],
+      children: [/*#__PURE__*/jsxs(Group, {
+        wrap: "nowrap",
+        gap: "xs",
+        children: [/*#__PURE__*/jsx(Avatar, {
+          src: user.imageUrl || user.image,
+          size: avatarSizeMap[size],
+          radius: "xl",
+          bg: "gray.1",
+          c: "gray.6",
+          styles: {
+            placeholder: {
+              fontSize: rem(avatarSizeMap[size] / 2.2),
+              fontWeight: 600
+            }
+          },
+          children: initials || 'CC'
+        }), /*#__PURE__*/jsxs(Box, {
+          style: {
+            flex: 1,
+            overflow: 'hidden'
+          },
+          children: [/*#__PURE__*/jsx(Text, {
+            size: fontSizeTitleMap[size],
+            fw: 700,
+            truncate: "end",
+            c: "dark.9",
+            lh: 1.1,
+            children: name
+          }), /*#__PURE__*/jsx(Text, {
+            size: fontSizeEmailMap[size],
+            c: "gray.5",
+            truncate: "end",
+            lh: 1.1,
+            children: email
+          })]
+        }), /*#__PURE__*/jsx(ActionIcon, {
+          variant: "subtle",
+          color: "gray.4",
+          size: size,
+          onClick: signOut,
+          children: /*#__PURE__*/jsx(IconLogout, {
+            size: avatarSizeMap[size] * 0.45
+          })
+        })]
+      }), /*#__PURE__*/jsxs(Group, {
+        gap: gapMap[size] === 'xs' ? 6 : 8,
+        grow: true,
+        children: [/*#__PURE__*/jsx(Button, {
+          variant: "default",
+          size: btnSizeMap[size],
+          leftSection: /*#__PURE__*/jsx(IconSettings, {
+            size: avatarSizeMap[size] * 0.45
+          }),
+          onClick: onAccountClick,
+          fw: 700,
+          fz: gapMap[size] === 'xs' ? "10px" : "xs",
+          radius: "md",
+          children: accountLabel
+        }), /*#__PURE__*/jsx(Button, {
+          variant: "default",
+          size: btnSizeMap[size],
+          leftSection: /*#__PURE__*/jsx(IconCreditCard, {
+            size: avatarSizeMap[size] * 0.45
+          }),
+          onClick: onBillingClick,
+          fw: 700,
+          fz: gapMap[size] === 'xs' ? "10px" : "xs",
+          radius: "md",
+          children: billingLabel
+        })]
+      }), /*#__PURE__*/jsxs(Group, {
+        justify: "center",
+        gap: 4,
+        opacity: 0.3,
+        children: [/*#__PURE__*/jsx(Text, {
+          size: "10px",
+          c: "gray.6",
+          fw: 600,
+          children: "Secured by"
+        }), /*#__PURE__*/jsxs(Group, {
+          gap: 2,
+          children: [/*#__PURE__*/jsx(IconShieldCheck, {
+            size: 10,
+            stroke: 2
+          }), /*#__PURE__*/jsx(Text, {
+            size: "10px",
+            fw: 800,
+            c: "dark.9",
+            children: "Auth"
+          })]
+        })]
+      })]
+    })
+  });
+}
+
 /**
  * Renderiza children apenas quando o usuário está autenticado
  * Equivalente ao <SignedIn> do Clerk
@@ -3064,5 +3215,5 @@ function SignOutButton({
   });
 }
 
-export { UserProfile as AccountModal, AuthCard, AuthLoaded, AuthLoading, AuthProvider, ForgotPassword, ForgotPassword as ForgotPasswordForm, MagicLink, MagicLinkCallback, MagicLink as MagicLinkForm, MagicLinkCallback as MagicLinkVerify, Protect, Protect as ProtectedRoute, ResetPassword, ResetPassword as ResetPasswordForm, SignIn, SignInButton, SignIn as SignInForm, SignOutButton, SignUp, SignUpButton, SignUp as SignUpForm, SignedIn, SignedOut, UserProfile, VerifyEmail, VerifyEmail as VerifyEmailCard, changeEmail, changePassword, configure, decodeJWT, forgotPassword, getApplicationInfo, getCurrentUser, getSession, isAuthenticated, isInternal, listSessions, refreshToken, resendVerification, resetPassword, revokeOtherSessions, revokeSession, sendMagicLink, signIn, signOut, signUp, socialRedirect, updateProfile, useApplicationLogo, useAuth, useAuthLoading, useAuthStore, useCheckToken, useEmailVerification, useMagicLink, usePasswordReset, useUser as useProfile, useSession, useSessions, useSignIn, useSignOut, useSignUp, useUser, verifyEmail, verifyMagicLink };
+export { UserProfile as AccountModal, AuthCard, AuthLoaded, AuthLoading, AuthProvider, ForgotPassword, ForgotPassword as ForgotPasswordForm, MagicLink, MagicLinkCallback, MagicLink as MagicLinkForm, MagicLinkCallback as MagicLinkVerify, Protect, Protect as ProtectedRoute, ResetPassword, ResetPassword as ResetPasswordForm, SignIn, SignInButton, SignIn as SignInForm, SignOutButton, SignUp, SignUpButton, SignUp as SignUpForm, SignedIn, SignedOut, UserInformation, UserProfile, VerifyEmail, VerifyEmail as VerifyEmailCard, changeEmail, changePassword, configure, decodeJWT, forgotPassword, getApplicationInfo, getCurrentUser, getSession, isAuthenticated, isInternal, listSessions, refreshToken, resendVerification, resetPassword, revokeOtherSessions, revokeSession, sendMagicLink, signIn, signOut, signUp, socialRedirect, updateProfile, useApplicationLogo, useAuth, useAuthLoading, useAuthStore, useCheckToken, useEmailVerification, useMagicLink, usePasswordReset, useUser as useProfile, useSession, useSessions, useSignIn, useSignOut, useSignUp, useUser, verifyEmail, verifyMagicLink };
 //# sourceMappingURL=index.esm.js.map