@authdog/react-elements 0.0.39 → 0.0.40

package/src/components/core/navbar.tsx

@@ -1,12 +1,16 @@
-"use client"
+"use client";
 
-import type React from "react"
-import { useState } from "react"
-import { User, LogOut, Menu } from "lucide-react"
+import type React from "react";
+import { useState } from "react";
+import { User, LogOut, Menu } from "lucide-react";
 
-import { cn } from "../../lib/utils"
-import { Avatar, AvatarFallback, AvatarImage } from "../../components/ui/avatar"
-import { Button } from "../../components/ui/button"
+import { cn } from "../../lib/utils";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "../../components/ui/avatar";
+import { Button } from "../../components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -15,22 +19,22 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "../../components/ui/dropdown-menu"
-import { Sheet, SheetContent, SheetTrigger } from "../../components/ui/sheet"
-import { IconWrapper } from "../icons"
+} from "../../components/ui/dropdown-menu";
+import { Sheet, SheetContent, SheetTrigger } from "../../components/ui/sheet";
+import { IconWrapper } from "../icons";
 
 interface NavItem {
-  title: string
-  href: string
-  disabled?: boolean
+  title: string;
+  href: string;
+  disabled?: boolean;
 }
 
 interface NavbarProps {
   items?: NavItem[] | undefined;
-  children?: React.ReactNode
-  className?: string
-  logoText?: string
-  isLoading?: boolean
+  children?: React.ReactNode;
+  className?: string;
+  logoText?: string;
+  isLoading?: boolean;
   user?: any;
   onNavigateHome?: () => void;
   onNavItemClick?: (href: string) => void;
@@ -61,25 +65,34 @@ export function Navbar({
   identityHost = "https://stg-id.authdog.xyz",
   environmentId = "58be35b0-708f-49f6-84f0-6695d307d997",
 }: NavbarProps) {
-  const [open, setOpen] = useState(false)
-  const isAuthenticated = user !== null && user !== undefined && user.id !== null && user.id !== undefined;
+  const [open, setOpen] = useState(false);
+  const isAuthenticated =
+    user !== null &&
+    user !== undefined &&
+    user.id !== null &&
+    user.id !== undefined;
   return (
     <header className={cn("border-b bg-background", className)}>
       <div className="container flex h-16 items-center justify-between px-4 md:px-6">
         <div className="flex items-center gap-4">
-          <span className="text-xl font-bold cursor-pointer" onClick={onNavigateHome}>{logoText}</span>
+          <span
+            className="text-xl font-bold cursor-pointer"
+            onClick={onNavigateHome}
+          >
+            {logoText}
+          </span>
           <nav className="hidden md:flex gap-6">
             {items?.map((item, index) => (
               <span
                 key={index}
                 onClick={() => {
                   if (!item.disabled) {
-                    onNavItemClick(item.href)
+                    onNavItemClick(item.href);
                   }
                 }}
                 className={cn(
                   "text-sm font-medium transition-colors hover:text-primary cursor-pointer",
-                  item.disabled && "cursor-not-allowed opacity-80"
+                  item.disabled && "cursor-not-allowed opacity-80",
                 )}
               >
                 {item.title}
@@ -90,18 +103,26 @@ export function Navbar({
         <div className="flex items-center gap-4">
           {children}
 
-          {
-            isAuthenticated ? (
-              <DropdownMenu>
+          {isAuthenticated ? (
+            <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <Button variant="ghost" className="relative h-8 w-8 rounded-full" disabled={isLoading}>
+                <Button
+                  variant="ghost"
+                  className="relative h-8 w-8 rounded-full"
+                  disabled={isLoading}
+                >
                   <Avatar className="h-8 w-8">
                     {isLoading ? (
                       <div className="h-8 w-8 animate-pulse bg-muted rounded-full" />
                     ) : (
                       <>
-                        <AvatarImage src={user.photos?.[0]?.value || "/placeholder.svg"} alt={user.displayName} />
-                        <AvatarFallback>{user.displayName?.charAt(0)}</AvatarFallback>
+                        <AvatarImage
+                          src={user.photos?.[0]?.value || "/placeholder.svg"}
+                          alt={user.displayName}
+                        />
+                        <AvatarFallback>
+                          {user.displayName?.charAt(0)}
+                        </AvatarFallback>
                       </>
                     )}
                   </Avatar>
@@ -117,8 +138,12 @@ export function Navbar({
                   <>
                     <DropdownMenuLabel className="font-normal">
                       <div className="flex flex-col space-y-1">
-                        <p className="text-sm font-medium leading-none">{user.displayName}</p>
-                        <p className="text-xs leading-none text-muted-foreground">{user.emails?.[0]?.value}</p>
+                        <p className="text-sm font-medium leading-none">
+                          {user.displayName}
+                        </p>
+                        <p className="text-xs leading-none text-muted-foreground">
+                          {user.emails?.[0]?.value}
+                        </p>
                       </div>
                     </DropdownMenuLabel>
                     <DropdownMenuSeparator />
@@ -137,29 +162,35 @@ export function Navbar({
                 )}
               </DropdownMenuContent>
             </DropdownMenu>
-            )
-          
-          : (
-            <Button variant="default" aria-label="Sign in" onClick={() => {
-              if (!environmentId) {
-                throw new Error("Environment ID is required");
-              }
+          ) : (
+            <Button
+              variant="default"
+              aria-label="Sign in"
+              onClick={() => {
+                if (!environmentId) {
+                  throw new Error("Environment ID is required");
+                }
+
+                if (!identityHost) {
+                  throw new Error("Identity Host is required");
+                }
 
-              if (!identityHost) {
-                throw new Error("Identity Host is required");
-              }
-              
-              const signinUrl = `${identityHost}/signin/${environmentId}`;
-              window.open(signinUrl, "_blank");
-            }}>
+                const signinUrl = `${identityHost}/signin/${environmentId}`;
+                window.open(signinUrl, "_blank");
+              }}
+            >
               Sign in
             </Button>
-          )
-          }
-         
+          )}
+
           <Sheet open={open} onOpenChange={setOpen}>
             <SheetTrigger asChild>
-              <Button variant="ghost" size="icon" className="md:hidden" aria-label="Open Menu">
+              <Button
+                variant="ghost"
+                size="icon"
+                className="md:hidden"
+                aria-label="Open Menu"
+              >
                 <IconWrapper Icon={Menu} />
               </Button>
             </SheetTrigger>
@@ -171,7 +202,7 @@ export function Navbar({
                     href={item.href}
                     className={cn(
                       "flex w-full items-center rounded-md px-3 py-2 text-sm font-medium hover:bg-accent",
-                      item.disabled && "cursor-not-allowed opacity-80"
+                      item.disabled && "cursor-not-allowed opacity-80",
                     )}
                     onClick={() => setOpen(false)}
                   >
@@ -184,5 +215,5 @@ export function Navbar({
         </div>
       </div>
     </header>
-  )
+  );
 }

package/src/components/core/placeholder-alert.tsx

@@ -1,6 +1,6 @@
-import { CheckCircle2Icon } from "lucide-react"
-import { Alert, AlertDescription, AlertTitle } from "../../components/ui/alert"
-import { IconWrapper } from "../icons"
+import { CheckCircle2Icon } from "lucide-react";
+import { Alert, AlertDescription, AlertTitle } from "../../components/ui/alert";
+import { IconWrapper } from "../icons";
 
 interface PlaceholderAlertProps {
   title?: string;
@@ -11,15 +11,13 @@ export const PlaceholderAlert = (props: PlaceholderAlertProps) => {
   const title = props.title ?? "Placeholder Alert";
   const description = props.description ?? "This is a placeholder alert.";
 
-  return (      
+  return (
     <div className="grid w-full max-w-xl items-start gap-4">
       <Alert>
         <IconWrapper Icon={CheckCircle2Icon} />
         <AlertTitle>{title}</AlertTitle>
-        <AlertDescription>
-            {description}
-        </AlertDescription>
+        <AlertDescription>{description}</AlertDescription>
       </Alert>
     </div>
-  )
-}
+  );
+};

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

@@ -1,100 +1,142 @@
-"use client"
+"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"
+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>
-}
+  label: string;
+  href?: string;
+  onClick?: () => void;
+  icon?: React.ComponentType<any>;
+};
 
 export interface UserDropdownProps {
-  trigger: React.ReactElement
+  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
-  modal?: boolean
+    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;
+  modal?: boolean;
 }
 
 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 || "?"
-}
+  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, modal = false }: UserDropdownProps) => {
-  const primaryEmail = user?.emails?.[0]?.value || user?.email || ""
-  const displayName = user?.displayName || user?.name || ""
-  const avatar = user?.photos?.[0]?.value || user?.avatar || ""
+export const UserDropdown = ({
+  trigger,
+  user,
+  className,
+  onManageAccount,
+  onSignout,
+  links = [],
+  side = "bottom",
+  align = "end",
+  sideOffset = 8,
+  modal = false,
+}: 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.onClick) return item.onClick();
     if (item.href) {
       if (item.href.startsWith("http")) {
-        window.open(item.href, "_blank")
+        window.open(item.href, "_blank");
       } else {
-        window.location.assign(item.href)
+        window.location.assign(item.href);
       }
     }
-  }
+  };
 
-  const IconExternal = ExternalLink as any
+  const IconExternal = ExternalLink as any;
 
   return (
     <DropdownMenu modal={modal}>
-      <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)}>
+      <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,
+        )}
+      >
         <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>
+            <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 className="text-xs text-muted-foreground truncate">
+              {primaryEmail}
+            </div>
           </div>
         </div>
         <DropdownMenuSeparator />
-        <DropdownMenuItem className="cursor-pointer py-2" onClick={() => onManageAccount?.()}>
+        <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
+          const Icon = (item.icon ?? IconExternal) as any;
           return (
-            <DropdownMenuItem key={`${item.label}-${idx}`} className="cursor-pointer py-2" onClick={() => handleLink(item)}>
+            <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 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?.()}>
+        <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>
     </DropdownMenu>
-  )
-}
-
-
+  );
+};