prometeo-design-system 5.7.2 → 5.7.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,43 +1,65 @@
1
- import { j as i } from "./jsx-runtime-GkKLlHH4.js";
2
- import { forwardRef as Ne, memo as W, useState as $, useRef as R, useCallback as I, useImperativeHandle as Pe, useEffect as ie, Children as j, isValidElement as V, createElement as k, cloneElement as fe } from "react";
3
- import { createPortal as Ie } from "react-dom";
4
- import { c as f } from "./cn-B6yFEsav.js";
5
- import { c as Ye } from "./index-BOQuZ0gG.js";
6
- const pe = Ne(
7
- ({ children: o, onClose: p, className: c, attachToParent: d = !1, zindex: x = 40, debugMode: t = !1, safeMarginSize: E = 24, title: g, scroll: h = "content", size: ce = "medium", unmountChildrenOnClose: w = !0 }, xe) => {
8
- const [N, K] = $(!1), [B, U] = $(null), [ue, _] = $(
9
- () => w ? N : !0
10
- ), q = R(p), z = R(B), J = R(null);
11
- q.current = p, z.current = B;
12
- const Q = I((a) => {
13
- U(a ?? {}), K(!0);
14
- }, []), A = I(() => {
15
- K(!1), q.current?.(z.current);
1
+ import { j as c } from "./jsx-runtime-GkKLlHH4.js";
2
+ import { forwardRef as Pe, memo as B, useState as S, useRef as Y, useCallback as R, useEffect as T, useImperativeHandle as Ye, Children as D, isValidElement as J, createElement as A, cloneElement as pe } from "react";
3
+ import { createPortal as je } from "react-dom";
4
+ import { c as p } from "./cn-B6yFEsav.js";
5
+ import { c as De } from "./index-BOQuZ0gG.js";
6
+ const Te = 50, xe = Pe(
7
+ ({ children: o, onClose: x, className: u, attachToParent: i = !1, zindex: h = 40, debugMode: t = !1, safeMarginSize: d = 24, title: g, scroll: m = "content", size: ue = "medium", unmountChildrenOnClose: v = !0 }, he) => {
8
+ const [y, Q] = S(!1), [W, F] = S(null), [me, z] = S(
9
+ () => v ? y : !0
10
+ ), Z = Y(x), O = Y(W), M = Y(null), f = Y(null), L = Y(/* @__PURE__ */ new Set());
11
+ Z.current = x, O.current = W;
12
+ const ee = R((r) => {
13
+ F(r ?? {}), Q(!0);
14
+ }, []), H = R(() => {
15
+ Q(!1), Z.current?.(O.current);
16
16
  }, []);
17
- Pe(
18
- xe,
17
+ T(() => {
18
+ L.current.forEach((r) => {
19
+ try {
20
+ r(y);
21
+ } catch {
22
+ }
23
+ });
24
+ }, [y]), Ye(
25
+ he,
19
26
  () => ({
20
- open: Q,
21
- close: A,
22
- isOpen: N,
23
- getContext: () => z.current
27
+ open: ee,
28
+ close: H,
29
+ isOpen: y,
30
+ getContext: () => O.current,
31
+ subscribeOpenChange: (r) => (L.current.add(r), () => {
32
+ L.current.delete(r);
33
+ })
24
34
  }),
25
- [Q, A, N]
26
- ), ie(() => {
27
- w && N && _(!0);
28
- }, [N, w]), ie(() => {
29
- if (!w) return;
30
- const a = J.current;
31
- if (!a) return;
32
- const e = (y) => {
33
- const n = a.hasAttribute("open");
34
- y.target === a && (y.propertyName === "opacity" || y.propertyName === "display") && !n && (_(!1), U(null));
35
+ [ee, H, y]
36
+ ), T(() => {
37
+ v && y && z(!0);
38
+ }, [y, v]), T(() => {
39
+ if (v) {
40
+ if (y) {
41
+ f.current && (clearTimeout(f.current), f.current = null);
42
+ return;
43
+ }
44
+ return f.current && clearTimeout(f.current), f.current = setTimeout(() => {
45
+ z(!1), F(null), f.current = null;
46
+ }, Te), () => {
47
+ f.current && (clearTimeout(f.current), f.current = null);
48
+ };
49
+ }
50
+ }, [y, v]), T(() => {
51
+ if (!v) return;
52
+ const r = M.current;
53
+ if (!r) return;
54
+ const e = (w) => {
55
+ const n = r.hasAttribute("open");
56
+ w.target === r && (!["opacity", "display", "transform"].includes(w.propertyName) || n || (f.current && (clearTimeout(f.current), f.current = null), z(!1), F(null)));
35
57
  };
36
- return a.addEventListener("transitionend", e), a.addEventListener("transitioncancel", e), () => {
37
- a.removeEventListener("transitionend", e), a.removeEventListener("transitioncancel", e);
58
+ return r.addEventListener("transitionend", e), r.addEventListener("transitioncancel", e), () => {
59
+ r.removeEventListener("transitionend", e), r.removeEventListener("transitioncancel", e);
38
60
  };
39
- }, [w]);
40
- const he = Ye("max-h-[calc(100%-80px)]", {
61
+ }, [v]);
62
+ const Ee = De("max-h-[calc(100%-80px)]", {
41
63
  variants: {
42
64
  size: {
43
65
  medium: " max-w-[min(740px,calc(100%-32px))]",
@@ -45,9 +67,9 @@ const pe = Ne(
45
67
  }
46
68
  }
47
69
  });
48
- let D, F;
49
- typeof o == "function" ? (D = o(B), F = j.toArray(D)) : (D = o, F = j.toArray(D));
50
- const me = (a) => {
70
+ let X, G;
71
+ typeof o == "function" ? (X = o(W), G = D.toArray(X)) : (X = o, G = D.toArray(X));
72
+ const ge = (r) => {
51
73
  const e = {
52
74
  headerProps: null,
53
75
  titleContent: null,
@@ -62,107 +84,107 @@ const pe = Ne(
62
84
  footerExpandX: !1,
63
85
  footerExpandY: !1
64
86
  }
65
- }, y = (n) => {
66
- if (!V(n)) return;
67
- const r = n.props;
68
- n.type === v ? (e.allExpandInfo.headerExpandX = e.allExpandInfo.headerExpandX || !!r?.expandX, e.allExpandInfo.headerExpandY = e.allExpandInfo.headerExpandY || !!r?.expandY) : n.type === b ? (e.allExpandInfo.contentExpandX = e.allExpandInfo.contentExpandX || !!r?.expandX, e.allExpandInfo.contentExpandY = e.allExpandInfo.contentExpandY || !!r?.expandY) : n.type === C && (e.allExpandInfo.footerExpandX = e.allExpandInfo.footerExpandX || !!r?.expandX, e.allExpandInfo.footerExpandY = e.allExpandInfo.footerExpandY || !!r?.expandY), r?.children && j.toArray(r.children).forEach(y);
87
+ }, w = (n) => {
88
+ if (!J(n)) return;
89
+ const a = n.props;
90
+ n.type === N ? (e.allExpandInfo.headerExpandX = e.allExpandInfo.headerExpandX || !!a?.expandX, e.allExpandInfo.headerExpandY = e.allExpandInfo.headerExpandY || !!a?.expandY) : n.type === C ? (e.allExpandInfo.contentExpandX = e.allExpandInfo.contentExpandX || !!a?.expandX, e.allExpandInfo.contentExpandY = e.allExpandInfo.contentExpandY || !!a?.expandY) : n.type === I && (e.allExpandInfo.footerExpandX = e.allExpandInfo.footerExpandX || !!a?.expandX, e.allExpandInfo.footerExpandY = e.allExpandInfo.footerExpandY || !!a?.expandY), a?.children && D.toArray(a.children).forEach(w);
69
91
  };
70
- return a.forEach((n) => {
71
- if (y(n), !V(n)) {
92
+ return r.forEach((n) => {
93
+ if (w(n), !J(n)) {
72
94
  e.middleChildren.push(n);
73
95
  return;
74
96
  }
75
- if (n.type === Y && !e.titleContent) {
97
+ if (n.type === j && !e.titleContent) {
76
98
  e.titleContent = n;
77
99
  return;
78
100
  }
79
- if (n.type === v && !e.headerProps) {
80
- const r = n.props;
81
- e.headerProps = r;
101
+ if (n.type === N && !e.headerProps) {
102
+ const a = n.props;
103
+ e.headerProps = a;
82
104
  return;
83
105
  }
84
- if (n.type === b && !e.contentProps) {
85
- const r = n.props;
86
- e.contentProps = r;
106
+ if (n.type === C && !e.contentProps) {
107
+ const a = n.props;
108
+ e.contentProps = a;
87
109
  return;
88
110
  }
89
- if (n.type === C && !e.footerProps) {
90
- const r = n.props;
91
- e.footerProps = r;
111
+ if (n.type === I && !e.footerProps) {
112
+ const a = n.props;
113
+ e.footerProps = a;
92
114
  return;
93
115
  }
94
116
  e.middleChildren.push(n);
95
117
  }), e;
96
- }, Ee = (a, e, y, n) => {
97
- const r = (l, S) => {
98
- if (!V(l))
118
+ }, ye = (r, e, w, n) => {
119
+ const a = (l, K) => {
120
+ if (!J(l))
99
121
  return l;
100
- const s = l.props, P = l.key ?? `dialog-child-${S}`;
101
- if (l.type === Y)
102
- return /* @__PURE__ */ k(Y, { ...s, debugMode: t, key: P }, s.children);
103
- if (l.type === v)
104
- return /* @__PURE__ */ k(v, { ...s, debugMode: t, expandWeight: e, key: P }, s.children);
105
- if (l.type === b)
106
- return /* @__PURE__ */ k(b, { ...s, debugMode: t, scroll: h, expandWeight: y, key: P }, s.children);
122
+ const s = l.props, P = l.key ?? `dialog-child-${K}`;
123
+ if (l.type === j)
124
+ return /* @__PURE__ */ A(j, { ...s, debugMode: t, key: P }, s.children);
125
+ if (l.type === N)
126
+ return /* @__PURE__ */ A(N, { ...s, debugMode: t, expandWeight: e, key: P }, s.children);
107
127
  if (l.type === C)
108
- return /* @__PURE__ */ k(C, { ...s, debugMode: t, expandWeight: n, key: P }, s.children);
128
+ return /* @__PURE__ */ A(C, { ...s, debugMode: t, scroll: m, expandWeight: w, key: P }, s.children);
129
+ if (l.type === I)
130
+ return /* @__PURE__ */ A(I, { ...s, debugMode: t, expandWeight: n, key: P }, s.children);
109
131
  if (l.type === "form") {
110
- const L = s?.children ? j.toArray(s.children).map((O, G) => r(O, G)) : [];
111
- return fe(l, {
132
+ const V = s?.children ? D.toArray(s.children).map((U, q) => a(U, q)) : [];
133
+ return pe(l, {
112
134
  key: P,
113
135
  ...s,
114
- className: f(s?.className, "contents")
115
- }, ...L);
136
+ className: p(s?.className, "contents")
137
+ }, ...V);
116
138
  }
117
139
  if (s?.children) {
118
- const L = j.toArray(s.children).map((O, G) => r(O, G));
119
- return fe(l, { key: P }, ...L);
140
+ const V = D.toArray(s.children).map((U, q) => a(U, q));
141
+ return pe(l, { key: P }, ...V);
120
142
  }
121
143
  return l;
122
144
  };
123
- return a.map((l, S) => r(l, S));
145
+ return r.map((l, K) => a(l, K));
124
146
  };
125
- let { headerProps: Z, titleContent: X, contentProps: M, footerProps: ee, middleChildren: ge, allExpandInfo: u } = me(F), m = Z ? { ...Z } : null, T = M ? { ...M } : null, H = ee ? { ...ee } : null;
126
- !m && g && (m = { title: g, children: null }, X = null), m && X && m.title && (m = {
127
- ...m,
147
+ let { headerProps: te, titleContent: k, contentProps: ne, footerProps: re, middleChildren: be, allExpandInfo: E } = ge(G), b = te ? { ...te } : null, _ = ne ? { ...ne } : null, $ = re ? { ...re } : null;
148
+ !b && g && (b = { title: g, children: null }, k = null), b && k && b.title && (b = {
149
+ ...b,
128
150
  title: "",
129
- children: X
130
- }, X = null);
131
- const ye = u.headerExpandX || u.contentExpandX || u.footerExpandX, te = u.headerExpandY || u.contentExpandY || u.footerExpandY, be = [u.headerExpandY, u.contentExpandY, u.footerExpandY].filter(Boolean).length, ne = u.contentExpandY ? be > 1 ? 2 : 1 : void 0, re = u.headerExpandY ? 1 : void 0, oe = u.footerExpandY ? 1 : void 0, ae = Ee(ge, re, ne, oe), ve = m ? /* @__PURE__ */ i.jsx(v, { ...m, debugMode: t, expandWeight: re, children: m.children }) : null, le = (T ? /* @__PURE__ */ i.jsx(b, { ...T, debugMode: t, scroll: h, expandWeight: ne, children: T.children }) : null) ?? (ae.length ? ae : null), Ce = H ? /* @__PURE__ */ i.jsx(C, { ...H, debugMode: t, expandWeight: oe, children: H.children }) : null, we = ye ? "w-full" : "w-auto", se = {
132
- "--safe-margin-size": `${E}px`
151
+ children: k
152
+ }, k = null);
153
+ const ve = E.headerExpandX || E.contentExpandX || E.footerExpandX, oe = E.headerExpandY || E.contentExpandY || E.footerExpandY, we = [E.headerExpandY, E.contentExpandY, E.footerExpandY].filter(Boolean).length, ae = E.contentExpandY ? we > 1 ? 2 : 1 : void 0, le = E.headerExpandY ? 1 : void 0, se = E.footerExpandY ? 1 : void 0, ie = ye(be, le, ae, se), Ce = b ? /* @__PURE__ */ c.jsx(N, { ...b, debugMode: t, expandWeight: le, children: b.children }) : null, de = (_ ? /* @__PURE__ */ c.jsx(C, { ..._, debugMode: t, scroll: m, expandWeight: ae, children: _.children }) : null) ?? (ie.length ? ie : null), Ne = $ ? /* @__PURE__ */ c.jsx(I, { ...$, debugMode: t, expandWeight: se, children: $.children }) : null, Ie = ve ? "w-full" : "w-auto", fe = {
154
+ "--safe-margin-size": `${d}px`
133
155
  };
134
- te && (se.height = `calc(100% - ${E * 2}px)`);
135
- const de = /* @__PURE__ */ i.jsx(
156
+ oe && (fe.height = `calc(100% - ${d * 2}px)`);
157
+ const ce = /* @__PURE__ */ c.jsx(
136
158
  "dialog",
137
159
  {
138
- ref: J,
139
- open: N,
140
- className: f(
160
+ ref: M,
161
+ open: y,
162
+ className: p(
141
163
  "prometeo-dialog fixed inset-0 w-screen h-screen z-50 flex items-center justify-center bg-black/30 backdrop-blur-[1.5px]",
142
164
  "open:flex",
143
165
  "hidden"
144
166
  ),
145
- style: { zIndex: x },
146
- onClick: A,
147
- children: /* @__PURE__ */ i.jsxs(
167
+ style: { zIndex: h },
168
+ onClick: H,
169
+ children: /* @__PURE__ */ c.jsxs(
148
170
  "div",
149
171
  {
150
- onClick: (a) => a.stopPropagation(),
151
- className: f(
172
+ onClick: (r) => r.stopPropagation(),
173
+ className: p(
152
174
  "prometeo-dialog-panel bg-neutral-default-default rounded-lg shadow-lg border-neutral-strong-default border relative ",
153
- we,
154
- h === "content" ? "" : "prometeo-scrollbar-thin!",
175
+ Ie,
176
+ m === "content" ? "" : "prometeo-scrollbar-thin!",
155
177
  // scroll === 'dialog' && 'overflow-auto ',
156
178
  "flex flex-col ",
157
- he({ size: ce })
179
+ Ee({ size: ue })
158
180
  // className
159
181
  ),
160
- style: se,
182
+ style: fe,
161
183
  children: [
162
- /* @__PURE__ */ i.jsx(
184
+ /* @__PURE__ */ c.jsx(
163
185
  "div",
164
186
  {
165
- className: f(
187
+ className: p(
166
188
  "absolute bg-transparent z-[-1] -top-(--safe-margin-size) -left-(--safe-margin-size) -right-(--safe-margin-size) -bottom-(--safe-margin-size)",
167
189
  t && "after:content-['SECURE_MARGIN'] after:text-red-300 after:prometeo-fonts-label-small after:ml-2 "
168
190
  ),
@@ -172,102 +194,113 @@ const pe = Ne(
172
194
  }
173
195
  }
174
196
  ),
175
- (!w || ue) && /* @__PURE__ */ i.jsxs("div", { className: f(
197
+ (!v || me) && /* @__PURE__ */ c.jsxs("div", { className: p(
176
198
  "flex flex-col h-auto prometeo-scrollbar-thin!",
177
- te && "flex-1 min-h-0",
178
- h === "dialog" && "overflow-auto *:min-w-max *:min-h-max",
179
- h === "content" && "overflow-hidden",
180
- c
199
+ oe && "flex-1 min-h-0",
200
+ m === "dialog" && "overflow-auto *:min-w-max *:min-h-max",
201
+ m === "content" && "overflow-hidden",
202
+ u
181
203
  ), children: [
182
- ve,
183
- h === "dialog" ? /* @__PURE__ */ i.jsx("div", { className: "flex flex-col flex-1", children: le }) : le,
184
- Ce
204
+ Ce,
205
+ m === "dialog" ? /* @__PURE__ */ c.jsx("div", { className: "flex flex-col flex-1", children: de }) : de,
206
+ Ne
185
207
  ] })
186
208
  ]
187
209
  }
188
210
  )
189
211
  }
190
212
  );
191
- return d ? de : Ie(de, document.body);
213
+ return i ? ce : je(ce, document.body);
192
214
  }
193
215
  );
194
- pe.displayName = "Dialog";
195
- const b = W(({ children: o, className: p, debugMode: c, scroll: d, expandX: x, expandY: t, expandWeight: E }) => {
196
- const g = f(
197
- x && "w-full min-w-0",
216
+ xe.displayName = "Dialog";
217
+ const C = B(({ children: o, className: x, debugMode: u, scroll: i, expandX: h, expandY: t, expandWeight: d }) => {
218
+ const g = p(
219
+ h && "w-full min-w-0",
198
220
  t && "flex-1 min-h-0"
199
- ), h = t ? { flexGrow: E ?? 1, flexBasis: 0 } : void 0;
200
- return /* @__PURE__ */ i.jsx("div", { style: h, className: f(
221
+ ), m = t ? { flexGrow: d ?? 1, flexBasis: 0 } : void 0;
222
+ return /* @__PURE__ */ c.jsx("div", { style: m, className: p(
201
223
  "flex flex-col p-4 prometeo-scrollbar-thin!",
202
- c && "border-2 border-dashed border-red-500 bg-red-200/40 relative after:content-['CONTENT'] after:absolute after:top-2 after:left-1/2 after:w-max after:h-full after:text-red-500 ",
224
+ u && "border-2 border-dashed border-red-500 bg-red-200/40 relative after:content-['CONTENT'] after:absolute after:top-2 after:left-1/2 after:w-max after:h-full after:text-red-500 ",
203
225
  g,
204
- p,
226
+ x,
205
227
  // Para scroll='content', este componente necesita su propio scroll y altura mínima
206
- d === "content" && "overflow-y-auto min-h-0 flex-1 ",
228
+ i === "content" && "overflow-y-auto min-h-0 flex-1 ",
207
229
  // Para scroll='dialog', el contenido debe ocupar todo el espacio disponible pero sin scroll
208
- d === "dialog" && "flex-1 min-h-max "
230
+ i === "dialog" && "flex-1 min-h-max "
209
231
  ), children: o });
210
232
  });
211
- b.displayName = "DialogContent";
212
- const Y = W(({ children: o, className: p, debugMode: c, expandX: d, expandY: x }) => {
213
- const t = f(
214
- d && "w-full min-w-0",
215
- x && "flex-1 min-h-0"
233
+ C.displayName = "DialogContent";
234
+ const j = B(({ children: o, className: x, debugMode: u, expandX: i, expandY: h }) => {
235
+ const t = p(
236
+ i && "w-full min-w-0",
237
+ h && "flex-1 min-h-0"
216
238
  );
217
- return /* @__PURE__ */ i.jsx("h1", { className: f("prometeo-fonts-headline-small text-neutral-strong-default w-max", c && 'bg-red-400/40 relative after:content-["TITLE"] after:absolute after:top-0 after:-translate-y-5 after:left-0 after:w-max after:h-full after:text-red-500 after:prometeo-fonts-label-large', t, p), children: o });
239
+ return /* @__PURE__ */ c.jsx("h1", { className: p("prometeo-fonts-headline-small text-neutral-strong-default w-max", u && 'bg-red-400/40 relative after:content-["TITLE"] after:absolute after:top-0 after:-translate-y-5 after:left-0 after:w-max after:h-full after:text-red-500 after:prometeo-fonts-label-large', t, x), children: o });
218
240
  });
219
- Y.displayName = "DialogTitle";
220
- const v = W(({ children: o, className: p, title: c, debugMode: d, expandX: x, expandY: t, expandWeight: E }) => {
221
- const g = f(
222
- x && "w-full min-w-0",
241
+ j.displayName = "DialogTitle";
242
+ const N = B(({ children: o, className: x, title: u, debugMode: i, expandX: h, expandY: t, expandWeight: d }) => {
243
+ const g = p(
244
+ h && "w-full min-w-0",
223
245
  t && "flex-1 min-h-0"
224
- ), h = t ? { flexGrow: E ?? 1, flexBasis: 0 } : void 0;
225
- return /* @__PURE__ */ i.jsxs("div", { style: h, className: f(
246
+ ), m = t ? { flexGrow: d ?? 1, flexBasis: 0 } : void 0;
247
+ return /* @__PURE__ */ c.jsxs("div", { style: m, className: p(
226
248
  "px-6 pt-8 pb-4 flex flex-col",
227
249
  g,
228
- d && "border-2 border-dashed border-red-600 bg-red-200/40! relative after:content-['HEADER'] after:absolute after:top-1 after:left-1/2 after:w-max after:h-full after:text-red-500",
229
- p
250
+ i && "border-2 border-dashed border-red-600 bg-red-200/40! relative after:content-['HEADER'] after:absolute after:top-1 after:left-1/2 after:w-max after:h-full after:text-red-500",
251
+ x
230
252
  ), children: [
231
- c && /* @__PURE__ */ i.jsx(Y, { debugMode: d, children: c }),
253
+ u && /* @__PURE__ */ c.jsx(j, { debugMode: i, children: u }),
232
254
  o
233
255
  ] });
234
256
  });
235
- v.displayName = "DialogHeader";
236
- const C = W(({ children: o, className: p, debugMode: c, expandX: d, expandY: x, expandWeight: t }) => {
237
- const E = f(
238
- d && "w-full min-w-0",
239
- x && "flex-1 min-h-0 flex-col"
240
- ), g = x ? { flexGrow: t ?? 1, flexBasis: 0 } : void 0;
241
- return /* @__PURE__ */ i.jsx("div", { style: g, className: f(
242
- c && "border-2 border-dashed border-red-600 bg-red-200/40! relative after:content-['FOOTER'] after:absolute after:top-1 after:left-1/2 after:w-max after:h-full after:text-red-500",
257
+ N.displayName = "DialogHeader";
258
+ const I = B(({ children: o, className: x, debugMode: u, expandX: i, expandY: h, expandWeight: t }) => {
259
+ const d = p(
260
+ i && "w-full min-w-0",
261
+ h && "flex-1 min-h-0 flex-col"
262
+ ), g = h ? { flexGrow: t ?? 1, flexBasis: 0 } : void 0;
263
+ return /* @__PURE__ */ c.jsx("div", { style: g, className: p(
264
+ u && "border-2 border-dashed border-red-600 bg-red-200/40! relative after:content-['FOOTER'] after:absolute after:top-1 after:left-1/2 after:w-max after:h-full after:text-red-500",
243
265
  "border-t border-neutral-strong-default p-4 w-full flex flex-row justify-end gap-4",
244
- E,
245
- p
266
+ d,
267
+ x
246
268
  ), children: o });
247
269
  });
248
- C.displayName = "DialogFooter";
249
- const je = Object.assign(pe, {
250
- Content: b,
251
- Header: v,
252
- Footer: C,
253
- Title: Y
270
+ I.displayName = "DialogFooter";
271
+ const Re = Object.assign(xe, {
272
+ Content: C,
273
+ Header: N,
274
+ Footer: I,
275
+ Title: j
254
276
  });
255
- je.displayName = "DialogModal";
256
- const ze = () => {
257
- const o = R(null), p = I((t) => {
258
- o.current?.open(t);
259
- }, []), c = I(() => {
277
+ Re.displayName = "DialogModal";
278
+ const Fe = () => {
279
+ const o = Y(null), [x, u] = S(!1), i = R((d) => {
280
+ o.current?.open(d);
281
+ }, []), h = R(() => {
260
282
  o.current?.close();
261
- }, []), d = I(() => o.current?.isOpen ?? !1, []), x = I(() => o.current?.getContext() ?? null, []);
283
+ }, []);
284
+ T(() => {
285
+ const d = o.current?.subscribeOpenChange;
286
+ if (!d) return;
287
+ const g = d((m) => {
288
+ u(m);
289
+ });
290
+ return () => {
291
+ g && g();
292
+ };
293
+ }, [o.current?.subscribeOpenChange]);
294
+ const t = R(() => o.current?.getContext() ?? null, []);
262
295
  return {
263
296
  ref: o,
264
- open: p,
265
- close: c,
266
- isOpen: d,
267
- getContext: x
297
+ open: i,
298
+ close: h,
299
+ isOpen: x,
300
+ getContext: t
268
301
  };
269
302
  };
270
303
  export {
271
- je as default,
272
- ze as useDialogControl
304
+ Re as default,
305
+ Fe as useDialogControl
273
306
  };
@@ -254,7 +254,7 @@ const b = {
254
254
  children: r,
255
255
  hideSpinner: y = !1,
256
256
  spinner: w = /* @__PURE__ */ a.jsx(T, { size: "small", variant: "clip", color: "var(--neutral-600)", className: "size-4 " }),
257
- type: S,
257
+ type: S = "button",
258
258
  className: z,
259
259
  disabled: m,
260
260
  variant: s = "fill",
@@ -16,6 +16,7 @@ export interface DialogHandle<TContext = unknown> {
16
16
  close: () => void;
17
17
  isOpen: boolean;
18
18
  getContext: () => TContext | null;
19
+ subscribeOpenChange: (callback: (open: boolean) => void) => () => void;
19
20
  }
20
21
  interface DialogContentProps {
21
22
  children?: React.ReactNode;
@@ -3,6 +3,6 @@ export declare const useDialogControl: <TContext = unknown>() => {
3
3
  ref: import('react').RefObject<DialogHandle<TContext> | null>;
4
4
  open: (context?: TContext) => void;
5
5
  close: () => void;
6
- isOpen: () => boolean;
6
+ isOpen: boolean;
7
7
  getContext: () => NonNullable<TContext> | null;
8
8
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "prometeo-design-system",
3
3
  "private": false,
4
- "version": "5.7.2",
4
+ "version": "5.7.3",
5
5
  "type": "module",
6
6
  "description": "design kit system",
7
7
  "main": "dist/prometeo-design-system.umd.js",