@inkeep/cxkit-primitives 0.5.13 → 0.5.15

package/dist/atoms/cmdk/index.js

@@ -0,0 +1,510 @@
+import { jsxs as Y, jsx as h } from "react/jsx-runtime";
+import * as G from "@radix-ui/react-dialog";
+import * as c from "react";
+import { commandScore as be } from "./command-score.js";
+import { Primitive as I } from "@radix-ui/react-primitive";
+import { useId as T } from "@radix-ui/react-id";
+import { s as Se } from "../../node_modules/.pnpm/use-sync-external-store@1.4.0_react@19.0.0/node_modules/use-sync-external-store/shim/index.js";
+import { ASK_AI_TRIGGER_VALUE as Ee } from "../../components/embedded-search.js";
+import { useShadow as Ce } from "../shadow/context.js";
+const D = '[cmdk-group=""]', Q = '[cmdk-group-items=""]', we = '[cmdk-group-heading=""]', le = '[cmdk-item=""]', ie = `${le}:not([aria-disabled="true"])`, X = "cmdk-item-select", _ = "data-value", Re = (r, n, t) => be(r, n, t ?? []), ue = c.createContext(void 0), O = () => c.useContext(ue), ae = c.createContext(void 0), Z = () => c.useContext(ae), de = c.createContext(void 0), fe = c.forwardRef((r, n) => {
+  const t = L(() => ({
+    /** Value of the search query. */
+    search: "",
+    /** Currently selected item value. */
+    value: r.value ?? r.defaultValue ?? "",
+    /** Currently selected item id. */
+    selectedItemId: void 0,
+    filtered: {
+      /** The count of all visible items. */
+      count: 0,
+      /** Map from visible item id to its search score. */
+      items: /* @__PURE__ */ new Map(),
+      /** Set of groups with at least one visible item. */
+      groups: /* @__PURE__ */ new Set()
+    }
+  })), a = L(() => /* @__PURE__ */ new Set()), s = L(() => /* @__PURE__ */ new Map()), d = L(() => /* @__PURE__ */ new Map()), f = L(() => /* @__PURE__ */ new Set()), m = me(r), {
+    label: u,
+    children: y,
+    value: p,
+    onValueChange: C,
+    filter: w,
+    shouldFilter: E,
+    loop: A,
+    disablePointerSelection: he = !1,
+    vimBindings: B = !0,
+    ...N
+  } = r, ee = T(), U = T(), b = T(), P = c.useRef(null), R = De();
+  k(() => {
+    if (p !== void 0) {
+      const e = p.trim();
+      t.current.value = e, S.emit();
+    }
+  }, [p]), k(() => {
+    R(6, re);
+  }, []);
+  const ge = Ce(), S = c.useMemo(() => ({
+    subscribe: (e) => (f.current.add(e), () => f.current.delete(e)),
+    snapshot: () => t.current,
+    setState: (e, i, o) => {
+      if (!Object.is(t.current[e], i)) {
+        if (t.current[e] = i, e === "search")
+          z(), j(), R(1, q);
+        else if (e === "value" && (ge?.shadowHost?.shadowRoot?.activeElement?.hasAttribute("cmdk-input") || R(1, () => {
+          x()?.focus();
+        }), R(7, () => {
+          t.current.selectedItemId = x()?.id, S.emit();
+        }), o || R(5, re), m.current?.value !== void 0)) {
+          const g = i ?? "";
+          m.current.onValueChange?.(g);
+          return;
+        }
+        S.emit();
+      }
+    },
+    emit: () => {
+      f.current.forEach((e) => e());
+    }
+  }), []), $ = c.useMemo(
+    () => ({
+      // Keep id → {value, keywords} mapping up-to-date
+      value: (e, i, o) => {
+        i !== d.current.get(e)?.value && (d.current.set(e, { value: i, keywords: o }), t.current.filtered.items.set(e, te(i, o)), R(2, () => {
+          j(), S.emit();
+        }));
+      },
+      // Track item lifecycle (mount, unmount)
+      item: (e, i) => (a.current.add(e), i && (s.current.has(i) ? s.current?.get(i)?.add(e) : s.current.set(i, /* @__PURE__ */ new Set([e]))), R(3, () => {
+        z(), j(), t.current.value || q(), S.emit();
+      }), () => {
+        d.current.delete(e), a.current.delete(e), t.current.filtered.items.delete(e);
+        const o = x();
+        R(4, () => {
+          z(), o?.getAttribute("id") === e && q(), S.emit();
+        });
+      }),
+      // Track group lifecycle (mount, unmount)
+      group: (e) => (s.current.has(e) || s.current.set(e, /* @__PURE__ */ new Set()), () => {
+        d.current.delete(e), s.current.delete(e);
+      }),
+      filter: () => !!m.current.shouldFilter,
+      label: u || r["aria-label"] || "",
+      getDisablePointerSelection: () => !!m.current.disablePointerSelection,
+      listId: ee,
+      inputId: b,
+      labelId: U,
+      listInnerRef: P
+    }),
+    []
+  );
+  function te(e, i) {
+    const o = m.current?.filter ?? Re;
+    return e ? o?.(e, t.current.search, i) : 0;
+  }
+  function j() {
+    if (!t.current.search || // Explicitly false, because true | undefined is the default
+    m.current.shouldFilter === !1)
+      return;
+    const e = t.current.filtered.items, i = [];
+    t.current.filtered.groups.forEach((l) => {
+      const v = s.current.get(l);
+      let g = 0;
+      v.forEach((J) => {
+        const pe = e.get(J);
+        g = Math.max(pe, g);
+      }), i.push([l, g]);
+    });
+    const o = P.current;
+    V().sort((l, v) => {
+      const g = l.getAttribute("id"), J = v.getAttribute("id");
+      return (e.get(J) ?? 0) - (e.get(g) ?? 0);
+    }).forEach((l) => {
+      const v = l.closest(Q);
+      if (v) {
+        const g = l.parentElement === v ? l : l.closest(`${Q} > *`);
+        g && v.appendChild(g);
+      } else {
+        const g = l.parentElement === o ? l : l.closest(`${Q} > *`);
+        g && o?.appendChild(g);
+      }
+    }), i.sort((l, v) => v[1] - l[1]).forEach((l) => {
+      const v = P.current?.querySelector(
+        `${D}[${_}="${encodeURIComponent(l[0])}"]`
+      );
+      v?.parentElement?.appendChild(v);
+    });
+  }
+  function q() {
+    const i = V().find(
+      (o) => o.getAttribute("aria-disabled") !== "true" && o.getAttribute("data-value") !== Ee
+    )?.getAttribute(_);
+    S.setState("value", i || void 0);
+  }
+  function z() {
+    if (!t.current.search || // Explicitly false, because true | undefined is the default
+    m.current.shouldFilter === !1) {
+      t.current.filtered.count = a.current.size;
+      return;
+    }
+    t.current.filtered.groups = /* @__PURE__ */ new Set();
+    let e = 0;
+    for (const i of a.current) {
+      const o = d.current.get(i)?.value ?? "", l = d.current.get(i)?.keywords ?? [], v = te(o, l);
+      t.current.filtered.items.set(i, v), v > 0 && e++;
+    }
+    for (const [i, o] of s.current)
+      for (const l of o) {
+        const v = t.current.filtered.items.get(l);
+        if (v && v > 0) {
+          t.current.filtered.groups.add(i);
+          break;
+        }
+      }
+    t.current.filtered.count = e;
+  }
+  function re() {
+    const e = x();
+    e && (e.parentElement?.firstChild === e && e.closest(D)?.querySelector(we)?.scrollIntoView({ block: "nearest" }), e.scrollIntoView({ block: "nearest" }));
+  }
+  function x() {
+    return P.current?.querySelector(`${le}[aria-selected="true"]`);
+  }
+  function V() {
+    return Array.from(P.current?.querySelectorAll(ie) || []);
+  }
+  function H(e) {
+    const o = V()[e];
+    o && S.setState("value", o.getAttribute(_));
+  }
+  function W(e) {
+    const i = x(), o = V(), l = o.findIndex((g) => g === i);
+    let v = o[l + e];
+    m.current?.loop && (v = l + e < 0 ? o[o.length - 1] : l + e === o.length ? o[0] : o[l + e]), v && S.setState("value", v.getAttribute(_));
+  }
+  function ne(e) {
+    let o = x()?.closest(D), l;
+    for (; o && !l; )
+      o = e > 0 ? Pe(o, D) : Ve(o, D), l = o?.querySelector(ie);
+    l ? S.setState("value", l.getAttribute(_)) : W(e);
+  }
+  const oe = () => H(V().length - 1), ce = (e) => {
+    e.preventDefault(), e.metaKey ? oe() : e.altKey ? ne(1) : W(1);
+  }, se = (e) => {
+    e.preventDefault(), e.metaKey ? H(0) : e.altKey ? ne(-1) : W(-1);
+  };
+  return /* @__PURE__ */ Y(
+    I.div,
+    {
+      ref: n,
+      tabIndex: -1,
+      ...N,
+      "cmdk-root": "",
+      onKeyDown: (e) => {
+        if (N.onKeyDown?.(e), !e.defaultPrevented)
+          switch (e.key) {
+            case "n":
+            case "j": {
+              B && e.ctrlKey && ce(e);
+              break;
+            }
+            case "ArrowDown": {
+              ce(e);
+              break;
+            }
+            case "p":
+            case "k": {
+              B && e.ctrlKey && se(e);
+              break;
+            }
+            case "ArrowUp": {
+              se(e);
+              break;
+            }
+            case "Home": {
+              e.preventDefault(), H(0);
+              break;
+            }
+            case "End": {
+              e.preventDefault(), oe();
+              break;
+            }
+            case "Enter":
+              if (!e.nativeEvent.isComposing && e.keyCode !== 229) {
+                e.preventDefault();
+                const i = x();
+                if (i) {
+                  const o = new Event(X);
+                  i.dispatchEvent(o);
+                }
+              }
+          }
+      },
+      children: [
+        /* @__PURE__ */ h(
+          "label",
+          {
+            "cmdk-label": "",
+            htmlFor: $.inputId,
+            id: $.labelId,
+            style: Fe,
+            children: u
+          }
+        ),
+        K(r, (e) => /* @__PURE__ */ h(ae.Provider, { value: S, children: /* @__PURE__ */ h(ue.Provider, { value: $, children: e }) }))
+      ]
+    }
+  );
+}), Ie = c.forwardRef((r, n) => {
+  const { id: t } = r, a = c.useRef(null), s = c.useContext(de), d = O(), f = me(r), m = f.current?.forceMount ?? s?.forceMount;
+  k(() => {
+    if (!m)
+      return d.item(t, s?.id);
+  }, [m]);
+  const u = ve(t, a, [r.value, r.children, a], r.keywords), y = Z(), p = M((b) => b.value && b.value === u.current), C = M(
+    (b) => m || d.filter() === !1 ? !0 : b.search ? b.filtered.items.get(t) > 0 : !0
+  );
+  c.useEffect(() => {
+    const b = a.current;
+    if (!(!b || r.disabled))
+      return b.addEventListener(X, w), () => b.removeEventListener(X, w);
+  }, [C, r.onSelect, r.disabled]);
+  function w() {
+    E(), f.current.onSelect?.(u.current);
+  }
+  function E() {
+    y.setState("value", u.current, !0);
+  }
+  if (!C) return null;
+  const { disabled: A, value: he, onSelect: B, forceMount: N, keywords: ee, ...U } = r;
+  return /* @__PURE__ */ h(
+    I.div,
+    {
+      ref: F([a, n]),
+      ...U,
+      id: t,
+      "cmdk-item": "",
+      role: "option",
+      "aria-disabled": !!A,
+      "aria-selected": !!p,
+      "data-disabled": !!A,
+      "data-selected": !!p,
+      onPointerMove: A || d.getDisablePointerSelection() ? void 0 : E,
+      onClick: A ? void 0 : w,
+      onFocus: A ? void 0 : E,
+      children: r.children
+    }
+  );
+}), ye = c.forwardRef((r, n) => {
+  const { heading: t, children: a, forceMount: s, ...d } = r, f = T(), m = c.useRef(null), u = c.useRef(null), y = T(), p = O(), C = M(
+    (E) => s || p.filter() === !1 ? !0 : E.search ? E.filtered.groups.has(f) : !0
+  );
+  k(() => p.group(f), []), ve(f, m, [r.value, r.heading, u]);
+  const w = c.useMemo(() => ({ id: f, forceMount: s }), [s]);
+  return /* @__PURE__ */ Y(
+    I.div,
+    {
+      ref: F([m, n]),
+      ...d,
+      "cmdk-group": "",
+      role: "presentation",
+      hidden: C ? void 0 : !0,
+      children: [
+        t && /* @__PURE__ */ h("div", { ref: u, "cmdk-group-heading": "", "aria-hidden": !0, id: y, children: t }),
+        K(r, (E) => (
+          // biome-ignore lint/a11y/useSemanticElements: <explanation>
+          /* @__PURE__ */ h("div", { "cmdk-group-items": "", role: "group", "aria-labelledby": t ? y : void 0, children: /* @__PURE__ */ h(de.Provider, { value: w, children: E }) })
+        ))
+      ]
+    }
+  );
+}), xe = c.forwardRef((r, n) => {
+  const { alwaysRender: t, ...a } = r, s = c.useRef(null), d = M((f) => !f.search);
+  return !t && !d ? null : /* @__PURE__ */ h(
+    I.div,
+    {
+      ref: F([s, n]),
+      ...a,
+      "cmdk-separator": "",
+      role: "separator"
+    }
+  );
+}), ke = c.forwardRef((r, n) => {
+  const { onValueChange: t, ...a } = r, s = r.value != null, d = Z(), f = M((u) => u.search), m = O();
+  return c.useEffect(() => {
+    r.value != null && d.setState("search", r.value);
+  }, [r.value]), /* @__PURE__ */ h(
+    I.input,
+    {
+      ref: n,
+      ...a,
+      "cmdk-input": "",
+      autoComplete: "off",
+      autoCorrect: "off",
+      spellCheck: !1,
+      "aria-autocomplete": "list",
+      role: "combobox",
+      "aria-expanded": !0,
+      "aria-controls": m.listId,
+      "aria-labelledby": m.labelId,
+      id: m.inputId,
+      type: "text",
+      value: s ? r.value : f,
+      onChange: (u) => {
+        s || d.setState("search", u.target.value), t?.(u.target.value);
+      }
+    }
+  );
+}), Ae = c.forwardRef((r, n) => {
+  const { children: t, label: a = "Suggestions", ...s } = r, d = c.useRef(null), f = c.useRef(null), m = O();
+  return c.useEffect(() => {
+    if (f.current && d.current) {
+      const u = f.current, y = d.current;
+      let p;
+      const C = new ResizeObserver(() => {
+        p = requestAnimationFrame(() => {
+          const w = u.offsetHeight;
+          y.style.setProperty("--cmdk-list-height", w.toFixed(1) + "px");
+        });
+      });
+      return C.observe(u), () => {
+        cancelAnimationFrame(p), C.unobserve(u);
+      };
+    }
+  }, []), /* @__PURE__ */ h(
+    I.div,
+    {
+      ref: F([d, n]),
+      ...s,
+      "cmdk-list": "",
+      tabIndex: -1,
+      "aria-label": a,
+      id: m.listId,
+      children: K(r, (u) => /* @__PURE__ */ h("div", { ref: F([f, m.listInnerRef]), "cmdk-list-sizer": "", children: u }))
+    }
+  );
+}), _e = c.forwardRef((r, n) => {
+  const { open: t, onOpenChange: a, overlayClassName: s, contentClassName: d, container: f, ...m } = r;
+  return /* @__PURE__ */ h(G.Root, { open: t, onOpenChange: a, children: /* @__PURE__ */ Y(G.Portal, { container: f, children: [
+    /* @__PURE__ */ h(G.Overlay, { "cmdk-overlay": "", className: s }),
+    /* @__PURE__ */ h(G.Content, { "aria-label": r.label, "cmdk-dialog": "", className: d, children: /* @__PURE__ */ h(fe, { ref: n, ...m }) })
+  ] }) });
+}), Le = c.forwardRef((r, n) => M((a) => a.filtered.count === 0) ? /* @__PURE__ */ h(I.div, { ref: n, ...r, "cmdk-empty": "", role: "presentation" }) : null), Me = c.forwardRef((r, n) => {
+  const { progress: t, children: a, label: s = "Loading...", ...d } = r;
+  return /* @__PURE__ */ h(
+    I.div,
+    {
+      ref: n,
+      ...d,
+      "cmdk-loading": "",
+      role: "progressbar",
+      "aria-valuenow": t,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-label": s,
+      children: K(r, (f) => /* @__PURE__ */ h("div", { "aria-hidden": !0, children: f }))
+    }
+  );
+}), je = Object.assign(fe, {
+  List: Ae,
+  Item: Ie,
+  Input: ke,
+  Group: ye,
+  Separator: xe,
+  Dialog: _e,
+  Empty: Le,
+  Loading: Me
+});
+function Pe(r, n) {
+  let t = r.nextElementSibling;
+  for (; t; ) {
+    if (t.matches(n)) return t;
+    t = t.nextElementSibling;
+  }
+}
+function Ve(r, n) {
+  let t = r.previousElementSibling;
+  for (; t; ) {
+    if (t.matches(n)) return t;
+    t = t.previousElementSibling;
+  }
+}
+function me(r) {
+  const n = c.useRef(r);
+  return k(() => {
+    n.current = r;
+  }), n;
+}
+const k = typeof window > "u" ? c.useEffect : c.useLayoutEffect;
+function L(r) {
+  const n = c.useRef(void 0);
+  return n.current === void 0 && (n.current = r()), n;
+}
+function F(r) {
+  return (n) => {
+    r.forEach((t) => {
+      typeof t == "function" ? t(n) : t != null && (t.current = n);
+    });
+  };
+}
+function M(r) {
+  const n = Z(), t = () => r(n.snapshot());
+  return Se.useSyncExternalStore(n.subscribe, t, t);
+}
+function ve(r, n, t, a = []) {
+  const s = c.useRef(void 0), d = O();
+  return k(() => {
+    const f = (() => {
+      for (const u of t) {
+        if (typeof u == "string")
+          return u.trim();
+        if (typeof u == "object" && "current" in u)
+          return u.current ? u.current.textContent?.trim() : s.current;
+      }
+    })(), m = a.map((u) => u.trim());
+    d.value(r, f, m), n.current?.setAttribute(_, f), s.current = f;
+  }), s;
+}
+const De = () => {
+  const [r, n] = c.useState(), t = L(() => /* @__PURE__ */ new Map());
+  return k(() => {
+    t.current.forEach((a) => a()), t.current = /* @__PURE__ */ new Map();
+  }, [r]), (a, s) => {
+    t.current.set(a, s), n({});
+  };
+};
+function Te(r) {
+  const n = r.type;
+  return typeof n == "function" ? n(r.props) : "render" in n ? n.render(r.props) : r;
+}
+function K({ asChild: r, children: n }, t) {
+  return r && c.isValidElement(n) ? c.cloneElement(
+    Te(n),
+    { ref: n.ref },
+    // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+    t(n.props.children)
+  ) : t(n);
+}
+const Fe = {
+  position: "absolute",
+  width: "1px",
+  height: "1px",
+  padding: "0",
+  margin: "-1px",
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  borderWidth: "0"
+};
+export {
+  je as Command,
+  _e as CommandDialog,
+  Le as CommandEmpty,
+  ke as CommandInput,
+  Ie as CommandItem,
+  Ae as CommandList,
+  Me as CommandLoading,
+  fe as CommandRoot,
+  xe as CommandSeparator,
+  Re as defaultFilter,
+  M as useCommandState
+};

