@mesob/ui 0.2.1 → 0.2.3

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

@@ -59,7 +59,7 @@ function AvatarFallback({
 // src/components/button.tsx
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
-import { jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx2, 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",
   {
@@ -98,17 +98,17 @@ function Button({
   ...props
 }) {
   const Comp = asChild ? Slot : "button";
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx2(
     Comp,
     {
       "data-slot": "button",
       className: cn(buttonVariants({ variant, size, className })),
       ...props,
-      children: [
+      children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
         leftIcon,
         children,
         rightIcon
-      ]
+      ] })
     }
   );
 }
@@ -116,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 jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function DropdownMenu({
   ...props
 }) {
-  return /* @__PURE__ */ jsx2(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+  return /* @__PURE__ */ jsx3(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
 }
 function DropdownMenuTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     DropdownMenuPrimitive.Trigger,
     {
       "data-slot": "dropdown-menu-trigger",
@@ -138,7 +138,7 @@ function DropdownMenuContent({
   sideOffset = 4,
   ...props
 }) {
-  return /* @__PURE__ */ jsx2(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx3(
     DropdownMenuPrimitive.Content,
     {
       "data-slot": "dropdown-menu-content",
@@ -157,7 +157,7 @@ function DropdownMenuItem({
   variant = "default",
   ...props
 }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     DropdownMenuPrimitive.Item,
     {
       "data-slot": "dropdown-menu-item",
@@ -175,7 +175,7 @@ function DropdownMenuSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     DropdownMenuPrimitive.Separator,
     {
       "data-slot": "dropdown-menu-separator",
@@ -187,7 +187,7 @@ function DropdownMenuSeparator({
 
 // src/components/tooltip.tsx
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 
 // src/components/mesob-context.tsx
 import {
@@ -195,14 +195,14 @@ import {
   useContext,
   useMemo
 } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } 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";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function Link({
   href,
   children,
@@ -213,9 +213,9 @@ function Link({
   const mesob = useMesob();
   const LinkComponent = mesob?.linkComponent ?? "a";
   if (LinkComponent === "a") {
-    return /* @__PURE__ */ jsx5("a", { href, className, onClick, ...props, children });
+    return /* @__PURE__ */ jsx6("a", { href, className, onClick, ...props, children });
   }
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     LinkComponent,
     {
       href,
@@ -230,22 +230,22 @@ function Link({
 // 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";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 function Dialog({
   ...props
 }) {
-  return /* @__PURE__ */ jsx6(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+  return /* @__PURE__ */ jsx7(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
 }
 function DialogPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx6(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+  return /* @__PURE__ */ jsx7(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
 }
 function DialogOverlay({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     DialogPrimitive.Overlay,
     {
       "data-slot": "dialog-overlay",
@@ -264,7 +264,7 @@ function DialogContent({
   ...props
 }) {
   return /* @__PURE__ */ jsxs4(DialogPortal, { "data-slot": "dialog-portal", children: [
-    /* @__PURE__ */ jsx6(DialogOverlay, {}),
+    /* @__PURE__ */ jsx7(DialogOverlay, {}),
     /* @__PURE__ */ jsxs4(
       DialogPrimitive.Content,
       {
@@ -282,8 +282,8 @@ function DialogContent({
               "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" })
+                /* @__PURE__ */ jsx7(IconX, {}),
+                /* @__PURE__ */ jsx7("span", { className: "sr-only", children: "Close" })
               ]
             }
           )
@@ -293,7 +293,7 @@ function DialogContent({
   ] });
 }
 function DialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     "div",
     {
       "data-slot": "dialog-header",
@@ -306,7 +306,7 @@ function DialogTitle({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     DialogPrimitive.Title,
     {
       "data-slot": "dialog-title",
@@ -319,7 +319,7 @@ function DialogDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     DialogPrimitive.Description,
     {
       "data-slot": "dialog-description",
@@ -332,12 +332,12 @@ function DialogDescription({
 // 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";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 function Command({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     CommandPrimitive,
     {
       "data-slot": "command",
@@ -359,15 +359,15 @@ function CommandDialog({
 }) {
   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(DialogTitle, { children: title }),
+      /* @__PURE__ */ jsx8(DialogDescription, { children: description })
     ] }),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       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 })
+        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 })
       }
     )
   ] });
@@ -382,8 +382,8 @@ function CommandInput({
       "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(
+        /* @__PURE__ */ jsx8(IconSearch, { className: "size-4 shrink-0 opacity-50" }),
+        /* @__PURE__ */ jsx8(
           CommandPrimitive.Input,
           {
             "data-slot": "command-input",
@@ -402,7 +402,7 @@ function CommandList({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     CommandPrimitive.List,
     {
       "data-slot": "command-list",
@@ -417,7 +417,7 @@ function CommandList({
 function CommandEmpty({
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     CommandPrimitive.Empty,
     {
       "data-slot": "command-empty",
@@ -430,7 +430,7 @@ function CommandGroup({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     CommandPrimitive.Group,
     {
       "data-slot": "command-group",
@@ -446,7 +446,7 @@ function CommandSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     CommandPrimitive.Separator,
     {
       "data-slot": "command-separator",
@@ -459,7 +459,7 @@ function CommandItem({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     CommandPrimitive.Item,
     {
       "data-slot": "command-item",
@@ -475,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 jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 function SpotlightSearch({
   groups = [],
   placeholder = "Search...",
@@ -495,7 +495,7 @@ function SpotlightSearch({
     document.addEventListener("keydown", down);
     return () => document.removeEventListener("keydown", down);
   }, []);
-  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
     /* @__PURE__ */ jsxs6(
       Button,
       {
@@ -506,10 +506,10 @@ function SpotlightSearch({
         ),
         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__ */ jsx9(IconSearch2, { className: "h-4 w-4 xl:mr-2" }),
+          /* @__PURE__ */ jsx9("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" }),
+            /* @__PURE__ */ jsx9("span", { className: "text-xs", children: "\u2318" }),
             "K"
           ] })
         ]
@@ -525,12 +525,12 @@ function SpotlightSearch({
         showCloseButton: false,
         className,
         children: [
-          /* @__PURE__ */ jsx8(CommandInput, { placeholder, onValueChange: onSearch }),
+          /* @__PURE__ */ jsx9(CommandInput, { placeholder, onValueChange: onSearch }),
           /* @__PURE__ */ jsxs6(CommandList, { children: [
-            /* @__PURE__ */ jsx8(CommandEmpty, { children: emptyMessage }),
+            /* @__PURE__ */ jsx9(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(
+              index > 0 && /* @__PURE__ */ jsx9(CommandSeparator, {}),
+              /* @__PURE__ */ jsx9(CommandGroup, { heading: group.heading, children: group.items.map((item) => /* @__PURE__ */ jsxs6(
                 CommandItem,
                 {
                   onSelect: () => {
@@ -539,8 +539,8 @@ function SpotlightSearch({
                   },
                   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 })
+                    /* @__PURE__ */ jsx9("span", { children: item.title }),
+                    item.shortcut && /* @__PURE__ */ jsx9("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
@@ -555,7 +555,7 @@ function SpotlightSearch({
 
 // 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";
+import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 function AppHeaderActions({
   user,
   onLogout,
@@ -570,67 +570,67 @@ function AppHeaderActions({
   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 }),
+    /* @__PURE__ */ jsx10(SpotlightSearch, { groups: searchGroups }),
     actions,
-    /* @__PURE__ */ jsx9(Button, { variant: "ghost", size: "icon", className: "relative", children: /* @__PURE__ */ jsx9(IconBell, { className: "size-5" }) }),
+    /* @__PURE__ */ jsx10(Button, { variant: "ghost", size: "icon", className: "relative", children: /* @__PURE__ */ jsx10(IconBell, { className: "size-5" }) }),
     /* @__PURE__ */ jsxs7(DropdownMenu, { children: [
-      /* @__PURE__ */ jsx9(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs7(
+      /* @__PURE__ */ jsx10(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__ */ jsx10(AvatarImage, { src: user?.image ?? void 0 }),
+              /* @__PURE__ */ jsx10(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__ */ jsx10("span", { className: "text-sm font-medium", children: displayName }),
+              /* @__PURE__ */ jsx10("span", { className: "text-xs text-muted-foreground", children: displaySubtext })
             ] })
           ]
         }
       ) }),
       /* @__PURE__ */ jsxs7(DropdownMenuContent, { align: "end", className: "w-56", children: [
-        topMenuItems.map((item) => /* @__PURE__ */ jsx9(
+        topMenuItems.map((item) => /* @__PURE__ */ jsx10(
           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.icon && /* @__PURE__ */ jsx10("span", { className: "mr-2", children: item.icon }),
               item.label
-            ] }) : /* @__PURE__ */ jsxs7(Fragment3, { children: [
-              item.icon && /* @__PURE__ */ jsx9("span", { className: "mr-2", children: item.icon }),
+            ] }) : /* @__PURE__ */ jsxs7(Fragment4, { children: [
+              item.icon && /* @__PURE__ */ jsx10("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(
+        topMenuItems.length > 0 && menuItems.length > 0 && /* @__PURE__ */ jsx10(DropdownMenuSeparator, {}),
+        menuItems.map((item) => /* @__PURE__ */ jsx10(
           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.icon && /* @__PURE__ */ jsx10("span", { className: "mr-2", children: item.icon }),
               item.label
-            ] }) : /* @__PURE__ */ jsxs7(Fragment3, { children: [
-              item.icon && /* @__PURE__ */ jsx9("span", { className: "mr-2", children: item.icon }),
+            ] }) : /* @__PURE__ */ jsxs7(Fragment4, { children: [
+              item.icon && /* @__PURE__ */ jsx10("span", { className: "mr-2", children: item.icon }),
               item.label
             ] })
           },
           item.href ?? item.label
         )),
-        accountMenuFooter && (topMenuItems.length > 0 || menuItems.length > 0) && /* @__PURE__ */ jsx9(DropdownMenuSeparator, {}),
+        accountMenuFooter && (topMenuItems.length > 0 || menuItems.length > 0) && /* @__PURE__ */ jsx10(DropdownMenuSeparator, {}),
         accountMenuFooter,
-        onLogout && /* @__PURE__ */ jsxs7(Fragment3, { children: [
-          (topMenuItems.length > 0 || menuItems.length > 0 || accountMenuFooter) && /* @__PURE__ */ jsx9(DropdownMenuSeparator, {}),
+        onLogout && /* @__PURE__ */ jsxs7(Fragment4, { children: [
+          (topMenuItems.length > 0 || menuItems.length > 0 || accountMenuFooter) && /* @__PURE__ */ jsx10(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" }),
+            isLoggingOut ? /* @__PURE__ */ jsx10("span", { className: "mr-2", children: "..." }) : /* @__PURE__ */ jsx10(IconLogout, { className: "mr-2 size-4" }),
             "Log out"
           ] })
         ] })