@sesionario/blocks 1.15.0 → 1.16.0

package/dist/index.cjs

@@ -1673,6 +1673,53 @@ function LanguageSwitcher({
     }
   );
 }
+var SCROLL_EDGE_EPSILON_PX = 1;
+function measureScrollEdges(el) {
+  const { scrollLeft, scrollWidth, clientWidth } = el;
+  return {
+    canScrollLeft: scrollLeft > SCROLL_EDGE_EPSILON_PX,
+    canScrollRight: scrollLeft + clientWidth < scrollWidth - SCROLL_EDGE_EPSILON_PX
+  };
+}
+function useScrollFadeXEdges(enabled = true) {
+  const scrollerRef = React7.useRef(null);
+  const [edges, setEdges] = React7.useState({
+    canScrollLeft: false,
+    canScrollRight: false
+  });
+  React7.useEffect(() => {
+    if (!enabled) {
+      setEdges({ canScrollLeft: false, canScrollRight: false });
+      return;
+    }
+    const el = scrollerRef.current;
+    if (!el) return;
+    function updateEdges() {
+      const scroller = scrollerRef.current;
+      if (!scroller) return;
+      const next = measureScrollEdges(scroller);
+      setEdges(
+        (prev) => prev.canScrollLeft === next.canScrollLeft && prev.canScrollRight === next.canScrollRight ? prev : next
+      );
+    }
+    updateEdges();
+    el.addEventListener("scroll", updateEdges, { passive: true });
+    const resizeObserver = new ResizeObserver(updateEdges);
+    resizeObserver.observe(el);
+    const mutationObserver = new MutationObserver(updateEdges);
+    mutationObserver.observe(el, { childList: true, subtree: true });
+    return () => {
+      el.removeEventListener("scroll", updateEdges);
+      resizeObserver.disconnect();
+      mutationObserver.disconnect();
+    };
+  }, [enabled]);
+  const fadeStyle = {
+    "--scroll-fade-left": edges.canScrollLeft ? "transparent" : "#000",
+    "--scroll-fade-right": edges.canScrollRight ? "transparent" : "#000"
+  };
+  return { scrollerRef, fadeStyle, edges };
+}
 function PlatformNavbar({
   logo,
   leading,
@@ -1681,6 +1728,8 @@ function PlatformNavbar({
   className,
   innerClassName
 }) {
+  const hasCenter = center != null && center !== false;
+  const { scrollerRef, fadeStyle } = useScrollFadeXEdges(hasCenter);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "header",
     {
@@ -1699,7 +1748,15 @@ function PlatformNavbar({
           children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center gap-2", children: logo }),
             leading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center gap-2", children: leading }) : null,
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 flex-1 items-center overflow-x-auto", children: center }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                ref: scrollerRef,
+                className: "flex min-w-0 flex-1 items-center overflow-x-auto scroll-fade-x-edges scrollbar-none",
+                style: fadeStyle,
+                children: center
+              }
+            ),
             right ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center gap-2", children: right }) : null
           ]
         }
@@ -1871,6 +1928,11 @@ function PlatformAccountMenu({
   labels: labelsProp,
   onSignOut,
   extraItems,
+  trigger: triggerProp,
+  contentSide,
+  contentAlign = "end",
+  contentSideOffset,
+  contentClassName,
   className
 }) {
   const labels = { ...defaultLabels3, ...labelsProp };
@@ -1900,7 +1962,7 @@ function PlatformAccountMenu({
       }
     );
   }
-  const trigger = user ? /* @__PURE__ */ jsxRuntime.jsx(
+  const defaultTrigger = user ? /* @__PURE__ */ jsxRuntime.jsx(
     Button,
     {
       variant: "ghost",
@@ -1920,129 +1982,129 @@ function PlatformAccountMenu({
     }
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContent, { align: "end", className: "min-w-60 rounded-lg", children: user ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuLabel, { className: "flex items-center gap-3 p-2 font-normal", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          MenuAvatar,
-          {
-            name: user.name,
-            image: user.image,
-            sizeClass: "size-9"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center gap-1.5 truncate text-sm font-medium leading-tight", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: user.name }),
-            variant === "platform" ? /* @__PURE__ */ jsxRuntime.jsx(
-              VerifiedProfessionalBadge,
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: triggerProp ?? defaultTrigger }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      DropdownMenuContent,
+      {
+        side: contentSide,
+        align: contentAlign,
+        sideOffset: contentSideOffset,
+        className: cn("min-w-60 rounded-lg", contentClassName),
+        children: user ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuLabel, { className: "flex items-center gap-3 p-2 font-normal", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              MenuAvatar,
               {
-                status: verificationStatus,
-                className: "shrink-0"
+                name: user.name,
+                image: user.image,
+                sizeClass: "size-9"
               }
-            ) : null
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-xs text-muted-foreground leading-tight", children: user.email })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {}),
-      variant === "platform" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: true, className: "gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: accountHref, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "size-4" }),
-          labels.personalProfile
-        ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: true, className: "gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: activityHref, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Activity, { className: "size-4" }),
-          labels.activity
-        ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: true, className: "gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: profileHref, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "size-4" }),
-          labels.professionalProfile
-        ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: true, className: "gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: urls.appUrl, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LayoutDashboard, { className: "size-4" }),
-          labels.mainApp
-        ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: true, className: "gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: urls.adminUrl, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Building2, { className: "size-4" }),
-          labels.orgManagement
-        ] }) }),
-        isAdmin && urls.backofficeUrl ? /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: true, className: "gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: urls.backofficeUrl, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LayoutDashboard, { className: "size-4" }),
-          labels.backoffice
-        ] }) }) : null,
-        memberOrgs.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuSub, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuSubTrigger, { className: "gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Users, { className: "size-4" }),
-            labels.memberOrgs
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center gap-1.5 truncate text-sm font-medium leading-tight", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: user.name }),
+                variant === "platform" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  VerifiedProfessionalBadge,
+                  {
+                    status: verificationStatus,
+                    className: "shrink-0"
+                  }
+                ) : null
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-xs text-muted-foreground leading-tight", children: user.email })
+            ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSubContent, { className: "min-w-48 max-h-64 overflow-y-auto", children: memberOrgs.map((org) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: `${urls.appUrl}/o/${org.slug}`, children: org.name }) }, org.id)) })
-        ] }) : null,
-        manageableOrgs.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuSub, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuSubTrigger, { className: "gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Building2, { className: "size-4" }),
-            labels.managementOrgs
+          /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {}),
+          variant === "platform" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: true, className: "gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: accountHref, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "size-4" }),
+              labels.personalProfile
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: true, className: "gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: activityHref, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Activity, { className: "size-4" }),
+              labels.activity
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: true, className: "gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: profileHref, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "size-4" }),
+              labels.professionalProfile
+            ] }) }),
+            memberOrgs.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuSub, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuSubTrigger, { className: "gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Users, { className: "size-4" }),
+                labels.memberOrgs
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSubContent, { className: "min-w-48 max-h-64 overflow-y-auto scroll-fade-b", children: memberOrgs.map((org) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: `${urls.appUrl}/o/${org.slug}`, children: org.name }) }, org.id)) })
+            ] }) : null,
+            manageableOrgs.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuSub, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuSubTrigger, { className: "gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Building2, { className: "size-4" }),
+                labels.managementOrgs
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSubContent, { className: "min-w-48 max-h-64 overflow-y-auto scroll-fade-b", children: manageableOrgs.map((org) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                "a",
+                {
+                  href: `${urls.adminUrl}/api/auth/org/select?id=${encodeURIComponent(org.id)}`,
+                  children: org.name
+                }
+              ) }, org.id)) })
+            ] }) : null,
+            extraItems,
+            isAdmin && urls.backofficeUrl ? /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: true, className: "gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: urls.backofficeUrl, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LayoutDashboard, { className: "size-4" }),
+              labels.backoffice
+            ] }) }) : null,
+            /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {})
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: true, className: "gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: accountHref, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "size-4" }),
+              labels.accountSettings
+            ] }) }),
+            extraItems,
+            /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {})
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSubContent, { className: "min-w-48 max-h-64 overflow-y-auto", children: manageableOrgs.map((org) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-            "a",
+          /* @__PURE__ */ jsxRuntime.jsx(
+            LanguageThemeSubs,
             {
-              href: `${urls.adminUrl}/api/auth/org/select?id=${encodeURIComponent(org.id)}`,
-              children: org.name
+              languages,
+              currentLanguage,
+              onLanguageChange,
+              labels
             }
-          ) }, org.id)) })
-        ] }) : null,
-        extraItems,
-        /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {})
-      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: true, className: "gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: accountHref, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "size-4" }),
-          labels.accountSettings
-        ] }) }),
-        extraItems,
-        /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {})
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        LanguageThemeSubs,
-        {
-          languages,
-          currentLanguage,
-          onLanguageChange,
-          labels
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {}),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        DropdownMenuItem,
-        {
-          variant: "destructive",
-          className: "gap-2",
-          disabled: signingOut || !onSignOut,
-          onSelect: (event) => {
-            event.preventDefault();
-            void handleSignOut();
-          },
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LogOut, { className: "size-4" }),
-            signingOut ? labels.signingOut : labels.signOut
-          ]
-        }
-      )
-    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        LanguageThemeSubs,
-        {
-          languages,
-          currentLanguage,
-          onLanguageChange,
-          labels
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {}),
-      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: true, className: "gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: loginHref, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LogIn, { className: "size-4" }),
-        labels.signIn
-      ] }) })
-    ] }) })
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            DropdownMenuItem,
+            {
+              variant: "destructive",
+              className: "gap-2",
+              disabled: signingOut || !onSignOut,
+              onSelect: (event) => {
+                event.preventDefault();
+                void handleSignOut();
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LogOut, { className: "size-4" }),
+                signingOut ? labels.signingOut : labels.signOut
+              ]
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            LanguageThemeSubs,
+            {
+              languages,
+              currentLanguage,
+              onLanguageChange,
+              labels
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: true, className: "gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: loginHref, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LogIn, { className: "size-4" }),
+            labels.signIn
+          ] }) })
+        ] })
+      }
+    )
   ] });
 }
 function Slider({
@@ -7585,6 +7647,8 @@ exports.BubbleGroup = BubbleGroup;
 exports.BubbleReactions = BubbleReactions;
 exports.ChatMessageList = ChatMessageList;
 exports.ConfirmDestructiveDialog = ConfirmDestructiveDialog;
+exports.DropdownMenuItem = DropdownMenuItem;
+exports.DropdownMenuSeparator = DropdownMenuSeparator;
 exports.EmojiInput = EmojiInput;
 exports.EmojiPicker = EmojiPicker;
 exports.EmojiPickerPopover = EmojiPickerPopover;
@@ -7654,6 +7718,7 @@ exports.useLanguageContext = useLanguageContext;
 exports.useMediaQuery = useMediaQuery2;
 exports.usePlaybackStats = usePlaybackStats;
 exports.useRealtimeChannel = useRealtimeChannel;
+exports.useScrollFadeXEdges = useScrollFadeXEdges;
 exports.useSearchHotkey = useSearchHotkey;
 exports.useSupportConversation = useSupportConversation;
 exports.useSupportMessenger = useSupportMessenger;