@riligar/auth-react 1.34.0 → 1.35.0

package/dist/index.js

@@ -2965,6 +2965,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__*/jsxRuntime.jsx(core.Box, {
+    p: padded ? gapMap[size] : 0,
+    w: widthMap[size],
+    style: style,
+    ...others,
+    children: /*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
+      gap: gapMap[size],
+      children: [/*#__PURE__*/jsxRuntime.jsxs(core.Group, {
+        wrap: "nowrap",
+        gap: "xs",
+        children: [/*#__PURE__*/jsxRuntime.jsx(core.Avatar, {
+          src: user.imageUrl || user.image,
+          size: avatarSizeMap[size],
+          radius: "xl",
+          bg: "gray.1",
+          c: "gray.6",
+          styles: {
+            placeholder: {
+              fontSize: core.rem(avatarSizeMap[size] / 2.2),
+              fontWeight: 600
+            }
+          },
+          children: initials || 'CC'
+        }), /*#__PURE__*/jsxRuntime.jsxs(core.Box, {
+          style: {
+            flex: 1,
+            overflow: 'hidden'
+          },
+          children: [/*#__PURE__*/jsxRuntime.jsx(core.Text, {
+            size: fontSizeTitleMap[size],
+            fw: 700,
+            truncate: "end",
+            c: "dark.9",
+            lh: 1.1,
+            children: name
+          }), /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+            size: fontSizeEmailMap[size],
+            c: "gray.5",
+            truncate: "end",
+            lh: 1.1,
+            children: email
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsx(core.ActionIcon, {
+          variant: "subtle",
+          color: "gray.4",
+          size: size,
+          onClick: signOut,
+          children: /*#__PURE__*/jsxRuntime.jsx(iconsReact.IconLogout, {
+            size: avatarSizeMap[size] * 0.45
+          })
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
+        gap: gapMap[size] === 'xs' ? 6 : 8,
+        grow: true,
+        children: [/*#__PURE__*/jsxRuntime.jsx(core.Button, {
+          variant: "default",
+          size: btnSizeMap[size],
+          leftSection: /*#__PURE__*/jsxRuntime.jsx(iconsReact.IconSettings, {
+            size: avatarSizeMap[size] * 0.45
+          }),
+          onClick: onAccountClick,
+          fw: 700,
+          fz: gapMap[size] === 'xs' ? "10px" : "xs",
+          radius: "md",
+          children: accountLabel
+        }), /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+          variant: "default",
+          size: btnSizeMap[size],
+          leftSection: /*#__PURE__*/jsxRuntime.jsx(iconsReact.IconCreditCard, {
+            size: avatarSizeMap[size] * 0.45
+          }),
+          onClick: onBillingClick,
+          fw: 700,
+          fz: gapMap[size] === 'xs' ? "10px" : "xs",
+          radius: "md",
+          children: billingLabel
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
+        justify: "center",
+        gap: 4,
+        opacity: 0.3,
+        children: [/*#__PURE__*/jsxRuntime.jsx(core.Text, {
+          size: "10px",
+          c: "gray.6",
+          fw: 600,
+          children: "Secured by"
+        }), /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
+          gap: 2,
+          children: [/*#__PURE__*/jsxRuntime.jsx(iconsReact.IconShieldCheck, {
+            size: 10,
+            stroke: 2
+          }), /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+            size: "10px",
+            fw: 800,
+            c: "dark.9",
+            children: "Auth"
+          })]
+        })]
+      })]
+    })
+  });
+}
+
 /**
  * Renderiza children apenas quando o usuário está autenticado
  * Equivalente ao <SignedIn> do Clerk
@@ -3090,6 +3241,7 @@ exports.SignUpButton = SignUpButton;
 exports.SignUpForm = SignUp;
 exports.SignedIn = SignedIn;
 exports.SignedOut = SignedOut;
+exports.UserInformation = UserInformation;
 exports.UserProfile = UserProfile;
 exports.VerifyEmail = VerifyEmail;
 exports.VerifyEmailCard = VerifyEmail;