@authdog/react-elements 0.0.34 → 0.0.36

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,6 +1004,10 @@ video {
 .border-none {
   border-style: none;
 }
+.border-amber-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(252 211 77 / var(--tw-border-opacity, 1));
+}
 .border-border {
   border-color: hsl(var(--border));
 }
@@ -1005,12 +1015,20 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
 }
+.border-green-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(134 239 172 / var(--tw-border-opacity, 1));
+}
 .border-input {
   border-color: hsl(var(--input));
 }
 .border-transparent {
   border-color: transparent;
 }
+.bg-amber-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
+}
 .bg-background {
   background-color: hsl(var(--background));
 }
@@ -1101,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;
@@ -1215,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));
@@ -1255,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));
@@ -1442,6 +1475,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);
 }
@@ -1455,6 +1492,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;
 }
@@ -1464,6 +1505,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));
 }
@@ -1663,9 +1708,21 @@ video {
 .group[data-disabled="true"] .group-data-\[disabled\=true\]\:opacity-50 {
   opacity: 0.5;
 }
+.dark\:border-amber-400\/40:is(.dark *) {
+  border-color: rgb(251 191 36 / 0.4);
+}
+.dark\:border-green-400\/40:is(.dark *) {
+  border-color: rgb(74 222 128 / 0.4);
+}
+.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\/20:is(.dark *) {
+  background-color: rgb(34 197 94 / 0.2);
+}
 .dark\:bg-input\/30:is(.dark *) {
   background-color: hsl(var(--input) / 0.3);
 }
@@ -1673,6 +1730,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));
@@ -1685,6 +1746,28 @@ video {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity, 1));
 }
+.dark\:text-green-200:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(187 247 208 / var(--tw-text-opacity, 1));
+}
+.dark\:text-red-400:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
+}
+.dark\:hover\:bg-red-950\/40:hover:is(.dark *) {
+  background-color: rgb(69 10 10 / 0.4);
+}
+.dark\:hover\:text-red-300:hover:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
+}
+.dark\:focus\:bg-red-950\/40:focus:is(.dark *) {
+  background-color: rgb(69 10 10 / 0.4);
+}
+.dark\:focus\:text-red-300:focus:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
+}
 .dark\:focus-visible\:ring-destructive\/40:focus-visible:is(.dark *) {
   --tw-ring-color: hsl(var(--destructive) / 0.4);
 }

package/package.json

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

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

@@ -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-400 hover:bg-red-50 dark:hover:bg-red-950/40 hover:text-red-700 dark:hover:text-red-300 focus:bg-red-50 dark:focus:bg-red-950/40 focus:text-red-700 dark:focus:text-red-300" onClick={() => onSignout?.()}>
+          <LogOut className="mr-2 h-4 w-4 text-red-600 dark:text-red-400" />
           <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);
@@ -159,8 +173,16 @@ export const UserProfile = ({
                     <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 className="mt-1">
+                          {isVerified ? (
+                            <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 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>
+                          )}
                         </div>
                       </div>
                       <div className="flex items-center gap-2">
@@ -217,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"