@versini/ui-panel 3.2.3 → 3.3.0

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.
Files changed (3) hide show
  1. package/dist/components/Panel/Panel.js +122 -146
  2. package/dist/index.js +5 -5
  3. package/package.json +5 -5
package/dist/components/Panel/Panel.js CHANGED
@@ -1,140 +1,116 @@
1
- import { jsxs as v, jsx as l, Fragment as y } from "react/jsx-runtime";
1
+ import { jsx as l, jsxs as v, Fragment as y } from "react/jsx-runtime";
2
2
  import { ButtonIcon as A } from "@versini/ui-button";
3
- import * as c from "react";
4
- import { useId as M, useRef as L, useState as O, useEffect as N } from "react";
5
- import E from "clsx";
6
- import { useFloating as P, useClick as R, useDismiss as T, useRole as D, useInteractions as B, useMergeRefs as $, FloatingPortal as V, FloatingOverlay as F, FloatingFocusManager as U } from "@floating-ui/react";
7
- const Y = "av-messagebox", z = "av-panel", G = ({
8
- children: t,
9
- fill: e,
10
- viewBox: r,
11
- className: s,
12
- defaultViewBox: o,
13
- size: a,
14
- title: n,
15
- semantic: d = !1,
16
- ...m
17
- }) => {
18
- const u = E(a, s);
19
- return /* @__PURE__ */ v(
20
- "svg",
21
- {
22
- xmlns: "http://www.w3.org/2000/svg",
23
- className: u,
24
- viewBox: r || o,
25
- fill: e || "currentColor",
26
- role: "img",
27
- "aria-hidden": !d,
28
- focusable: !1,
29
- ...m,
30
- children: [
31
- n && d && /* @__PURE__ */ l("title", { children: n }),
32
- t
33
- ]
34
- }
35
- );
36
- };
3
+ import S from "clsx";
4
+ import * as a from "react";
5
+ import { useId as C, useRef as L, useState as O, useEffect as E } from "react";
6
+ import { useFloating as R, useClick as P, useDismiss as T, useRole as D, useInteractions as F, useMergeRefs as V, FloatingPortal as $, FloatingOverlay as B, FloatingFocusManager as U } from "@floating-ui/react";
7
+ const Y = "av-messagebox", G = "av-panel";
37
8
  /*!
38
- @versini/ui-svgicon v4.2.2
9
+ @versini/ui-icons v4.15.1
39
10
  © 2025 gizmette.com
40
11
  */
