@inkeep/cxkit-primitives 0.5.48 → 0.5.49

package/dist/atoms/dialog.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),k=require("react"),f=require("@radix-ui/primitive"),O=require("@radix-ui/react-compose-refs"),L=require("@radix-ui/react-context"),m=require("@radix-ui/react-id"),H=require("@radix-ui/react-use-controllable-state"),G=require("@radix-ui/react-dismissable-layer"),U=require("@radix-ui/react-focus-scope");require("@radix-ui/react-portal");const I=require("@radix-ui/react-presence"),g=require("@radix-ui/react-primitive"),z=require("@radix-ui/react-focus-guards"),K=require("react-remove-scroll"),V=require("aria-hidden"),Y=require("@radix-ui/react-slot");function Z(e){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const r=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(s,o,r.get?r:{enumerable:!0,get:()=>e[o]})}}return s.default=e,Object.freeze(s)}const i=Z(k),P="Dialog",[j,B]=L.createContextScope(P),[J,l]=j(P),_=e=>{const{__scopeDialog:s,children:o,open:r,defaultOpen:n,onOpenChange:t,modal:u=!0}=e,a=i.useRef(null),p=i.useRef(null),[C=!1,R]=H.useControllableState({prop:r,defaultProp:n,onChange:t});return c.jsx(J,{scope:s,triggerRef:a,contentRef:p,contentId:m.useId(),titleId:m.useId(),descriptionId:m.useId(),open:C,onOpenChange:R,onOpenToggle:i.useCallback(()=>R(w=>!w),[R]),modal:u,children:o})};_.displayName=P;const h="DialogTrigger",T=i.forwardRef((e,s)=>{const{__scopeDialog:o,...r}=e,n=l(h,o),t=O.useComposedRefs(s,n.triggerRef);return c.jsx(g.Primitive.button,{type:"button","aria-haspopup":"dialog","aria-expanded":n.open,"aria-controls":n.contentId,"data-state":b(n.open),...r,ref:t,onClick:f.composeEventHandlers(e.onClick,n.onOpenToggle)})});T.displayName=h;const Q="DialogPortal",[se,N]=j(Q,{forceMount:void 0}),D="DialogOverlay",x=i.forwardRef((e,s)=>{const o=N(D,e.__scopeDialog),{forceMount:r=o.forceMount,...n}=e,t=l(D,e.__scopeDialog);return t.modal?c.jsx(I.Presence,{present:r||t.open,children:c.jsx(W,{...n,ref:s})}):null});x.displayName=D;const W=i.forwardRef((e,s)=>{const{__scopeDialog:o,...r}=e,n=l(D,o);return c.jsx(K.RemoveScroll,{as:Y.Slot,allowPinchZoom:!0,shards:[n.contentRef],children:c.jsx(g.Primitive.div,{"data-state":b(n.open),...r,ref:s,style:{pointerEvents:"auto",...r.style}})})}),d="DialogContent",v=i.forwardRef((e,s)=>{const o=N(d,e.__scopeDialog),{forceMount:r=o.forceMount,...n}=e,t=l(d,e.__scopeDialog);return c.jsx(I.Presence,{present:r||t.open,children:t.modal?c.jsx(X,{...n,ref:s}):c.jsx($,{...n,ref:s})})});v.displayName=d;const X=i.forwardRef((e,s)=>{const o=l(d,e.__scopeDialog),r=i.useRef(null),n=O.useComposedRefs(s,o.contentRef,r);return i.useEffect(()=>{const t=r.current;if(t)return V.hideOthers(t)},[]),c.jsx(A,{...e,ref:n,trapFocus:o.open,disableOutsidePointerEvents:!0,onCloseAutoFocus:f.composeEventHandlers(e.onCloseAutoFocus,t=>{t.preventDefault(),o.triggerRef.current?.focus()}),onPointerDownOutside:f.composeEventHandlers(e.onPointerDownOutside,t=>{const u=t.detail.originalEvent,a=u.button===0&&u.ctrlKey===!0;(u.button===2||a)&&t.preventDefault()}),onFocusOutside:f.composeEventHandlers(e.onFocusOutside,t=>t.preventDefault())})}),$=i.forwardRef((e,s)=>{const o=l(d,e.__scopeDialog),r=i.useRef(!1),n=i.useRef(!1);return c.jsx(A,{...e,ref:s,trapFocus:!1,disableOutsidePointerEvents:!1,onCloseAutoFocus:t=>{e.onCloseAutoFocus?.(t),t.defaultPrevented||(r.current||o.triggerRef.current?.focus(),t.preventDefault()),r.current=!1,n.current=!1},onInteractOutside:t=>{e.onInteractOutside?.(t),t.defaultPrevented||(r.current=!0,t.detail.originalEvent.type==="pointerdown"&&(n.current=!0));const u=t.target;o.triggerRef.current?.contains(u)&&t.preventDefault(),t.detail.originalEvent.type==="focusin"&&n.current&&t.preventDefault()}})}),A=i.forwardRef((e,s)=>{const{__scopeDialog:o,trapFocus:r,onOpenAutoFocus:n,onCloseAutoFocus:t,...u}=e,a=l(d,o),p=i.useRef(null),C=O.useComposedRefs(s,p);return z.useFocusGuards(),c.jsx(c.Fragment,{children:c.jsx(U.FocusScope,{asChild:!0,loop:!0,trapped:r,onMountAutoFocus:n,onUnmountAutoFocus:t,children:c.jsx(G.DismissableLayer,{role:"dialog",id:a.contentId,"aria-describedby":a.descriptionId,"aria-labelledby":a.titleId,"data-state":b(a.open),...u,ref:C,onDismiss:()=>a.onOpenChange(!1)})})})}),F="DialogTitle",y=i.forwardRef((e,s)=>{const{__scopeDialog:o,...r}=e,n=l(F,o);return c.jsx(g.Primitive.h2,{id:n.titleId,...r,ref:s})});y.displayName=F;const M="DialogDescription",S=i.forwardRef((e,s)=>{const{__scopeDialog:o,...r}=e,n=l(M,o);return c.jsx(g.Primitive.p,{id:n.descriptionId,...r,ref:s})});S.displayName=M;const q="DialogClose",E=i.forwardRef((e,s)=>{const{__scopeDialog:o,...r}=e,n=l(q,o);return c.jsx(g.Primitive.button,{type:"button",...r,ref:s,onClick:f.composeEventHandlers(e.onClick,()=>n.onOpenChange(!1))})});E.displayName=q;function b(e){return e?"open":"closed"}const ee=_,te=x,oe=v,ne=y,re=E;exports.Close=re;exports.Content=oe;exports.Dialog=_;exports.DialogClose=E;exports.DialogContent=v;exports.DialogDescription=S;exports.DialogOverlay=x;exports.DialogTitle=y;exports.DialogTrigger=T;exports.Overlay=te;exports.Root=ee;exports.Title=ne;exports.createDialogScope=B;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),T=require("react"),p=require("@radix-ui/primitive"),P=require("@radix-ui/react-compose-refs"),H=require("@radix-ui/react-context"),m=require("@radix-ui/react-id"),z=require("@radix-ui/react-use-controllable-state"),K=require("@radix-ui/react-dismissable-layer"),U=require("@zag-js/focus-trap"),V=require("@radix-ui/react-portal"),_=require("@radix-ui/react-presence"),g=require("@radix-ui/react-primitive"),Y=require("@radix-ui/react-focus-guards"),Z=require("react-remove-scroll"),B=require("aria-hidden"),J=require("@radix-ui/react-slot");function Q(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,s.get?s:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const c=Q(T),x="Dialog",[N,W]=H.createContextScope(x),[X,l]=N(x),O=e=>{const{__scopeDialog:n,children:t,open:s,defaultOpen:o,onOpenChange:r,modal:a=!0}=e,u=c.useRef(null),f=c.useRef(null),[R=!1,C]=z.useControllableState({prop:s,defaultProp:o,onChange:r});return i.jsx(X,{scope:n,triggerRef:u,contentRef:f,contentId:m.useId(),titleId:m.useId(),descriptionId:m.useId(),open:R,onOpenChange:C,onOpenToggle:c.useCallback(()=>C(G=>!G),[C]),modal:a,children:t})};O.displayName=x;const M="DialogTrigger",S=c.forwardRef((e,n)=>{const{__scopeDialog:t,...s}=e,o=l(M,t),r=P.useComposedRefs(n,o.triggerRef);return i.jsx(g.Primitive.button,{type:"button","aria-haspopup":"dialog","aria-expanded":o.open,"aria-controls":o.contentId,"data-state":j(o.open),...s,ref:r,onClick:p.composeEventHandlers(e.onClick,o.onOpenToggle)})});S.displayName=M;const v="DialogPortal",[$,q]=N(v,{forceMount:void 0}),y=e=>{const{__scopeDialog:n,forceMount:t,children:s,container:o}=e,r=l(v,n);return i.jsx($,{scope:n,forceMount:t,children:c.Children.map(s,a=>i.jsx(_.Presence,{present:t||r.open,children:i.jsx(V.Portal,{asChild:!0,container:o,children:a})}))})};y.displayName=v;const D="DialogOverlay",E=c.forwardRef((e,n)=>{const t=q(D,e.__scopeDialog),{forceMount:s=t.forceMount,...o}=e,r=l(D,e.__scopeDialog);return r.modal?i.jsx(_.Presence,{present:s||r.open,children:i.jsx(ee,{...o,ref:n})}):null});E.displayName=D;const ee=c.forwardRef((e,n)=>{const{__scopeDialog:t,...s}=e,o=l(D,t);return i.jsx(Z.RemoveScroll,{as:J.Slot,allowPinchZoom:!0,shards:[o.contentRef],children:i.jsx(g.Primitive.div,{"data-state":j(o.open),...s,ref:n,style:{pointerEvents:"auto",...s.style}})})}),d="DialogContent",b=c.forwardRef((e,n)=>{const t=q(d,e.__scopeDialog),{forceMount:s=t.forceMount,...o}=e,r=l(d,e.__scopeDialog);return i.jsx(_.Presence,{present:s||r.open,children:r.modal?i.jsx(te,{...o,ref:n}):i.jsx(oe,{...o,ref:n})})});b.displayName=d;const te=c.forwardRef((e,n)=>{const t=l(d,e.__scopeDialog),s=c.useRef(null),o=P.useComposedRefs(n,t.contentRef,s);return c.useEffect(()=>{const r=s.current;if(r)return B.hideOthers(r)},[]),i.jsx(w,{...e,ref:o,trapFocus:t.open,disableOutsidePointerEvents:!0,onPointerDownOutside:p.composeEventHandlers(e.onPointerDownOutside,r=>{const a=r.detail.originalEvent,u=a.button===0&&a.ctrlKey===!0;(a.button===2||u)&&r.preventDefault()}),onFocusOutside:p.composeEventHandlers(e.onFocusOutside,r=>r.preventDefault())})}),oe=c.forwardRef((e,n)=>{const t=l(d,e.__scopeDialog),s=c.useRef(!1),o=c.useRef(!1);return i.jsx(w,{...e,ref:n,trapFocus:!1,disableOutsidePointerEvents:!1,onInteractOutside:r=>{e.onInteractOutside?.(r),r.defaultPrevented||(s.current=!0,r.detail.originalEvent.type==="pointerdown"&&(o.current=!0));const a=r.target;t.triggerRef.current?.contains(a)&&r.preventDefault(),r.detail.originalEvent.type==="focusin"&&o.current&&r.preventDefault()}})}),w=c.forwardRef((e,n)=>{const{__scopeDialog:t,trapFocus:s,onOpenAutoFocus:o,onCloseAutoFocus:r,...a}=e,u=l(d,t),f=c.useRef(null),R=P.useComposedRefs(n,f);return Y.useFocusGuards(),T.useEffect(()=>{if(s)return U.trapFocus(f.current,{preventScroll:!0,onActivate:o,onDeactivate:r})},[]),i.jsx(K.DismissableLayer,{role:"dialog",id:u.contentId,"aria-describedby":u.descriptionId,"aria-labelledby":u.titleId,"data-state":j(u.open),...a,ref:R,onDismiss:()=>u.onOpenChange(!1)})}),A="DialogTitle",h=c.forwardRef((e,n)=>{const{__scopeDialog:t,...s}=e,o=l(A,t);return i.jsx(g.Primitive.h2,{id:o.titleId,...s,ref:n})});h.displayName=A;const F="DialogDescription",k=c.forwardRef((e,n)=>{const{__scopeDialog:t,...s}=e,o=l(F,t);return i.jsx(g.Primitive.p,{id:o.descriptionId,...s,ref:n})});k.displayName=F;const L="DialogClose",I=c.forwardRef((e,n)=>{const{__scopeDialog:t,...s}=e,o=l(L,t);return i.jsx(g.Primitive.button,{type:"button",...s,ref:n,onClick:p.composeEventHandlers(e.onClick,()=>o.onOpenChange(!1))})});I.displayName=L;function j(e){return e?"open":"closed"}const ne=O,re=y,se=E,ce=b,ie=h,ae=I;exports.Close=ae;exports.Content=ce;exports.Dialog=O;exports.DialogClose=I;exports.DialogContent=b;exports.DialogDescription=k;exports.DialogOverlay=E;exports.DialogPortal=y;exports.DialogTitle=h;exports.DialogTrigger=S;exports.Overlay=se;exports.Portal=re;exports.Root=ne;exports.Title=ie;exports.createDialogScope=W;

package/dist/atoms/dialog.js

@@ -1,216 +1,215 @@
 "use client";
-import { jsx as i, Fragment as k } from "react/jsx-runtime";
+import { jsx as i } from "react/jsx-runtime";
 import * as c from "react";
-import { composeEventHandlers as d } from "@radix-ui/primitive";
+import { useEffect as G } from "react";
+import { composeEventHandlers as g } from "@radix-ui/primitive";
 import { useComposedRefs as _ } from "@radix-ui/react-compose-refs";
-import { createContextScope as L } from "@radix-ui/react-context";
+import { createContextScope as $ } from "@radix-ui/react-context";
 import { useId as C } from "@radix-ui/react-id";
-import { useControllableState as G } from "@radix-ui/react-use-controllable-state";
-import { DismissableLayer as j } from "@radix-ui/react-dismissable-layer";
-import { FocusScope as H } from "@radix-ui/react-focus-scope";
-import "@radix-ui/react-portal";
-import { Presence as y } from "@radix-ui/react-presence";
-import { Primitive as p } from "@radix-ui/react-primitive";
-import { useFocusGuards as K } from "@radix-ui/react-focus-guards";
-import { RemoveScroll as U } from "react-remove-scroll";
-import { hideOthers as V } from "aria-hidden";
-import { Slot as Y } from "@radix-ui/react-slot";
-const O = "Dialog", [E, go] = L(O), [Z, l] = E(O), h = (o) => {
-  const { __scopeDialog: s, children: r, open: n, defaultOpen: t, onOpenChange: e, modal: u = !0 } = o, a = c.useRef(null), g = c.useRef(null), [D = !1, R] = G({
-    prop: n,
+import { useControllableState as j } from "@radix-ui/react-use-controllable-state";
+import { DismissableLayer as H } from "@radix-ui/react-dismissable-layer";
+import { trapFocus as K } from "@zag-js/focus-trap";
+import { Portal as V } from "@radix-ui/react-portal";
+import { Presence as O } from "@radix-ui/react-presence";
+import { Primitive as d } from "@radix-ui/react-primitive";
+import { useFocusGuards as Y } from "@radix-ui/react-focus-guards";
+import { RemoveScroll as Z } from "react-remove-scroll";
+import { hideOthers as q } from "aria-hidden";
+import { Slot as z } from "@radix-ui/react-slot";
+const P = "Dialog", [E, Co] = $(P), [B, l] = E(P), I = (o) => {
+  const { __scopeDialog: n, children: r, open: s, defaultOpen: t, onOpenChange: e, modal: a = !0 } = o, f = c.useRef(null), p = c.useRef(null), [D = !1, R] = j({
+    prop: s,
     defaultProp: t,
     onChange: e
   });
   return /* @__PURE__ */ i(
-    Z,
+    B,
     {
-      scope: s,
-      triggerRef: a,
-      contentRef: g,
+      scope: n,
+      triggerRef: f,
+      contentRef: p,
       contentId: C(),
       titleId: C(),
       descriptionId: C(),
       open: D,
       onOpenChange: R,
-      onOpenToggle: c.useCallback(() => R((S) => !S), [R]),
-      modal: u,
+      onOpenToggle: c.useCallback(() => R((L) => !L), [R]),
+      modal: a,
       children: r
     }
   );
 };
-h.displayName = O;
-const I = "DialogTrigger", q = c.forwardRef(
-  (o, s) => {
-    const { __scopeDialog: r, ...n } = o, t = l(I, r), e = _(s, t.triggerRef);
+I.displayName = P;
+const v = "DialogTrigger", J = c.forwardRef(
+  (o, n) => {
+    const { __scopeDialog: r, ...s } = o, t = l(v, r), e = _(n, t.triggerRef);
     return /* @__PURE__ */ i(
-      p.button,
+      d.button,
       {
         type: "button",
         "aria-haspopup": "dialog",
         "aria-expanded": t.open,
         "aria-controls": t.contentId,
-        "data-state": P(t.open),
-        ...n,
+        "data-state": y(t.open),
+        ...s,
         ref: e,
-        onClick: d(o.onClick, t.onOpenToggle)
+        onClick: g(o.onClick, t.onOpenToggle)
       }
     );
   }
 );
-q.displayName = I;
-const z = "DialogPortal", [mo, v] = E(z, {
+J.displayName = v;
+const h = "DialogPortal", [Q, x] = E(h, {
   forceMount: void 0
-}), m = "DialogOverlay", x = c.forwardRef(
-  (o, s) => {
-    const r = v(m, o.__scopeDialog), { forceMount: n = r.forceMount, ...t } = o, e = l(m, o.__scopeDialog);
-    return e.modal ? /* @__PURE__ */ i(y, { present: n || e.open, children: /* @__PURE__ */ i(B, { ...t, ref: s }) }) : null;
+}), N = (o) => {
+  const { __scopeDialog: n, forceMount: r, children: s, container: t } = o, e = l(h, n);
+  return /* @__PURE__ */ i(Q, { scope: n, forceMount: r, children: c.Children.map(s, (a) => /* @__PURE__ */ i(O, { present: r || e.open, children: /* @__PURE__ */ i(V, { asChild: !0, container: t, children: a }) })) });
+};
+N.displayName = h;
+const m = "DialogOverlay", T = c.forwardRef(
+  (o, n) => {
+    const r = x(m, o.__scopeDialog), { forceMount: s = r.forceMount, ...t } = o, e = l(m, o.__scopeDialog);
+    return e.modal ? /* @__PURE__ */ i(O, { present: s || e.open, children: /* @__PURE__ */ i(U, { ...t, ref: n }) }) : null;
   }
 );
-x.displayName = m;
-const B = c.forwardRef(
-  (o, s) => {
-    const { __scopeDialog: r, ...n } = o, t = l(m, r);
+T.displayName = m;
+const U = c.forwardRef(
+  (o, n) => {
+    const { __scopeDialog: r, ...s } = o, t = l(m, r);
     return (
       // Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`
       // ie. when `Overlay` and `Content` are siblings
-      /* @__PURE__ */ i(U, { as: Y, allowPinchZoom: !0, shards: [t.contentRef], children: /* @__PURE__ */ i(
-        p.div,
+      /* @__PURE__ */ i(Z, { as: z, allowPinchZoom: !0, shards: [t.contentRef], children: /* @__PURE__ */ i(
+        d.div,
         {
-          "data-state": P(t.open),
-          ...n,
-          ref: s,
-          style: { pointerEvents: "auto", ...n.style }
+          "data-state": y(t.open),
+          ...s,
+          ref: n,
+          style: { pointerEvents: "auto", ...s.style }
         }
       ) })
     );
   }
-), f = "DialogContent", A = c.forwardRef(
-  (o, s) => {
-    const r = v(f, o.__scopeDialog), { forceMount: n = r.forceMount, ...t } = o, e = l(f, o.__scopeDialog);
-    return /* @__PURE__ */ i(y, { present: n || e.open, children: e.modal ? /* @__PURE__ */ i(J, { ...t, ref: s }) : /* @__PURE__ */ i(Q, { ...t, ref: s }) });
+), u = "DialogContent", M = c.forwardRef(
+  (o, n) => {
+    const r = x(u, o.__scopeDialog), { forceMount: s = r.forceMount, ...t } = o, e = l(u, o.__scopeDialog);
+    return /* @__PURE__ */ i(O, { present: s || e.open, children: e.modal ? /* @__PURE__ */ i(W, { ...t, ref: n }) : /* @__PURE__ */ i(X, { ...t, ref: n }) });
   }
 );
-A.displayName = f;
-const J = c.forwardRef(
-  (o, s) => {
-    const r = l(f, o.__scopeDialog), n = c.useRef(null), t = _(s, r.contentRef, n);
+M.displayName = u;
+const W = c.forwardRef(
+  (o, n) => {
+    const r = l(u, o.__scopeDialog), s = c.useRef(null), t = _(n, r.contentRef, s);
     return c.useEffect(() => {
-      const e = n.current;
-      if (e) return V(e);
+      const e = s.current;
+      if (e) return q(e);
     }, []), /* @__PURE__ */ i(
-      N,
+      b,
       {
         ...o,
         ref: t,
         trapFocus: r.open,
         disableOutsidePointerEvents: !0,
-        onCloseAutoFocus: d(o.onCloseAutoFocus, (e) => {
-          e.preventDefault(), r.triggerRef.current?.focus();
-        }),
-        onPointerDownOutside: d(o.onPointerDownOutside, (e) => {
-          const u = e.detail.originalEvent, a = u.button === 0 && u.ctrlKey === !0;
-          (u.button === 2 || a) && e.preventDefault();
+        onPointerDownOutside: g(o.onPointerDownOutside, (e) => {
+          const a = e.detail.originalEvent, f = a.button === 0 && a.ctrlKey === !0;
+          (a.button === 2 || f) && e.preventDefault();
         }),
-        onFocusOutside: d(
+        onFocusOutside: g(
           o.onFocusOutside,
           (e) => e.preventDefault()
         )
       }
     );
   }
-), Q = c.forwardRef(
-  (o, s) => {
-    const r = l(f, o.__scopeDialog), n = c.useRef(!1), t = c.useRef(!1);
+), X = c.forwardRef(
+  (o, n) => {
+    const r = l(u, o.__scopeDialog), s = c.useRef(!1), t = c.useRef(!1);
     return /* @__PURE__ */ i(
-      N,
+      b,
       {
         ...o,
-        ref: s,
+        ref: n,
         trapFocus: !1,
         disableOutsidePointerEvents: !1,
-        onCloseAutoFocus: (e) => {
-          o.onCloseAutoFocus?.(e), e.defaultPrevented || (n.current || r.triggerRef.current?.focus(), e.preventDefault()), n.current = !1, t.current = !1;
-        },
         onInteractOutside: (e) => {
-          o.onInteractOutside?.(e), e.defaultPrevented || (n.current = !0, e.detail.originalEvent.type === "pointerdown" && (t.current = !0));
-          const u = e.target;
-          r.triggerRef.current?.contains(u) && e.preventDefault(), e.detail.originalEvent.type === "focusin" && t.current && e.preventDefault();
+          o.onInteractOutside?.(e), e.defaultPrevented || (s.current = !0, e.detail.originalEvent.type === "pointerdown" && (t.current = !0));
+          const a = e.target;
+          r.triggerRef.current?.contains(a) && e.preventDefault(), e.detail.originalEvent.type === "focusin" && t.current && e.preventDefault();
         }
       }
     );
   }
-), N = c.forwardRef(
-  (o, s) => {
-    const { __scopeDialog: r, trapFocus: n, onOpenAutoFocus: t, onCloseAutoFocus: e, ...u } = o, a = l(f, r), g = c.useRef(null), D = _(s, g);
-    return K(), /* @__PURE__ */ i(k, { children: /* @__PURE__ */ i(
+), b = c.forwardRef(
+  (o, n) => {
+    const { __scopeDialog: r, trapFocus: s, onOpenAutoFocus: t, onCloseAutoFocus: e, ...a } = o, f = l(u, r), p = c.useRef(null), D = _(n, p);
+    return Y(), G(() => {
+      if (s)
+        return K(p.current, {
+          preventScroll: !0,
+          onActivate: t,
+          onDeactivate: e
+        });
+    }, []), /* @__PURE__ */ i(
       H,
       {
-        asChild: !0,
-        loop: !0,
-        trapped: n,
-        onMountAutoFocus: t,
-        onUnmountAutoFocus: e,
-        children: /* @__PURE__ */ i(
-          j,
-          {
-            role: "dialog",
-            id: a.contentId,
-            "aria-describedby": a.descriptionId,
-            "aria-labelledby": a.titleId,
-            "data-state": P(a.open),
-            ...u,
-            ref: D,
-            onDismiss: () => a.onOpenChange(!1)
-          }
-        )
+        role: "dialog",
+        id: f.contentId,
+        "aria-describedby": f.descriptionId,
+        "aria-labelledby": f.titleId,
+        "data-state": y(f.open),
+        ...a,
+        ref: D,
+        onDismiss: () => f.onOpenChange(!1)
       }
-    ) });
+    );
   }
-), T = "DialogTitle", F = c.forwardRef(
-  (o, s) => {
-    const { __scopeDialog: r, ...n } = o, t = l(T, r);
-    return /* @__PURE__ */ i(p.h2, { id: t.titleId, ...n, ref: s });
+), w = "DialogTitle", A = c.forwardRef(
+  (o, n) => {
+    const { __scopeDialog: r, ...s } = o, t = l(w, r);
+    return /* @__PURE__ */ i(d.h2, { id: t.titleId, ...s, ref: n });
   }
 );
-F.displayName = T;
-const M = "DialogDescription", W = c.forwardRef(
-  (o, s) => {
-    const { __scopeDialog: r, ...n } = o, t = l(M, r);
-    return /* @__PURE__ */ i(p.p, { id: t.descriptionId, ...n, ref: s });
+A.displayName = w;
+const F = "DialogDescription", oo = c.forwardRef(
+  (o, n) => {
+    const { __scopeDialog: r, ...s } = o, t = l(F, r);
+    return /* @__PURE__ */ i(d.p, { id: t.descriptionId, ...s, ref: n });
   }
 );
-W.displayName = M;
-const b = "DialogClose", w = c.forwardRef(
-  (o, s) => {
-    const { __scopeDialog: r, ...n } = o, t = l(b, r);
+oo.displayName = F;
+const S = "DialogClose", k = c.forwardRef(
+  (o, n) => {
+    const { __scopeDialog: r, ...s } = o, t = l(S, r);
     return /* @__PURE__ */ i(
-      p.button,
+      d.button,
       {
         type: "button",
-        ...n,
-        ref: s,
-        onClick: d(o.onClick, () => t.onOpenChange(!1))
+        ...s,
+        ref: n,
+        onClick: g(o.onClick, () => t.onOpenChange(!1))
       }
     );
   }
 );
-w.displayName = b;
-function P(o) {
+k.displayName = S;
+function y(o) {
   return o ? "open" : "closed";
 }
-const Do = h, Ro = x, Co = A, _o = F, Oo = w;
+const _o = I, Oo = N, Po = T, ho = M, yo = A, Eo = k;
 export {
-  Oo as Close,
-  Co as Content,
-  h as Dialog,
-  w as DialogClose,
-  A as DialogContent,
-  W as DialogDescription,
-  x as DialogOverlay,
-  F as DialogTitle,
-  q as DialogTrigger,
-  Ro as Overlay,
-  Do as Root,
-  _o as Title,
-  go as createDialogScope
+  Eo as Close,
+  ho as Content,
+  I as Dialog,
+  k as DialogClose,
+  M as DialogContent,
+  oo as DialogDescription,
+  T as DialogOverlay,
+  N as DialogPortal,
+  A as DialogTitle,
+  J as DialogTrigger,
+  Po as Overlay,
+  Oo as Portal,
+  _o as Root,
+  yo as Title,
+  Co as createDialogScope
 };

package/dist/index.d.cts

@@ -22,7 +22,6 @@ import { FeebackReason } from '@inkeep/cxkit-types';
 import { FeedbackItemType } from '@inkeep/cxkit-types';
 import { FeedbackType } from '@inkeep/cxkit-types';
 import { FieldErrors } from 'react-hook-form';
-import { FocusScope } from '@radix-ui/react-focus-scope';
 import { FormField } from '@inkeep/cxkit-types';
 import { FormHTMLAttributes } from 'react';
 import { ForwardRefExoticComponent } from 'react';
@@ -54,7 +53,6 @@ import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { Portal as Portal_2 } from '@radix-ui/react-portal';
 import { Primitive } from '@radix-ui/react-primitive';
 import { PropsWithChildren } from 'react';
-import * as RadixDialog from '@radix-ui/react-dialog';
 import * as React_2 from 'react';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
@@ -74,6 +72,7 @@ import { ToolCallAction } from '@inkeep/cxkit-types';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { TopLevelHeading } from '@inkeep/cxkit-types';
 import { TransformedSource } from '@inkeep/cxkit-types';
+import { TrapFocusOptions } from '@zag-js/focus-trap';
 import { UrlQueryParam } from '@inkeep/cxkit-types';
 import { UserProperties as UserProperties_2 } from '@inkeep/cxkit-types';
 import { Workflow } from '@inkeep/cxkit-types';
@@ -548,7 +547,7 @@ export declare const Command: React_2.ForwardRefExoticComponent<Children & Omit<
         /** Whether this separator should always be rendered. Useful if you disable automatic filtering. */
         alwaysRender?: boolean;
     } & React_2.RefAttributes<HTMLDivElement>>;
-    Dialog: React_2.ForwardRefExoticComponent<RadixDialog.DialogProps & Children & Omit<React_2.ClassAttributes<HTMLDivElement> & React_2.HTMLAttributes<HTMLDivElement> & {
+    Dialog: React_2.ForwardRefExoticComponent<DialogPrimitive.DialogProps & Children & Omit<React_2.ClassAttributes<HTMLDivElement> & React_2.HTMLAttributes<HTMLDivElement> & {
         asChild?: boolean;
     }, "ref"> & {
         /**
@@ -620,7 +619,7 @@ export declare const Command: React_2.ForwardRefExoticComponent<Children & Omit<
 /**
  * Renders the command menu in a Radix Dialog.
  */
-export declare const CommandDialog: React_2.ForwardRefExoticComponent<RadixDialog.DialogProps & Children & Omit<React_2.ClassAttributes<HTMLDivElement> & React_2.HTMLAttributes<HTMLDivElement> & {
+export declare const CommandDialog: React_2.ForwardRefExoticComponent<DialogPrimitive.DialogProps & Children & Omit<React_2.ClassAttributes<HTMLDivElement> & React_2.HTMLAttributes<HTMLDivElement> & {
     asChild?: boolean;
 }, "ref"> & {
     /**
@@ -1443,17 +1442,17 @@ declare interface DialogContentImplProps extends Omit<DismissableLayerProps, 'on
      * pointer, or a programmatic focus.
      * @defaultValue false
      */
-    trapFocus?: FocusScopeProps['trapped'];
+    trapFocus?: boolean;
     /**
      * Event handler called when auto-focusing on open.
      * Can be prevented.
      */
-    onOpenAutoFocus?: FocusScopeProps['onMountAutoFocus'];
+    onOpenAutoFocus?: TrapFocusOptions['onActivate'];
     /**
      * Event handler called when auto-focusing on close.
      * Can be prevented.
      */
-    onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus'];
+    onCloseAutoFocus?: TrapFocusOptions['onDeactivate'];
 }
 
 declare interface DialogContentProps extends DialogContentTypeProps {
@@ -2717,8 +2716,6 @@ export declare const FeedbackProvider: React.FC<{
     children: React.ReactNode;
 }>;
 
-declare type FocusScopeProps = React_2.ComponentPropsWithoutRef<typeof FocusScope>;
-
 declare type FormErrors = Record<'title' | 'content', string | undefined>;
 
 export declare interface FormFieldContextValue extends FormFieldCtx {

package/dist/index.d.ts

@@ -22,7 +22,6 @@ import { FeebackReason } from '@inkeep/cxkit-types';
 import { FeedbackItemType } from '@inkeep/cxkit-types';
 import { FeedbackType } from '@inkeep/cxkit-types';
 import { FieldErrors } from 'react-hook-form';
-import { FocusScope } from '@radix-ui/react-focus-scope';
 import { FormField } from '@inkeep/cxkit-types';
 import { FormHTMLAttributes } from 'react';
 import { ForwardRefExoticComponent } from 'react';
@@ -54,7 +53,6 @@ import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { Portal as Portal_2 } from '@radix-ui/react-portal';
 import { Primitive } from '@radix-ui/react-primitive';
 import { PropsWithChildren } from 'react';
-import * as RadixDialog from '@radix-ui/react-dialog';
 import * as React_2 from 'react';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
@@ -74,6 +72,7 @@ import { ToolCallAction } from '@inkeep/cxkit-types';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { TopLevelHeading } from '@inkeep/cxkit-types';
 import { TransformedSource } from '@inkeep/cxkit-types';
+import { TrapFocusOptions } from '@zag-js/focus-trap';
 import { UrlQueryParam } from '@inkeep/cxkit-types';
 import { UserProperties as UserProperties_2 } from '@inkeep/cxkit-types';
 import { Workflow } from '@inkeep/cxkit-types';
@@ -548,7 +547,7 @@ export declare const Command: React_2.ForwardRefExoticComponent<Children & Omit<
         /** Whether this separator should always be rendered. Useful if you disable automatic filtering. */
         alwaysRender?: boolean;
     } & React_2.RefAttributes<HTMLDivElement>>;
-    Dialog: React_2.ForwardRefExoticComponent<RadixDialog.DialogProps & Children & Omit<React_2.ClassAttributes<HTMLDivElement> & React_2.HTMLAttributes<HTMLDivElement> & {
+    Dialog: React_2.ForwardRefExoticComponent<DialogPrimitive.DialogProps & Children & Omit<React_2.ClassAttributes<HTMLDivElement> & React_2.HTMLAttributes<HTMLDivElement> & {
         asChild?: boolean;
     }, "ref"> & {
         /**
@@ -620,7 +619,7 @@ export declare const Command: React_2.ForwardRefExoticComponent<Children & Omit<
 /**
  * Renders the command menu in a Radix Dialog.
  */
-export declare const CommandDialog: React_2.ForwardRefExoticComponent<RadixDialog.DialogProps & Children & Omit<React_2.ClassAttributes<HTMLDivElement> & React_2.HTMLAttributes<HTMLDivElement> & {
+export declare const CommandDialog: React_2.ForwardRefExoticComponent<DialogPrimitive.DialogProps & Children & Omit<React_2.ClassAttributes<HTMLDivElement> & React_2.HTMLAttributes<HTMLDivElement> & {
     asChild?: boolean;
 }, "ref"> & {
     /**
@@ -1443,17 +1442,17 @@ declare interface DialogContentImplProps extends Omit<DismissableLayerProps, 'on
      * pointer, or a programmatic focus.
      * @defaultValue false
      */
-    trapFocus?: FocusScopeProps['trapped'];
+    trapFocus?: boolean;
     /**
      * Event handler called when auto-focusing on open.
      * Can be prevented.
      */
-    onOpenAutoFocus?: FocusScopeProps['onMountAutoFocus'];
+    onOpenAutoFocus?: TrapFocusOptions['onActivate'];
     /**
      * Event handler called when auto-focusing on close.
      * Can be prevented.
      */
-    onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus'];
+    onCloseAutoFocus?: TrapFocusOptions['onDeactivate'];
 }
 
 declare interface DialogContentProps extends DialogContentTypeProps {
@@ -2717,8 +2716,6 @@ export declare const FeedbackProvider: React.FC<{
     children: React.ReactNode;
 }>;
 
-declare type FocusScopeProps = React_2.ComponentPropsWithoutRef<typeof FocusScope>;
-
 declare type FormErrors = Record<'title' | 'content', string | undefined>;
 
 export declare interface FormFieldContextValue extends FormFieldCtx {

package/dist/providers/base-events-provider.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("react/jsx-runtime"),t=require("react"),y=require("../atoms/api/analytics/events.cjs"),B=require("./config-provider.cjs"),f=require("./user-provider.cjs"),d=t.createContext(void 0),b=({children:e})=>{const{baseSettings:n,componentType:o}=B.useInkeepConfig(),{apiKey:r,analyticsApiBaseUrl:i,tags:c,privacyPreferences:E,env:g}=n,{userProperties:a}=f.useUser(),v=t.useMemo(()=>({widgetLibraryVersion:"0.5.48",componentType:o,tags:c}),[o,c]),u=!E.optOutAllAnalytics&&g!=="development",m={logEvent:t.useCallback(async l=>{const s={...v,...l.properties},p={eventName:l.eventName,properties:s,userProperties:a};if(u){if("conversation"in s&&!s.conversation?.id)return;y.logEvent(p,r,i)}n.onEvent?.(p)},[u,n,r,i,a,v])};return P.jsx(d.Provider,{value:m,children:e})},x=()=>{const e=t.useContext(d);if(!e)throw new Error("useBaseEvents must be used within a BaseEventsProvider");return e};exports.BaseEventsProvider=b;exports.useBaseEvents=x;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("react/jsx-runtime"),t=require("react"),y=require("../atoms/api/analytics/events.cjs"),B=require("./config-provider.cjs"),f=require("./user-provider.cjs"),d=t.createContext(void 0),b=({children:e})=>{const{baseSettings:n,componentType:o}=B.useInkeepConfig(),{apiKey:r,analyticsApiBaseUrl:i,tags:c,privacyPreferences:E,env:g}=n,{userProperties:a}=f.useUser(),v=t.useMemo(()=>({widgetLibraryVersion:"0.5.49",componentType:o,tags:c}),[o,c]),u=!E.optOutAllAnalytics&&g!=="development",m={logEvent:t.useCallback(async l=>{const s={...v,...l.properties},p={eventName:l.eventName,properties:s,userProperties:a};if(u){if("conversation"in s&&!s.conversation?.id)return;y.logEvent(p,r,i)}n.onEvent?.(p)},[u,n,r,i,a,v])};return P.jsx(d.Provider,{value:m,children:e})},x=()=>{const e=t.useContext(d);if(!e)throw new Error("useBaseEvents must be used within a BaseEventsProvider");return e};exports.BaseEventsProvider=b;exports.useBaseEvents=x;

package/dist/providers/base-events-provider.js

@@ -7,7 +7,7 @@ import { useUser as b } from "./user-provider.js";
 const u = x(void 0), U = ({ children: e }) => {
   const { baseSettings: t, componentType: n } = C(), { apiKey: s, analyticsApiBaseUrl: r, tags: i, privacyPreferences: l, env: E } = t, { userProperties: a } = b(), c = g(
     () => ({
-      widgetLibraryVersion: "0.5.48",
+      widgetLibraryVersion: "0.5.49",
       componentType: n,
       tags: i
     }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkeep/cxkit-primitives",
-  "version": "0.5.48",
+  "version": "0.5.49",
   "description": "",
   "license": "Inkeep, Inc. Customer License (IICL) v1.1",
   "homepage": "",
@@ -25,25 +25,25 @@
     "@radix-ui/react-checkbox": "1.1.3",
     "@radix-ui/react-compose-refs": "^1.1.1",
     "@radix-ui/react-context": "^1.1.1",
-    "@radix-ui/react-dialog": "1.1.4",
     "@radix-ui/react-dismissable-layer": "^1.1.5",
     "@radix-ui/react-focus-guards": "^1.1.1",
     "@radix-ui/react-focus-scope": "^1.1.2",
     "@radix-ui/react-hover-card": "^1.1.6",
     "@radix-ui/react-id": "^1.1.0",
-    "@radix-ui/react-popover": "1.1.4",
+    "@radix-ui/react-popover": "1.1.6",
     "@radix-ui/react-portal": "^1.1.4",
     "@radix-ui/react-presence": "^1.1.2",
     "@radix-ui/react-primitive": "^2.0.2",
     "@radix-ui/react-scroll-area": "1.2.2",
-    "@radix-ui/react-select": "2.1.4",
+    "@radix-ui/react-select": "2.1.6",
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-tabs": "1.1.2",
     "@radix-ui/react-tooltip": "1.1.6",
+    "@radix-ui/react-use-callback-ref": "^1.1.0",
     "@radix-ui/react-use-controllable-state": "^1.1.0",
+    "@zag-js/focus-trap": "^1.7.0",
     "altcha-lib": "^1.2.0",
     "aria-hidden": "^1.2.4",
-    "cmdk": "^1.0.4",
     "dequal": "^2.0.3",
     "humps": "2.0.1",
     "merge-anything": "5.1.7",
@@ -59,9 +59,9 @@
     "remark-gfm": "^4.0.1",
     "unist-util-visit": "^5.0.0",
     "use-sync-external-store": "^1.4.0",
-    "@inkeep/cxkit-color-mode": "0.5.48",
-    "@inkeep/cxkit-theme": "0.5.48",
-    "@inkeep/cxkit-types": "0.5.48"
+    "@inkeep/cxkit-color-mode": "0.5.49",
+    "@inkeep/cxkit-theme": "0.5.49",
+    "@inkeep/cxkit-types": "0.5.49"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",