@authdog/react-elements 0.0.31 → 0.0.33

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

@@ -53,15 +53,17 @@ export const UserProfile = ({
     <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="mb-3 md:mb-4">
-          <h1 className="text-xl font-bold">Account</h1>
-          <p className="text-sm text-gray-500">Manage your account info.</p>
+          <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>
         </div>
 
         <nav className="space-y-1 flex-1">
           <button
             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" : "text-gray-700 hover:bg-gray-50"
+              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"
             }`}
           >
             {renderIcon(User)}
@@ -81,7 +83,7 @@ export const UserProfile = ({
 
       <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">
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
             {activeTab === "profile" ? "Profile details" : "Security settings"}
           </h2>
           {/* <button className="text-gray-500 hover:text-gray-700">
@@ -93,14 +95,14 @@ export const UserProfile = ({
           <div className="space-y-5 md:space-y-6">
             {/* Profile Section */}
             <div>
-              <h3 className="text-sm font-medium mb-3">Profile</h3>
+              <h3 className="text-sm font-medium mb-3 text-gray-900 dark:text-gray-100">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">{user.displayName}</span>
+                  <span className="font-medium text-gray-900 dark:text-gray-100">{user.displayName}</span>
                 </div>
                 {/* <Button variant="outline" size="sm">
                   Edit profile
@@ -110,7 +112,7 @@ export const UserProfile = ({
 
             {/* Email Addresses Section */}
             <div>
-              <h3 className="text-sm font-medium mb-3">Email addresses</h3>
+              <h3 className="text-sm font-medium mb-3 text-gray-900 dark:text-gray-100">Email addresses</h3>
               <div className="space-y-2.5">
 
                 {/* {JSON.stringify(user)} */}
@@ -128,9 +130,12 @@ export const UserProfile = ({
 
                 {user.emails.map((email: any, idx: number) => (
                   <div className="flex items-center justify-between" key={email.value}>
-                    <span>{email.value}</span>
+                    <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">
+                      <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>
                     )}
@@ -162,15 +167,15 @@ export const UserProfile = ({
 
             {/* Connected Accounts Section */}
             <div>
-              <h3 className="text-sm font-medium mb-3">Connected accounts</h3>
+              <h3 className="text-sm font-medium mb-3 text-gray-900 dark:text-gray-100">Connected accounts</h3>
               <div className="space-y-2.5">
                 <div className="flex items-center justify-between" key={user.provider}>
                     <div className="flex items-center">
                       <div className="mr-2">
-                        <span>{user.provider}</span>
+                        <span className="text-gray-900 dark:text-gray-100">{user.provider}</span>
                       </div>
                     </div>
-                    <span className="text-sm text-gray-500">{user?.emails?.[0]?.value}</span>
+                    <span className="text-sm text-gray-500 dark:text-gray-400">{user?.emails?.[0]?.value}</span>
                   </div>
               </div>
             </div>
@@ -179,12 +184,12 @@ export const UserProfile = ({
           <div className="space-y-5 md:space-y-6">
             {/* Security Settings */}
             <div key="two-factor">
-              <h3 className="text-sm font-medium mb-3">Two-factor authentication</h3>
+              <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">Two-factor authentication</p>
-                    <p className="text-sm text-gray-500">Add an extra layer of security to your account</p>
+                    <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
@@ -194,12 +199,12 @@ export const UserProfile = ({
             </div>
 
             <div key="password">
-              <h3 className="text-sm font-medium mb-3">Password</h3>
+              <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">Change password</p>
-                    <p className="text-sm text-gray-500">Last changed 3 months ago</p>
+                    <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>
                   </div>
                   <Button variant="outline" size="sm">
                     Change
@@ -209,12 +214,12 @@ export const UserProfile = ({
             </div>
 
             <div key="sessions">
-              <h3 className="text-sm font-medium mb-3">Active sessions</h3>
+              <h3 className="text-sm font-medium mb-3 text-gray-900 dark:text-gray-100">Active sessions</h3>
               <div className="space-y-2.5">
                 <div className="flex items-center justify-between">
                   <div>
-                    <p className="font-medium">Current session</p>
-                    <p className="text-sm text-gray-500">Chrome on Windows • Active now</p>
+                    <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

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>
+)
+
+