feat(react-sdk): add UrUserButton component

Author: yash-pouranik

examples/react-sdk-demo/src/App.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { UrAuth, useAuth, useUser, ProtectedRoute, GuestRoute } from '@urbackend/react';
+import { UrAuth, ProtectedRoute, GuestRoute, useUser, UrUserButton } from '@urbackend/react';
 import './App.css';
 
 // Mini router component for the demo
@@ -43,11 +43,17 @@ function App() {
 }
 
 function Dashboard() {
-  const { user } = useUser();
-  const { logout } = useAuth();
+  const { user, logout } = useUser();
 
   return (
     <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100vh', background: '#f8fafc', padding: '24px' }}>
+      
+      {/* Naya component yahan dal diya! */}
+      <UrUserButton 
+        onSettingsClick={() => alert('Settings Clicked')} 
+        onProfileClick={() => alert('Profile Clicked')} 
+      />
+
       <div style={{ 
         width: '100%', 
         maxWidth: '500px', 

sdks/urbackend-react/dist/index.d.mts

@@ -90,4 +90,29 @@ interface UrAuthProps {
 }
 declare const UrAuth: React.FC<UrAuthProps>;
 
-export { GuestRoute, type GuestRouteProps, ProtectedRoute, type ProtectedRouteProps, UrAuth, type UrAuthProps, UrProvider, type UrProviderProps, useAuth, useDb, useStorage, useUrContext, useUser };
+interface UrUserButtonProps {
+    /**
+     * Shape of the profile avatar. Defaults to 'square' as requested.
+     */
+    shape?: 'square' | 'circle';
+    /**
+     * Position of the button on the screen. Defaults to 'top-right'.
+     * Use 'inline' if you want to place it within a normal flex/grid layout instead of absolute positioning.
+     */
+    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'inline';
+    /**
+     * Called when "Profile" is clicked.
+     */
+    onProfileClick?: () => void;
+    /**
+     * Called when "Settings" is clicked.
+     */
+    onSettingsClick?: () => void;
+    /**
+     * Z-index for the fixed container. Defaults to 999.
+     */
+    zIndex?: number;
+}
+declare const UrUserButton: React.FC<UrUserButtonProps>;
+
+export { GuestRoute, type GuestRouteProps, ProtectedRoute, type ProtectedRouteProps, UrAuth, type UrAuthProps, UrProvider, type UrProviderProps, UrUserButton, type UrUserButtonProps, useAuth, useDb, useStorage, useUrContext, useUser };

sdks/urbackend-react/dist/index.d.ts

@@ -90,4 +90,29 @@ interface UrAuthProps {
 }
 declare const UrAuth: React.FC<UrAuthProps>;
 
-export { GuestRoute, type GuestRouteProps, ProtectedRoute, type ProtectedRouteProps, UrAuth, type UrAuthProps, UrProvider, type UrProviderProps, useAuth, useDb, useStorage, useUrContext, useUser };
+interface UrUserButtonProps {
+    /**
+     * Shape of the profile avatar. Defaults to 'square' as requested.
+     */
+    shape?: 'square' | 'circle';
+    /**
+     * Position of the button on the screen. Defaults to 'top-right'.
+     * Use 'inline' if you want to place it within a normal flex/grid layout instead of absolute positioning.
+     */
+    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'inline';
+    /**
+     * Called when "Profile" is clicked.
+     */
+    onProfileClick?: () => void;
+    /**
+     * Called when "Settings" is clicked.
+     */
+    onSettingsClick?: () => void;
+    /**
+     * Z-index for the fixed container. Defaults to 999.
+     */
+    zIndex?: number;
+}
+declare const UrUserButton: React.FC<UrUserButtonProps>;
+
+export { GuestRoute, type GuestRouteProps, ProtectedRoute, type ProtectedRouteProps, UrAuth, type UrAuthProps, UrProvider, type UrProviderProps, UrUserButton, type UrUserButtonProps, useAuth, useDb, useStorage, useUrContext, useUser };