@authdog/react-elements 0.0.40 → 0.0.43

package/src/components/core/navbar.tsx

@@ -22,6 +22,7 @@ import {
 } from "../../components/ui/dropdown-menu";
 import { Sheet, SheetContent, SheetTrigger } from "../../components/ui/sheet";
 import { IconWrapper } from "../icons";
+import { ThemeToggle } from "../ui/theme-toggle";
 
 interface NavItem {
   title: string;
@@ -34,6 +35,7 @@ interface NavbarProps {
   children?: React.ReactNode;
   className?: string;
   logoText?: string;
+  logoSrc?: string;
   isLoading?: boolean;
   user?: any;
   onNavigateHome?: () => void;
@@ -52,6 +54,7 @@ export function Navbar({
   children,
   className,
   logoText = "ACME Corp",
+  logoSrc,
   user = {
     name: "John Doe",
     email: "john@example.com",
@@ -66,22 +69,54 @@ export function Navbar({
   environmentId = "58be35b0-708f-49f6-84f0-6695d307d997",
 }: NavbarProps) {
   const [open, setOpen] = useState(false);
+  const [logoFailed, setLogoFailed] = 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"
+    <header
+      className={cn(
+        "sticky top-0 z-40 w-full border-b bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/60",
+        className,
+      )}
+    >
+      <div
+        className={cn(
+          "flex h-16 items-center justify-between px-4 md:px-6",
+          "w-full lg:max-w-[80vw] mx-auto",
+        )}
+      >
+        <div className="flex items-center gap-3 md:gap-4">
+          <button
+            type="button"
             onClick={onNavigateHome}
+            className={cn(
+              "group inline-flex items-center gap-2 md:gap-3 rounded-md px-1 py-1 text-left",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+            )}
+            aria-label="Go to homepage"
           >
-            {logoText}
-          </span>
-          <nav className="hidden md:flex gap-6">
+            {logoSrc && !logoFailed && (
+              <span className="inline-flex h-8 w-8 items-center justify-center overflow-hidden rounded-md bg-muted/80 ring-1 ring-border">
+                <img
+                  src={logoSrc}
+                  alt={logoText}
+                  className="h-7 w-7 object-contain"
+                  onError={() => setLogoFailed(true)}
+                />
+              </span>
+            )}
+            <span className="text-base font-semibold tracking-tight md:text-lg group-hover:text-primary">
+              {logoText}
+            </span>
+          </button>
+          {children}
+        </div>
+        <div className="flex flex-1 items-center justify-end gap-6">
+          <nav className="hidden md:flex items-center gap-6">
             {items?.map((item, index) => (
               <span
                 key={index}
@@ -99,119 +134,117 @@ export function Navbar({
               </span>
             ))}
           </nav>
-        </div>
-        <div className="flex items-center gap-4">
-          {children}
-
-          {isAuthenticated ? (
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
+          <div className="flex items-center gap-3">
+            <Sheet open={open} onOpenChange={setOpen}>
+              <SheetTrigger asChild>
                 <Button
                   variant="ghost"
-                  className="relative h-8 w-8 rounded-full"
-                  disabled={isLoading}
+                  size="icon"
+                  className="md:hidden"
+                  aria-label="Open Menu"
                 >
-                  <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>
-                      </>
-                    )}
-                  </Avatar>
+                  <IconWrapper Icon={Menu} />
                 </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent className="w-56" align="end" forceMount>
-                {isLoading ? (
-                  <div className="p-4">
-                    <div className="h-4 w-3/4 animate-pulse bg-muted rounded mb-2" />
-                    <div className="h-3 w-1/2 animate-pulse bg-muted rounded" />
-                  </div>
-                ) : (
-                  <>
-                    <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>
-                      </div>
-                    </DropdownMenuLabel>
-                    <DropdownMenuSeparator />
-                    <DropdownMenuGroup>
-                      <DropdownMenuItem onClick={onProfileSelected}>
-                        <IconWrapper Icon={User} />
-                        <span>Profile</span>
+              </SheetTrigger>
+              <SheetContent side="left" className="pr-0">
+                <nav className="grid gap-2 py-6">
+                  {items?.map((item, index) => (
+                    <a
+                      key={index}
+                      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",
+                      )}
+                      onClick={() => setOpen(false)}
+                    >
+                      {item.title}
+                    </a>
+                  ))}
+                </nav>
+              </SheetContent>
+            </Sheet>
+            <ThemeToggle />
+            {isAuthenticated ? (
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <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>
+                        </>
+                      )}
+                    </Avatar>
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent className="w-56" align="end" forceMount>
+                  {isLoading ? (
+                    <div className="p-4">
+                      <div className="h-4 w-3/4 animate-pulse bg-muted rounded mb-2" />
+                      <div className="h-3 w-1/2 animate-pulse bg-muted rounded" />
+                    </div>
+                  ) : (
+                    <>
+                      <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>
+                        </div>
+                      </DropdownMenuLabel>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuGroup>
+                        <DropdownMenuItem onClick={onProfileSelected}>
+                          <IconWrapper Icon={User} />
+                          <span>Profile</span>
+                        </DropdownMenuItem>
+                      </DropdownMenuGroup>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem onClick={onLogout}>
+                        <IconWrapper Icon={LogOut} />
+                        <span>Log out</span>
                       </DropdownMenuItem>
-                    </DropdownMenuGroup>
-                    <DropdownMenuSeparator />
-                    <DropdownMenuItem onClick={onLogout}>
-                      <IconWrapper Icon={LogOut} />
-                      <span>Log out</span>
-                    </DropdownMenuItem>
-                  </>
-                )}
-              </DropdownMenuContent>
-            </DropdownMenu>
-          ) : (
-            <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");
-                }
+                    </>
+                  )}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            ) : (
+              <Button
+                variant="default"
+                aria-label="Sign in"
+                onClick={() => {
+                  if (!environmentId) {
+                    throw new Error("Environment ID is required");
+                  }
 
-                const signinUrl = `${identityHost}/signin/${environmentId}`;
-                window.open(signinUrl, "_blank");
-              }}
-            >
-              Sign in
-            </Button>
-          )}
+                  if (!identityHost) {
+                    throw new Error("Identity Host is required");
+                  }
 
-          <Sheet open={open} onOpenChange={setOpen}>
-            <SheetTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="md:hidden"
-                aria-label="Open Menu"
+                  const signinUrl = `${identityHost}/signin/${environmentId}`;
+                  window.open(signinUrl, "_blank");
+                }}
               >
-                <IconWrapper Icon={Menu} />
+                Sign in
               </Button>
-            </SheetTrigger>
-            <SheetContent side="left" className="pr-0">
-              <nav className="grid gap-2 py-6">
-                {items?.map((item, index) => (
-                  <a
-                    key={index}
-                    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",
-                    )}
-                    onClick={() => setOpen(false)}
-                  >
-                    {item.title}
-                  </a>
-                ))}
-              </nav>
-            </SheetContent>
-          </Sheet>
+            )}
+          </div>
         </div>
       </div>
     </header>

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

