@authdog/react-elements 0.0.35 → 0.0.37

package/dist/styles.css

@@ -665,6 +665,9 @@ video {
 .mt-1 {
   margin-top: 0.25rem;
 }
+.mt-2 {
+  margin-top: 0.5rem;
+}
 .mt-auto {
   margin-top: auto;
 }
@@ -871,6 +874,9 @@ video {
 .items-center {
   align-items: center;
 }
+.justify-end {
+  justify-content: flex-end;
+}
 .justify-center {
   justify-content: center;
 }
@@ -998,9 +1004,9 @@ video {
 .border-none {
   border-style: none;
 }
-.border-amber-600 {
+.border-amber-300 {
   --tw-border-opacity: 1;
-  border-color: rgb(217 119 6 / var(--tw-border-opacity, 1));
+  border-color: rgb(252 211 77 / var(--tw-border-opacity, 1));
 }
 .border-border {
   border-color: hsl(var(--border));
@@ -1009,9 +1015,9 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
 }
-.border-green-700 {
+.border-green-300 {
   --tw-border-opacity: 1;
-  border-color: rgb(21 128 61 / var(--tw-border-opacity, 1));
+  border-color: rgb(134 239 172 / var(--tw-border-opacity, 1));
 }
 .border-input {
   border-color: hsl(var(--input));
@@ -1019,9 +1025,9 @@ video {
 .border-transparent {
   border-color: transparent;
 }
-.bg-amber-500 {
+.bg-amber-100 {
   --tw-bg-opacity: 1;
-  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
+  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
 }
 .bg-background {
   background-color: hsl(var(--background));
@@ -1062,10 +1068,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
 }
-.bg-green-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
-}
 .bg-muted {
   background-color: hsl(var(--muted));
 }
@@ -1117,10 +1119,17 @@ video {
 .p-4 {
   padding: 1rem;
 }
+.p-6 {
+  padding: 1.5rem;
+}
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
+.px-2\.5 {
+  padding-left: 0.625rem;
+  padding-right: 0.625rem;
+}
 .px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -1231,6 +1240,10 @@ video {
 .tracking-widest {
   letter-spacing: 0.1em;
 }
+.text-amber-800 {
+  --tw-text-opacity: 1;
+  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
+}
 .text-blue-600 {
   --tw-text-opacity: 1;
   color: rgb(37 99 235 / var(--tw-text-opacity, 1));
@@ -1271,6 +1284,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(21 128 61 / var(--tw-text-opacity, 1));
 }
+.text-green-800 {
+  --tw-text-opacity: 1;
+  color: rgb(22 101 52 / var(--tw-text-opacity, 1));
+}
 .text-green-900 {
   --tw-text-opacity: 1;
   color: rgb(20 83 45 / var(--tw-text-opacity, 1));
@@ -1338,6 +1355,11 @@ video {
 .outline {
   outline-style: solid;
 }
+.ring-0 {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
 .ring-offset-background {
   --tw-ring-offset-color: hsl(var(--background));
 }
@@ -1458,6 +1480,10 @@ video {
 .hover\:bg-primary\/90:hover {
   background-color: hsl(var(--primary) / 0.9);
 }
+.hover\:bg-red-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
+}
 .hover\:bg-secondary\/80:hover {
   background-color: hsl(var(--secondary) / 0.8);
 }
@@ -1471,6 +1497,10 @@ video {
 .hover\:text-primary:hover {
   color: hsl(var(--primary));
 }
+.hover\:text-red-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
+}
 .hover\:underline:hover {
   text-decoration-line: underline;
 }
@@ -1480,6 +1510,10 @@ video {
 .focus\:bg-accent:focus {
   background-color: hsl(var(--accent));
 }
+.focus\:bg-red-50:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
+}
 .focus\:text-accent-foreground:focus {
   color: hsl(var(--accent-foreground));
 }
@@ -1487,10 +1521,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(185 28 28 / var(--tw-text-opacity, 1));
 }
-.focus\:outline-none:focus {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
 .focus\:ring-2:focus {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1522,6 +1552,9 @@ video {
 .focus-visible\:ring-destructive\/20:focus-visible {
   --tw-ring-color: hsl(var(--destructive) / 0.2);
 }
+.focus-visible\:ring-red-400\/40:focus-visible {
+  --tw-ring-color: rgb(248 113 113 / 0.4);
+}
 .focus-visible\:ring-ring:focus-visible {
   --tw-ring-color: hsl(var(--ring));
 }
@@ -1679,24 +1712,23 @@ video {
 .group[data-disabled="true"] .group-data-\[disabled\=true\]\:opacity-50 {
   opacity: 0.5;
 }
-.dark\:border-amber-600:is(.dark *) {
-  --tw-border-opacity: 1;
-  border-color: rgb(217 119 6 / var(--tw-border-opacity, 1));
+.dark\:border-amber-400\/40:is(.dark *) {
+  border-color: rgb(251 191 36 / 0.4);
 }
-.dark\:border-green-600:is(.dark *) {
-  --tw-border-opacity: 1;
-  border-color: rgb(22 163 74 / var(--tw-border-opacity, 1));
+.dark\:border-green-400\/40:is(.dark *) {
+  border-color: rgb(74 222 128 / 0.4);
 }
-.dark\:bg-amber-500:is(.dark *) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
+.dark\:border-red-500\/30:is(.dark *) {
+  border-color: rgb(239 68 68 / 0.3);
+}
+.dark\:bg-amber-500\/20:is(.dark *) {
+  background-color: rgb(245 158 11 / 0.2);
 }
 .dark\:bg-destructive\/60:is(.dark *) {
   background-color: hsl(var(--destructive) / 0.6);
 }
-.dark\:bg-green-500:is(.dark *) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
+.dark\:bg-green-500\/20:is(.dark *) {
+  background-color: rgb(34 197 94 / 0.2);
 }
 .dark\:bg-input\/30:is(.dark *) {
   background-color: hsl(var(--input) / 0.3);
@@ -1705,6 +1737,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 }
+.dark\:text-amber-200:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(253 230 138 / var(--tw-text-opacity, 1));
+}
 .dark\:text-gray-100:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(243 244 246 / var(--tw-text-opacity, 1));
@@ -1717,13 +1753,34 @@ video {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity, 1));
 }
-.dark\:text-white:is(.dark *) {
+.dark\:text-green-200:is(.dark *) {
   --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+  color: rgb(187 247 208 / var(--tw-text-opacity, 1));
+}
+.dark\:text-red-300:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
+}
+.dark\:hover\:bg-red-500\/20:hover:is(.dark *) {
+  background-color: rgb(239 68 68 / 0.2);
+}
+.dark\:hover\:text-red-100:hover:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(254 226 226 / var(--tw-text-opacity, 1));
+}
+.dark\:focus\:bg-red-500\/25:focus:is(.dark *) {
+  background-color: rgb(239 68 68 / 0.25);
+}
+.dark\:focus\:text-red-100:focus:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(254 226 226 / var(--tw-text-opacity, 1));
 }
 .dark\:focus-visible\:ring-destructive\/40:focus-visible:is(.dark *) {
   --tw-ring-color: hsl(var(--destructive) / 0.4);
 }
+.dark\:focus-visible\:ring-red-400\/40:focus-visible:is(.dark *) {
+  --tw-ring-color: rgb(248 113 113 / 0.4);
+}
 .dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20:focus[data-variant="destructive"]:is(.dark *) {
   background-color: hsl(var(--destructive) / 0.2);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@authdog/react-elements",
-  "version": "0.0.35",
+  "version": "0.0.37",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.mts",
@@ -25,8 +25,8 @@
     "ts-loader": "^9.5.1",
     "typescript": "^5.6.3",
     "webpack": "^5.89.0",
-    "@authdog/typescript-config": "0.0.0",
-    "@authdog/eslint-config": "0.0.0"
+    "@authdog/eslint-config": "0.0.0",
+    "@authdog/typescript-config": "0.0.0"
   },
   "dependencies": {
     "@radix-ui/react-avatar": "^1.1.9",

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

@@ -58,7 +58,7 @@ export const UserDropdown = ({ trigger, user, className, onManageAccount, onSign
 
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger className="inline-flex items-center justify-center h-10 w-10 rounded-full focus:outline-none">
+      <DropdownMenuTrigger asChild>
         {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)}>
@@ -87,8 +87,8 @@ export const UserDropdown = ({ trigger, user, className, onManageAccount, onSign
           )
         })}
         <DropdownMenuSeparator />
-        <DropdownMenuItem className="cursor-pointer text-red-600 focus:text-red-700 py-2" onClick={() => onSignout?.()}>
-          <LogOut className="mr-2 h-4 w-4" />
+        <DropdownMenuItem className="cursor-pointer py-2 rounded-md font-semibold text-red-600 dark:text-red-300 hover:bg-red-50 hover:text-red-700 focus:bg-red-50 focus:text-red-700 dark:hover:bg-red-500/20 dark:focus:bg-red-500/25 dark:hover:text-red-100 dark:focus:text-red-100 border border-transparent dark:border-red-500/30 ring-0 focus-visible:ring-2 focus-visible:ring-red-400/40 dark:focus-visible:ring-red-400/40" onClick={() => onSignout?.()}>
+          <LogOut className="mr-2 h-4 w-4 text-red-600 dark:text-red-300" />
           <span>Sign out</span>
         </DropdownMenuItem>
       </DropdownMenuContent>

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

@@ -4,6 +4,16 @@ 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 {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+} from "../../components/ui/card"
+import { Input } from "../../components/ui/input"
+import { Label } from "../../components/ui/label"
 import { User, Shield, SlidersHorizontal, LucideProps } from "lucide-react"
 
 export interface UserProfileProps {
@@ -13,6 +23,7 @@ export interface UserProfileProps {
   handleAuthenticated?: () => void;
   onRequestEmailVerification?: (email: string) => Promise<{ success: boolean; message?: string } | void>;
   onVerifyEmail?: (email: string, code: string) => Promise<{ success: boolean; message?: string } | void>;
+  onAddEmail?: (email: string) => Promise<{ success: boolean; message?: string } | void>;
 }
 
 export const UserProfile = ({
@@ -21,11 +32,14 @@ export const UserProfile = ({
   handleAuthenticated,
   onRequestEmailVerification,
   onVerifyEmail,
+  onAddEmail,
 }: UserProfileProps) => {
   const [isMounted, setIsMounted] = useState(false)
   const [activeTab, setActiveTab] = useState<"profile" | "security" | "preferences">("profile");
   const [verifyingEmail, setVerifyingEmail] = useState<string | null>(null)
   const [codeByEmail, setCodeByEmail] = useState<Record<string, string>>({})
+  const [addingEmail, setAddingEmail] = useState<boolean>(false)
+  const [newEmail, setNewEmail] = useState<string>("")
 
   useEffect(() => {
     setIsMounted(true);
@@ -161,11 +175,11 @@ export const UserProfile = ({
                         <span className="text-foreground">{email.value}</span>
                         <div className="mt-1">
                           {isVerified ? (
-                            <Badge className="text-xs bg-green-600 text-white border-green-700 dark:bg-green-500 dark:text-white dark:border-green-600">
+                            <Badge className="text-xs rounded-full px-2.5 py-0.5 bg-green-100 text-green-800 border border-green-300 dark:bg-green-500/20 dark:text-green-200 dark:border-green-400/40">
                               Verified
                             </Badge>
                           ) : (
-                            <Badge className="text-xs bg-amber-500 text-white border-amber-600 dark:bg-amber-500 dark:text-white dark:border-amber-600">
+                            <Badge className="text-xs rounded-full px-2.5 py-0.5 bg-amber-100 text-amber-800 border border-amber-300 dark:bg-amber-500/20 dark:text-amber-200 dark:border-amber-400/40">
                               Not verified
                             </Badge>
                           )}
@@ -225,10 +239,66 @@ export const UserProfile = ({
                     </div>
                   )
                 })}
-                {/* <Button variant="ghost" size="sm" className="flex items-center text-gray-700">
-                  {renderIcon(PlusCircle)}
-                  Add email address
-                </Button> */}
+                <div className="mt-2">
+                  {addingEmail ? (
+                    <div className="max-w-md">
+                      <Card>
+                        <CardHeader>
+                          <CardTitle>Add email address</CardTitle>
+                          <CardDescription>
+                            You'll need to verify this email address before it can be added to your account.
+                          </CardDescription>
+                        </CardHeader>
+                        <CardContent>
+                          <div className="space-y-2">
+                            <Label htmlFor="new-email">Email address</Label>
+                            <Input
+                              id="new-email"
+                              placeholder="Enter your email address"
+                              value={newEmail}
+                              onChange={(e) => setNewEmail(e.target.value)}
+                              onKeyDown={async (e) => {
+                                if (e.key === "Enter") {
+                                  const v = String(newEmail || "").trim().toLowerCase()
+                                  if (!v) return
+                                  if (onAddEmail) await onAddEmail(v)
+                                  setAddingEmail(false)
+                                  setNewEmail("")
+                                }
+                              }}
+                            />
+                          </div>
+                        </CardContent>
+                        <CardFooter className="justify-end gap-2">
+                          <Button
+                            variant="ghost"
+                            onClick={() => {
+                              setAddingEmail(false)
+                              setNewEmail("")
+                            }}
+                          >
+                            Cancel
+                          </Button>
+                          <Button
+                            onClick={async () => {
+                              const v = String(newEmail || "").trim().toLowerCase()
+                              if (!v) return
+                              if (onAddEmail) await onAddEmail(v)
+                              setAddingEmail(false)
+                              setNewEmail("")
+                            }}
+                          >
+                            Add
+                          </Button>
+                        </CardFooter>
+                      </Card>
+                    </div>
+                  ) : (
+                    <Button variant="outline" size="sm" className="text-xs" onClick={() => setAddingEmail(true)}>
+                      Add email
+                    </Button>
+                  )}
+                </div>
               </div>
             </div>
 

package/src/stories/UserProfile.stories.tsx

@@ -1,67 +1,46 @@
-import type { Story } from '@ladle/react';
-import { UserProfile, UserProfileProps } from '../components/core/user-profile';
-import "../global.css";
+import type { StoryDefault, Story } from "@ladle/react"
+import { UserProfile } from "../components/core/user-profile"
+import "../global.css"
 
-export const Default: Story = () => (
-  <UserProfile
-    user={{
-      id: "123",
-      displayName: "Jaylon Dias",
-      emails: [{ value: "example@authdog.xyz" }],
-      photos: [{ value: "https://i.pravatar.cc/150?u=a042581f4e29026704d" }],
-      provider: "authdog", 
-    }}
-    loading={false}
-    handleAuthenticated={() => {}}
-    emails={[{ address: "example@authdog.xyz", isPrimary: true }]}
-  />
-);
-Default.storyName = 'Default User Profile';
+export default {
+  title: "Core/UserProfile",
+} satisfies StoryDefault
 
-export const WithCustomUser: Story = () => (
-  <UserProfile 
-    user={{
-      id: "123",
-      displayName: "Jaylon Dias",
-      emails: [{ value: "example@authdog.xyz" }],
-      photos: [{ value: "https://i.pravatar.cc/150?u=a042581f4e29026704d" }],
-      provider: "authdog", 
-    }}
-    loading={false}
-    handleAuthenticated={() => {}}
-    emails={[{ address: "example@authdog.xyz", isPrimary: true }]}
-  />
-);
-WithCustomUser.storyName = 'User Profile with Custom User';
+const baseUser: any = {
+  id: "user_123",
+  displayName: "Jane Doe",
+  provider: "google-oauth20",
+  emails: [{ id: "e1", value: "jane.primary@example.com" }],
+  verifications: [],
+  photos: [],
+}
 
-export const WithMultipleEmails: Story = () => (
-  <UserProfile 
-    user={{
-      id: "123",
-      displayName: "Jaylon Dias",
-      emails: [{ value: "example@authdog.xyz" }, { value: "example@gmail.com" }],
-      photos: [{ value: "https://i.pravatar.cc/150?u=a042581f4e29026704d" }],
-      provider: "authdog", 
-    }}
-    loading={false}
-    handleAuthenticated={() => {}}
-    emails={[{ address: "example@authdog.xyz", isPrimary: true }, { address: "example@gmail.com", isPrimary: false }]}
-  />
-);
-WithMultipleEmails.storyName = 'User Profile with Multiple Emails';
+export const EmailNotVerified: Story = () => {
+  return (
+    <div className="p-6 bg-background text-foreground">
+      <UserProfile loading={false} user={{ ...baseUser }} />
+    </div>
+  )
+}
+EmailNotVerified.storyName = "Email not verified"
 
-export const WithConnectedAccounts: Story = () => (
-  <UserProfile 
-    user={{
-      id: "123",
-      displayName: "Alex Johnson",
-      emails: [{ value: "alex@example.com" }],
-      photos: [{ value: "https://i.pravatar.cc/150?u=a042581f4e29026704d" }],
-      provider: "authdog", 
-    }}
-    loading={false}
-    handleAuthenticated={() => {}}
-    emails={[{ address: "alex@example.com", isPrimary: true }]}
-  />
-);
-WithConnectedAccounts.storyName = 'User Profile with Connected Accounts'; 
+export const EmailVerified: Story = () => {
+  const verifiedUser = {
+    ...baseUser,
+    verifications: [
+      {
+        id: "v1",
+        email: "jane.primary@example.com",
+        verified: true,
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+      },
+    ],
+  }
+  return (
+    <div className="p-6 bg-background text-foreground">
+      <UserProfile loading={false} user={verifiedUser} />
+    </div>
+  )
+}
+EmailVerified.storyName = "Email verified"