prometeo-design-system 7.3.6 → 7.3.8

package/dist/Dialog.css

@@ -0,0 +1 @@
+.prometeo-dialog-backdrop{position:fixed;inset:0;background:#0000004d;backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);opacity:0;pointer-events:auto;transition:opacity .15s ease-out}.prometeo-dialog-backdrop[data-open=true]{opacity:1}.prometeo-dialog-backdrop[data-closing=true]{opacity:0;transition:opacity .1s ease-in;pointer-events:none}

package/dist/Dialog.d.ts

@@ -0,0 +1,6 @@
+export * from './exports/Dialog'
+export {}
+import PrometeoDesignSystem from './exports/Dialog'
+export default PrometeoDesignSystem
+export * from './exports/Dialog'
+export {}

package/dist/Dialog.es.js

@@ -0,0 +1,278 @@
+import { j as n } from "./jsx-runtime-GkKLlHH4.js";
+import { useContext as Z, createContext as $, forwardRef as ee, memo as O, useRef as h, useState as R, useCallback as p, useEffect as I, useImperativeHandle as ne, useMemo as q } from "react";
+import { createPortal as te } from "react-dom";
+import { c as v } from "./cn-B6yFEsav.js";
+import { M as re } from "./MenuFloating-Bew5qbpJ.js";
+import oe from "./CardBackground.es.js";
+import se from "./IconButton.es.js";
+import { Close as le } from "./Icons/Close.es.js";
+const L = $(null);
+function ae() {
+  const e = Z(L);
+  if (!e)
+    throw new Error(
+      "Dialog compound components must be used inside <Dialog>"
+    );
+  return e;
+}
+const M = 100, k = O(function({
+  title: r,
+  description: t,
+  className: l
+}) {
+  const { hideCloseButton: s, closeDialog: a } = ae();
+  return /* @__PURE__ */ n.jsxs("div", { className: v("flex flex-col gap-4  pt-2 ", l), children: [
+    /* @__PURE__ */ n.jsxs("div", { className: "flex items-baseline justify-center gap-2 pl-4 pr-2 ", children: [
+      r && /* @__PURE__ */ n.jsx("span", { className: "prometeo-fonts-title-medium text-neutral-default-default", children: r }),
+      !s && /* @__PURE__ */ n.jsx("div", { className: "flex-1 flex justify-end", children: /* @__PURE__ */ n.jsx(
+        se,
+        {
+          icon: le,
+          variant: "text",
+          color: "neutral",
+          size: "small",
+          onClick: a
+        }
+      ) })
+    ] }),
+    t && /* @__PURE__ */ n.jsx("p", { className: "prometeo-fonts-body-small text-neutral-secondary-default px-4", children: t })
+  ] });
+});
+k.displayName = "Dialog.Header";
+const P = O(function({
+  children: r,
+  className: t
+}) {
+  return /* @__PURE__ */ n.jsx("div", { className: v("px-4 py-0 flex flex-col gap-4 ", t), children: r });
+});
+P.displayName = "Dialog.Content";
+const U = O(function({
+  children: r,
+  className: t
+}) {
+  return /* @__PURE__ */ n.jsx(
+    "div",
+    {
+      className: v(
+        "p-4 pt-2 flex flex-row gap-3 items-center",
+        t
+      ),
+      children: r
+    }
+  );
+});
+U.displayName = "Dialog.Footer";
+const X = O(function({
+  layoutContext: r,
+  shouldRenderChildren: t,
+  hasAutoHeader: l,
+  title: s,
+  description: a,
+  cardBackground: o,
+  className: c,
+  children: i
+}) {
+  return /* @__PURE__ */ n.jsxs(
+    "div",
+    {
+      className: v(
+        "relative flex flex-col radius-medium overflow-hidden dropshadow-400",
+        "border border-neutral-default-default",
+        c
+      ),
+      children: [
+        /* @__PURE__ */ n.jsx(
+          oe,
+          {
+            ...o ?? {},
+            className: v("absolute inset-0 z-0", o?.className)
+          }
+        ),
+        /* @__PURE__ */ n.jsx("div", { className: "relative z-10 flex flex-col gap-4 min-h-0 overflow-hidden", children: /* @__PURE__ */ n.jsx(L.Provider, { value: r, children: t && /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
+          l && /* @__PURE__ */ n.jsx(k, { title: s, description: a }),
+          i
+        ] }) }) })
+      ]
+    }
+  );
+});
+X.displayName = "Dialog.Card";
+function ce({
+  triggerRef: e,
+  anchorRef: r,
+  placement: t,
+  offset: l = 4,
+  matchTriggerWidth: s,
+  attachToParent: a = !1,
+  closeOnScroll: o = !0,
+  closeOnClickOutside: c = !0,
+  zIndex: i = 50,
+  avoidElements: u,
+  cardBackground: N,
+  title: b,
+  description: D,
+  hideCloseButton: w = !1,
+  modal: m = !1,
+  unmountChildrenOnClose: j = !0,
+  onClose: T,
+  onOpen: A,
+  children: _,
+  className: G
+}, J) {
+  const f = h(null), H = h(T), S = h(A);
+  H.current = T, S.current = A;
+  const [F, C] = R("hidden"), [K, E] = R(
+    () => !j
+  ), g = h(null), d = p(() => {
+    g.current && (clearTimeout(g.current), g.current = null);
+  }, []), z = p(
+    (x) => {
+      d(), m && C("open"), j && E(!0), f.current?.open(x), S.current?.(x);
+    },
+    [m, j, d]
+  ), y = p(() => {
+    m && (d(), C("closing"), g.current = setTimeout(() => {
+      C("hidden"), g.current = null;
+    }, M)), f.current?.close();
+  }, [m, d]), Q = p(() => {
+    j && E(!1), H.current?.(f.current?.getContext() ?? null);
+  }, [j]);
+  I(() => {
+    const x = f.current;
+    if (!(!x || !m))
+      return x.subscribeOpenChange((Y) => {
+        Y || C((B) => B !== "open" ? B : (d(), g.current = setTimeout(() => {
+          C("hidden"), g.current = null;
+        }, M), "closing"));
+      });
+  }, [m, d]), I(() => d, [d]), ne(
+    J,
+    () => ({
+      open: z,
+      close: y,
+      get isOpen() {
+        return f.current?.isOpen ?? !1;
+      },
+      getContext: () => f.current?.getContext() ?? null,
+      subscribeOpenChange: (x) => f.current?.subscribeOpenChange(x) ?? (() => {
+      })
+    }),
+    [z, y]
+  );
+  const V = q(
+    () => ({ hideCloseButton: w, closeDialog: y }),
+    [w, y]
+  ), W = b != null || D != null;
+  return /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
+    m && F !== "hidden" && te(
+      /* @__PURE__ */ n.jsx(
+        "div",
+        {
+          className: "prometeo-dialog-backdrop",
+          "data-open": F === "open" ? "true" : void 0,
+          "data-closing": F === "closing" ? "true" : void 0,
+          style: { zIndex: i - 1 }
+        }
+      ),
+      document.body
+    ),
+    /* @__PURE__ */ n.jsx(
+      re,
+      {
+        ref: f,
+        triggerRef: e,
+        anchorRef: r,
+        placement: t,
+        offset: l,
+        matchTriggerWidth: s,
+        attachToParent: a,
+        closeOnScroll: o,
+        closeOnClickOutside: c,
+        zIndex: i,
+        avoidElements: u,
+        onClose: Q,
+        children: /* @__PURE__ */ n.jsx(
+          X,
+          {
+            layoutContext: V,
+            shouldRenderChildren: K,
+            hasAutoHeader: W,
+            title: b,
+            description: D,
+            cardBackground: N,
+            className: G,
+            children: _
+          }
+        )
+      }
+    )
+  ] });
+}
+const ie = ee(ce), be = Object.assign(ie, {
+  Header: k,
+  Content: P,
+  Footer: U
+});
+function De() {
+  const e = h(null), r = h(null), t = p((o) => {
+    e.current?.open(o);
+  }, []), l = p(() => {
+    e.current?.close();
+  }, []), s = p((o) => {
+    e.current?.isOpen ? e.current.close() : e.current?.open(o);
+  }, []), a = p((o) => {
+    let c = null, i = null, u = !0, N = 0;
+    const b = () => {
+      if (!u) return;
+      const D = e.current;
+      if (!D) {
+        N < 10 && (N++, c = requestAnimationFrame(b));
+        return;
+      }
+      i = D.subscribeOpenChange(o);
+    };
+    return b(), () => {
+      u = !1, c !== null && cancelAnimationFrame(c), i?.();
+    };
+  }, []);
+  return q(
+    () => ({
+      ref: e,
+      triggerRef: r,
+      open: t,
+      close: l,
+      toggle: s,
+      get isOpen() {
+        return e.current?.isOpen ?? !1;
+      },
+      subscribeOpenChange: a
+    }),
+    [t, l, s, a]
+  );
+}
+function je(e, r) {
+  const [t, l] = R(
+    () => e.current?.isOpen ?? !1
+  );
+  return I(() => {
+    let s = null, a = null, o = !0, c = 0;
+    const i = () => {
+      if (!o) return;
+      const u = e.current;
+      if (!u) {
+        c < 10 && (c++, s = requestAnimationFrame(i));
+        return;
+      }
+      l(u.isOpen), a = u.subscribeOpenChange(l);
+    };
+    return i(), () => {
+      o = !1, s !== null && cancelAnimationFrame(s), a?.();
+    };
+  }, [e, r]), t;
+}
+export {
+  be as Dialog,
+  be as default,
+  De as useDialogControl,
+  je as useDialogState
+};