@@ -12,8 +12,9 @@ import {
   AvatarFallback,
   AvatarImage,
 } from "../../components/ui/avatar";
-import { cn } from "@authdog/react-elements/lib/utils";
+import { cn } from "../../lib/utils";
 import { LogOut, Settings, ExternalLink } from "lucide-react";
+import type { ComponentType } from "react";
 
 export type UserDropdownLink = {
   label: string;
@@ -40,6 +41,8 @@ export interface UserDropdownProps {
   align?: "start" | "center" | "end";
   sideOffset?: number;
   modal?: boolean;
+  triggerAsChild?: boolean;
+  triggerWrapperClassName?: string;
 }
 
 const getInitials = (name?: string) => {
@@ -63,6 +66,8 @@ export const UserDropdown = ({
   align = "end",
   sideOffset = 8,
   modal = false,
+  triggerAsChild = false,
+  triggerWrapperClassName,
 }: UserDropdownProps) => {
   const primaryEmail = user?.emails?.[0]?.value || user?.email || "";
   const displayName = user?.displayName || user?.name || "";
@@ -80,10 +85,23 @@ export const UserDropdown = ({
   };
 
   const IconExternal = ExternalLink as any;
+  const SettingsIcon = Settings as ComponentType<any>;
+  const LogOutIcon = LogOut as ComponentType<any>;
 
   return (
     <DropdownMenu modal={modal}>
-      <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
+      {triggerAsChild ? (
+        <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
+      ) : (
+        <DropdownMenuTrigger
+          className={cn(
+            "inline-flex items-center justify-center bg-transparent p-0 border-0 outline-none focus-visible:outline-none",
+            triggerWrapperClassName,
+          )}
+        >
+          {trigger}
+        </DropdownMenuTrigger>
+      )}
       <DropdownMenuContent
         align={align}
         side={side}
@@ -112,7 +130,7 @@ export const UserDropdown = ({
           className="cursor-pointer py-2"
           onClick={() => onManageAccount?.()}
         >
-          <Settings className="mr-2 h-4 w-4" />
+          <SettingsIcon className="mr-2 h-4 w-4" />
           <span>Manage account</span>
         </DropdownMenuItem>
         {links.map((item, idx) => {
@@ -133,7 +151,7 @@ export const UserDropdown = ({
           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" />
+          <LogOutIcon className="mr-2 h-4 w-4 text-red-600 dark:text-red-300" />
           <span>Sign out</span>
         </DropdownMenuItem>
       </DropdownMenuContent>

package/src/components/icons.tsx

@@ -6,26 +6,20 @@ const iconProps: LucideProps = {
   "aria-hidden": "true",
 };
 
-export const renderIcon = ((Icon: any) => {
+export const IconWrapper = ({ Icon }: { Icon: any }) => {
   const [isMounted, setIsMounted] = useState(false);
 
   useEffect(() => {
     setIsMounted(true);
   }, []);
 
-  if (!isMounted) {
-    return <span className="mr-2 h-4 w-4" aria-hidden="true" />;
-  }
-
-  return <Icon {...iconProps} />;
-}) as React.FC<{
-  Icon: any;
-}>;
-
-export const IconWrapper = ({ Icon }: { Icon: any }) => {
   return (
     <span className="inline-flex items-center justify-center">
-      {renderIcon(Icon)}
+      {!isMounted ? (
+        <span className="mr-2 h-4 w-4" aria-hidden="true" />
+      ) : (
+        <Icon {...iconProps} />
+      )}
     </span>
   );
 };

package/src/components/ui/alert.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@authdog/react-elements/lib/utils";
+import { cn } from "../../lib/utils";
 
 const alertVariants = cva(
   "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",

package/src/components/ui/avatar.tsx

@@ -3,7 +3,7 @@
 import * as React from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 
-import { cn } from "@authdog/react-elements/lib/utils";
+import { cn } from "../../lib/utils";
 
 function Avatar({
   className,

package/src/components/ui/badge.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@authdog/react-elements/lib/utils";
+import { cn } from "../../lib/utils";
 
 const badgeVariants = cva(
   "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",

package/src/components/ui/card.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { cn } from "@authdog/react-elements/lib/utils";
+import { cn } from "../../lib/utils";
 
 function Card({ className, ...props }: React.ComponentProps<"div">) {
   return (