feat(auth-client): Moved all components to components import path

web/packages/auth-client/README.md

@@ -10,7 +10,7 @@ Example imeplementation:
 'use client';
 
 import { PropsWithChildren } from 'react';
-import { AuthProvider } from '@signalco/auth-client';
+import { AuthProvider } from '@signalco/auth-client/components';
 
 export type User = {
     id: string;
@@ -57,7 +57,7 @@ const queryClient = new QueryClient();
 Modes available for `AuthProtectedSection` are `hide` and `redirect`. Hide will hide the section if the user is not authenticated. Redirect will redirect the user to the specified URL.
 
 ```tsx
-import { AuthProtectedSection } from '@signalco/auth-client';
+import { AuthProtectedSection } from '@signalco/auth-client/components';
 
 // This will hide the section if user is not authenticated
 <AuthProtectedSection mode="hide">

web/packages/auth-client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@signalco/auth-client",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
@@ -33,7 +33,6 @@
     "@signalco/tailwindcss-config-signalco": "workspace:*",
     "@signalco/tsconfig": "workspace:*",
     "@signalco/ui-icons": "workspace:*",
-    "@signalco/ui-primitives": "workspace:*",
     "@tanstack/react-query": "5.59.8",
     "@types/react": "18.3.11",
     "@types/react-dom": "18.3.0",
@@ -46,6 +45,7 @@
   },
   "peerDependencies": {
     "@tanstack/react-query": ">=5",
+    "@signalco/ui-primitives": "0",
     "next": ">=14",
     "react": ">=18",
     "react-dom": ">=18"

web/packages/auth-client/src/AuthProtectedSection.tsx → web/packages/auth-client/src/components/AuthProtectedSection.tsx

@@ -2,7 +2,7 @@
 
 import { PropsWithChildren } from 'react';
 import { useRouter } from 'next/navigation';
-import { useCurrentUser } from './useCurrentUser';
+import { useCurrentUser } from '../useCurrentUser';
 
 type AuthProtectedSectionProps = PropsWithChildren<{
     mode?: 'hide';
@@ -24,5 +24,5 @@ export function AuthProtectedSection({ children, mode = 'hide', redirectUrl }: A
         router.push(redirectUrl);
     }
 
-    return children;
+    return <>{children}</>;
 }

web/packages/auth-client/src/AuthProvider.tsx → web/packages/auth-client/src/components/AuthProvider.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import { PropsWithChildren } from 'react';
-import { AuthCurrentUserBase } from './useCurrentUser';
-import { AuthContext, AuthContextValue } from './AuthContext';
+import { AuthCurrentUserBase } from '../useCurrentUser';
+import { AuthContext, AuthContextValue } from '../AuthContext';
 
 export function AuthProvider<T extends AuthCurrentUserBase>({ children, ...rest }: PropsWithChildren & AuthContextValue<T>) {
     return (

web/packages/auth-client/src/components/UserButton.tsx

@@ -1,24 +1,28 @@
 'use client';
 
 import { useContext } from 'react';
-import { Modal } from '@signalco/ui-primitives/Modal';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@signalco/ui-primitives/Menu';
 import { IconButton } from '@signalco/ui-primitives/IconButton';
-import { Button } from '@signalco/ui-primitives/Button';
 import { Avatar } from '@signalco/ui-primitives/Avatar';
-import { User } from '@signalco/ui-icons';
+import { LogOut, User } from '@signalco/ui-icons';
 import { AuthContext } from '../AuthContext';
 
 export function UserButton() {
     const authContext = useContext(AuthContext);
     return (
-        <Modal trigger={(
-            <IconButton>
-                <Avatar>
-                    <User />
-                </Avatar>
-            </IconButton>
-        )}>
-            <Button href={authContext.urls?.signOut ?? '/signout'}>Sign Out</Button>
-        </Modal>
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <IconButton className="rounded-full">
+                    <Avatar className="bg-transparent">
+                        <User />
+                    </Avatar>
+                </IconButton>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+                <DropdownMenuItem href={authContext.urls?.signOut ?? '/sign-out'} startDecorator={<LogOut />}>
+                    Sign out
+                </DropdownMenuItem>
+            </DropdownMenuContent>
+        </DropdownMenu>
     );
 }

web/packages/auth-client/src/components/index.ts

@@ -4,4 +4,6 @@ export * from './SignInButton';
 export * from './SignUpButton';
 export * from './SignedIn';
 export * from './SignedOut';
-export * from './UserButton';
+export * from './UserButton';
+export * from './AuthProtectedSection';
+export * from './AuthProvider';

web/packages/auth-client/src/index.ts

@@ -1,5 +1,3 @@
 'use client';
 
-export * from './useCurrentUser';
-export * from './AuthProtectedSection';
-export * from './AuthProvider';
+export * from './useCurrentUser';