package/dist/atoms/dialog.cjs

@@ -0,0 +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;

package/dist/atoms/dialog.d.cts

@@ -1,5 +1,6 @@
 import { DismissableLayer } from '@radix-ui/react-dismissable-layer';
 import { FocusScope } from '@radix-ui/react-focus-scope';
+import { Portal as PortalPrimitive } from '@radix-ui/react-portal';
 import { Primitive } from '@radix-ui/react-primitive';
 import { CreateScope } from '@radix-ui/react-context';
 import * as React from 'react';
@@ -16,12 +17,37 @@ type PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.butt
 interface DialogTriggerProps extends PrimitiveButtonProps {
 }
 declare const DialogTrigger: React.ForwardRefExoticComponent<DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+type PortalProps = React.ComponentPropsWithoutRef<typeof PortalPrimitive>;
+interface DialogPortalProps {
+    children?: React.ReactNode;
+    /**
+     * Specify a container element to portal the content into.
+     */
+    container?: PortalProps['container'];
+    /**
+     * Used to force mounting when more control is needed. Useful when
+     * controlling animation with React animation libraries.
+     */
+    forceMount?: true;
+}
+declare const DialogPortal: React.FC<DialogPortalProps>;
 interface DialogOverlayProps extends DialogOverlayImplProps {
+    /**
+     * Used to force mounting when more control is needed. Useful when
+     * controlling animation with React animation libraries.
+     */
+    forceMount?: true;
 }
