@mesob/ui 0.1.1 → 0.2.1

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

@@ -0,0 +1,644 @@
+"use client";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/avatar.tsx
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { jsx } from "react/jsx-runtime";
+function Avatar({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AvatarPrimitive.Root,
+    {
+      "data-slot": "avatar",
+      className: cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AvatarImage({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AvatarPrimitive.Image,
+    {
+      "data-slot": "avatar-image",
+      className: cn("aspect-square size-full", className),
+      ...props
+    }
+  );
+}
+function AvatarFallback({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AvatarPrimitive.Fallback,
+    {
+      "data-slot": "avatar-fallback",
+      className: cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/button.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+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-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:text-primary-600 dark:hover:text-primary-400 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  leftIcon,
+  rightIcon,
+  children,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsxs(
+    Comp,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props,
+      children: [
+        leftIcon,
+        children,
+        rightIcon
+      ]
+    }
+  );
+}
+
+// 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 jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function DropdownMenu({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    DropdownMenuPrimitive.Trigger,
+    {
+      "data-slot": "dropdown-menu-trigger",
+      ...props
+    }
+  );
+}
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx2(
+    DropdownMenuPrimitive.Content,
+    {
+      "data-slot": "dropdown-menu-content",
+      sideOffset,
+      className: cn(
+        "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
+    }
+  ) });
+}
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    DropdownMenuPrimitive.Item,
+    {
+      "data-slot": "dropdown-menu-item",
+      "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",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    DropdownMenuPrimitive.Separator,
+    {
+      "data-slot": "dropdown-menu-separator",
+      className: cn("bg-border -mx-1 my-1 h-px", className),
+      ...props
+    }
+  );
+}
+
+// src/components/tooltip.tsx
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+
+// src/components/mesob-context.tsx
+import {
+  createContext,
+  useContext,
+  useMemo
+} from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var MesobContext = createContext(null);
+function useMesob() {
+  return useContext(MesobContext);
+}
+
+// src/components/link.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function Link({
+  href,
+  children,
+  className,
+  onClick,
+  ...props
+}) {
+  const mesob = useMesob();
+  const LinkComponent = mesob?.linkComponent ?? "a";
+  if (LinkComponent === "a") {
+    return /* @__PURE__ */ jsx5("a", { href, className, onClick, ...props, children });
+  }
+  return /* @__PURE__ */ jsx5(
+    LinkComponent,
+    {
+      href,
+      className,
+      onClick,
+      ...props,
+      children
+    }
+  );
+}
+
+// src/components/dialog.tsx
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { IconX } from "@tabler/icons-react";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function Dialog({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+}
+function DialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  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 data-[state=open]:opacity-100 fixed inset-0 z-50 bg-[var(--overlay,oklch(0_0_0/0.5))]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs4(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsx6(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs4(
+      DialogPrimitive.Content,
+      {
+        "data-slot": "dialog-content",
+        className: cn(
+          "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__ */ 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__ */ jsx6(IconX, {}),
+                /* @__PURE__ */ jsx6("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(
+    DialogPrimitive.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("text-lg leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(
+    DialogPrimitive.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+
+// src/components/command.tsx
+import { IconSearch } from "@tabler/icons-react";
+import { Command as CommandPrimitive } from "cmdk";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function Command({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(
+    CommandPrimitive,
+    {
+      "data-slot": "command",
+      className: cn(
+        "bg-popover text-popover-foreground flex h-full min-h-0 w-full flex-col overflow-hidden rounded-md",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs5(Dialog, { ...props, children: [
+    /* @__PURE__ */ jsxs5(DialogHeader, { className: "sr-only", children: [
+      /* @__PURE__ */ jsx7(DialogTitle, { children: title }),
+      /* @__PURE__ */ jsx7(DialogDescription, { children: description })
+    ] }),
+    /* @__PURE__ */ jsx7(
+      DialogContent,
+      {
+        className: cn("overflow-hidden p-0", className),
+        showCloseButton,
+        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 })
+      }
+    )
+  ] });
+}
+function CommandInput({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      "data-slot": "command-input-wrapper",
+      className: "border-border flex h-9 items-center gap-2 border-b px-3",
+      children: [
+        /* @__PURE__ */ jsx7(IconSearch, { className: "size-4 shrink-0 opacity-50" }),
+        /* @__PURE__ */ jsx7(
+          CommandPrimitive.Input,
+          {
+            "data-slot": "command-input",
+            className: cn(
+              "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+              className
+            ),
+            ...props
+          }
+        )
+      ]
+    }
+  );
+}
+function CommandList({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(
+    CommandPrimitive.List,
+    {
+      "data-slot": "command-list",
+      className: cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CommandEmpty({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(
+    CommandPrimitive.Empty,
+    {
+      "data-slot": "command-empty",
+      className: "text-muted-foreground py-6 text-center text-sm",
+      ...props
+    }
+  );
+}
+function CommandGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(
+    CommandPrimitive.Group,
+    {
+      "data-slot": "command-group",
+      className: cn(
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CommandSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(
+    CommandPrimitive.Separator,
+    {
+      "data-slot": "command-separator",
+      className: cn("bg-border -mx-1 h-px", className),
+      ...props
+    }
+  );
+}
+function CommandItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(
+    CommandPrimitive.Item,
+    {
+      "data-slot": "command-item",
+      className: cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_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=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/spotlight-search.tsx
+import { IconSearch as IconSearch2 } from "@tabler/icons-react";
+import * as React from "react";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+function SpotlightSearch({
+  groups = [],
+  placeholder = "Search...",
+  emptyMessage = "No results found.",
+  className,
+  triggerClassName,
+  onSearch
+}) {
+  const [open, setOpen] = React.useState(false);
+  React.useEffect(() => {
+    const down = (e) => {
+      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        setOpen((open2) => !open2);
+      }
+    };
+    document.addEventListener("keydown", down);
+    return () => document.removeEventListener("keydown", down);
+  }, []);
+  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
+    /* @__PURE__ */ jsxs6(
+      Button,
+      {
+        variant: "outline",
+        className: cn(
+          "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__ */ 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__ */ jsxs6(
+      CommandDialog,
+      {
+        open,
+        onOpenChange: setOpen,
+        title: "Search",
+        description: "Search for pages, actions, and more",
+        showCloseButton: false,
+        className,
+        children: [
+          /* @__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: () => {
+                    item.onSelect?.();
+                    setOpen(false);
+                  },
+                  children: [
+                    item.icon,
+                    /* @__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
+              )) })
+            ] }, group.heading))
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/app-header-actions.tsx
+import { IconBell, IconLogout } from "@tabler/icons-react";
+import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+function AppHeaderActions({
+  user,
+  onLogout,
+  isLoggingOut = false,
+  searchGroups = [],
+  menuItems = [],
+  topMenuItems = [],
+  actions,
+  accountMenuFooter
+}) {
+  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__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx9(SpotlightSearch, { groups: searchGroups }),
+    actions,
+    /* @__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__ */ jsxs7(Link, { href: item.href, onClick: item.onClick, children: [
+              item.icon && /* @__PURE__ */ jsx9("span", { className: "mr-2", children: item.icon }),
+              item.label
+            ] }) : /* @__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__ */ jsx9(DropdownMenuSeparator, {}),
+        menuItems.map((item) => /* @__PURE__ */ jsx9(
+          DropdownMenuItem,
+          {
+            onClick: item.onClick,
+            variant: item.variant,
+            asChild: item.href ? true : void 0,
+            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__ */ 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__ */ jsx9(DropdownMenuSeparator, {}),
+        accountMenuFooter,
+        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"
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+export {
+  AppHeaderActions
+};
+//# sourceMappingURL=app-header-actions.js.map