@authdog/react-elements 0.0.42 → 0.0.44

package/dist/styles.css

@@ -531,6 +531,39 @@ video {
 
     --radius: 0.5rem;
   }
+
+  .dark {
+    --background: 224 71% 4%;
+    --foreground: 213 31% 91%;
+
+    --muted: 223 47% 11%;
+    --muted-foreground: 215.4 16.3% 56.9%;
+
+    --popover: 224 71% 4%;
+    --popover-foreground: 215 20.2% 65.1%;
+
+    --card: 224 71% 4%;
+    --card-foreground: 213 31% 91%;
+
+    --border: 216 34% 17%;
+    --input: 216 34% 17%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 1.2%;
+
+    --secondary: 222.2 47.4% 11.2%;
+    --secondary-foreground: 210 40% 98%;
+
+    --accent: 216 34% 17%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 63% 31%;
+    --destructive-foreground: 210 40% 98%;
+
+    --ring: 216 34% 17%;
+
+    --radius: 0.5rem;
+  }
   * {
   border-color: hsl(var(--border));
 }
@@ -539,19 +572,6 @@ video {
   color: hsl(var(--foreground));
     font-feature-settings: "rlig" 1, "calt" 1;
 }
-.container {
-  width: 100%;
-  margin-right: auto;
-  margin-left: auto;
-  padding-right: 2rem;
-  padding-left: 2rem;
-}
-@media (min-width: 1400px) {
-
-  .container {
-    max-width: 1400px;
-  }
-}
 .sr-only {
   position: absolute;
   width: 1px;
@@ -575,6 +595,9 @@ video {
 .relative {
   position: relative;
 }
+.sticky {
+  position: sticky;
+}
 .inset-0 {
   inset: 0px;
 }
@@ -610,6 +633,9 @@ video {
 .top-4 {
   top: 1rem;
 }
+.z-40 {
+  z-index: 40;
+}
 .z-50 {
   z-index: 50;
 }
@@ -814,6 +840,9 @@ video {
 .w-6 {
   width: 1.5rem;
 }
+.w-7 {
+  width: 1.75rem;
+}
 .w-72 {
   width: 18rem;
 }
@@ -1103,6 +1132,9 @@ video {
 .bg-background {
   background-color: hsl(var(--background));
 }
+.bg-background\/80 {
+  background-color: hsl(var(--background) / 0.8);
+}
 .bg-black\/50 {
   background-color: rgb(0 0 0 / 0.5);
 }
@@ -1148,6 +1180,9 @@ video {
 .bg-muted {
   background-color: hsl(var(--muted));
 }
+.bg-muted\/80 {
+  background-color: hsl(var(--muted) / 0.8);
+}
 .bg-popover {
   background-color: hsl(var(--popover));
 }
@@ -1191,6 +1226,10 @@ video {
 .fill-current {
   fill: currentColor;
 }
+.object-contain {
+  -o-object-fit: contain;
+     object-fit: contain;
+}
 .p-0 {
   padding: 0px;
 }
@@ -1218,6 +1257,10 @@ video {
 .p-8 {
   padding: 2rem;
 }
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1534,6 +1577,14 @@ video {
   --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-1 {
+  --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(1px + 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-border {
+  --tw-ring-color: hsl(var(--border));
+}
 .ring-offset-background {
   --tw-ring-offset-color: hsl(var(--background));
 }
@@ -1542,6 +1593,10 @@ video {
   -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
+.backdrop-filter {
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
 .transition {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
@@ -1749,6 +1804,9 @@ video {
 .focus-visible\:ring-offset-2:focus-visible {
   --tw-ring-offset-width: 2px;
 }
+.focus-visible\:ring-offset-background:focus-visible {
+  --tw-ring-offset-color: hsl(var(--background));
+}
 .disabled\:pointer-events-none:disabled {
   pointer-events: none;
 }
@@ -1758,6 +1816,9 @@ video {
 .disabled\:opacity-50:disabled {
   opacity: 0.5;
 }
+.group:hover .group-hover\:text-primary {
+  color: hsl(var(--primary));
+}
 .peer:disabled ~ .peer-disabled\:cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -1897,6 +1958,12 @@ video {
 .group[data-disabled="true"] .group-data-\[disabled\=true\]\:opacity-50 {
   opacity: 0.5;
 }
+@supports ((-webkit-backdrop-filter: var(--tw)) or (backdrop-filter: var(--tw))) {
+
+  .supports-\[backdrop-filter\]\:bg-background\/60 {
+    background-color: hsl(var(--background) / 0.6);
+  }
+}
 .dark\:border-amber-400\/40:is(.dark *) {
   border-color: rgb(251 191 36 / 0.4);
 }
@@ -2011,6 +2078,14 @@ video {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
+  .md\:gap-3 {
+    gap: 0.75rem;
+  }
+
+  .md\:gap-4 {
+    gap: 1rem;
+  }
+
   .md\:space-y-6 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-y-reverse: 0;
     margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -2030,6 +2105,11 @@ video {
     padding-right: 1.5rem;
   }
 
+  .md\:text-lg {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+  }
+
   .md\:text-sm {
     font-size: 0.875rem;
     line-height: 1.25rem;
@@ -2037,6 +2117,10 @@ video {
 }
 @media (min-width: 1024px) {
 
+  .lg\:max-w-\[80vw\] {
+    max-width: 80vw;
+  }
+
   .lg\:grid-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@authdog/react-elements",
-  "version": "0.0.42",
+  "version": "0.0.44",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.mts",
@@ -15,7 +15,7 @@
     "@storybook/react-vite": "^10.1.3",
     "@types/node": "22.10.10",
     "@types/react": "19.1.8",
-    "@types/react-dom": "19.0.0",
+    "@types/react-dom": "19.1.8",
     "@vitejs/plugin-react": "^4.4.1",
     "autoprefixer": "^10",
     "css-loader": "^6.8.1",
@@ -33,7 +33,7 @@
     "tailwindcss": "3.4.18",
     "ts-loader": "^9.5.1",
     "typescript": "5.7.3",
-    "vite": "^4.5.0",
+    "vite": "^5.0.0",
     "webpack": "^5.89.0",
     "@authdog/eslint-config": "0.0.0",
     "@authdog/typescript-config": "0.0.0"
@@ -84,6 +84,6 @@
     "build": "pnpm tsup && pnpm build:styles",
     "storybook": "storybook dev -p 7007",
     "build-storybook": "storybook build",
-    "deploy-docs": "wrangler pages deploy"
+    "deploy-docs": "pnpm build-storybook && cp wrangler.prod.toml wrangler.toml && wrangler pages deploy"
   }
 }

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/ui/theme-toggle.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Sun, Moon } from "lucide-react";
+
+import { Button } from "./button";
+
+const STORAGE_KEY = "authdog-theme";
+
+type ThemeMode = "light" | "dark";
+
+const getPreferredTheme = (): ThemeMode => {
+  if (typeof window === "undefined") return "light";
+  const stored = window.localStorage.getItem(STORAGE_KEY);
+  if (stored === "light" || stored === "dark") {
+    return stored;
+  }
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+};
+
+const applyTheme = (mode: ThemeMode) => {
+  document.documentElement.classList.toggle("dark", mode === "dark");
+};
+
+export const ThemeToggle = () => {
+  const [mode, setMode] = useState<ThemeMode>("light");
+
+  useEffect(() => {
+    const initial = getPreferredTheme();
+    applyTheme(initial);
+    setMode(initial);
+  }, []);
+
+  const toggle = () => {
+    const nextMode: ThemeMode = mode === "dark" ? "light" : "dark";
+    applyTheme(nextMode);
+    try {
+      window.localStorage.setItem(STORAGE_KEY, nextMode);
+    } catch {
+      // ignore
+    }
+    setMode(nextMode);
+  };
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      aria-label={mode === "dark" ? "Switch to light theme" : "Switch to dark theme"}
+      onClick={toggle}
+    >
+      {mode === "dark" ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+    </Button>
+  );
+};

package/src/stories/core/Navbar.stories.tsx

@@ -9,7 +9,7 @@ const demoItems = [
   { title: "Home", href: "/" },
   { title: "Features", href: "/features" },
   { title: "Pricing", href: "/pricing" },
-  { title: "Contact", href: "/contact" },
+  // { title: "Contact", href: "/contact" },
 ];
 
 const demoUser = {
@@ -43,3 +43,9 @@ export const Authenticated: Story = {
     user: demoUser,
   },
 };
+
+export const WithLogo: Story = {
+  args: {
+    logoSrc: "https://dummyimage.com/64x64/111827/ffffff&text=AD",
+  },
+};