+declare const DialogOverlay: React.ForwardRefExoticComponent<DialogOverlayProps & React.RefAttributes<HTMLDivElement>>;
 type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;
 interface DialogOverlayImplProps extends PrimitiveDivProps {
 }
 interface DialogContentProps extends DialogContentTypeProps {
+    /**
+     * Used to force mounting when more control is needed. Useful when
+     * controlling animation with React animation libraries.
+     */
+    forceMount?: true;
 }
 declare const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;
 interface DialogContentTypeProps extends Omit<DialogContentImplProps, 'trapFocus' | 'disableOutsidePointerEvents'> {
@@ -59,10 +85,11 @@ interface DialogCloseProps extends PrimitiveButtonProps {
 declare const DialogClose: React.ForwardRefExoticComponent<DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
 declare const Root: React.FC<DialogProps>;
 declare const Trigger: React.ForwardRefExoticComponent<DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const Portal: React.FC<DialogPortalProps>;
 declare const Overlay: React.ForwardRefExoticComponent<DialogOverlayProps & React.RefAttributes<HTMLDivElement>>;
 declare const Content: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;
 declare const Title: React.ForwardRefExoticComponent<DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
 declare const Description: React.ForwardRefExoticComponent<DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
 declare const Close: React.ForwardRefExoticComponent<DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
-export { createDialogScope, Dialog, DialogTrigger, DialogContent, DialogTitle, DialogDescription, DialogClose, Root, Trigger, Overlay, Content, Title, Description, Close, };
-export type { DialogProps, DialogTriggerProps, DialogOverlayProps, DialogContentProps, DialogTitleProps, DialogDescriptionProps, DialogCloseProps, };
+export { createDialogScope, Dialog, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, Root, Trigger, Portal, Overlay, Content, Title, Description, Close, };
+export type { DialogProps, DialogTriggerProps, DialogPortalProps, DialogOverlayProps, DialogContentProps, DialogTitleProps, DialogDescriptionProps, DialogCloseProps, };

package/dist/atoms/dialog.d.ts

@@ -1,5 +1,6 @@
 import { DismissableLayer } from '@radix-ui/react-dismissable-layer';
 import { FocusScope } from '@radix-ui/react-focus-scope';
+import { Portal as PortalPrimitive } from '@radix-ui/react-portal';
 import { Primitive } from '@radix-ui/react-primitive';
 import { CreateScope } from '@radix-ui/react-context';
 import * as React from 'react';
@@ -16,12 +17,37 @@ type PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.butt
 interface DialogTriggerProps extends PrimitiveButtonProps {
 }
 declare const DialogTrigger: React.ForwardRefExoticComponent<DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+type PortalProps = React.ComponentPropsWithoutRef<typeof PortalPrimitive>;
+interface DialogPortalProps {
+    children?: React.ReactNode;
+    /**
+     * Specify a container element to portal the content into.
+     */
+    container?: PortalProps['container'];
+    /**
+     * Used to force mounting when more control is needed. Useful when
+     * controlling animation with React animation libraries.
+     */
+    forceMount?: true;
+}
+declare const DialogPortal: React.FC<DialogPortalProps>;
 interface DialogOverlayProps extends DialogOverlayImplProps {
+    /**
+     * Used to force mounting when more control is needed. Useful when
+     * controlling animation with React animation libraries.
+     */
+    forceMount?: true;
 }
+declare const DialogOverlay: React.ForwardRefExoticComponent<DialogOverlayProps & React.RefAttributes<HTMLDivElement>>;
 type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;
 interface DialogOverlayImplProps extends PrimitiveDivProps {
 }
 interface DialogContentProps extends DialogContentTypeProps {
+    /**
+     * Used to force mounting when more control is needed. Useful when
+     * controlling animation with React animation libraries.
+     */
+    forceMount?: true;
 }
 declare const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;
 interface DialogContentTypeProps extends Omit<DialogContentImplProps, 'trapFocus' | 'disableOutsidePointerEvents'> {
@@ -59,10 +85,11 @@ interface DialogCloseProps extends PrimitiveButtonProps {
 declare const DialogClose: React.ForwardRefExoticComponent<DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
 declare const Root: React.FC<DialogProps>;
 declare const Trigger: React.ForwardRefExoticComponent<DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const Portal: React.FC<DialogPortalProps>;
 declare const Overlay: React.ForwardRefExoticComponent<DialogOverlayProps & React.RefAttributes<HTMLDivElement>>;
 declare const Content: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;
 declare const Title: React.ForwardRefExoticComponent<DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
 declare const Description: React.ForwardRefExoticComponent<DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
 declare const Close: React.ForwardRefExoticComponent<DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
-export { createDialogScope, Dialog, DialogTrigger, DialogContent, DialogTitle, DialogDescription, DialogClose, Root, Trigger, Overlay, Content, Title, Description, Close, };
-export type { DialogProps, DialogTriggerProps, DialogOverlayProps, DialogContentProps, DialogTitleProps, DialogDescriptionProps, DialogCloseProps, };
+export { createDialogScope, Dialog, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, Root, Trigger, Portal, Overlay, Content, Title, Description, Close, };
+export type { DialogProps, DialogTriggerProps, DialogPortalProps, DialogOverlayProps, DialogContentProps, DialogTitleProps, DialogDescriptionProps, DialogCloseProps, };