@bpinternal/integration-hub 0.6.0 → 0.6.1

package/dist/chunks/index.js

@@ -4,7 +4,7 @@ import { useState as H, useEffect as L, useCallback as D, useRef as ee, useMemo
 import { motion as ft } from "framer-motion";
 import { clsx as ht } from "clsx";
 import { twMerge as bt } from "tailwind-merge";
-import { Menu as S } from "@base-ui/react/menu";
+import { Menu as E } from "@base-ui/react/menu";
 const pt = [
   { name: "Popular", icon: Ge, description: "Most used integrations" },
   { name: "Communication & Channels", icon: _e, description: "Chat, email, SMS, and more" },
@@ -74,7 +74,7 @@ const pt = [
   focusCategoryButton: R,
   renderNoResults: K
 }) => {
-  var G, B;
+  var G, S;
   const [q, z] = H(/* @__PURE__ */ new Set());
   L(() => {
     z(/* @__PURE__ */ new Set());
@@ -142,7 +142,7 @@ const pt = [
                   /* @__PURE__ */ r("div", { className: "flex items-center h-full gap-6", children: [
                     /* @__PURE__ */ r("div", { className: "flex flex-col justify-between h-full flex-1 min-w-0", children: [
                       /* @__PURE__ */ e("h2", { className: "text-2xl font-semibold text-white leading-snug", children: (G = g[f]) == null ? void 0 : G.title }),
-                      /* @__PURE__ */ e("p", { className: "text-sm text-white/80", children: ((B = g[f]) == null ? void 0 : B.subtitle) ?? "" }),
+                      /* @__PURE__ */ e("p", { className: "text-sm text-white/80", children: ((S = g[f]) == null ? void 0 : S.subtitle) ?? "" }),
                       d && /* @__PURE__ */ e(
                         "button",
                         {
@@ -460,10 +460,10 @@ const pt = [
   renderIntegrationDetails: z,
   noResultsContent: O
 }) => {
-  const G = l ?? a, B = I(() => {
+  const G = l ?? a, S = I(() => {
     var j;
     return ((j = b[0]) == null ? void 0 : j.name) ?? "Popular";
-  }, [b]), [h, C] = H(i ?? B), k = ee(i), A = ee(!1), P = D(
+  }, [b]), [h, C] = H(i ?? S), k = ee(i), A = ee(!1), P = D(
     (j) => {
       C((me) => {
         const te = typeof j == "function" ? j(me) : j;
@@ -475,9 +475,9 @@ const pt = [
     integrationsByCategory: M,
     visibleCategories: T,
     sidebarCategories: U,
-    visibleCategoryNames: Se,
-    sidebarCategoryNames: Ee,
-    installedCategoryOrder: Be
+    visibleCategoryNames: Ee,
+    sidebarCategoryNames: Be,
+    installedCategoryOrder: Se
   } = Ct({
     hubIntegrations: g,
     sidebarIntegrations: m,
@@ -485,8 +485,8 @@ const pt = [
   }), { categoryScrollContainerRef: Ae, focusFirstCardInCategory: Te, scrollToCategorySection: X, focusCategoryButton: je } = wt({
     view: n,
     isHubLoading: f,
-    sidebarCategoryNames: Ee,
-    visibleCategoryNames: Se,
+    sidebarCategoryNames: Be,
+    visibleCategoryNames: Ee,
     setSelectedCategory: P
   }), { currentSlide: De, goToPreviousSlide: Re, goToNextSlide: Pe, goToSlide: Fe } = Nt({
     isOpen: t,
@@ -536,7 +536,7 @@ const pt = [
       isInstalledLoading: u,
       installedIntegrations: d,
       effectiveSearchTerm: G,
-      installedCategoryOrder: Be,
+      installedCategoryOrder: Se,
       renderInstalledIntegrations: q
     }
   ) : /* @__PURE__ */ e(
@@ -565,28 +565,28 @@ const pt = [
       renderNoResults: Oe
     }
   );
-}, E = "flex items-center gap-2 px-3 py-2 text-sm text-[var(--gray-11)] rounded-md cursor-pointer hover:bg-[var(--gray-a3)] outline-none", re = "bg-[var(--gray-2)] border border-[var(--gray-a4)] rounded-lg p-1 shadow-lg min-w-[160px]", ne = "flex items-center gap-1.5 mt-2 px-2 py-1 rounded-md bg-[var(--gray-a3)] text-xs text-[var(--gray-11)] whitespace-nowrap hover:bg-[var(--gray-a4)] cursor-pointer focus-visible:ring-2 focus-visible:ring-[var(--accent-9)]", kt = (t) => /* @__PURE__ */ e(S.Root, { ...t }), It = (t) => /* @__PURE__ */ e(S.Trigger, { ...t }), Ie = ({
+}, B = "flex items-center gap-2 px-3 py-2 text-sm text-[var(--gray-11)] rounded-md cursor-pointer hover:bg-[var(--gray-a3)] outline-none", re = "bg-[var(--gray-2)] border border-[var(--gray-a4)] rounded-lg p-1 shadow-lg min-w-[160px]", ne = "flex items-center gap-1.5 mt-2 px-2 py-1 rounded-md bg-[var(--gray-a3)] text-xs text-[var(--gray-11)] whitespace-nowrap hover:bg-[var(--gray-a4)] cursor-pointer focus-visible:ring-2 focus-visible:ring-[var(--accent-9)]", kt = (t) => /* @__PURE__ */ e(E.Root, { ...t }), It = (t) => /* @__PURE__ */ e(E.Trigger, { ...t }), Ie = ({
   align: t = "start",
   alignOffset: n = 0,
   side: a = "bottom",
   sideOffset: l = 4,
   className: s,
   ...i
-}) => /* @__PURE__ */ e(S.Portal, { children: /* @__PURE__ */ e(
-  S.Positioner,
+}) => /* @__PURE__ */ e(E.Portal, { children: /* @__PURE__ */ e(
+  E.Positioner,
   {
     className: "isolate z-50 outline-none",
     align: t,
     alignOffset: n,
     side: a,
     sideOffset: l,
-    children: /* @__PURE__ */ e(S.Popup, { className: x(s), ...i })
+    children: /* @__PURE__ */ e(E.Popup, { className: x(s), ...i })
   }
-) }), ie = (t) => /* @__PURE__ */ e(S.SubmenuRoot, { ...t }), se = ({
+) }), ie = (t) => /* @__PURE__ */ e(E.SubmenuRoot, { ...t }), se = ({
   className: t,
   children: n,
   ...a
-}) => /* @__PURE__ */ r(S.SubmenuTrigger, { className: x(t), ...a, children: [
+}) => /* @__PURE__ */ r(E.SubmenuTrigger, { className: x(t), ...a, children: [
   n,
   /* @__PURE__ */ e(ye, { className: "ml-auto w-4 h-4" })
 ] }), oe = ({
@@ -606,7 +606,7 @@ const pt = [
     sideOffset: l,
     ...i
   }
-), _ = (t) => /* @__PURE__ */ e(S.Item, { ...t }), Ht = ({
+), _ = (t) => /* @__PURE__ */ e(E.Item, { ...t }), Ht = ({
   visibility: t,
   verification: n,
   sortMethod: a,
@@ -655,13 +655,13 @@ const pt = [
           className: "bg-[var(--gray-2)] border border-[var(--gray-a4)] rounded-lg p-1 shadow-lg min-w-[180px]",
           children: [
             /* @__PURE__ */ r(ie, { children: [
-              /* @__PURE__ */ e(se, { className: E, children: g.visibilityGroup }),
+              /* @__PURE__ */ e(se, { className: B, children: g.visibilityGroup }),
               /* @__PURE__ */ r(oe, { className: re, children: [
                 /* @__PURE__ */ r(
                   _,
                   {
-                    className: x(E, t === "private" && "bg-[var(--gray-a3)] text-[var(--gray-12)]"),
-                    onSelect: () => f("private"),
+                    className: x(B, t === "private" && "bg-[var(--gray-a3)] text-[var(--gray-12)]"),
+                    onClick: () => f("private"),
                     "aria-checked": t === "private",
                     children: [
                       /* @__PURE__ */ e(W, { className: "w-4 h-4" }),
@@ -673,8 +673,8 @@ const pt = [
                 /* @__PURE__ */ r(
                   _,
                   {
-                    className: x(E, t === "public" && "bg-[var(--gray-a3)] text-[var(--gray-12)]"),
-                    onSelect: () => f("public"),
+                    className: x(B, t === "public" && "bg-[var(--gray-a3)] text-[var(--gray-12)]"),
+                    onClick: () => f("public"),
                     "aria-checked": t === "public",
                     children: [
                       /* @__PURE__ */ e(ue, { className: "w-4 h-4" }),
@@ -686,16 +686,16 @@ const pt = [
               ] })
             ] }),
             /* @__PURE__ */ r(ie, { children: [
-              /* @__PURE__ */ e(se, { className: E, children: g.verificationGroup }),
+              /* @__PURE__ */ e(se, { className: B, children: g.verificationGroup }),
               /* @__PURE__ */ r(oe, { className: `${re} min-w-[180px]`, children: [
                 /* @__PURE__ */ r(
                   _,
                   {
                     className: x(
-                      E,
+                      B,
                       c.includes("official") && "bg-[var(--gray-a3)] text-[var(--gray-12)]"
                     ),
-                    onSelect: () => m("official"),
+                    onClick: () => m("official"),
                     "aria-checked": c.includes("official"),
                     children: [
                       /* @__PURE__ */ e(J, { className: "w-4 h-4 text-blue-500" }),
@@ -708,10 +708,10 @@ const pt = [
                   _,
                   {
                     className: x(
-                      E,
+                      B,
                       c.includes("verified") && "bg-[var(--gray-a3)] text-[var(--gray-12)]"
                     ),
-                    onSelect: () => m("verified"),
+                    onClick: () => m("verified"),
                     "aria-checked": c.includes("verified"),
                     children: [
                       /* @__PURE__ */ e(Q, { className: "w-4 h-4 text-green-500" }),
@@ -723,13 +723,13 @@ const pt = [
               ] })
             ] }),
             /* @__PURE__ */ r(ie, { children: [
-              /* @__PURE__ */ e(se, { className: E, children: g.sortGroup }),
+              /* @__PURE__ */ e(se, { className: B, children: g.sortGroup }),
               /* @__PURE__ */ r(oe, { className: re, children: [
                 /* @__PURE__ */ r(
                   _,
                   {
-                    className: x(E, a === "asc" && "bg-[var(--gray-a3)] text-[var(--gray-12)]"),
-                    onSelect: () => o("asc"),
+                    className: x(B, a === "asc" && "bg-[var(--gray-a3)] text-[var(--gray-12)]"),
+                    onClick: () => o("asc"),
                     "aria-checked": a === "asc",
                     children: [
                       g.sort.asc,
@@ -740,8 +740,8 @@ const pt = [
                 /* @__PURE__ */ r(
                   _,
                   {
-                    className: x(E, a === "desc" && "bg-[var(--gray-a3)] text-[var(--gray-12)]"),
-                    onSelect: () => o("desc"),
+                    className: x(B, a === "desc" && "bg-[var(--gray-a3)] text-[var(--gray-12)]"),
+                    onClick: () => o("desc"),
                     "aria-checked": a === "desc",
                     children: [
                       g.sort.desc,
@@ -752,8 +752,8 @@ const pt = [
                 /* @__PURE__ */ r(
                   _,
                   {
-                    className: x(E, a === "newest" && "bg-[var(--gray-a3)] text-[var(--gray-12)]"),
-                    onSelect: () => o("newest"),
+                    className: x(B, a === "newest" && "bg-[var(--gray-a3)] text-[var(--gray-12)]"),
+                    onClick: () => o("newest"),
                     "aria-checked": a === "newest",
                     children: [
                       g.sort.newest,
@@ -764,8 +764,8 @@ const pt = [
                 /* @__PURE__ */ r(
                   _,
                   {
-                    className: x(E, a === "oldest" && "bg-[var(--gray-a3)] text-[var(--gray-12)]"),
-                    onSelect: () => o("oldest"),
+                    className: x(B, a === "oldest" && "bg-[var(--gray-a3)] text-[var(--gray-12)]"),
+                    onClick: () => o("oldest"),
                     "aria-checked": a === "oldest",
                     children: [
                       g.sort.oldest,
@@ -874,12 +874,12 @@ const pt = [
       ] })
     }
   );
-}, St = (t) => t.title || t.name || "", qt = ({
+}, Et = (t) => t.title || t.name || "", qt = ({
   integrations: t,
   searchTerm: n,
   categoryOrder: a,
   onSelectIntegration: l,
-  getDisplayName: s = St,
+  getDisplayName: s = Et,
   actionLabel: i = "Manage"
 }) => {
   const o = I(
@@ -975,13 +975,13 @@ const pt = [
   onBackToSetup: z,
   notifications: O,
   children: G,
-  selectedDetailPanel: B,
+  selectedDetailPanel: S,
   onDismissSelectedDetailPanel: h
 }) => {
-  const [C, k] = H(!!B), A = !!B && C;
+  const [C, k] = H(!!S), A = !!S && C;
   L(() => {
-    k(!!B);
-  }, [B]);
+    k(!!S);
+  }, [S]);
   const P = D(() => {
     if (h) {
       h();
@@ -1123,18 +1123,18 @@ const pt = [
         "div",
         {
           className: "fixed top-3 right-3 bottom-3 w-[500px] z-50 bg-[var(--gray-2)] border border-[var(--gray-6)] rounded-xl shadow-lg overflow-y-auto",
-          children: B
+          children: S
         }
       )
     ] })
   ] });
-}, Et = (t) => t.startsWith("http") ? t : `https://${t}`, Bt = (t) => "Source Code", At = (t) => "Documentation", Wt = ({
+}, Bt = (t) => t.startsWith("http") ? t : `https://${t}`, St = (t) => "Source Code", At = (t) => "Documentation", Wt = ({
   version: t,
   githubUrl: n,
   guideUrl: a,
   onAboutClick: l,
   aboutLabel: s = "About Integration",
-  formatGithubLabel: i = Bt,
+  formatGithubLabel: i = St,
   formatGuideLabel: o = At
 }) => /* @__PURE__ */ r("div", { className: "flex items-start gap-12 px-6 py-4 rounded-lg border border-[var(--gray-a4)] bg-[var(--gray-a2)]", children: [
   /* @__PURE__ */ r("div", { className: "flex flex-col gap-1", children: [
@@ -1146,7 +1146,7 @@ const pt = [
     /* @__PURE__ */ r(
       "a",
       {
-        href: Et(n),
+        href: Bt(n),
         target: "_blank",
         rel: "noopener noreferrer",
         className: "inline-flex w-fit items-center gap-1 text-sm font-medium text-[var(--blue-11)] hover:underline",
@@ -1381,9 +1381,9 @@ const pt = [
   if (t.length <= 1)
     return null;
   const s = ((i = t.find((o) => o.value === n)) == null ? void 0 : i.label) ?? String(n ?? "");
-  return /* @__PURE__ */ r(S.Root, { children: [
+  return /* @__PURE__ */ r(E.Root, { children: [
     /* @__PURE__ */ r(
-      S.Trigger,
+      E.Trigger,
       {
         disabled: l,
         className: "flex items-center gap-2 px-4 py-2 rounded-lg bg-[var(--gray-a3)] text-sm text-[var(--gray-12)] hover:bg-[var(--gray-a4)] cursor-pointer border-none outline-none w-[165px] disabled:opacity-60 disabled:cursor-not-allowed",
@@ -1393,13 +1393,13 @@ const pt = [
         ]
       }
     ),
-    /* @__PURE__ */ e(S.Portal, { children: /* @__PURE__ */ e(S.Positioner, { className: "isolate z-50 outline-none", align: "end", side: "bottom", sideOffset: 6, children: /* @__PURE__ */ e(
-      S.Popup,
+    /* @__PURE__ */ e(E.Portal, { children: /* @__PURE__ */ e(E.Positioner, { className: "isolate z-50 outline-none", align: "end", side: "bottom", sideOffset: 6, children: /* @__PURE__ */ e(
+      E.Popup,
       {
         role: "menu",
         className: "bg-[var(--gray-2)] rounded-lg p-1 shadow-lg w-(--anchor-width) overflow-hidden",
         children: t.map((o) => /* @__PURE__ */ e(
-          S.Item,
+          E.Item,
           {
             onClick: () => a(o.value),
             className: x(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bpinternal/integration-hub",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Reusable Integration Hub for Botpress-style integration catalogs",
   "license": "AGPL-3.0",
   "type": "module",