@versini/ui-panel 2.2.3 → 2.2.5

package/dist/components/Panel/Panel.js

@@ -1,8 +1,8 @@
-import { jsx as s, jsxs as L, Fragment as K } from "react/jsx-runtime";
+import { jsx as l, jsxs as L, Fragment as K } from "react/jsx-runtime";
 import * as h from "react";
-import F, { useRef as N, useLayoutEffect as H, useEffect as B, useState as Q, useMemo as Z, useCallback as ue, useId as ee } from "react";
+import F, { useRef as N, useLayoutEffect as H, useEffect as B, useState as Q, useMemo as Z, useCallback as me, useId as ee } from "react";
 import n from "clsx";
-import { useFloating as me, useClick as ge, useDismiss as he, useRole as fe, useInteractions as be, useMergeRefs as ye, FloatingPortal as ve, FloatingOverlay as pe, FloatingFocusManager as ke } from "@floating-ui/react";
+import { useFloating as ue, useClick as ge, useDismiss as he, useRole as fe, useInteractions as be, useMergeRefs as ye, FloatingPortal as ve, FloatingOverlay as pe, FloatingFocusManager as ke } from "@floating-ui/react";
 const q = "av-messagebox", R = "av-panel", X = "av-button", V = "icon", te = "button", D = "link", xe = ({
   type: e,
   size: r,
@@ -11,12 +11,12 @@ const q = "av-messagebox", R = "av-panel", X = "av-button", V = "icon", te = "bu
   align: i,
   animated: o
 }) => {
-  const l = "max-h-8 py-0 px-2", d = "max-h-9 h-8 px-3", c = "max-h-12 py-2 px-4";
+  const s = "max-h-8 py-0 px-2", d = "max-h-9 h-8 px-3", c = "max-h-12 py-2 px-4";
   switch (e) {
     case te:
     case D:
       return n({
-        [l]: r === "small",
+        [s]: r === "small",
         [d]: r === "medium",
         [c]: r === "large"
       });
@@ -26,7 +26,7 @@ const q = "av-messagebox", R = "av-panel", X = "av-button", V = "icon", te = "bu
         "justify-start": i === "left",
         "justify-end": i === "right",
         "h-6 w-6 p-0": r === "small" && !o && !(t || a),
-        "h-6 px-2": r === "small" && !o && (t || a),
+        "h-6 px-1 sm:px-2": r === "small" && !o && (t || a),
         "h-8 w-8 p-1": r === "medium" && !o && !(t || a),
         "h-8 px-3": r === "medium" && !o && (t || a),
         "h-12 w-12 p-2": r === "large" && !o && !(t || a),
@@ -45,7 +45,7 @@ const q = "av-messagebox", R = "av-panel", X = "av-button", V = "icon", te = "bu
   labelRight: t,
   labelLeft: a
 }) => {
-  const i = "text-sm font-medium", o = "text-base font-medium", l = "text-lg font-medium";
+  const i = "text-sm font-medium", o = "text-base font-medium", s = "text-lg font-medium";
   switch (e) {
     case te:
     case D:
@@ -53,13 +53,13 @@ const q = "av-messagebox", R = "av-panel", X = "av-button", V = "icon", te = "bu
         "text-center": e === D,
         [i]: r === "small",
         [o]: r === "medium",
-        [l]: r === "large"
+        [s]: r === "large"
       });
     case V:
       return n({
         [i]: r === "small" && (t || a),
         [o]: r === "medium" && (t || a),
-        [l]: r === "large" && (t || a)
+        [s]: r === "large" && (t || a)
       });
   }
 }, Ie = ({
@@ -285,26 +285,26 @@ const q = "av-messagebox", R = "av-panel", X = "av-button", V = "icon", te = "bu
   mode: a,
   focusMode: i,
   disabled: o,
-  fullWidth: l,
+  fullWidth: s,
   size: d,
   noBorder: c,
   labelRight: g,
   labelLeft: y,
-  noBackground: u,
-  variant: m,
+  noBackground: m,
+  variant: u,
   truncate: f,
   align: b,
   radius: w,
   animated: I
-}) => (m || (m = "primary"), t ? n(X, r) : n(
+}) => (u || (u = "primary"), t ? n(X, r) : n(
   X,
   Ie({
     mode: a,
-    variant: m,
-    noBackground: u,
+    variant: u,
+    noBackground: m,
     truncate: f
   }),
-  _e({ mode: a, noBackground: u, variant: m }),
+  _e({ mode: a, noBackground: m, variant: u }),
   Ne({ radius: w }),
   xe({
     type: e,
@@ -315,12 +315,12 @@ const q = "av-messagebox", R = "av-panel", X = "av-button", V = "icon", te = "bu
     animated: I
   }),
   we({ type: e, size: d, labelRight: g, labelLeft: y }),
-  Be({ mode: a, variant: m, noBorder: c }),
+  Be({ mode: a, variant: u, noBorder: c }),
   Se({ focusMode: i }),
-  Ee({ mode: a, variant: m, disabled: o }),
-  Ce({ mode: a, variant: m, disabled: o }),
+  Ee({ mode: a, variant: u, disabled: o }),
+  Ce({ mode: a, variant: u, disabled: o }),
   {
-    "w-full": l,
+    "w-full": s,
     "disabled:cursor-not-allowed disabled:opacity-50": o
   },
   n({
@@ -331,7 +331,7 @@ const q = "av-messagebox", R = "av-panel", X = "av-button", V = "icon", te = "bu
   !r && (!document.activeElement || document.activeElement !== e.currentTarget) && typeof e?.currentTarget?.focus == "function" && e.currentTarget.focus(), typeof t == "function" && t(e);
 }, re = F.forwardRef((e, r) => {
   const { onClick: t, noInternalClick: a = !1, ...i } = e;
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ l(
     "button",
     {
       ref: r,
@@ -347,7 +347,7 @@ function $e() {
   const e = N(!1);
   return B(() => (e.current = !0, () => {
     e.current = !1;
-  }), []), ue(() => e.current, []);
+  }), []), me(() => e.current, []);
 }
 function Oe(e) {
   return Z(() => e.every((r) => r == null) ? () => {
@@ -368,15 +368,15 @@ const Ae = {
   right: 0
 };
 function z(e) {
-  const r = $e(), t = N(0), a = N(null), [i, o] = Q(Ae), l = Z(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((d) => {
+  const r = $e(), t = N(0), a = N(null), [i, o] = Q(Ae), s = Z(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((d) => {
     const c = d[0];
     c && (cancelAnimationFrame(t.current), t.current = requestAnimationFrame(() => {
       a.current && r() && o(c.contentRect);
     }));
   }), [r]);
-  return B(() => (a.current && l?.observe(a.current, e), () => {
-    l?.disconnect(), t.current && cancelAnimationFrame(t.current);
-  }), [l, e]), [a, i];
+  return B(() => (a.current && s?.observe(a.current, e), () => {
+    s?.disconnect(), t.current && cancelAnimationFrame(t.current);
+  }), [s, e]), [a, i];
 }
 const M = {
   small: 24,
@@ -400,13 +400,13 @@ const M = {
     focusMode: a = "system",
     fullWidth: i = !1,
     className: o,
-    type: l = "button",
+    type: s = "button",
     raw: d = !1,
     noBorder: c = !1,
     "aria-label": g,
     label: y,
-    size: u = "medium",
-    labelRight: m,
+    size: m = "medium",
+    labelRight: u,
     labelLeft: f,
     noBackground: b = !1,
     align: w = "center",
@@ -416,7 +416,7 @@ const M = {
     animated: k = !1,
     ...oe
   }, ne) => {
-    const se = Te({
+    const le = Te({
       type: V,
       mode: t,
       focusMode: a,
@@ -425,46 +425,46 @@ const M = {
       raw: d,
       className: o,
       noBorder: c,
-      size: u,
-      labelRight: m,
+      size: m,
+      labelRight: u,
       labelLeft: f,
       noBackground: b,
       align: w,
       radius: I,
       variant: j,
       animated: k
-    }), le = Re({ mode: t, raw: d, iconClassName: ie, variant: j }), G = Me({ animated: k }), ce = "flex items-center justify-center relative w-full h-full overflow-hidden", [v, O] = z(), [p, A] = z(), [S, Y] = z(), P = N(0), x = N(null), E = N(null), de = Oe([ne, x]);
+    }), se = Re({ mode: t, raw: d, iconClassName: ie, variant: j }), G = Me({ animated: k }), ce = "flex items-center justify-center relative w-full h-full overflow-hidden", [v, O] = z(), [p, A] = z(), [S, Y] = z(), P = N(0), x = N(null), E = N(null), de = Oe([ne, x]);
     return H(() => {
-      S && S.current && k && (P.current = Y.width + Pe[u] + (c ? 0 : ze), x.current && !x.current.style.width && (x.current.style.width = `${M[u]}px`));
-    }, [Y, S, u, c, k]), H(() => {
+      S && S.current && k && (P.current = Y.width + Pe[m] + (c ? 0 : ze), x.current && !x.current.style.width && (x.current.style.width = `${M[m]}px`));
+    }, [Y, S, m, c, k]), H(() => {
       if (x && x.current && k) {
-        let C = M[u];
-        m && v && O.width > 0 ? C = O.width + P.current : f && p && A.width > 0 && (C = A.width + P.current), E.current && clearTimeout(E.current), C !== parseInt(x.current.style.width || "0", 10) && (v.current && (v.current.style.opacity = "0"), p.current && (p.current.style.opacity = "0"), x.current.style.width = `${C}px`, C > M[u] && (E.current = setTimeout(() => {
-          v.current && m && (v.current.style.opacity = "1"), p.current && f && (p.current.style.opacity = "1"), E.current = null;
-        }, De * 0.8))), C === M[u] && (v.current && (v.current.style.opacity = "0"), p.current && (p.current.style.opacity = "0"));
+        let C = M[m];
+        u && v && O.width > 0 ? C = O.width + P.current : f && p && A.width > 0 && (C = A.width + P.current), E.current && clearTimeout(E.current), C !== parseInt(x.current.style.width || "0", 10) && (v.current && (v.current.style.opacity = "0"), p.current && (p.current.style.opacity = "0"), x.current.style.width = `${C}px`, C > M[m] && (E.current = setTimeout(() => {
+          v.current && u && (v.current.style.opacity = "1"), p.current && f && (p.current.style.opacity = "1"), E.current = null;
+        }, De * 0.8))), C === M[m] && (v.current && (v.current.style.opacity = "0"), p.current && (p.current.style.opacity = "0"));
       }
     }, [
       O,
-      m,
+      u,
       v,
       A,
       f,
       p,
-      u,
+      m,
       k
     ]), B(() => () => {
       E.current && clearTimeout(E.current);
-    }, []), /* @__PURE__ */ s(
+    }, []), /* @__PURE__ */ l(
       re,
       {
         ref: de,
-        className: se,
+        className: le,
         disabled: r,
-        type: l,
+        type: s,
         "aria-label": g || y,
         ...oe,
         children: /* @__PURE__ */ L("div", { className: ce, children: [
-          /* @__PURE__ */ s(
+          /* @__PURE__ */ l(
             W,
             {
               label: f,
@@ -474,11 +474,11 @@ const M = {
               initiallyHidden: k
             }
           ),
-          /* @__PURE__ */ s("span", { ref: S, className: le, children: e }),
-          /* @__PURE__ */ s(
+          /* @__PURE__ */ l("span", { ref: S, className: se, children: e }),
+          /* @__PURE__ */ l(
             W,
             {
-              label: m,
+              label: u,
               labelRef: v,
               labelClass: G,
               labelInnerClass: "pl-2",
@@ -495,24 +495,24 @@ const M = {
   label: t,
   labelInnerClass: a,
   initiallyHidden: i = !1
-}) => /* @__PURE__ */ s(
+}) => /* @__PURE__ */ l(
   "span",
   {
     ref: e,
     className: r,
     style: i ? { opacity: 0 } : void 0,
-    children: t && /* @__PURE__ */ s("span", { className: a, children: t })
+    children: t && /* @__PURE__ */ l("span", { className: a, children: t })
   }
 );
 U.displayName = "ButtonIcon";
 /*!
-  @versini/ui-button v7.0.0
+  @versini/ui-button v7.1.1
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_BUTTON__ || (window.__VERSINI_UI_BUTTON__ = {
-    version: "7.0.0",
-    buildTime: "08/07/2025 07:27 PM EDT",
+    version: "7.1.1",
+    buildTime: "08/10/2025 01:26 PM EDT",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
@@ -526,7 +526,7 @@ const Fe = F.forwardRef(
     active: a = !1,
     ...i
   }, o) => {
-    const l = a ? n(
+    const s = a ? n(
       "relative",
       "focus-within:static",
       "focus-within:after:border-transparent",
@@ -543,13 +543,15 @@ const Fe = F.forwardRef(
         "after:border-table-light dark:after:border-table-dark": r === "alt-system"
       }
     ) : "";
-    return /* @__PURE__ */ s("div", { className: l, children: /* @__PURE__ */ s(
+    return /* @__PURE__ */ l("div", { className: s, children: /* @__PURE__ */ l(
       U,
       {
-        className: n("justify-center", t),
+        className: t,
         ref: o,
         mode: r,
         radius: "small",
+        size: "small",
+        align: "center",
         ...i,
         children: e
       }
@@ -564,12 +566,12 @@ const Ve = ({
   className: a,
   defaultViewBox: i,
   size: o,
-  title: l,
+  title: s,
   semantic: d = !1,
   ...c
 }) => {
   const g = n(o, a);
-  return /* @__PURE__ */ s(K, { children: /* @__PURE__ */ L(
+  return /* @__PURE__ */ l(K, { children: /* @__PURE__ */ L(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -581,7 +583,7 @@ const Ve = ({
       focusable: !1,
       ...c,
       children: [
-        l && d && /* @__PURE__ */ s("title", { children: l }),
+        s && d && /* @__PURE__ */ l("title", { children: s }),
         e
       ]
     }
@@ -606,7 +608,7 @@ const Ue = ({
   title: t,
   monotone: a,
   ...i
-}) => /* @__PURE__ */ s(
+}) => /* @__PURE__ */ l(
   Ve,
   {
     defaultViewBox: "0 0 384 512",
@@ -615,7 +617,7 @@ const Ue = ({
     className: e,
     title: t || "Close",
     ...i,
-    children: /* @__PURE__ */ s(
+    children: /* @__PURE__ */ l(
       "path",
       {
         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",
@@ -643,27 +645,27 @@ function je({
   open: r,
   onOpenChange: t
 } = {}) {
-  const [a, i] = h.useState(e), [o, l] = h.useState(), [d, c] = h.useState(), g = r ?? a, y = t ?? i, u = me({
+  const [a, i] = h.useState(e), [o, s] = h.useState(), [d, c] = h.useState(), g = r ?? a, y = t ?? i, m = ue({
     open: g,
     onOpenChange: y
-  }), m = u.context, f = ge(m, {
+  }), u = m.context, f = ge(u, {
     enabled: r == null
-  }), b = he(m, {
+  }), b = he(u, {
     outsidePress: !1,
     outsidePressEvent: "mousedown"
-  }), w = fe(m), I = be([f, b, w]);
+  }), w = fe(u), I = be([f, b, w]);
   return h.useMemo(
     () => ({
       open: g,
       setOpen: y,
       ...I,
-      ...u,
+      ...m,
       labelId: o,
       descriptionId: d,
-      setLabelId: l,
+      setLabelId: s,
       setDescriptionId: c
     }),
-    [g, y, I, u, o, d]
+    [g, y, I, m, o, d]
   );
 }
 const $ = () => {
@@ -677,37 +679,37 @@ function Ge({
   ...r
 }) {
   const t = je(r);
-  return /* @__PURE__ */ s(ae.Provider, { value: t, children: e });
+  return /* @__PURE__ */ l(ae.Provider, { value: t, children: e });
 }
 const Ye = h.forwardRef(function(e, r) {
   const { context: t, ...a } = $(), i = ye([a.refs.setFloating, r]);
   if (!t.open)
     return null;
-  const { overlayBackground: o, ...l } = e, d = n("grid place-items-center", {
+  const { overlayBackground: o, ...s } = e, d = n("grid place-items-center", {
     [`${o}`]: o,
     "bg-black sm:bg-black/[.8]": !o
   });
-  return /* @__PURE__ */ s(ve, { children: /* @__PURE__ */ s(pe, { className: d, lockScroll: !0, children: /* @__PURE__ */ s(ke, { context: t, children: /* @__PURE__ */ s(
+  return /* @__PURE__ */ l(ve, { children: /* @__PURE__ */ l(pe, { className: d, lockScroll: !0, children: /* @__PURE__ */ l(ke, { context: t, children: /* @__PURE__ */ l(
     "div",
     {
       ref: i,
       "aria-labelledby": a.labelId,
       "aria-describedby": a.descriptionId,
-      ...a.getFloatingProps(l),
-      children: l.children
+      ...a.getFloatingProps(s),
+      children: s.children
     }
   ) }) }) });
 }), He = h.forwardRef(function({ children: e, ...r }, t) {
   const { setLabelId: a } = $(), i = ee();
-  return h.useLayoutEffect(() => (a(i), () => a(void 0)), [i, a]), /* @__PURE__ */ s("h1", { ...r, ref: t, id: i, children: e });
+  return h.useLayoutEffect(() => (a(i), () => a(void 0)), [i, a]), /* @__PURE__ */ l("h1", { ...r, ref: t, id: i, children: e });
 }), qe = h.forwardRef(function({ children: e, ...r }, t) {
   const { setDescriptionId: a } = $(), i = ee();
-  return h.useLayoutEffect(() => (a(i), () => a(void 0)), [i, a]), /* @__PURE__ */ s("div", { ...r, ref: t, id: i, children: e });
+  return h.useLayoutEffect(() => (a(i), () => a(void 0)), [i, a]), /* @__PURE__ */ l("div", { ...r, ref: t, id: i, children: e });
 }), Xe = h.forwardRef(function(e, r) {
-  const { setOpen: t } = $(), { trigger: a, className: i, ...o } = e, l = h.useCallback(() => t(!1), [t]);
-  return /* @__PURE__ */ s("div", { className: i, children: h.cloneElement(a, {
+  const { setOpen: t } = $(), { trigger: a, className: i, ...o } = e, s = h.useCallback(() => t(!1), [t]);
+  return /* @__PURE__ */ l("div", { className: i, children: h.cloneElement(a, {
     ref: r,
-    onClick: l,
+    onClick: s,
     ...o
   }) });
 });
@@ -718,7 +720,7 @@ const Ye = h.forwardRef(function(e, r) {
 try {
   window.__VERSINI_UI_MODAL__ || (window.__VERSINI_UI_MODAL__ = {
     version: "2.0.6",
-    buildTime: "08/07/2025 07:27 PM EDT",
+    buildTime: "08/10/2025 01:26 PM EDT",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
@@ -756,25 +758,25 @@ const _ = "panel", T = "messagebox", We = ({
   children: a,
   footer: i,
   borderMode: o = "light",
-  kind: l = _,
+  kind: s = _,
   className: d,
   animation: c = !1,
   animationType: g = Je,
   maxWidth: y = "medium"
 }) => {
-  const u = N(""), [m, f] = Q(
+  const m = N(""), [u, f] = Q(
     c ? g === J ? { opacity: 0 } : {
       transform: "translateY(-100vh)"
     } : {}
   ), b = We({
     className: d,
-    kind: l,
+    kind: s,
     borderMode: o,
     animation: c,
     maxWidth: y
   });
-  return B(() => (e && (u.current = document.title, document.title = `${t} | ${u.current}`), () => {
-    e && (document.title = u.current);
+  return B(() => (e && (m.current = document.title, document.title = `${t} | ${m.current}`), () => {
+    e && (document.title = m.current);
   }), [t, e]), B(() => {
     if (c && e) {
       f(
@@ -791,28 +793,28 @@ const _ = "panel", T = "messagebox", We = ({
       }, 100);
       return () => clearTimeout(w);
     }
-  }, [e, c, g]), /* @__PURE__ */ s(K, { children: e && /* @__PURE__ */ s(Ge, { open: e, onOpenChange: r, children: /* @__PURE__ */ L(Ye, { className: b.main, style: m, children: [
+  }, [e, c, g]), /* @__PURE__ */ l(K, { children: e && /* @__PURE__ */ l(Ge, { open: e, onOpenChange: r, children: /* @__PURE__ */ L(Ye, { className: b.main, style: u, children: [
     /* @__PURE__ */ L("div", { className: "flex flex-row-reverse items-center justify-between", children: [
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ l(
         Xe,
         {
           className: b.close,
-          trigger: /* @__PURE__ */ s(
+          trigger: /* @__PURE__ */ l(
             U,
             {
               mode: "dark",
               focusMode: "light",
               noBorder: !0,
               label: "Close",
-              children: /* @__PURE__ */ s(Ue, { monotone: !0 })
+              children: /* @__PURE__ */ l(Ue, { monotone: !0 })
             }
           )
         }
       ),
-      /* @__PURE__ */ s(He, { className: b.header, children: t })
+      /* @__PURE__ */ l(He, { className: b.header, children: t })
     ] }),
-    /* @__PURE__ */ s(qe, { className: b.content, children: a }),
-    i && /* @__PURE__ */ s("div", { className: b.footer, children: i })
+    /* @__PURE__ */ l(qe, { className: b.content, children: a }),
+    i && /* @__PURE__ */ l("div", { className: b.footer, children: i })
   ] }) }) });
 };
 export {

package/dist/index.js

@@ -1,12 +1,12 @@
 import { MESSAGEBOX_CLASSNAME as o, PANEL_CLASSNAME as E, Panel as n } from "./components/Panel/Panel.js";
 /*!
-  @versini/ui-panel v2.2.3
+  @versini/ui-panel v2.2.5
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_PANEL__ || (window.__VERSINI_UI_PANEL__ = {
-    version: "2.2.3",
-    buildTime: "08/07/2025 07:27 PM EDT",
+    version: "2.2.5",
+    buildTime: "08/10/2025 01:26 PM EDT",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-panel",
-	"version": "2.2.3",
+	"version": "2.2.5",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -44,7 +44,7 @@
 	},
 	"dependencies": {
 		"@tailwindcss/typography": "0.5.16",
-		"@versini/ui-button": "7.0.0",
+		"@versini/ui-button": "7.1.1",
 		"@versini/ui-icons": "4.10.0",
 		"@versini/ui-modal": "2.0.6",
 		"clsx": "2.1.1",
@@ -53,5 +53,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "d9a7003730703bed7eb3240a1db79b2d4e5dd7aa"
+	"gitHead": "381a563cd0bb01eeddea33e57c0f5705663b5be4"
 }