@mesob/ui 0.2.0 → 0.2.1

package/dist/components/app-header-actions.js

@@ -59,18 +59,18 @@ function AvatarFallback({
 // src/components/button.tsx
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsxs } from "react/jsx-runtime";
 var buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-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",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        default: "bg-primary text-primary-foreground hover:bg-primary-600 dark:hover:bg-primary-400",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
+        outline: "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary-600 dark:hover:bg-secondary-400",
         ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline"
+        link: "text-primary underline-offset-4 hover:text-primary-600 dark:hover:text-primary-400 hover:underline"
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
@@ -92,15 +92,23 @@ function Button({
   variant,
   size,
   asChild = false,
+  leftIcon,
+  rightIcon,
+  children,
   ...props
 }) {
   const Comp = asChild ? Slot : "button";
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsxs(
     Comp,
     {
       "data-slot": "button",
       className: cn(buttonVariants({ variant, size, className })),
-      ...props
+      ...props,
+      children: [
+        leftIcon,
+        children,
+        rightIcon
+      ]
     }
   );
 }
@@ -108,16 +116,16 @@ function Button({
 // src/components/dropdown-menu.tsx
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { IconCheck, IconChevronRight, IconCircle } from "@tabler/icons-react";
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function DropdownMenu({
   ...props
 }) {
-  return /* @__PURE__ */ jsx3(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+  return /* @__PURE__ */ jsx2(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
 }
 function DropdownMenuTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(
     DropdownMenuPrimitive.Trigger,
     {
       "data-slot": "dropdown-menu-trigger",
@@ -130,13 +138,13 @@ function DropdownMenuContent({
   sideOffset = 4,
   ...props
 }) {
-  return /* @__PURE__ */ jsx3(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx2(
     DropdownMenuPrimitive.Content,
     {
       "data-slot": "dropdown-menu-content",
       sideOffset,
       className: cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+        "bg-popover text-popover-foreground border-border data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
         className
       ),
       ...props
@@ -149,7 +157,7 @@ function DropdownMenuItem({
   variant = "default",
   ...props
 }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(
     DropdownMenuPrimitive.Item,
     {
       "data-slot": "dropdown-menu-item",
@@ -167,7 +175,7 @@ function DropdownMenuSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(
     DropdownMenuPrimitive.Separator,
     {
       "data-slot": "dropdown-menu-separator",
@@ -179,7 +187,7 @@ function DropdownMenuSeparator({
 
 // src/components/tooltip.tsx
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 
 // src/components/mesob-context.tsx
 import {
@@ -187,14 +195,14 @@ import {
   useContext,
   useMemo
 } from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var MesobContext = createContext(null);
 function useMesob() {
   return useContext(MesobContext);
 }
 
 // src/components/link.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function Link({
   href,
   children,
@@ -205,9 +213,9 @@ function Link({
   const mesob = useMesob();
   const LinkComponent = mesob?.linkComponent ?? "a";
   if (LinkComponent === "a") {
-    return /* @__PURE__ */ jsx6("a", { href, className, onClick, ...props, children });
+    return /* @__PURE__ */ jsx5("a", { href, className, onClick, ...props, children });
   }
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx5(
     LinkComponent,
     {
       href,
@@ -222,27 +230,27 @@ function Link({
 // src/components/dialog.tsx
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { IconX } from "@tabler/icons-react";
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function Dialog({
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+  return /* @__PURE__ */ jsx6(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
 }
 function DialogPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+  return /* @__PURE__ */ jsx6(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
 }
 function DialogOverlay({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     DialogPrimitive.Overlay,
     {
       "data-slot": "dialog-overlay",
       className: cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:opacity-100 fixed inset-0 z-50 bg-[var(--overlay,oklch(0_0_0/0.5))]",
         className
       ),
       ...props
@@ -255,27 +263,27 @@ function DialogContent({
   showCloseButton = true,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs3(DialogPortal, { "data-slot": "dialog-portal", children: [
-    /* @__PURE__ */ jsx7(DialogOverlay, {}),
-    /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsx6(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs4(
       DialogPrimitive.Content,
       {
         "data-slot": "dialog-content",
         className: cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          "bg-background text-foreground border-border data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-[51] grid w-full min-w-[280px] max-w-[calc(100vw-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:min-w-[320px] sm:max-w-[32rem]",
           className
         ),
         ...props,
         children: [
           children,
-          showCloseButton && /* @__PURE__ */ jsxs3(
+          showCloseButton && /* @__PURE__ */ jsxs4(
             DialogPrimitive.Close,
             {
               "data-slot": "dialog-close",
               className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
               children: [
-                /* @__PURE__ */ jsx7(IconX, {}),
-                /* @__PURE__ */ jsx7("span", { className: "sr-only", children: "Close" })
+                /* @__PURE__ */ jsx6(IconX, {}),
+                /* @__PURE__ */ jsx6("span", { className: "sr-only", children: "Close" })
               ]
             }
           )
@@ -285,7 +293,7 @@ function DialogContent({
   ] });
 }
 function DialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       "data-slot": "dialog-header",
@@ -298,7 +306,7 @@ function DialogTitle({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     DialogPrimitive.Title,
     {
       "data-slot": "dialog-title",
@@ -311,7 +319,7 @@ function DialogDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     DialogPrimitive.Description,
     {
       "data-slot": "dialog-description",
@@ -324,17 +332,17 @@ function DialogDescription({
 // src/components/command.tsx
 import { IconSearch } from "@tabler/icons-react";
 import { Command as CommandPrimitive } from "cmdk";
-import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function Command({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx7(
     CommandPrimitive,
     {
       "data-slot": "command",
       className: cn(
-        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        "bg-popover text-popover-foreground flex h-full min-h-0 w-full flex-col overflow-hidden rounded-md",
         className
       ),
       ...props
@@ -349,17 +357,17 @@ function CommandDialog({
   showCloseButton = true,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs4(Dialog, { ...props, children: [
-    /* @__PURE__ */ jsxs4(DialogHeader, { className: "sr-only", children: [
-      /* @__PURE__ */ jsx8(DialogTitle, { children: title }),
-      /* @__PURE__ */ jsx8(DialogDescription, { children: description })
+  return /* @__PURE__ */ jsxs5(Dialog, { ...props, children: [
+    /* @__PURE__ */ jsxs5(DialogHeader, { className: "sr-only", children: [
+      /* @__PURE__ */ jsx7(DialogTitle, { children: title }),
+      /* @__PURE__ */ jsx7(DialogDescription, { children: description })
     ] }),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx7(
       DialogContent,
       {
         className: cn("overflow-hidden p-0", className),
         showCloseButton,
-        children: /* @__PURE__ */ jsx8(Command, { className: "[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children })
+        children: /* @__PURE__ */ jsx7(Command, { className: "[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children })
       }
     )
   ] });
@@ -368,14 +376,14 @@ function CommandInput({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       "data-slot": "command-input-wrapper",
-      className: "flex h-9 items-center gap-2 border-b px-3",
+      className: "border-border flex h-9 items-center gap-2 border-b px-3",
       children: [
-        /* @__PURE__ */ jsx8(IconSearch, { className: "size-4 shrink-0 opacity-50" }),
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx7(IconSearch, { className: "size-4 shrink-0 opacity-50" }),
+        /* @__PURE__ */ jsx7(
           CommandPrimitive.Input,
           {
             "data-slot": "command-input",
@@ -394,7 +402,7 @@ function CommandList({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx7(
     CommandPrimitive.List,
     {
       "data-slot": "command-list",
@@ -409,11 +417,11 @@ function CommandList({
 function CommandEmpty({
   ...props
 }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx7(
     CommandPrimitive.Empty,
     {
       "data-slot": "command-empty",
-      className: "py-6 text-center text-sm",
+      className: "text-muted-foreground py-6 text-center text-sm",
       ...props
     }
   );
@@ -422,7 +430,7 @@ function CommandGroup({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx7(
     CommandPrimitive.Group,
     {
       "data-slot": "command-group",
@@ -438,7 +446,7 @@ function CommandSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx7(
     CommandPrimitive.Separator,
     {
       "data-slot": "command-separator",
@@ -451,7 +459,7 @@ function CommandItem({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx7(
     CommandPrimitive.Item,
     {
       "data-slot": "command-item",
@@ -467,7 +475,7 @@ function CommandItem({
 // src/components/spotlight-search.tsx
 import { IconSearch as IconSearch2 } from "@tabler/icons-react";
 import * as React from "react";
-import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function SpotlightSearch({
   groups = [],
   placeholder = "Search...",
@@ -487,27 +495,27 @@ function SpotlightSearch({
     document.addEventListener("keydown", down);
     return () => document.removeEventListener("keydown", down);
   }, []);
-  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
-    /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
+    /* @__PURE__ */ jsxs6(
       Button,
       {
         variant: "outline",
         className: cn(
-          "relative h-9 w-9 p-0 xl:h-9 xl:w-60 xl:justify-start xl:px-3 xl:py-2",
+          "relative h-9 min-w-9 p-0 xl:h-9 xl:min-w-[12rem] xl:w-60 xl:justify-start xl:px-3 xl:py-2",
           triggerClassName
         ),
         onClick: () => setOpen(true),
         children: [
-          /* @__PURE__ */ jsx9(IconSearch2, { className: "h-4 w-4 xl:mr-2" }),
-          /* @__PURE__ */ jsx9("span", { className: "hidden xl:inline-flex", children: "Search..." }),
-          /* @__PURE__ */ jsxs5("kbd", { className: "pointer-events-none absolute right-1.5 top-1/2 hidden h-5 -translate-y-1/2 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 xl:flex", children: [
-            /* @__PURE__ */ jsx9("span", { className: "text-xs", children: "\u2318" }),
+          /* @__PURE__ */ jsx8(IconSearch2, { className: "h-4 w-4 xl:mr-2" }),
+          /* @__PURE__ */ jsx8("span", { className: "hidden xl:inline-flex", children: "Search..." }),
+          /* @__PURE__ */ jsxs6("kbd", { className: "border-border pointer-events-none absolute right-1.5 top-1/2 hidden h-5 -translate-y-1/2 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 xl:flex", children: [
+            /* @__PURE__ */ jsx8("span", { className: "text-xs", children: "\u2318" }),
             "K"
           ] })
         ]
       }
     ),
-    /* @__PURE__ */ jsxs5(
+    /* @__PURE__ */ jsxs6(
       CommandDialog,
       {
         open,
@@ -517,12 +525,12 @@ function SpotlightSearch({
         showCloseButton: false,
         className,
         children: [
-          /* @__PURE__ */ jsx9(CommandInput, { placeholder, onValueChange: onSearch }),
-          /* @__PURE__ */ jsxs5(CommandList, { children: [
-            /* @__PURE__ */ jsx9(CommandEmpty, { children: emptyMessage }),
-            groups.map((group, index) => /* @__PURE__ */ jsxs5(React.Fragment, { children: [
-              index > 0 && /* @__PURE__ */ jsx9(CommandSeparator, {}),
-              /* @__PURE__ */ jsx9(CommandGroup, { heading: group.heading, children: group.items.map((item) => /* @__PURE__ */ jsxs5(
+          /* @__PURE__ */ jsx8(CommandInput, { placeholder, onValueChange: onSearch }),
+          /* @__PURE__ */ jsxs6(CommandList, { children: [
+            /* @__PURE__ */ jsx8(CommandEmpty, { children: emptyMessage }),
+            groups.map((group, index) => /* @__PURE__ */ jsxs6(React.Fragment, { children: [
+              index > 0 && /* @__PURE__ */ jsx8(CommandSeparator, {}),
+              /* @__PURE__ */ jsx8(CommandGroup, { heading: group.heading, children: group.items.map((item) => /* @__PURE__ */ jsxs6(
                 CommandItem,
                 {
                   onSelect: () => {
@@ -531,8 +539,8 @@ function SpotlightSearch({
                   },
                   children: [
                     item.icon,
-                    /* @__PURE__ */ jsx9("span", { children: item.title }),
-                    item.shortcut && /* @__PURE__ */ jsx9("kbd", { className: "pointer-events-none ml-auto hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex", children: item.shortcut })
+                    /* @__PURE__ */ jsx8("span", { children: item.title }),
+                    item.shortcut && /* @__PURE__ */ jsx8("kbd", { className: "border-border pointer-events-none ml-auto hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex", children: item.shortcut })
                   ]
                 },
                 item.id
@@ -547,7 +555,7 @@ function SpotlightSearch({
 
 // src/components/app-header-actions.tsx
 import { IconBell, IconLogout } from "@tabler/icons-react";
-import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function AppHeaderActions({
   user,
   onLogout,
@@ -561,61 +569,68 @@ function AppHeaderActions({
   const initials = user?.fullName?.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2) || "U";
   const displayName = user?.fullName ?? "Account";
   const displaySubtext = user?.email ?? user?.phone ?? user?.handle ?? "";
-  return /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ jsx10(SpotlightSearch, { groups: searchGroups }),
+  return /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx9(SpotlightSearch, { groups: searchGroups }),
     actions,
-    /* @__PURE__ */ jsx10(Button, { variant: "ghost", size: "icon", className: "relative", children: /* @__PURE__ */ jsx10(IconBell, { className: "size-5" }) }),
-    /* @__PURE__ */ jsxs6(DropdownMenu, { children: [
-      /* @__PURE__ */ jsx10(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs6(Button, { variant: "ghost", className: "flex items-center gap-2 px-2", children: [
-        /* @__PURE__ */ jsxs6(Avatar, { className: "size-8", children: [
-          /* @__PURE__ */ jsx10(AvatarImage, { src: user?.image ?? void 0 }),
-          /* @__PURE__ */ jsx10(AvatarFallback, { className: "text-xs", children: initials })
-        ] }),
-        /* @__PURE__ */ jsxs6("div", { className: "hidden flex-col items-start text-left md:flex", children: [
-          /* @__PURE__ */ jsx10("span", { className: "text-sm font-medium", children: displayName }),
-          /* @__PURE__ */ jsx10("span", { className: "text-xs text-muted-foreground", children: displaySubtext })
-        ] })
-      ] }) }),
-      /* @__PURE__ */ jsxs6(DropdownMenuContent, { align: "end", className: "w-56", children: [
-        topMenuItems.map((item) => /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx9(Button, { variant: "ghost", size: "icon", className: "relative", children: /* @__PURE__ */ jsx9(IconBell, { className: "size-5" }) }),
+    /* @__PURE__ */ jsxs7(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx9(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs7(
+        Button,
+        {
+          variant: "ghost",
+          className: "flex items-center gap-3 px-3 py-2 h-auto rounded-md min-h-9 hover:bg-accent/70 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+          children: [
+            /* @__PURE__ */ jsxs7(Avatar, { className: "size-8 shrink-0", children: [
+              /* @__PURE__ */ jsx9(AvatarImage, { src: user?.image ?? void 0 }),
+              /* @__PURE__ */ jsx9(AvatarFallback, { className: "text-xs", children: initials })
+            ] }),
+            /* @__PURE__ */ jsxs7("div", { className: "hidden flex-col items-start text-left md:flex min-w-0", children: [
+              /* @__PURE__ */ jsx9("span", { className: "text-sm font-medium", children: displayName }),
+              /* @__PURE__ */ jsx9("span", { className: "text-xs text-muted-foreground", children: displaySubtext })
+            ] })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxs7(DropdownMenuContent, { align: "end", className: "w-56", children: [
+        topMenuItems.map((item) => /* @__PURE__ */ jsx9(
           DropdownMenuItem,
           {
             onClick: item.onClick,
             variant: item.variant,
             asChild: item.href ? true : void 0,
-            children: item.href ? /* @__PURE__ */ jsxs6(Link, { href: item.href, onClick: item.onClick, children: [
-              item.icon && /* @__PURE__ */ jsx10("span", { className: "mr-2", children: item.icon }),
+            children: item.href ? /* @__PURE__ */ jsxs7(Link, { href: item.href, onClick: item.onClick, children: [
+              item.icon && /* @__PURE__ */ jsx9("span", { className: "mr-2", children: item.icon }),
               item.label
-            ] }) : /* @__PURE__ */ jsxs6(Fragment3, { children: [
-              item.icon && /* @__PURE__ */ jsx10("span", { className: "mr-2", children: item.icon }),
+            ] }) : /* @__PURE__ */ jsxs7(Fragment3, { children: [
+              item.icon && /* @__PURE__ */ jsx9("span", { className: "mr-2", children: item.icon }),
               item.label
             ] })
           },
           item.href ?? item.label
         )),
-        topMenuItems.length > 0 && menuItems.length > 0 && /* @__PURE__ */ jsx10(DropdownMenuSeparator, {}),
-        menuItems.map((item) => /* @__PURE__ */ jsx10(
+        topMenuItems.length > 0 && menuItems.length > 0 && /* @__PURE__ */ jsx9(DropdownMenuSeparator, {}),
+        menuItems.map((item) => /* @__PURE__ */ jsx9(
           DropdownMenuItem,
           {
             onClick: item.onClick,
             variant: item.variant,
             asChild: item.href ? true : void 0,
-            children: item.href ? /* @__PURE__ */ jsxs6(Link, { href: item.href, onClick: item.onClick, children: [
-              item.icon && /* @__PURE__ */ jsx10("span", { className: "mr-2", children: item.icon }),
+            children: item.href ? /* @__PURE__ */ jsxs7(Link, { href: item.href, onClick: item.onClick, children: [
+              item.icon && /* @__PURE__ */ jsx9("span", { className: "mr-2", children: item.icon }),
               item.label
-            ] }) : /* @__PURE__ */ jsxs6(Fragment3, { children: [
-              item.icon && /* @__PURE__ */ jsx10("span", { className: "mr-2", children: item.icon }),
+            ] }) : /* @__PURE__ */ jsxs7(Fragment3, { children: [
+              item.icon && /* @__PURE__ */ jsx9("span", { className: "mr-2", children: item.icon }),
               item.label
             ] })
           },
           item.href ?? item.label
         )),
-        accountMenuFooter && (topMenuItems.length > 0 || menuItems.length > 0) && /* @__PURE__ */ jsx10(DropdownMenuSeparator, {}),
+        accountMenuFooter && (topMenuItems.length > 0 || menuItems.length > 0) && /* @__PURE__ */ jsx9(DropdownMenuSeparator, {}),
         accountMenuFooter,
-        onLogout && /* @__PURE__ */ jsxs6(Fragment3, { children: [
-          (topMenuItems.length > 0 || menuItems.length > 0 || accountMenuFooter) && /* @__PURE__ */ jsx10(DropdownMenuSeparator, {}),
-          /* @__PURE__ */ jsxs6(DropdownMenuItem, { onClick: onLogout, variant: "destructive", children: [
-            isLoggingOut ? /* @__PURE__ */ jsx10("span", { className: "mr-2", children: "..." }) : /* @__PURE__ */ jsx10(IconLogout, { className: "mr-2 size-4" }),
+        onLogout && /* @__PURE__ */ jsxs7(Fragment3, { children: [
+          (topMenuItems.length > 0 || menuItems.length > 0 || accountMenuFooter) && /* @__PURE__ */ jsx9(DropdownMenuSeparator, {}),
+          /* @__PURE__ */ jsxs7(DropdownMenuItem, { onClick: onLogout, variant: "destructive", children: [
+            isLoggingOut ? /* @__PURE__ */ jsx9("span", { className: "mr-2", children: "..." }) : /* @__PURE__ */ jsx9(IconLogout, { className: "mr-2 size-4" }),
             "Log out"
           ] })
         ] })