@authdog/react-elements 0.0.47 → 0.0.49

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -178,7 +178,7 @@ export function Navbar({
178
178
  className="md:hidden"
179
179
  aria-label="Open Menu"
180
180
  >
181
- <IconWrapper Icon={Menu} />
181
+ <IconWrapper Icon={Menu} withMargin={false} />
182
182
  </Button>
183
183
  </SheetTrigger>
184
184
  <SheetContent side="left" className="pr-0">
@@ -205,7 +205,7 @@ export function Navbar({
205
205
  <DropdownMenuTrigger asChild>
206
206
  <Button
207
207
  variant="ghost"
208
- className="relative h-8 w-8 rounded-full"
208
+ className="relative h-8 w-8 rounded-full cursor-pointer"
209
209
  disabled={isLoading}
210
210
  >
211
211
  <Avatar className="h-8 w-8">
@@ -243,29 +243,33 @@ export function Navbar({
243
243
  </p>
244
244
  </div>
245
245
  </DropdownMenuLabel>
246
- <DropdownMenuSeparator />
247
- <DropdownMenuGroup>
248
- {dropdownMenuItems.map((item, index) => (
249
- <DropdownMenuItem
250
- key={index}
251
- onClick={() => {
252
- if (!item.disabled) {
253
- // Backward compatibility: if it's the profile item and onProfileSelected exists
254
- if (item.uri === "/profile" && onProfileSelected) {
255
- onProfileSelected();
256
- }
257
- onDropdownMenuItemClick(item.uri);
258
- }
259
- }}
260
- disabled={item.disabled}
261
- className="cursor-pointer"
262
- >
263
- {item.icon && <IconWrapper Icon={item.icon} />}
264
- <span>{item.name}</span>
265
- </DropdownMenuItem>
266
- ))}
267
- </DropdownMenuGroup>
268
- <DropdownMenuSeparator />
246
+ {dropdownMenuItems.length > 0 && (
247
+ <>
248
+ <DropdownMenuSeparator />
249
+ <DropdownMenuGroup>
250
+ {dropdownMenuItems.map((item, index) => (
251
+ <DropdownMenuItem
252
+ key={index}
253
+ onClick={() => {
254
+ if (!item.disabled) {
255
+ // Backward compatibility: if it's the profile item and onProfileSelected exists
256
+ if (item.uri === "/profile" && onProfileSelected) {
257
+ onProfileSelected();
258
+ }
259
+ onDropdownMenuItemClick(item.uri);
260
+ }
261
+ }}
262
+ disabled={item.disabled}
263
+ className="cursor-pointer"
264
+ >
265
+ {item.icon && <IconWrapper Icon={item.icon} />}
266
+ <span>{item.name}</span>
267
+ </DropdownMenuItem>
268
+ ))}
269
+ </DropdownMenuGroup>
270
+ <DropdownMenuSeparator />
271
+ </>
272
+ )}
269
273
  <DropdownMenuItem onClick={onLogout} className="cursor-pointer">
270
274
  <IconWrapper Icon={LogOut} />
271
275
  <span>Log out</span>
@@ -277,6 +281,7 @@ export function Navbar({
277
281
  ) : (
278
282
  <Button
279
283
  variant="default"
284
+ className="cursor-pointer"
280
285
  aria-label="Sign in"
281
286
  onClick={() => {
282
287
  if (!environmentId) {
@@ -2,23 +2,28 @@ import { LucideProps } from "lucide-react";
2
2
  import { useEffect, useState } from "react";
3
3
 
4
4
  const iconProps: LucideProps = {
5
- className: "mr-2 h-4 w-4",
5
+ className: "mr-2 h-4 w-4 text-current",
6
6
  "aria-hidden": "true",
7
7
  };
8
8
 
9
- export const IconWrapper = ({ Icon }: { Icon: any }) => {
9
+ export const IconWrapper = ({ Icon, withMargin = true }: { Icon: any; withMargin?: boolean }) => {
10
10
  const [isMounted, setIsMounted] = useState(false);
11
11
 
12
12
  useEffect(() => {
13
13
  setIsMounted(true);
14
14
  }, []);
15
15
 
16
+ const iconClassWithMargin: LucideProps = withMargin ? iconProps : {
17
+ className: "h-4 w-4 text-current",
18
+ "aria-hidden": "true",
19
+ };
20
+
16
21
  return (
17
22
  <span className="inline-flex items-center justify-center">
18
23
  {!isMounted ? (
19
- <span className="mr-2 h-4 w-4" aria-hidden="true" />
24
+ <span className={withMargin ? "mr-2 h-4 w-4" : "h-4 w-4"} aria-hidden="true" />
20
25
  ) : (
21
- <Icon {...iconProps} />
26
+ <Icon {...iconClassWithMargin} />
22
27
  )}
23
28
  </span>
24
29
  );
@@ -83,7 +83,7 @@ const DropdownMenuItem = React.forwardRef<
83
83
  data-inset={inset}
84
84
  data-variant={variant}
85
85
  className={cn(
86
- "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",
86
+ "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",
87
87
  className,
88
88
  )}
89
89
  {...props}
@@ -46,6 +46,7 @@ export const ThemeToggle = () => {
46
46
  <Button
47
47
  variant="ghost"
48
48
  size="icon"
49
+ className="cursor-pointer"
49
50
  aria-label={mode === "dark" ? "Switch to light theme" : "Switch to dark theme"}
50
51
  onClick={toggle}
51
52
  >