@alfadocs/ui-kit 0.1.5 → 0.1.6

package/README.md

@@ -69,6 +69,32 @@ import en from '@alfadocs/ui-kit/locales/en.json';
 i18n.addResourceBundle('en', 'ui', en);
 ```
 
+## Host integration
+
+The kit's dismissable primitives — `Dialog`, `Popover`, `DropdownMenu`,
+`Tooltip`, `Select`, `ContextMenu`, `NavigationMenu`, `AlertDialog` —
+all build on Radix's `@radix-ui/react-dismissable-layer`, which attaches
+a bubble-phase `pointerdown` listener on `document` to detect outside
+clicks. Consuming applications **must not** register a capture-phase
+`document` (or `body`) listener that calls `event.stopPropagation()` on
+`pointerdown` / `mousedown` / `click` — capture-phase consumers run
+BEFORE Radix's detector and starve it, leaving overlays stuck open.
+
+```js
+// Will break every dismissable primitive in the kit
+document.addEventListener('pointerdown', (e) => e.stopPropagation(), true);
+```
+
+If a legacy script must intercept pointer events at `document` level
+(jQuery plugins, Bootstrap modals, in-house global menu handlers, etc.):
+
+- Scope the listener to a specific container instead of `document` / `body`.
+- Drop the `useCapture: true` flag — bubble-phase listeners fire AFTER Radix and don't interfere.
+- Drop the `stopPropagation()` call entirely if it isn't load-bearing.
+
+Each dismissable component's Storybook page carries a `WithHostInterference`
+story that reproduces the failure mode for diagnosis.
+
 ## Peer dependencies
 
 `react`, `react-dom`, `react-i18next`, `i18next`. Tailwind CSS is not

package/dist/_chunks/{leo-sidebar-BzN4pJ7j.js → leo-sidebar-Bh3dPDTQ.js}

@@ -6,14 +6,14 @@ import { F as se } from "./floating-action-button-Cnw-f6AG.js";
 import { I as B } from "./icon-button-Wnnde5lc.js";
 import { S as E } from "./sheet-BhNpLHc9.js";
 import { X as de } from "./x-CCcI3eJp.js";
-import { A as C } from "./avatar-Dcr6XuDQ.js";
+import { A as w } from "./avatar-Dcr6XuDQ.js";
 import { B as D } from "./button-7mLWcMp_.js";
 import { C as re } from "./chat-container-BZvQ3_yT.js";
 import { C as ae } from "./chat-message-ByouZpPP.js";
 import { C as le } from "./chat-input-DsIrWM4f.js";
-import { S as oe } from "./streaming-text-BgjCTVOw.js";
+import { S as ie } from "./streaming-text-BgjCTVOw.js";
 import { a as q, S as O } from "./suggestion-chip-6AB40rxz.js";
-import { T as ie } from "./typing-indicator-CbUBf-Dx.js";
+import { T as oe } from "./typing-indicator-CbUBf-Dx.js";
 import { P as te } from "./progress-B4Of_pzz.js";
 import { S as ne } from "./square-CZoGU14v.js";
 import { c as ce } from "./createLucideIcon-CrFbzy84.js";
@@ -106,8 +106,8 @@ function ve({
   assistantName: s,
   avatarSrc: r,
   greeting: a,
-  subtitle: i,
-  suggestions: o,
+  subtitle: o,
+  suggestions: i,
   onSuggestion: t
 }) {
   const { t: u } = y(), l = "leo-empty-state-heading";
@@ -125,7 +125,7 @@ function ve({
       ].join(" "),
       "data-testid": "leo-empty-state",
       children: [
-        r ? /* @__PURE__ */ e(C, { name: s, src: r, size: "xl" }) : /* @__PURE__ */ e(j, { size: "xl", label: s }),
+        r ? /* @__PURE__ */ e(w, { name: s, src: r, size: "xl" }) : /* @__PURE__ */ e(j, { size: "xl", label: s }),
         /* @__PURE__ */ c("div", { className: "ds:flex ds:flex-col ds:items-center ds:gap-[var(--spacing-xs)] ds:max-w-[32rem]", children: [
           /* @__PURE__ */ e(
             "h2",
@@ -135,14 +135,14 @@ function ve({
               children: a
             }
           ),
-          /* @__PURE__ */ e("p", { className: "type-body-sm ds:m-0 ds:text-[color:var(--muted-foreground)]", children: i })
+          /* @__PURE__ */ e("p", { className: "type-body-sm ds:m-0 ds:text-[color:var(--muted-foreground)]", children: o })
         ] }),
-        o && o.length > 0 ? /* @__PURE__ */ e("div", { className: "ds:w-full ds:max-w-[40rem]", children: /* @__PURE__ */ e(
+        i && i.length > 0 ? /* @__PURE__ */ e("div", { className: "ds:w-full ds:max-w-[40rem]", children: /* @__PURE__ */ e(
           q,
           {
             label: u("leo.exampleQuestions"),
             className: "ds:justify-center",
-            children: o.map((n) => /* @__PURE__ */ e(
+            children: i.map((n) => /* @__PURE__ */ e(
               O,
               {
                 intent: "suggestion",
@@ -163,23 +163,23 @@ function xe({
   message: s,
   assistantName: r,
   avatarSrc: a,
-  renderMarkdown: i
+  renderMarkdown: o
 }) {
-  const { t: o, i18n: t } = y(), u = o("chat.message.role.assistant"), l = U(() => {
+  const { t: i, i18n: t } = y(), u = i("chat.message.role.assistant"), l = U(() => {
     if (!s.timestamp) return null;
     const m = s.timestamp instanceof Date ? s.timestamp : new Date(s.timestamp);
     return Number.isNaN(m.getTime()) ? null : new Intl.DateTimeFormat(t.language, {
       hour: "2-digit",
       minute: "2-digit"
     }).format(m);
-  }, [s.timestamp, t.language]), n = l ? o("chat.message.label", { role: u, time: l }) : o("chat.message.labelNoTime", { role: u });
+  }, [s.timestamp, t.language]), n = l ? i("chat.message.label", { role: u, time: l }) : i("chat.message.labelNoTime", { role: u });
   return /* @__PURE__ */ c(
     "article",
     {
       "aria-label": n,
       className: "ds:flex ds:w-full ds:items-start ds:flex-row ds:gap-[var(--spacing-sm)]",
       children: [
-        a ? /* @__PURE__ */ e(C, { name: r, src: a, size: "sm" }) : /* @__PURE__ */ e(j, { size: "sm", label: r }),
+        a ? /* @__PURE__ */ e(w, { name: r, src: a, size: "sm" }) : /* @__PURE__ */ e(j, { size: "sm", label: r }),
         /* @__PURE__ */ e("div", { className: "ds:flex ds:flex-col ds:items-start", children: /* @__PURE__ */ e(
           "div",
           {
@@ -194,11 +194,11 @@ function xe({
               "ds:rounded-[var(--radius-md)] ds:rounded-es-[var(--radius-sm)]"
             ].join(" "),
             children: /* @__PURE__ */ e(
-              oe,
+              ie,
               {
                 content: s.content,
                 isStreaming: !0,
-                renderMarkdown: i
+                renderMarkdown: o
               }
             )
           }
@@ -211,8 +211,8 @@ function Ne({
   assistantName: s,
   avatarSrc: r,
   onNewConversation: a,
-  headerEndSlot: i,
-  density: o
+  headerEndSlot: o,
+  density: i
 }) {
   const { t } = y();
   return /* @__PURE__ */ c(
@@ -224,21 +224,21 @@ function Ne({
         "ds:border-b ds:border-[color:var(--border)]",
         "ds:bg-[var(--background)]",
         "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]",
-        o === "compact" ? "ds:pt-[var(--spacing-sm)] ds:pb-[var(--spacing-sm)]" : "ds:pt-[var(--spacing-md)] ds:pb-[var(--spacing-md)]"
+        i === "compact" ? "ds:pt-[var(--spacing-sm)] ds:pb-[var(--spacing-sm)]" : "ds:pt-[var(--spacing-md)] ds:pb-[var(--spacing-md)]"
       ].join(" "),
       "data-testid": "leo-header",
       children: [
         r ? /* @__PURE__ */ e(
-          C,
+          w,
           {
             name: s,
             src: r,
-            size: o === "compact" ? "sm" : "md"
+            size: i === "compact" ? "sm" : "md"
           }
         ) : /* @__PURE__ */ e(
           j,
           {
-            size: o === "compact" ? "sm" : "md",
+            size: i === "compact" ? "sm" : "md",
             label: s
           }
         ),
@@ -254,19 +254,19 @@ function Ne({
               children: t("leo.newConversation")
             }
           ) : null,
-          i
+          o
         ] })
       ]
     }
   );
 }
-const w = L(
+const C = L(
   ({
     messages: s,
     onSend: r,
     onRetry: a,
-    onSuggestion: i,
-    suggestions: o,
+    onSuggestion: o,
+    suggestions: i,
     isGenerating: t = !1,
     onStopGenerating: u,
     usage: l,
@@ -317,7 +317,7 @@ const w = L(
         id: "__leo-typing__",
         node: /* @__PURE__ */ c("div", { className: "ds:flex ds:w-full ds:items-start ds:gap-[var(--spacing-sm)]", children: [
           d != null && d.src ? /* @__PURE__ */ e(
-            C,
+            w,
             {
               name: f,
               src: d.src,
@@ -334,7 +334,7 @@ const w = L(
                 "ds:bg-muted/40"
               ].join(" "),
               children: /* @__PURE__ */ e(
-                ie,
+                oe,
                 {
                   label: p("chat.typing"),
                   density: x
@@ -390,18 +390,18 @@ const w = L(
           }
         )
       ] }) : null,
-      !R && o && o.length > 0 && !t ? /* @__PURE__ */ e(
+      !R && i && i.length > 0 && !t ? /* @__PURE__ */ e(
         q,
         {
           label: p("leo.exampleQuestions"),
           "data-testid": "leo-followup-suggestions",
-          children: o.map((N) => /* @__PURE__ */ e(
+          children: i.map((N) => /* @__PURE__ */ e(
             O,
             {
               intent: "followup",
               startIcon: N.icon,
               keepOnSelect: !0,
-              onSelect: () => i == null ? void 0 : i(N),
+              onSelect: () => o == null ? void 0 : o(N),
               children: N.label
             },
             N.id
@@ -461,8 +461,8 @@ const w = L(
                 avatarSrc: d == null ? void 0 : d.src,
                 greeting: K,
                 subtitle: V,
-                suggestions: o,
-                onSuggestion: i
+                suggestions: i,
+                onSuggestion: o
               }
             ),
             /* @__PURE__ */ e(
@@ -491,7 +491,7 @@ const w = L(
     );
   }
 );
-w.displayName = "LeoChatSurface";
+C.displayName = "LeoChatSurface";
 const ye = L(
   ({ headerSlot: s, ...r }, a) => /* @__PURE__ */ c(
     "div",
@@ -524,7 +524,7 @@ const ye = L(
               "ds:[max-inline-size:48rem]",
               "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]"
             ].join(" "),
-            children: /* @__PURE__ */ e(w, { ...r })
+            children: /* @__PURE__ */ e(C, { ...r })
           }
         ) })
       ]
@@ -540,12 +540,12 @@ const je = L(
     open: s,
     onOpenChange: r,
     position: a = "bottom-end",
-    unseenCount: i,
-    assistantName: o,
+    unseenCount: o,
+    assistantName: i,
     assistantAvatar: t,
     ...u
   }, l) => {
-    const { t: n } = y(), m = o || n("leo.name"), d = typeof i == "number" && i > 0, h = d ? n("leo.unseenCount", { count: i }) : n("leo.open"), v = /* @__PURE__ */ e(ee.Close, { asChild: !0, children: /* @__PURE__ */ e(
+    const { t: n } = y(), m = i || n("leo.name"), d = typeof o == "number" && o > 0, h = d ? n("leo.unseenCount", { count: o }) : n("leo.open"), v = /* @__PURE__ */ e(ee.Close, { asChild: !0, children: /* @__PURE__ */ e(
       B,
       {
         icon: /* @__PURE__ */ e(de, { "aria-hidden": "true" }),
@@ -596,7 +596,7 @@ const je = L(
                   "ds:pointer-events-none ds:select-none",
                   "ds:forced-colors:outline ds:forced-colors:outline-1 ds:forced-colors:outline-[CanvasText]"
                 ].join(" "),
-                children: ze(i)
+                children: ze(o)
               }
             ) : null
           ] })
@@ -613,7 +613,7 @@ const je = L(
           children: [
             /* @__PURE__ */ e(E.Title, { className: "ds:sr-only", children: m }),
             /* @__PURE__ */ e(
-              w,
+              C,
               {
                 ...u,
                 assistantName: m,
@@ -632,18 +632,18 @@ je.displayName = "LeoPopout";
 function ke(s) {
   return s > 99 ? "99+" : String(s);
 }
-const Le = "ds:[inline-size:22rem]", Ce = "ds:[inline-size:3rem]", we = L(
+const Le = "ds:[inline-size:22rem]", we = "ds:[inline-size:3rem]", Ce = L(
   ({
     open: s,
     onOpenChange: r,
     side: a = "end",
-    unseenCount: i,
-    footerSlot: o,
+    unseenCount: o,
+    footerSlot: i,
     assistantName: t,
     assistantAvatar: u,
     ...l
   }, n) => {
-    const { t: m } = y(), d = t || m("leo.name"), h = typeof i == "number" && i > 0, v = a === "end" ? "ds:border-s ds:border-[color:var(--border)]" : "ds:border-e ds:border-[color:var(--border)]", I = h ? m("leo.unseenCount", { count: i }) : m("leo.open");
+    const { t: m } = y(), d = t || m("leo.name"), h = typeof o == "number" && o > 0, v = a === "end" ? "ds:shadow-[var(--shadow-chrome-start)]" : "ds:shadow-[var(--shadow-chrome-end)]", I = h ? m("leo.unseenCount", { count: o }) : m("leo.open");
     if (!s)
       return /* @__PURE__ */ e(
         "aside",
@@ -655,7 +655,7 @@ const Le = "ds:[inline-size:22rem]", Ce = "ds:[inline-size:3rem]", we = L(
             "ds:bg-[var(--background)]",
             v,
             "ds:pt-[var(--spacing-md)] ds:pb-[var(--spacing-md)]",
-            Ce
+            we
           ].join(" "),
           "data-testid": "leo-sidebar-rail",
           "data-leo-sidebar-state": "collapsed",
@@ -689,7 +689,7 @@ const Le = "ds:[inline-size:22rem]", Ce = "ds:[inline-size:3rem]", we = L(
                   "ds:pointer-events-none ds:select-none",
                   "ds:forced-colors:outline ds:forced-colors:outline-1 ds:forced-colors:outline-[CanvasText]"
                 ].join(" "),
-                children: ke(i)
+                children: ke(o)
               }
             ) : null
           ] })
@@ -723,7 +723,7 @@ const Le = "ds:[inline-size:22rem]", Ce = "ds:[inline-size:3rem]", we = L(
         "data-leo-sidebar-state": "expanded",
         children: [
           /* @__PURE__ */ e("div", { className: "ds:flex ds:min-h-0 ds:flex-1 ds:flex-col", children: /* @__PURE__ */ e(
-            w,
+            C,
             {
               ...l,
               assistantName: d,
@@ -732,12 +732,12 @@ const Le = "ds:[inline-size:22rem]", Ce = "ds:[inline-size:3rem]", we = L(
               headerEndSlot: x
             }
           ) }),
-          o ? /* @__PURE__ */ e(
+          i ? /* @__PURE__ */ e(
             "div",
             {
               "data-testid": "leo-sidebar-footer-slot",
               className: "ds:shrink-0 ds:border-t ds:border-[color:var(--border)]",
-              children: o
+              children: i
             }
           ) : null
         ]
@@ -745,11 +745,11 @@ const Le = "ds:[inline-size:22rem]", Ce = "ds:[inline-size:3rem]", we = L(
     );
   }
 );
-we.displayName = "LeoSidebar";
+Ce.displayName = "LeoSidebar";
 export {
-  w as L,
+  C as L,
   ye as a,
   je as b,
-  we as c
+  Ce as c
 };
-//# sourceMappingURL=leo-sidebar-BzN4pJ7j.js.map
+//# sourceMappingURL=leo-sidebar-Bh3dPDTQ.js.map