41
12
  try {
42
- window.__VERSINI_UI_SVGICON__ || (window.__VERSINI_UI_SVGICON__ = {
43
- version: "4.2.2",
44
- buildTime: "10/20/2025 07:37 PM EDT",
45
- homepage: "https://github.com/aversini/ui-components",
13
+ window.__VERSINI_UI_ICONS__ || (window.__VERSINI_UI_ICONS__ = {
14
+ version: "4.15.1",
15
+ buildTime: "11/03/2025 07:21 PM EST",
16
+ homepage: "https://github.com/aversini/ui-icons",
46
17
  license: "MIT"
47
18
  });
48
19
  } catch {
49
20
  }
50
- const j = ({
51
- className: t,
52
- viewBox: e,
53
- title: r,
54
- monotone: s,
55
- ...o
56
- }) => /* @__PURE__ */ l(
57
- G,
58
- {
59
- defaultViewBox: "0 0 384 512",
60
- size: "size-5",
61
- viewBox: e,
62
- className: t,
63
- title: r || "Close",
64
- ...o,
65
- children: /* @__PURE__ */ l(
66
- "path",
67
- {
68
- d: "M297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256l105.3-105.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3z",
69
- opacity: s ? "1" : "0.4"
70
- }
71
- )
72
- }
73
- );
74
21
  /*!
75
- @versini/ui-icons v4.14.0
22
+ @versini/ui-svgicon v4.3.0
76
23
  © 2025 gizmette.com
77
24
  */
78
25
  try {
79
- window.__VERSINI_UI_ICONS__ || (window.__VERSINI_UI_ICONS__ = {
80
- version: "4.14.0",
81
- buildTime: "10/20/2025 07:37 PM EDT",
82
- homepage: "https://github.com/aversini/ui-components",
26
+ window.__VERSINI_UI_SVGICON__ || (window.__VERSINI_UI_SVGICON__ = {
27
+ version: "4.3.0",
28
+ buildTime: "11/03/2025 07:21 PM EST",
29
+ homepage: "https://github.com/aversini/ui-icons",
83
30
  license: "MIT"
84
31
  });
85
32
  } catch {
86
33
  }
87
- const C = c.createContext(null);
34
+ const j = ({ children: r, fill: e, viewBox: t, className: s, defaultViewBox: o, size: c, title: n, semantic: d = !1, ...m }) => {
35
+ const u = S(c, s);
36
+ return /* @__PURE__ */ v("svg", {
37
+ xmlns: "http://www.w3.org/2000/svg",
38
+ className: u,
39
+ viewBox: t || o,
40
+ fill: e || "currentColor",
41
+ role: "img",
42
+ "aria-hidden": !d,
43
+ focusable: !1,
44
+ ...m,
45
+ children: [
46
+ n && d && /* @__PURE__ */ l("title", {
47
+ children: n
48
+ }),
49
+ r
50
+ ]
51
+ });
52
+ }, z = ({ className: r, viewBox: e, title: t, monotone: s, ...o }) => /* @__PURE__ */ l(j, {
53
+ defaultViewBox: "0 0 384 512",
54
+ size: "size-5",
55
+ viewBox: e,
56
+ className: r,
57
+ title: t || "Close",
58
+ ...o,
59
+ children: /* @__PURE__ */ l("path", {
60
+ d: "M297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256l105.3-105.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3z",
61
+ opacity: s ? "1" : "0.4"
62
+ })
63
+ }), M = a.createContext(null);
88
64
  function X({
89
- initialOpen: t = !1,
65
+ initialOpen: r = !1,
90
66
  open: e,
91
- onOpenChange: r
67
+ onOpenChange: t
92
68
  } = {}) {
93
- const [s, o] = c.useState(t), [a, n] = c.useState(), [d, m] = c.useState(), u = e ?? s, w = r ?? o, p = P({
69
+ const [s, o] = a.useState(r), [c, n] = a.useState(), [d, m] = a.useState(), u = e ?? s, p = t ?? o, I = R({
94
70
  open: u,
95
- onOpenChange: w
96
- }), f = p.context, b = R(f, {
71
+ onOpenChange: p
72
+ }), f = I.context, b = P(f, {
97
73
  enabled: e == null
98
- }), x = T(f, {
74
+ }), w = T(f, {
99
75
  outsidePress: !1,
100
76
  outsidePressEvent: "mousedown"
101
- }), h = D(f), I = B([b, x, h]);
102
- return c.useMemo(
77
+ }), h = D(f), _ = F([b, w, h]);
78
+ return a.useMemo(
103
79
  () => ({
104
80
  open: u,
105
- setOpen: w,
81
+ setOpen: p,
82
+ ..._,
106
83
  ...I,
107
- ...p,
108
- labelId: a,
84
+ labelId: c,
109
85
  descriptionId: d,
110
86
  setLabelId: n,
111
87
  setDescriptionId: m
112
88
  }),
113
- [u, w, I, p, a, d]
89
+ [u, p, _, I, c, d]
114
90
  );
115
91
  }
116
- const _ = () => {
117
- const t = c.useContext(C);
118
- if (t == null)
92
+ const x = () => {
93
+ const r = a.useContext(M);
94
+ if (r == null)
119
95
  throw new Error("Modal components must be wrapped in <Modal />");
120
- return t;
96
+ return r;
121
97
  };
122
98
  function H({
123
- children: t,
99
+ children: r,
124
100
  ...e
125
101
  }) {
126
- const r = X(e);
127
- return /* @__PURE__ */ l(C.Provider, { value: r, children: t });
102
+ const t = X(e);
103
+ return /* @__PURE__ */ l(M.Provider, { value: t, children: r });
128
104
  }
129
- const q = c.forwardRef(function(t, e) {
130
- const { context: r, ...s } = _(), o = $([s.refs.setFloating, e]);
131
- if (!r.open)
105
+ const q = a.forwardRef(function(r, e) {
106
+ const { context: t, ...s } = x(), o = V([s.refs.setFloating, e]);
107
+ if (!t.open)
132
108
  return null;
133
- const { overlayBackground: a, ...n } = t, d = E("grid place-items-center", {
134
- [`${a}`]: a,
135
- "bg-black sm:bg-black/[.8]": !a
109
+ const { overlayBackground: c, ...n } = r, d = S("grid place-items-center", {
110
+ [`${c}`]: c,
111
+ "bg-black sm:bg-black/[.8]": !c
136
112
  });
137
- return /* @__PURE__ */ l(V, { children: /* @__PURE__ */ l(F, { className: d, lockScroll: !0, children: /* @__PURE__ */ l(U, { context: r, children: /* @__PURE__ */ l(
113
+ return /* @__PURE__ */ l($, { children: /* @__PURE__ */ l(B, { className: d, lockScroll: !0, children: /* @__PURE__ */ l(U, { context: t, children: /* @__PURE__ */ l(
138
114
  "div",
139
115
  {
140
116
  ref: o,
@@ -144,18 +120,18 @@ const q = c.forwardRef(function(t, e) {
144
120
  children: n.children
145
121
  }
146
122
  ) }) }) });
147
- }), J = c.forwardRef(function({ children: t, ...e }, r) {
148
- const { setLabelId: s } = _(), o = M();
149
- return c.useLayoutEffect(() => (s(o), () => s(void 0)), [o, s]), /* @__PURE__ */ l("h1", { ...e, ref: r, id: o, children: t });
150
- }), K = c.forwardRef(function({ children: t, ...e }, r) {
151
- const { setDescriptionId: s } = _(), o = M();
152
- return c.useLayoutEffect(() => (s(o), () => s(void 0)), [o, s]), /* @__PURE__ */ l("div", { ...e, ref: r, id: o, children: t });
153
- }), Q = c.forwardRef(function(t, e) {
154
- const { setOpen: r } = _(), { trigger: s, className: o, ...a } = t, n = c.useCallback(() => r(!1), [r]);
155
- return /* @__PURE__ */ l("div", { className: o, children: c.cloneElement(s, {
123
+ }), J = a.forwardRef(function({ children: r, ...e }, t) {
124
+ const { setLabelId: s } = x(), o = C();
125
+ return a.useLayoutEffect(() => (s(o), () => s(void 0)), [o, s]), /* @__PURE__ */ l("h1", { ...e, ref: t, id: o, children: r });
126
+ }), K = a.forwardRef(function({ children: r, ...e }, t) {
127
+ const { setDescriptionId: s } = x(), o = C();
128
+ return a.useLayoutEffect(() => (s(o), () => s(void 0)), [o, s]), /* @__PURE__ */ l("div", { ...e, ref: t, id: o, children: r });
129
+ }), Q = a.forwardRef(function(r, e) {
130
+ const { setOpen: t } = x(), { trigger: s, className: o, ...c } = r, n = a.useCallback(() => t(!1), [t]);
131
+ return /* @__PURE__ */ l("div", { className: o, children: a.cloneElement(s, {
156
132
  ref: e,
157
133
  onClick: n,
158
- ...a
134
+ ...c
159
135
  }) });
160
136
  });
161
137
  /*!
@@ -165,98 +141,98 @@ const q = c.forwardRef(function(t, e) {
165
141
  try {
166
142
  window.__VERSINI_UI_MODAL__ || (window.__VERSINI_UI_MODAL__ = {
167
143
  version: "3.0.2",
168
- buildTime: "10/22/2025 05:48 PM EDT",
144
+ buildTime: "11/04/2025 09:49 AM EST",
169
145
  homepage: "https://github.com/aversini/ui-components",
170
146
  license: "MIT"
171
147
  });
172
148
  } catch {
173
149
  }
174
150
  const i = "panel", g = "messagebox", Z = ({
175
- className: t,
151
+ className: r,
176
152
  kind: e,
177
- borderMode: r,
153
+ borderMode: t,
178
154
  animation: s,
179
155
  maxWidth: o = "medium",
180
- maxHeight: a
156
+ maxHeight: c
181
157
  }) => {
182
- const n = a ?? (e === i ? "large" : void 0);
158
+ const n = c ?? (e === i ? "large" : void 0);
183
159
  return {
184
- main: E("prose prose-lighter flex flex-col bg-surface-dark", {
160
+ main: S("prose prose-lighter flex flex-col bg-surface-dark", {
185
161
  "duration-200 ease-out": s,
186
162
  /**
187
163
  * Panel styles
188
164
  */
189
- [`${z} min-h-full sm:min-h-[10rem] sm:rounded-lg sm:border-2`]: e === i,
190
- "w-full sm:w-[95%] md:max-w-2xl": e === i && !t && o === "small",
191
- "w-full sm:w-[95%] md:max-w-3xl": e === i && !t && o === "medium",
192
- "w-full sm:w-[95%] md:max-w-4xl": e === i && !t && o === "large",
165
+ [`${G} min-h-full sm:min-h-[10rem] sm:rounded-lg sm:border-2`]: e === i,
166
+ "w-full sm:w-[95%] md:max-w-2xl": e === i && !r && o === "small",
167
+ "w-full sm:w-[95%] md:max-w-3xl": e === i && !r && o === "medium",
168
+ "w-full sm:w-[95%] md:max-w-4xl": e === i && !r && o === "large",
193
169
  "max-h-full sm:max-h-[40%]": e === i && n === "small",
194
170
  "max-h-full sm:max-h-[60%]": e === i && n === "medium",
195
171
  "max-h-full sm:max-h-[95%]": e === i && n === "large",
196
- "sm:border-border-dark": r === "dark" && e === i,
197
- "sm:border-border-accent": r === "light" && e === i,
172
+ "sm:border-border-dark": t === "dark" && e === i,
173
+ "sm:border-border-accent": t === "light" && e === i,
198
174
  /**
199
175
  * Messagebox styles
200
176
  */
201
177
  [`${Y} rounded-lg border-2`]: e === g,
202
- "w-[95%] sm:w-[50%] md:max-w-2xl": e === g && !t,
178
+ "w-[95%] sm:w-[50%] md:max-w-2xl": e === g && !r,
203
179
  "max-h-[20%]": e === g && n === "small",
204
180
  "max-h-[50%]": e === g && n === "medium",
205
181
  "max-h-[95%]": e === g && n === "large",
206
- "border-border-dark": r === "dark" && e === g,
207
- "border-border-accent": r === "light" && e === g,
208
- [`${t}`]: !!t
182
+ "border-border-dark": t === "dark" && e === g,
183
+ "border-border-accent": t === "light" && e === g,
184
+ [`${r}`]: !!r
209
185
  }),
210
186
  content: "flex flex-col py-2 sm:py-4 sm:px-4 px-2 overflow-y-auto",
211
187
  footer: "flex grow flex-col sm:p-4 p-2",
212
188
  header: "sm:p-4 mb-0 p-2",
213
189
  close: "sm:p-4 p-2"
214
190
  };
215
- }, W = "slide", S = "fade", oe = ({
216
- open: t,
191
+ }, W = "slide", N = "fade", oe = ({
192
+ open: r,
217
193
  onOpenChange: e,
218
- title: r,
194
+ title: t,
219
195
  children: s,
220
196
  footer: o,
221
- borderMode: a = "light",
197
+ borderMode: c = "light",
222
198
  kind: n = i,
223
199
  className: d,
224
200
  animation: m = !1,
225
201
  animationType: u = W,
226
- maxWidth: w = "medium",
227
- maxHeight: p
202
+ maxWidth: p = "medium",
203
+ maxHeight: I
228
204
  }) => {
229
- const f = L(""), [b, x] = O(
230
- m ? u === S ? { opacity: 0 } : {
205
+ const f = L(""), [b, w] = O(
206
+ m ? u === N ? { opacity: 0 } : {
231
207
  transform: "translateY(-100vh)"
232
208
  } : {}
233
209
  ), h = Z({
234
210
  className: d,
235
211
  kind: n,
236
- borderMode: a,
212
+ borderMode: c,
237
213
  animation: m,
238
- maxWidth: w,
239
- maxHeight: p
214
+ maxWidth: p,
215
+ maxHeight: I
240
216
  });
241
- return N(() => (t && (f.current = document.title, document.title = `${r} | ${f.current}`), () => {
242
- t && (document.title = f.current);
243
- }), [r, t]), N(() => {
244
- if (m && t) {
245
- x(
246
- m ? u === S ? { opacity: 0 } : {
217
+ return E(() => (r && (f.current = document.title, document.title = `${t} | ${f.current}`), () => {
218
+ r && (document.title = f.current);
219
+ }), [t, r]), E(() => {
220
+ if (m && r) {
221
+ w(
222
+ m ? u === N ? { opacity: 0 } : {
247
223
  transform: "translateY(-666vh)"
248
224
  } : {}
249
225
  );
250
- const I = setTimeout(() => {
251
- x(
226
+ const _ = setTimeout(() => {
227
+ w(
252
228
  m ? u === "fade" ? { opacity: 1 } : {
253
229
  transform: "translateY(0)"
254
230
  } : {}
255
231
  );
256
232
  }, 100);
257
- return () => clearTimeout(I);
233
+ return () => clearTimeout(_);
258
234
  }
259
- }, [t, m, u]), /* @__PURE__ */ l(y, { children: t && /* @__PURE__ */ l(H, { open: t, onOpenChange: e, children: /* @__PURE__ */ v(q, { className: h.main, style: b, children: [
235
+ }, [r, m, u]), /* @__PURE__ */ l(y, { children: r && /* @__PURE__ */ l(H, { open: r, onOpenChange: e, children: /* @__PURE__ */ v(q, { className: h.main, style: b, children: [
260
236
  /* @__PURE__ */ v("div", { className: "flex flex-row-reverse items-center justify-between", children: [
261
237
  /* @__PURE__ */ l(
262
238
  Q,
@@ -269,12 +245,12 @@ const i = "panel", g = "messagebox", Z = ({
269
245
  focusMode: "light",
270
246
  noBorder: !0,
271
247
  label: "Close",
272
- children: /* @__PURE__ */ l(j, { monotone: !0 })
248
+ children: /* @__PURE__ */ l(z, { monotone: !0 })
273
249
  }
274
250
  )
275
251
  }
276
252
  ),
277
- /* @__PURE__ */ l(J, { className: h.header, children: r })
253
+ /* @__PURE__ */ l(J, { className: h.header, children: t })
278
254
  ] }),
279
255
  /* @__PURE__ */ l(K, { className: h.content, children: s }),
280
256
  o && /* @__PURE__ */ l("div", { className: h.footer, children: o })
@@ -282,6 +258,6 @@ const i = "panel", g = "messagebox", Z = ({
282
258
  };
283
259
  export {
284
260
  Y as MESSAGEBOX_CLASSNAME,
285
- z as PANEL_CLASSNAME,
261
+ G as PANEL_CLASSNAME,
286
262
  oe as Panel
287
263
  };
package/dist/index.js CHANGED
@@ -1,12 +1,12 @@
1
- import { MESSAGEBOX_CLASSNAME as o, PANEL_CLASSNAME as E, Panel as n } from "./components/Panel/Panel.js";
1
+ import { MESSAGEBOX_CLASSNAME as o, PANEL_CLASSNAME as E, Panel as A } from "./components/Panel/Panel.js";
2
2
  /*!
3
- @versini/ui-panel v3.2.3
3
+ @versini/ui-panel v3.3.0
4
4
  © 2025 gizmette.com
5
5
  */
6
6
  try {
7
7
  window.__VERSINI_UI_PANEL__ || (window.__VERSINI_UI_PANEL__ = {
8
- version: "3.2.3",
9
- buildTime: "10/22/2025 05:49 PM EDT",
8
+ version: "3.3.0",
9
+ buildTime: "11/04/2025 09:50 AM EST",
10
10
  homepage: "https://github.com/aversini/ui-components",
11
11
  license: "MIT"
12
12
  });
@@ -15,5 +15,5 @@ try {
15
15
  export {
16
16
  o as MESSAGEBOX_CLASSNAME,
17
17
  E as PANEL_CLASSNAME,
18
- n as Panel
18
+ A as Panel
19
19
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@versini/ui-panel",
3
- "version": "3.2.3",
3
+ "version": "3.3.0",
4
4
  "license": "MIT",
5
5
  "author": "Arno Versini",
6
6
  "publishConfig": {
@@ -41,14 +41,14 @@
41
41
  },
42
42
  "dependencies": {
43
43
  "@tailwindcss/typography": "0.5.19",
44
- "@versini/ui-button": "8.1.3",
45
- "@versini/ui-icons": "4.14.0",
44
+ "@versini/ui-button": "8.2.0",
45
+ "@versini/ui-icons": "4.15.1",
46
46
  "@versini/ui-modal": "3.0.2",
47
47
  "clsx": "2.1.1",
48
- "tailwindcss": "4.1.15"
48
+ "tailwindcss": "4.1.16"
49
49
  },
50
50
  "sideEffects": [
51
51
  "**/*.css"
52
52
  ],
53
- "gitHead": "eeceef78affd19e3dcae621833a83a892f09c204"
53
+ "gitHead": "d43a776558072976e0920ab60f28f45a9efd3848"
54
54
  }