@authdog/react-elements 0.0.32 → 0.0.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@authdog/react-elements",
-  "version": "0.0.32",
+  "version": "0.0.34",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.mts",

package/src/components/core/user-dropdown.tsx

@@ -0,0 +1,99 @@
+"use client"
+
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "../../components/ui/dropdown-menu"
+import { Avatar, AvatarFallback, AvatarImage } from "../../components/ui/avatar"
+import { cn } from "@authdog/react-elements/lib/utils"
+import { LogOut, Settings, ExternalLink } from "lucide-react"
+
+export type UserDropdownLink = {
+  label: string
+  href?: string
+  onClick?: () => void
+  icon?: React.ComponentType<any>
+}
+
+export interface UserDropdownProps {
+  trigger: React.ReactElement
+  user: {
+    displayName?: string
+    name?: string
+    email?: string
+    emails?: { value: string }[]
+    photos?: { value: string }[]
+    avatar?: string
+  }
+  className?: string
+  onManageAccount?: () => void
+  onSignout?: () => void
+  links?: UserDropdownLink[]
+  side?: "top" | "right" | "bottom" | "left"
+  align?: "start" | "center" | "end"
+  sideOffset?: number
+}
+
+const getInitials = (name?: string) => {
+  if (!name) return "?"
+  const parts = String(name).trim().split(/\s+/)
+  const initials = parts.slice(0, 2).map((p) => p[0]?.toUpperCase()).join("")
+  return initials || "?"
+}
+
+export const UserDropdown = ({ trigger, user, className, onManageAccount, onSignout, links = [], side = "bottom", align = "end", sideOffset = 8 }: UserDropdownProps) => {
+  const primaryEmail = user?.emails?.[0]?.value || user?.email || ""
+  const displayName = user?.displayName || user?.name || ""
+  const avatar = user?.photos?.[0]?.value || user?.avatar || ""
+
+  const handleLink = (item: UserDropdownLink) => {
+    if (item.onClick) return item.onClick()
+    if (item.href) {
+      if (item.href.startsWith("http")) {
+        window.open(item.href, "_blank")
+      } else {
+        window.location.assign(item.href)
+      }
+    }
+  }
+
+  const IconExternal = ExternalLink as any
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger className="inline-flex items-center justify-center h-10 w-10 rounded-full focus:outline-none">
+        {trigger}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align={align} side={side} sideOffset={sideOffset} className={cn("w-72 p-2 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md", className)}>
+        <div className="flex items-center gap-3 px-4 pt-4 pb-3">
+          <Avatar className="h-9 w-9 rounded-full">
+            <AvatarImage src={avatar} alt={displayName} />
+            <AvatarFallback className="rounded-full">{getInitials(displayName)}</AvatarFallback>
+          </Avatar>
+          <div className="min-w-0">
+            <div className="text-sm font-semibold truncate">{displayName}</div>
+            <div className="text-xs text-muted-foreground truncate">{primaryEmail}</div>
+          </div>
+        </div>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem className="cursor-pointer py-2" onClick={() => onManageAccount?.()}>
+          <Settings className="mr-2 h-4 w-4" />
+          <span>Manage account</span>
+        </DropdownMenuItem>
+        {links.map((item, idx) => {
+          const Icon = (item.icon ?? IconExternal) as any
+          return (
+            <DropdownMenuItem key={`${item.label}-${idx}`} className="cursor-pointer py-2" onClick={() => handleLink(item)}>
+              <Icon className="mr-2 h-4 w-4" />
+              <span>{item.label}</span>
+            </DropdownMenuItem>
+          )
+        })}
+        <DropdownMenuSeparator />
+        <DropdownMenuItem className="cursor-pointer text-red-600 focus:text-red-700 py-2" onClick={() => onSignout?.()}>
+          <LogOut className="mr-2 h-4 w-4" />
+          <span>Sign out</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+

package/src/components/core/user-profile.tsx

@@ -4,22 +4,28 @@ import { useEffect, useState } from "react"
 import { Avatar, AvatarFallback, AvatarImage } from "../../components/ui/avatar"
 import { Button } from "../../components/ui/button"
 import { Badge } from "../../components/ui/badge"
-import { User, LucideProps } from "lucide-react"
+import { User, Shield, SlidersHorizontal, LucideProps } from "lucide-react"
 
 export interface UserProfileProps {
   loading: boolean;
   user: any;
   emails?: { address: string; isPrimary?: boolean }[];
   handleAuthenticated?: () => void;
+  onRequestEmailVerification?: (email: string) => Promise<{ success: boolean; message?: string } | void>;
+  onVerifyEmail?: (email: string, code: string) => Promise<{ success: boolean; message?: string } | void>;
 }
 
 export const UserProfile = ({
   loading,
   user,
-  handleAuthenticated
+  handleAuthenticated,
+  onRequestEmailVerification,
+  onVerifyEmail,
 }: UserProfileProps) => {
   const [isMounted, setIsMounted] = useState(false)
-  const [activeTab, setActiveTab] = useState<"profile" | "security">("profile");
+  const [activeTab, setActiveTab] = useState<"profile" | "security" | "preferences">("profile");
+  const [verifyingEmail, setVerifyingEmail] = useState<string | null>(null)
+  const [codeByEmail, setCodeByEmail] = useState<Record<string, string>>({})
 
   useEffect(() => {
     setIsMounted(true);
@@ -51,10 +57,10 @@ export const UserProfile = ({
   
   return (
     <div className="grid grid-cols-[14rem,1fr] w-full bg-transparent">
-      <div className="h-full border-r p-3 md:p-4 bg-transparent flex flex-col min-w-0">
+      <div className="h-full border-r border-border p-3 md:p-4 bg-transparent flex flex-col min-w-0">
         <div className="mb-3 md:mb-4">
-          <h1 className="text-xl font-bold text-gray-900 dark:text-gray-100">Account</h1>
-          <p className="text-sm text-gray-500 dark:text-gray-400">Manage your account info.</p>
+          <h1 className="text-xl font-bold text-foreground">Account</h1>
+          <p className="text-sm text-muted-foreground">Manage your account info.</p>
         </div>
 
         <nav className="space-y-1 flex-1">
@@ -62,29 +68,46 @@ export const UserProfile = ({
             onClick={() => setActiveTab("profile")}
             className={`flex items-center w-full px-3 py-2 text-sm rounded-md ${
               activeTab === "profile"
-                ? "bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100"
-                : "text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-800"
+                ? "bg-muted text-foreground"
+                : "text-muted-foreground hover:bg-muted/50"
             }`}
           >
             {renderIcon(User)}
             Profile
           </button>
-          {/* <button
+          <button
             onClick={() => setActiveTab("security")}
             className={`flex items-center w-full px-3 py-2 text-sm rounded-md ${
-              activeTab === "security" ? "bg-gray-100 text-gray-900" : "text-gray-700 hover:bg-gray-50"
+              activeTab === "security"
+                ? "bg-muted text-foreground"
+                : "text-muted-foreground hover:bg-muted/50"
             }`}
           >
             {renderIcon(Shield)}
             Security
-          </button> */}
+          </button>
+          <button
+            onClick={() => setActiveTab("preferences")}
+            className={`flex items-center w-full px-3 py-2 text-sm rounded-md ${
+              activeTab === "preferences"
+                ? "bg-muted text-foreground"
+                : "text-muted-foreground hover:bg-muted/50"
+            }`}
+          >
+            {renderIcon(SlidersHorizontal)}
+            Preferences
+          </button>
         </nav>
       </div>
 
       <div className="h-full p-3 md:p-5 min-w-0 bg-transparent">
         <div className="flex justify-between items-center mb-3 md:mb-4">
-          <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
-            {activeTab === "profile" ? "Profile details" : "Security settings"}
+          <h2 className="text-xl font-semibold text-foreground">
+            {activeTab === "profile"
+              ? "Profile details"
+              : activeTab === "security"
+              ? "Security settings"
+              : "Preferences"}
           </h2>
           {/* <button className="text-gray-500 hover:text-gray-700">
             {renderIcon(X)}
@@ -95,14 +118,14 @@ export const UserProfile = ({
           <div className="space-y-5 md:space-y-6">
             {/* Profile Section */}
             <div>
-              <h3 className="text-sm font-medium mb-3 text-gray-900 dark:text-gray-100">Profile</h3>
+              <h3 className="text-sm font-medium mb-3 text-foreground">Profile</h3>
               <div className="flex items-center justify-between">
                 <div className="flex items-center">
                   <Avatar className="h-12 w-12 mr-4 border">
                     <AvatarImage src={user.photos?.[0]?.value} alt="Profile picture" />
                     <AvatarFallback>{user.displayName?.split(" ").map((n: string) => n[0]).join("")}</AvatarFallback>
                   </Avatar>
-                  <span className="font-medium text-gray-900 dark:text-gray-100">{user.displayName}</span>
+                  <span className="font-medium text-foreground">{user.displayName}</span>
                 </div>
                 {/* <Button variant="outline" size="sm">
                   Edit profile
@@ -112,7 +135,7 @@ export const UserProfile = ({
 
             {/* Email Addresses Section */}
             <div>
-              <h3 className="text-sm font-medium mb-3 text-gray-900 dark:text-gray-100">Email addresses</h3>
+              <h3 className="text-sm font-medium mb-3 text-foreground">Email addresses</h3>
               <div className="space-y-2.5">
 
                 {/* {JSON.stringify(user)} */}
@@ -128,19 +151,72 @@ export const UserProfile = ({
                   </div>
                 ))} */}
 
-                {user.emails.map((email: any, idx: number) => (
-                  <div className="flex items-center justify-between" key={email.value}>
-                    <span className="text-gray-900 dark:text-gray-100">{email.value}</span>
-                    {idx === 0 && (
-                      <Badge
-                        variant="outline"
-                        className="text-xs bg-gray-100 text-gray-700 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-800"
-                      >
-                        Primary
-                      </Badge>
-                    )}
-                  </div>
-                ))}
+                {user.emails.map((email: any, idx: number) => {
+                  const v = (user?.verifications || []).find((ve: any) => ve.email === email.value)
+                  const isVerified = v?.verified === true
+                  const codeInput = codeByEmail[email.value] || ""
+                  return (
+                    <div className="flex items-start justify-between gap-2" key={email.value}>
+                      <div className="flex flex-col">
+                        <span className="text-foreground">{email.value}</span>
+                        <div className="mt-1 text-xs text-muted-foreground">
+                          {isVerified ? "Verified" : "Not verified"}
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        {idx === 0 && (
+                          <Badge
+                            variant="outline"
+                            className="text-xs bg-muted text-foreground hover:bg-muted"
+                          >
+                            Primary
+                          </Badge>
+                        )}
+                        {!isVerified && (
+                          <>
+                            {verifyingEmail === email.value ? (
+                              <div className="flex items-center gap-1">
+                                <input
+                                  className="h-7 w-24 text-sm rounded-md border border-border bg-background px-2 text-foreground"
+                                  placeholder="Code"
+                                  value={codeInput}
+                                  onChange={(e) => setCodeByEmail((m) => ({ ...m, [email.value]: e.target.value }))}
+                                />
+                                <button
+                                  className="h-7 rounded-md border border-border px-2 text-xs"
+                                  onClick={async () => {
+                                    if (!onVerifyEmail) return
+                                    await onVerifyEmail(email.value, codeInput)
+                                  }}
+                                >
+                                  Verify
+                                </button>
+                                <button
+                                  className="h-7 rounded-md border border-border px-2 text-xs"
+                                  onClick={() => setVerifyingEmail(null)}
+                                >
+                                  Cancel
+                                </button>
+                              </div>
+                            ) : (
+                              <>
+                                <button
+                                  className="h-7 rounded-md border border-border px-2 text-xs"
+                                  onClick={async () => {
+                                    if (onRequestEmailVerification) await onRequestEmailVerification(email.value)
+                                    setVerifyingEmail(email.value)
+                                  }}
+                                >
+                                  Send code
+                                </button>
+                              </>
+                            )}
+                          </>
+                        )}
+                      </div>
+                    </div>
+                  )
+                })}
                 {/* <Button variant="ghost" size="sm" className="flex items-center text-gray-700">
                   {renderIcon(PlusCircle)}
                   Add email address
@@ -180,50 +256,70 @@ export const UserProfile = ({
               </div>
             </div>
           </div>
-        ) : (
+        ) : activeTab === "security" ? (
           <div className="space-y-5 md:space-y-6">
-            {/* Security Settings */}
-            <div key="two-factor">
-              <h3 className="text-sm font-medium mb-3 text-gray-900 dark:text-gray-100">Two-factor authentication</h3>
-              <div className="space-y-2.5">
-                <div className="flex items-center justify-between">
-                  <div>
-                    <p className="font-medium text-gray-900 dark:text-gray-100">Two-factor authentication</p>
-                    <p className="text-sm text-gray-500 dark:text-gray-400">Add an extra layer of security to your account</p>
-                  </div>
-                  <Button variant="outline" size="sm">
-                    Enable
-                  </Button>
-                </div>
+            {/* Password row */}
+            <div className="border rounded-md overflow-hidden">
+              <div className="flex items-center justify-between px-4 py-3">
+                <div className="text-sm text-gray-700 dark:text-gray-300">Password</div>
+                <button className="text-sm text-indigo-600 hover:underline">Set password</button>
               </div>
             </div>
 
-            <div key="password">
-              <h3 className="text-sm font-medium mb-3 text-gray-900 dark:text-gray-100">Password</h3>
-              <div className="space-y-2.5">
-                <div className="flex items-center justify-between">
-                  <div>
-                    <p className="font-medium text-gray-900 dark:text-gray-100">Change password</p>
-                    <p className="text-sm text-gray-500 dark:text-gray-400">Last changed 3 months ago</p>
+            {/* Passkeys row */}
+            <div className="border rounded-md overflow-hidden">
+              <div className="flex items-center justify-between px-4 py-3">
+                <div className="text-sm text-gray-700 dark:text-gray-300">Passkeys</div>
+                <button className="text-sm text-indigo-600 hover:underline">+&nbsp;Add a passkey</button>
+              </div>
+            </div>
+
+            {/* Two-step verification row */}
+            <div className="border rounded-md overflow-hidden">
+              <div className="flex items-center justify-between px-4 py-3">
+                <div className="text-sm text-gray-700 dark:text-gray-300">Two-step verification</div>
+                <button className="text-sm text-indigo-600 hover:underline">+&nbsp;Add two-step verification</button>
+              </div>
+            </div>
+
+            {/* Active devices list (scaffold) */}
+            <div className="border rounded-md overflow-hidden">
+              <div className="px-4 py-3 border-b text-sm font-medium text-gray-900 dark:text-gray-100">Active devices</div>
+              <div className="p-4 space-y-3">
+                <div className="text-sm">
+                  <div className="flex items-center gap-2">
+                    <span className="inline-block h-5 w-5 rounded-sm bg-gray-900 dark:bg-white" />
+                    <span className="font-medium">X11</span>
+                    <span className="text-xs rounded-md border px-2 py-0.5 text-gray-600 dark:text-gray-300">This device</span>
                   </div>
-                  <Button variant="outline" size="sm">
-                    Change
-                  </Button>
+                  <div className="text-gray-600 dark:text-gray-400 mt-1">Firefox 142.0</div>
+                  <div className="text-gray-600 dark:text-gray-400">127.0.0.1 (Local), (Your City)</div>
+                  <div className="text-gray-600 dark:text-gray-400">Today at 7:08 PM</div>
                 </div>
               </div>
             </div>
 
-            <div key="sessions">
-              <h3 className="text-sm font-medium mb-3 text-gray-900 dark:text-gray-100">Active sessions</h3>
-              <div className="space-y-2.5">
+            {/* Delete account */}
+            <div className="border rounded-md overflow-hidden">
+              <div className="flex items-center justify-between px-4 py-3">
+                <div className="text-sm text-gray-700 dark:text-gray-300">Delete account</div>
+                <button className="text-sm text-red-600 hover:underline">Delete account</button>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="space-y-5 md:space-y-6">
+            {/* Preferences */}
+            <div>
+              <h3 className="text-sm font-medium mb-3 text-gray-900 dark:text-gray-100">Preferences</h3>
+              <div className="space-y-3 text-sm">
                 <div className="flex items-center justify-between">
-                  <div>
-                    <p className="font-medium text-gray-900 dark:text-gray-100">Current session</p>
-                    <p className="text-sm text-gray-500 dark:text-gray-400">Chrome on Windows • Active now</p>
-                  </div>
-                  <Button variant="outline" size="sm">
-                    Sign out
-                  </Button>
+                  <span className="text-gray-700 dark:text-gray-300">Locale</span>
+                  <span className="text-gray-500 dark:text-gray-400">Auto</span>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span className="text-gray-700 dark:text-gray-300">Theme</span>
+                  <span className="text-gray-500 dark:text-gray-400">System</span>
                 </div>
               </div>
             </div>

package/src/components/ui/dropdown-menu.tsx

@@ -5,7 +5,7 @@ import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
 import { Check, ChevronRight, Circle } from "lucide-react"
 import type { ComponentType } from "react"
 
-import { cn } from "@authdog/react-elements/lib/utils"
+import { cn } from "../../lib/utils"
 
 const CheckIcon = Check as ComponentType<React.SVGProps<SVGSVGElement>>
 const CircleIcon = Circle as ComponentType<React.SVGProps<SVGSVGElement>>

package/src/index.ts

@@ -2,5 +2,6 @@ export {Button} from "./components/ui/button";
 export { ClientOnly } from "./components/core/client-only";
 export {Navbar} from "./components/core/navbar";
 export {UserProfile} from "./components/core/user-profile";
+export {UserDropdown} from "./components/core/user-dropdown";
 export {PlaceholderAlert} from "./components/core/placeholder-alert";
 export {TOTPValidator} from "./components/flow/totp-validator";

package/src/main.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import '../dist/styles.css';
+import './global.css';
 
 // This is the main entry point for Ladle
 export default function Main({ children }: { children: React.ReactNode }) {

package/src/preview.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import './global.css';
 
 // This is the preview component for Ladle
 export default function Preview({ children }: { children: React.ReactNode }) {

package/src/stories/UserDropdown.stories.tsx

@@ -0,0 +1,36 @@
+import React from "react"
+import { UserDropdown } from "../components/core/user-dropdown"
+import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar"
+
+const DemoTrigger = () => (
+  <span className="inline-flex items-center justify-center h-10 w-10 rounded-full border bg-white shadow">
+    <Avatar className="h-8 w-8 rounded-full">
+      <AvatarImage src="https://i.pravatar.cc/100" />
+      <AvatarFallback>JD</AvatarFallback>
+    </Avatar>
+  </span>
+)
+
+const demoUser = {
+  displayName: "Jane Doe",
+  emails: [{ value: "jane.doe@example.com" }],
+  photos: [{ value: "https://i.pravatar.cc/100" }],
+}
+
+export default { title: "Core/UserDropdown" }
+
+export const Basic = () => (
+  <div className="p-10">
+    <UserDropdown
+      trigger={<DemoTrigger />}
+      user={demoUser}
+      onManageAccount={() => alert("Manage account")}
+      onSignout={() => alert("Sign out")}
+      links={[{ label: "My Organizations", href: "/organizations" }]}
+      side="bottom"
+      align="start"
+    />
+  </div>
+)
+
+