Get password auth working.

packages/ui/src/theme.tsx

@@ -1,24 +1,24 @@
 'use client';
 
 import type { ComponentProps } from 'react';
-import { useEffect, useState } from 'react';
 import { Moon, Sun } from 'lucide-react';
 import { ThemeProvider as NextThemesProvider, useTheme } from 'next-themes';
 
-import { Button, cn } from '@gib/ui';
+import {
+  Button,
+  cn,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@gib/ui';
+
 
 const ThemeProvider = ({
   children,
   ...props
 }: ComponentProps<typeof NextThemesProvider>) => {
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  if (!mounted) return null;
-  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
 };
 
 interface ThemeToggleProps {
@@ -27,44 +27,41 @@ interface ThemeToggleProps {
 }
 
 const ThemeToggle = ({ size = 1, buttonProps }: ThemeToggleProps) => {
-  const { setTheme, resolvedTheme } = useTheme();
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  if (!mounted) {
-    return (
-      <Button {...buttonProps}>
-        <span style={{ height: `${size}rem`, width: `${size}rem` }} />
-      </Button>
-    );
-  }
-
-  const toggleTheme = () => {
-    if (resolvedTheme === 'dark') setTheme('light');
-    else setTheme('dark');
-  };
+  const { setTheme } = useTheme();
 
   return (
-    <Button
-      variant='outline'
-      size='icon'
-      {...buttonProps}
-      onClick={toggleTheme}
-      className={cn('cursor-pointer', buttonProps?.className)}
-    >
-      <Sun
-        style={{ height: `${size}rem`, width: `${size}rem` }}
-        className='scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90'
-      />
-      <Moon
-        style={{ height: `${size}rem`, width: `${size}rem` }}
-        className='absolute scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0'
-      />
-    </Button>
-  );
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="outline"
+          size="icon"
+          {...buttonProps}
+          className={cn('cursor-pointer', buttonProps?.className)}
+        >
+          <Sun
+            style={{ height: `${size}rem`, width: `${size}rem` }}
+            className='scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90'
+          />
+          <Moon
+            style={{ height: `${size}rem`, width: `${size}rem` }}
+            className='absolute scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0'
+          />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
 };
 
 export { ThemeProvider, ThemeToggle, type ThemeToggleProps };