@authdog/react-elements 0.0.48 → 0.0.50

package/package.json

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

package/src/components/core/navbar.tsx

@@ -178,7 +178,7 @@ export function Navbar({
                   className="md:hidden"
                   aria-label="Open Menu"
                 >
-                  <IconWrapper Icon={Menu} />
+                  <IconWrapper Icon={Menu} withMargin={false} />
                 </Button>
               </SheetTrigger>
               <SheetContent side="left" className="pr-0">
@@ -200,7 +200,12 @@ export function Navbar({
               </SheetContent>
             </Sheet>
             <ThemeToggle />
-            {isAuthenticated ? (
+            {isLoading ? (
+              <div
+                className="h-8 w-8 animate-pulse rounded-full bg-muted"
+                aria-label="Loading user"
+              />
+            ) : isAuthenticated ? (
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
                   <Button
@@ -281,6 +286,7 @@ export function Navbar({
             ) : (
               <Button
                 variant="default"
+                className="cursor-pointer"
                 aria-label="Sign in"
                 onClick={() => {
                   if (!environmentId) {

package/src/components/icons.tsx

@@ -2,23 +2,28 @@ import { LucideProps } from "lucide-react";
 import { useEffect, useState } from "react";
 
 const iconProps: LucideProps = {
-  className: "mr-2 h-4 w-4",
+  className: "mr-2 h-4 w-4 text-current",
   "aria-hidden": "true",
 };
 
-export const IconWrapper = ({ Icon }: { Icon: any }) => {
+export const IconWrapper = ({ Icon, withMargin = true }: { Icon: any; withMargin?: boolean }) => {
   const [isMounted, setIsMounted] = useState(false);
 
   useEffect(() => {
     setIsMounted(true);
   }, []);
 
+  const iconClassWithMargin: LucideProps = withMargin ? iconProps : {
+    className: "h-4 w-4 text-current",
+    "aria-hidden": "true",
+  };
+
   return (
     <span className="inline-flex items-center justify-center">
       {!isMounted ? (
-        <span className="mr-2 h-4 w-4" aria-hidden="true" />
+        <span className={withMargin ? "mr-2 h-4 w-4" : "h-4 w-4"} aria-hidden="true" />
       ) : (
-        <Icon {...iconProps} />
+        <Icon {...iconClassWithMargin} />
       )}
     </span>
   );

package/src/components/ui/dropdown-menu.tsx

@@ -83,7 +83,7 @@ const DropdownMenuItem = React.forwardRef<
     data-inset={inset}
     data-variant={variant}
     className={cn(
-      "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+      "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground focus:[&_svg:not([class*='text-'])]:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
       className,
     )}
     {...props}

package/src/lib/utils.ts

@@ -3,4 +3,4 @@ import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
-}
+}

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

@@ -44,6 +44,48 @@ export const Authenticated: Story = {
   },
 };
 
+export const LoadingThenAuthenticated: Story = {
+  render: (args) => {
+    const [loading, setLoading] = React.useState(true);
+    const [user, setUser] = React.useState<any | undefined>(undefined);
+
+    React.useEffect(() => {
+      const timer = setTimeout(() => {
+        setUser(demoUser);
+        setLoading(false);
+      }, 1500);
+
+      return () => clearTimeout(timer);
+    }, []);
+
+    return <Navbar {...args} isLoading={loading} user={user} />;
+  },
+  args: {
+    user: undefined,
+    isLoading: true,
+  },
+};
+
+export const LoadingThenGuest: Story = {
+  render: (args) => {
+    const [loading, setLoading] = React.useState(true);
+
+    React.useEffect(() => {
+      const timer = setTimeout(() => {
+        setLoading(false);
+      }, 1500);
+
+      return () => clearTimeout(timer);
+    }, []);
+
+    return <Navbar {...args} isLoading={loading} />;
+  },
+  args: {
+    user: undefined,
+    isLoading: true,
+  },
+};
+
 export const WithLogo: Story = {
   args: {
     logoSrc: "https://dummyimage.com/64x64/111827/ffffff&text=AD",