@versini/ui-panel 1.3.17 → 1.3.18

package/dist/index.js

@@ -1,42 +1,42 @@
-import { jsx as c, jsxs as S, Fragment as W } from "react/jsx-runtime";
-import * as m from "react";
-import P, { useRef as w, useLayoutEffect as F, useMemo as X, useState as ne, useEffect as A, useCallback as ie, useId as q } from "react";
-import i from "clsx";
-import { useFloating as oe, useClick as se, useDismiss as ce, useRole as le, useInteractions as de, useMergeRefs as ue, FloatingPortal as ge, FloatingOverlay as me, FloatingFocusManager as he } from "@floating-ui/react";
+import { jsx as c, jsxs as M, Fragment as q } from "react/jsx-runtime";
+import * as h from "react";
+import z, { useRef as I, useLayoutEffect as O, useMemo as H, useState as le, useEffect as V, useCallback as ce, useId as Z } from "react";
+import n from "clsx";
+import { useFloating as se, useClick as de, useDismiss as ue, useRole as me, useInteractions as ge, useMergeRefs as he, FloatingPortal as be, FloatingOverlay as fe, FloatingFocusManager as ve } from "@floating-ui/react";
 /*!
-  @versini/ui-panel v1.3.17
+  @versini/ui-panel v1.3.18
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_PANEL__ || (window.__VERSINI_UI_PANEL__ = {
-    version: "1.3.17",
-    buildTime: "01/25/2025 10:55 PM EST",
+    version: "1.3.18",
+    buildTime: "01/26/2025 05:19 PM EST",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
 } catch {
 }
-const j = "av-messagebox", D = "av-panel", G = "av-button", R = "icon", Y = "button", O = "link", be = ({
+const j = "av-messagebox", D = "av-panel", G = "av-button", L = "icon", J = "button", A = "link", ye = ({
   type: e,
   size: t,
   labelRight: r,
   labelLeft: a,
-  align: n
+  align: i
 }) => {
-  const o = "max-h-8 py-0 px-2", s = "max-h-9 h-8 px-3", l = "max-h-12 py-2 px-4";
+  const o = "max-h-8 py-0 px-2", l = "max-h-9 h-8 px-3", s = "max-h-12 py-2 px-4";
   switch (e) {
-    case Y:
-    case O:
-      return i({
+    case J:
+    case A:
+      return n({
         [o]: t === "small",
-        [s]: t === "medium",
-        [l]: t === "large"
+        [l]: t === "medium",
+        [s]: t === "large"
       });
-    case R:
-      return i("inline-flex items-center", {
-        "justify-center": n === "center",
-        "justify-start": n === "left",
-        "justify-end": n === "right",
+    case L:
+      return n("inline-flex items-center", {
+        "justify-center": i === "center",
+        "justify-start": i === "left",
+        "justify-end": i === "right",
         "h-6 py-0": t === "small" && !(r || a),
         "h-6": t === "small" && (r || a),
         "h-8 py-1": t === "medium" && !(r || a),
@@ -45,30 +45,30 @@ const j = "av-messagebox", D = "av-panel", G = "av-button", R = "icon", Y = "but
         "h-12": t === "large" && (r || a)
       });
   }
-}, fe = ({
+}, pe = ({
   type: e,
   size: t,
   labelRight: r,
   labelLeft: a
 }) => {
-  const n = "text-sm font-medium", o = "text-base font-medium", s = "text-lg font-medium";
+  const i = "text-sm font-medium", o = "text-base font-medium", l = "text-lg font-medium";
   switch (e) {
-    case Y:
-    case O:
-      return i({
-        "text-center": e === O,
-        [n]: t === "small",
+    case J:
+    case A:
+      return n({
+        "text-center": e === A,
+        [i]: t === "small",
         [o]: t === "medium",
-        [s]: t === "large"
+        [l]: t === "large"
       });
-    case R:
-      return i({
-        [n]: t === "small" && (r || a),
+    case L:
+      return n({
+        [i]: t === "small" && (r || a),
         [o]: t === "medium" && (r || a),
-        [s]: t === "large" && (r || a)
+        [l]: t === "large" && (r || a)
       });
   }
-}, ve = ({
+}, ke = ({
   mode: e,
   noBackground: t,
   noTruncate: r,
@@ -77,7 +77,7 @@ const j = "av-messagebox", D = "av-panel", G = "av-button", R = "icon", Y = "but
   if (t)
     return "not-prose";
   if (a === "primary")
-    return i("not-prose", {
+    return n("not-prose", {
       truncate: !r,
       "text-copy-light": e === "dark" || e === "system",
       "text-copy-lighter": e === "light" || e === "alt-system",
@@ -85,7 +85,7 @@ const j = "av-messagebox", D = "av-panel", G = "av-button", R = "icon", Y = "but
       "dark:text-copy-light": e === "alt-system"
     });
   if (a === "secondary")
-    return i("not-prose", {
+    return n("not-prose", {
       truncate: !r,
       "text-copy-light": e === "light" || e === "system",
       "text-copy-lighter": e === "dark" || e === "alt-system",
@@ -93,7 +93,7 @@ const j = "av-messagebox", D = "av-panel", G = "av-button", R = "icon", Y = "but
       "dark:text-copy-light": e === "system"
     });
   if (a === "danger")
-    return i("not-prose", {
+    return n("not-prose", {
       truncate: !r,
       "text-copy-light": e === "dark" || e === "system",
       "text-copy-lighter": e === "light" || e === "alt-system",
@@ -101,31 +101,31 @@ const j = "av-messagebox", D = "av-panel", G = "av-button", R = "icon", Y = "but
       "dark:text-copy-light": e === "alt-system"
     });
   if (a === "selected")
-    return i("not-prose text-copy-lighter", {
+    return n("not-prose text-copy-lighter", {
       truncate: !r
     });
-}, ye = ({
+}, we = ({
   mode: e,
   noBackground: t,
   variant: r
 }) => {
   if (!t) {
     if (r === "primary")
-      return i({
+      return n({
         "bg-action-dark": e === "dark",
         "bg-action-light": e === "light",
         "bg-action-dark dark:bg-action-light": e === "system",
         "bg-action-light dark:bg-action-dark": e === "alt-system"
       });
     if (r === "secondary")
-      return i({
+      return n({
         "bg-action-dark": e === "light",
         "bg-action-light": e === "dark",
         "bg-action-dark dark:bg-action-light": e === "alt-system",
         "bg-action-light dark:bg-action-dark": e === "system"
       });
     if (r === "danger")
-      return i({
+      return n({
         "bg-action-danger-dark": e === "dark",
         "bg-action-danger-light": e === "light",
         "bg-action-danger-dark dark:bg-action-danger-light": e === "system",
@@ -134,13 +134,13 @@ const j = "av-messagebox", D = "av-panel", G = "av-button", R = "icon", Y = "but
     if (r === "selected")
       return "bg-action-selected-dark";
   }
-}, pe = ({
+}, xe = ({
   radius: e
-}) => i({
+}) => n({
   "rounded-full": e === "large",
   "rounded-md": e === "medium",
   "rounded-sm": e === "small"
-}), ke = ({
+}), _e = ({
   mode: e,
   disabled: t,
   variant: r
@@ -148,21 +148,21 @@ const j = "av-messagebox", D = "av-panel", G = "av-button", R = "icon", Y = "but
   if (t)
     return "";
   if (r === "primary")
-    return i("hover:text-copy-light-hover", {
+    return n("hover:text-copy-light-hover", {
       "hover:bg-action-dark-hover": e === "dark",
       "hover:bg-action-light-hover": e === "light",
       "hover:bg-action-dark-hover dark:hover:bg-action-light-hover": e === "system",
       "hover:bg-action-light-hover dark:hover:bg-action-dark-hover": e === "alt-system"
     });
   if (r === "secondary")
-    return i("hover:text-copy-light-hover", {
+    return n("hover:text-copy-light-hover", {
       "hover:bg-action-dark-hover": e === "light",
       "hover:bg-action-light-hover": e === "dark",
       "hover:bg-action-dark-hover dark:hover:bg-action-light-hover": e === "alt-system",
       "hover:bg-action-light-hover dark:hover:bg-action-dark-hover": e === "system"
     });
   if (r === "danger")
-    return i("hover:text-copy-light-hover", {
+    return n("hover:text-copy-light-hover", {
       "hover:bg-action-danger-dark-hover": e === "dark",
       "hover:bg-action-danger-light-hover": e === "light",
       "hover:bg-action-danger-dark-hover dark:hover:bg-action-danger-light-hover": e === "system",
@@ -170,7 +170,7 @@ const j = "av-messagebox", D = "av-panel", G = "av-button", R = "icon", Y = "but
     });
   if (r === "selected")
     return "hover:text-copy-light-hover hover:bg-action-selected-dark-hover";
-}, we = ({
+}, Ne = ({
   mode: e,
   disabled: t,
   variant: r
@@ -178,21 +178,21 @@ const j = "av-messagebox", D = "av-panel", G = "av-button", R = "icon", Y = "but
   if (t)
     return "";
   if (r === "primary")
-    return i("active:text-copy-light-active", {
+    return n("active:text-copy-light-active", {
       "active:bg-action-dark-active": e === "dark",
       "active:bg-action-light-active": e === "light",
       "active:bg-action-dark-active dark:active:bg-action-light-active": e === "system",
       "active:bg-action-light-active dark:active:bg-action-dark-active": e === "alt-system"
     });
   if (r === "secondary")
-    return i("active:text-copy-light-active", {
+    return n("active:text-copy-light-active", {
       "active:bg-action-dark-active": e === "light",
       "active:bg-action-light-active": e === "dark",
       "active:bg-action-dark-active dark:active:bg-action-light-active": e === "alt-system",
       "active:bg-action-light-active dark:active:bg-action-dark-active": e === "system"
     });
   if (r === "danger")
-    return i("active:text-copy-lighter-active", {
+    return n("active:text-copy-lighter-active", {
       "active:bg-action-danger-dark-active": e === "dark",
       "active:bg-action-danger-light-active": e === "light",
       "active:bg-action-danger-dark-active dark:active:bg-action-danger-light-active": e === "system",
@@ -200,7 +200,7 @@ const j = "av-messagebox", D = "av-panel", G = "av-button", R = "icon", Y = "but
     });
   if (r === "selected")
     return "active:text-copy-lighter-active active:bg-action-selected-dark-active";
-}, xe = ({
+}, Ie = ({
   mode: e,
   noBorder: t,
   variant: r
@@ -208,21 +208,21 @@ const j = "av-messagebox", D = "av-panel", G = "av-button", R = "icon", Y = "but
   if (t)
     return "border border-transparent";
   if (r === "primary")
-    return i("border", {
+    return n("border", {
       "border-border-dark": e === "dark",
       "border-border-accent": e === "light",
       "border-border-dark dark:border-border-accent": e === "system",
       "border-border-accent dark:border-border-dark": e === "alt-system"
     });
   if (r === "secondary")
-    return i("border", {
+    return n("border", {
       "border-border-dark": e === "light",
       "border-border-accent": e === "dark",
       "border-border-dark dark:border-border-accent": e === "alt-system",
       "border-border-accent dark:border-border-dark": e === "system"
     });
   if (r === "danger")
-    return i("border", {
+    return n("border", {
       "border-border-danger-dark": e === "dark",
       "border-border-danger-medium": e === "light",
       "border-border-danger-dark dark:border-border-danger-medium": e === "system",
@@ -230,18 +230,18 @@ const j = "av-messagebox", D = "av-panel", G = "av-button", R = "icon", Y = "but
     });
   if (r === "selected")
     return "border border-border-selected-dark";
-}, _e = ({
+}, Ee = ({
   focusMode: e
-}) => i("focus:outline", "focus:outline-2", "focus:outline-offset-2", {
+}) => n("focus:outline", "focus:outline-2", "focus:outline-offset-2", {
   "focus:outline-focus-dark": e === "dark",
   "focus:outline-focus-light": e === "light",
   "focus:outline-focus-light dark:focus:outline-focus-dark": e === "alt-system",
   "focus:outline-focus-dark dark:focus:outline-focus-light": e === "system"
-}), Ne = ({
+}), Se = ({
   mode: e,
   raw: t,
   iconClassName: r
-}) => t ? "" : i(
+}) => t ? "" : n(
   {
     "text-copy-accent-dark": e === "light" || e === "alt-system",
     "text-copy-light": e === "dark" || e === "system",
@@ -249,90 +249,90 @@ const j = "av-messagebox", D = "av-panel", G = "av-button", R = "icon", Y = "but
     "dark:text-copy-accent-dark": e === "system"
   },
   r
-), Ie = ({
+), Re = ({
   animated: e
-}) => i({
+}) => n({
   "transition-opacity duration-300 ease-in": e
-}), Ee = ({
+}), Be = ({
   type: e,
   className: t,
   raw: r,
   mode: a,
-  focusMode: n,
+  focusMode: i,
   disabled: o,
-  fullWidth: s,
-  size: l,
-  noBorder: u,
-  labelRight: g,
-  labelLeft: f,
-  noBackground: h,
-  variant: d,
-  noTruncate: b,
-  align: x,
-  radius: _,
-  animated: y
-}) => (d || (d = "primary"), r ? i(G, t) : i(
+  fullWidth: l,
+  size: s,
+  noBorder: d,
+  labelRight: m,
+  labelLeft: v,
+  noBackground: g,
+  variant: u,
+  noTruncate: f,
+  align: E,
+  radius: S,
+  animated: k
+}) => (u || (u = "primary"), r ? n(G, t) : n(
   G,
-  ve({
+  ke({
     mode: a,
-    variant: d,
-    noBackground: h,
-    noTruncate: b
+    variant: u,
+    noBackground: g,
+    noTruncate: f
   }),
-  ye({ mode: a, noBackground: h, variant: d }),
-  pe({ radius: _ }),
-  be({
+  we({ mode: a, noBackground: g, variant: u }),
+  xe({ radius: S }),
+  ye({
     type: e,
-    size: l,
-    labelRight: g,
-    labelLeft: f,
-    align: x
+    size: s,
+    labelRight: m,
+    labelLeft: v,
+    align: E
   }),
-  fe({ type: e, size: l, labelRight: g, labelLeft: f }),
-  xe({ mode: a, variant: d, noBorder: u }),
-  _e({ focusMode: n }),
-  ke({ mode: a, variant: d, disabled: o }),
-  we({ mode: a, variant: d, disabled: o }),
+  pe({ type: e, size: s, labelRight: m, labelLeft: v }),
+  Ie({ mode: a, variant: u, noBorder: d }),
+  Ee({ focusMode: i }),
+  _e({ mode: a, variant: u, disabled: o }),
+  Ne({ mode: a, variant: u, disabled: o }),
   {
-    "w-full": s,
+    "w-full": l,
     "disabled:cursor-not-allowed disabled:opacity-50": o
   },
-  i({
-    "transition-[width] duration-300 ease-in-out": e === R && y
+  n({
+    "transition-[width] duration-300 ease-in-out": e === L && k
   }),
   t
-)), Se = (e, t, r) => {
+)), Te = (e, t, r) => {
   var a;
   !t && (!document.activeElement || document.activeElement !== e.currentTarget) && typeof ((a = e == null ? void 0 : e.currentTarget) == null ? void 0 : a.focus) == "function" && e.currentTarget.focus(), typeof r == "function" && r(e);
-}, Z = P.forwardRef((e, t) => {
-  const { onClick: r, noInternalClick: a = !1, ...n } = e;
+}, K = z.forwardRef((e, t) => {
+  const { onClick: r, noInternalClick: a = !1, ...i } = e;
   return /* @__PURE__ */ c(
     "button",
     {
       ref: t,
       onClick: (o) => {
-        Se(o, a, r);
+        Te(o, a, r);
       },
-      ...n
+      ...i
     }
   );
 });
-Z.displayName = "BaseButton";
-function Re() {
-  const e = w(!1);
-  return A(() => (e.current = !0, () => {
+K.displayName = "BaseButton";
+function Ce() {
+  const e = I(!1);
+  return V(() => (e.current = !0, () => {
     e.current = !1;
-  }), []), ie(() => e.current, []);
+  }), []), ce(() => e.current, []);
 }
-function Be(e) {
-  return X(() => e.every((t) => t == null) ? () => {
+function Me(e) {
+  return H(() => e.every((t) => t == null) ? () => {
   } : (t) => {
     e.forEach((r) => {
       typeof r == "function" ? r(t) : r != null && (r.current = t);
     });
   }, e);
 }
-const Te = {
+const Le = {
   x: 0,
   y: 0,
   width: 0,
@@ -342,126 +342,129 @@ const Te = {
   bottom: 0,
   right: 0
 };
-function L(e) {
-  const t = Re(), r = w(0), a = w(null), [n, o] = ne(Te), s = X(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((l) => {
-    const u = l[0];
-    u && (cancelAnimationFrame(r.current), r.current = requestAnimationFrame(() => {
-      a.current && t() && o(u.contentRect);
+function P(e) {
+  const t = Ce(), r = I(0), a = I(null), [i, o] = le(Le), l = H(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((s) => {
+    const d = s[0];
+    d && (cancelAnimationFrame(r.current), r.current = requestAnimationFrame(() => {
+      a.current && t() && o(d.contentRect);
     }));
   }), [t]);
-  return A(() => (a.current && (s == null || s.observe(a.current, e)), () => {
-    s == null || s.disconnect(), r.current && cancelAnimationFrame(r.current);
-  }), [s, e]), [a, n];
+  return V(() => (a.current && (l == null || l.observe(a.current, e)), () => {
+    l == null || l.disconnect(), r.current && cancelAnimationFrame(r.current);
+  }), [l, e]), [a, i];
 }
-const Ce = {
+const W = {
   small: 24,
   // w-6
   medium: 32,
   // w-8
   large: 48
   // w-12
-}, Me = {
+}, X = {
   small: 8 * 2,
   // px-2 x 2
   medium: 12 * 2,
   // px-3 x 2
   large: 16 * 2
   // px-4 x 2
-}, Le = 2, V = P.forwardRef(
+}, Y = 2, U = z.forwardRef(
   ({
     children: e,
     disabled: t = !1,
     mode: r = "system",
     focusMode: a = "system",
-    fullWidth: n = !1,
+    fullWidth: i = !1,
     className: o,
-    type: s = "button",
-    raw: l = !1,
-    noBorder: u = !1,
-    "aria-label": g,
-    label: f,
-    size: h = "medium",
-    labelRight: d,
-    labelLeft: b,
-    noBackground: x = !1,
-    align: _ = "center",
-    radius: y = "large",
-    variant: J = "primary",
-    iconClassName: K,
-    animated: z = !1,
-    ...Q
-  }, ee) => {
-    const re = Ee({
-      type: R,
+    type: l = "button",
+    raw: s = !1,
+    noBorder: d = !1,
+    "aria-label": m,
+    label: v,
+    size: g = "medium",
+    labelRight: u,
+    labelLeft: f,
+    noBackground: E = !1,
+    align: S = "center",
+    radius: k = "large",
+    variant: ee = "primary",
+    iconClassName: re,
+    animated: y = !1,
+    ...te
+  }, ae) => {
+    const ie = Be({
+      type: L,
       mode: r,
       focusMode: a,
-      fullWidth: n,
+      fullWidth: i,
       disabled: t,
-      raw: l,
+      raw: s,
       className: o,
-      noBorder: u,
-      size: h,
-      labelRight: d,
-      labelLeft: b,
-      noBackground: x,
-      align: _,
-      radius: y,
-      variant: J,
-      animated: z
-    }), te = Ne({ mode: r, raw: l, iconClassName: K }), U = Ie({ animated: z }), [v, T] = L(), [p, C] = L(), [I, $] = L(), M = w(0), k = w(null), ae = Be([ee, k]);
-    return F(() => {
-      I && I.current && (M.current = $.width + Me[h] + (u ? 0 : Le));
-    }, [$, I, h, u]), F(() => {
-      k && k.current && (d && v && T.width > 0 ? (v.current && (v.current.style.opacity = "100"), k.current.style.width = `${T.width + M.current}px`) : b && C.width > 0 ? (p.current && (p.current.style.opacity = "100"), k.current.style.width = `${C.width + M.current}px`) : (v.current && (v.current.style.opacity = "0"), p.current && (p.current.style.opacity = "0"), k.current.style.width = `${Ce[h]}px`));
+      noBorder: d,
+      size: g,
+      labelRight: u,
+      labelLeft: f,
+      noBackground: E,
+      align: S,
+      radius: k,
+      variant: ee,
+      animated: y
+    }), ne = Se({ mode: r, raw: s, iconClassName: re }), F = Re({ animated: y }), [p, w] = P(), [x, _] = P(), [B, T] = P(), N = I(0), b = I(null), oe = Me([ae, b]);
+    return O(() => {
+      y || (N.current = T.width + X[g] + (d ? 0 : Y), b && b.current && (w.width > 0 ? b.current.style.width = `${w.width + N.current}px` : _.width > 0 ? b.current.style.width = `${_.width + N.current}px` : b.current.style.width = `${W[g]}px`));
+    }, [y, T, g, d, w, _]), O(() => {
+      B && B.current && y && (N.current = T.width + X[g] + (d ? 0 : Y));
+    }, [T, B, g, d, y]), O(() => {
+      b && b.current && y && (u && p && w.width > 0 ? (p.current && (p.current.style.opacity = "100"), b.current.style.width = `${w.width + N.current}px`) : f && _.width > 0 ? (x.current && (x.current.style.opacity = "100"), b.current.style.width = `${_.width + N.current}px`) : (p.current && (p.current.style.opacity = "0"), x.current && (x.current.style.opacity = "0"), b.current.style.width = `${W[g]}px`));
     }, [
-      T,
-      d,
-      v,
-      C,
-      b,
+      w,
+      u,
       p,
-      h
-    ]), /* @__PURE__ */ S(
-      Z,
+      _,
+      f,
+      x,
+      g,
+      y
+    ]), /* @__PURE__ */ M(
+      K,
       {
-        ref: ae,
-        className: re,
+        ref: oe,
+        className: ie,
         disabled: t,
-        type: s,
-        "aria-label": g || f,
-        ...Q,
+        type: l,
+        "aria-label": m || v,
+        ...te,
         children: [
-          /* @__PURE__ */ c("span", { ref: p, className: U, children: b && /* @__PURE__ */ c("span", { className: "pr-2", children: b }) }),
-          /* @__PURE__ */ c("span", { ref: I, className: te, children: e }),
-          /* @__PURE__ */ c("span", { ref: v, className: U, children: d && /* @__PURE__ */ c("span", { className: "pl-2", children: d }) })
+          /* @__PURE__ */ c("span", { ref: x, className: F, children: f && /* @__PURE__ */ c("span", { className: "pr-2", children: f }) }),
+          /* @__PURE__ */ c("span", { ref: B, className: ne, children: e }),
+          /* @__PURE__ */ c("span", { ref: p, className: F, children: u && /* @__PURE__ */ c("span", { className: "pl-2", children: u }) })
         ]
       }
     );
   }
 );
-V.displayName = "ButtonIcon";
+U.displayName = "ButtonIcon";
 /*!
-  @versini/ui-button v4.2.0
+  @versini/ui-button v4.2.1
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_BUTTON__ || (window.__VERSINI_UI_BUTTON__ = {
-    version: "4.2.0",
-    buildTime: "01/25/2025 10:54 PM EST",
+    version: "4.2.1",
+    buildTime: "01/26/2025 05:19 PM EST",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
 } catch {
 }
-const Oe = P.forwardRef(
+const $e = z.forwardRef(
   ({
     children: e,
     mode: t = "system",
     className: r,
     active: a = !1,
-    ...n
+    ...i
   }, o) => {
-    const s = a ? i(
+    const l = a ? n(
       "relative",
       "focus-within:static",
       "focus-within:after:border-transparent",
@@ -478,48 +481,48 @@ const Oe = P.forwardRef(
         "after:border-table-light dark:after:border-table-dark": t === "alt-system"
       }
     ) : "";
-    return /* @__PURE__ */ c("div", { className: s, children: /* @__PURE__ */ c(
-      V,
+    return /* @__PURE__ */ c("div", { className: l, children: /* @__PURE__ */ c(
+      U,
       {
-        className: i("justify-center", r),
+        className: n("justify-center", r),
         ref: o,
         mode: t,
         radius: "small",
-        ...n,
+        ...i,
         children: e
       }
     ) });
   }
 );
-Oe.displayName = "ButtonSort";
-const Pe = ({
+$e.displayName = "ButtonSort";
+const Oe = ({
   children: e,
   fill: t,
   viewBox: r,
   className: a,
-  defaultViewBox: n,
+  defaultViewBox: i,
   size: o,
-  title: s,
-  semantic: l = !1,
-  ...u
+  title: l,
+  semantic: s = !1,
+  ...d
 }) => {
-  const g = i(o, a);
-  return /* @__PURE__ */ S(W, { children: [
+  const m = n(o, a);
+  return /* @__PURE__ */ M(q, { children: [
     /* @__PURE__ */ c(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
-        className: g,
-        viewBox: r || n,
+        className: m,
+        viewBox: r || i,
         fill: t || "currentColor",
         role: "img",
-        "aria-hidden": !l,
+        "aria-hidden": !s,
         focusable: !1,
-        ...u,
+        ...d,
         children: e
       }
     ),
-    s && l && /* @__PURE__ */ c("span", { className: "sr-only", children: s })
+    l && s && /* @__PURE__ */ c("span", { className: "sr-only", children: l })
   ] });
 };
 /*!
@@ -535,21 +538,21 @@ try {
   });
 } catch {
 }
-const Ae = ({
+const Pe = ({
   className: e,
   viewBox: t,
   title: r,
   monotone: a,
-  ...n
+  ...i
 }) => /* @__PURE__ */ c(
-  Pe,
+  Oe,
   {
     defaultViewBox: "0 0 384 512",
     size: "size-5",
     viewBox: t,
     className: e,
     title: r || "Close",
-    ...n,
+    ...i,
     children: /* @__PURE__ */ c(
       "path",
       {
@@ -572,37 +575,37 @@ try {
   });
 } catch {
 }
-const H = m.createContext(null);
-function Ve({
+const Q = h.createContext(null);
+function Ae({
   initialOpen: e = !1,
   open: t,
   onOpenChange: r
 } = {}) {
-  const [a, n] = m.useState(e), [o, s] = m.useState(), [l, u] = m.useState(), g = t ?? a, f = r ?? n, h = oe({
-    open: g,
-    onOpenChange: f
-  }), d = h.context, b = se(d, {
+  const [a, i] = h.useState(e), [o, l] = h.useState(), [s, d] = h.useState(), m = t ?? a, v = r ?? i, g = se({
+    open: m,
+    onOpenChange: v
+  }), u = g.context, f = de(u, {
     enabled: t == null
-  }), x = ce(d, {
+  }), E = ue(u, {
     outsidePress: !1,
     outsidePressEvent: "mousedown"
-  }), _ = le(d), y = de([b, x, _]);
-  return m.useMemo(
+  }), S = me(u), k = ge([f, E, S]);
+  return h.useMemo(
     () => ({
-      open: g,
-      setOpen: f,
-      ...y,
-      ...h,
+      open: m,
+      setOpen: v,
+      ...k,
+      ...g,
       labelId: o,
-      descriptionId: l,
-      setLabelId: s,
-      setDescriptionId: u
+      descriptionId: s,
+      setLabelId: l,
+      setDescriptionId: d
     }),
-    [g, f, y, h, o, l]
+    [m, v, k, g, o, s]
   );
 }
-const B = () => {
-  const e = m.useContext(H);
+const $ = () => {
+  const e = h.useContext(Q);
   if (e == null)
     throw new Error("Modal components must be wrapped in <Modal />");
   return e;
@@ -611,38 +614,38 @@ function ze({
   children: e,
   ...t
 }) {
-  const r = Ve(t);
-  return /* @__PURE__ */ c(H.Provider, { value: r, children: e });
+  const r = Ae(t);
+  return /* @__PURE__ */ c(Q.Provider, { value: r, children: e });
 }
-const Ue = m.forwardRef(function(e, t) {
-  const { context: r, ...a } = B(), n = ue([a.refs.setFloating, t]);
+const Ve = h.forwardRef(function(e, t) {
+  const { context: r, ...a } = $(), i = he([a.refs.setFloating, t]);
   if (!r.open)
     return null;
-  const { overlayBackground: o, ...s } = e, l = i("grid place-items-center", {
+  const { overlayBackground: o, ...l } = e, s = n("grid place-items-center", {
     [`${o}`]: o,
     "bg-black sm:bg-black/[.8]": !o
   });
-  return /* @__PURE__ */ c(ge, { children: /* @__PURE__ */ c(me, { className: l, lockScroll: !0, children: /* @__PURE__ */ c(he, { context: r, children: /* @__PURE__ */ c(
+  return /* @__PURE__ */ c(be, { children: /* @__PURE__ */ c(fe, { className: s, lockScroll: !0, children: /* @__PURE__ */ c(ve, { context: r, children: /* @__PURE__ */ c(
     "div",
     {
-      ref: n,
+      ref: i,
       "aria-labelledby": a.labelId,
       "aria-describedby": a.descriptionId,
-      ...a.getFloatingProps(s),
-      children: s.children
+      ...a.getFloatingProps(l),
+      children: l.children
     }
   ) }) }) });
-}), $e = m.forwardRef(function({ children: e, ...t }, r) {
-  const { setLabelId: a } = B(), n = q();
-  return m.useLayoutEffect(() => (a(n), () => a(void 0)), [n, a]), /* @__PURE__ */ c("h1", { ...t, ref: r, id: n, children: e });
-}), Fe = m.forwardRef(function({ children: e, ...t }, r) {
-  const { setDescriptionId: a } = B(), n = q();
-  return m.useLayoutEffect(() => (a(n), () => a(void 0)), [n, a]), /* @__PURE__ */ c("div", { ...t, ref: r, id: n, children: e });
-}), je = m.forwardRef(function(e, t) {
-  const { setOpen: r } = B(), { trigger: a, className: n, ...o } = e, s = m.useCallback(() => r(!1), [r]);
-  return /* @__PURE__ */ c("div", { className: n, children: m.cloneElement(a, {
+}), Ue = h.forwardRef(function({ children: e, ...t }, r) {
+  const { setLabelId: a } = $(), i = Z();
+  return h.useLayoutEffect(() => (a(i), () => a(void 0)), [i, a]), /* @__PURE__ */ c("h1", { ...t, ref: r, id: i, children: e });
+}), Fe = h.forwardRef(function({ children: e, ...t }, r) {
+  const { setDescriptionId: a } = $(), i = Z();
+  return h.useLayoutEffect(() => (a(i), () => a(void 0)), [i, a]), /* @__PURE__ */ c("div", { ...t, ref: r, id: i, children: e });
+}), je = h.forwardRef(function(e, t) {
+  const { setOpen: r } = $(), { trigger: a, className: i, ...o } = e, l = h.useCallback(() => r(!1), [r]);
+  return /* @__PURE__ */ c("div", { className: i, children: h.cloneElement(a, {
     ref: t,
-    onClick: s,
+    onClick: l,
     ...o
   }) });
 });
@@ -653,71 +656,71 @@ const Ue = m.forwardRef(function(e, t) {
 try {
   window.__VERSINI_UI_MODAL__ || (window.__VERSINI_UI_MODAL__ = {
     version: "1.2.9",
-    buildTime: "01/25/2025 10:54 PM EST",
+    buildTime: "01/26/2025 05:19 PM EST",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
 } catch {
 }
-const N = "panel", E = "messagebox", De = ({
+const R = "panel", C = "messagebox", De = ({
   className: e,
   kind: t,
   borderMode: r
 }) => ({
-  main: i("prose prose-lighter flex flex-col bg-surface-medium", {
-    [`${D} max-h-full sm:max-h-[95%] min-h-full sm:min-h-[10rem] sm:rounded-lg sm:border-2`]: t === N,
-    [`${D} w-full sm:w-[95%] md:max-w-2xl`]: t === N && !e,
-    [`${j} rounded-lg border-2`]: t === E,
-    [`${j} w-[95%] sm:w-[50%] md:max-w-2xl`]: t === E && !e,
+  main: n("prose prose-lighter flex flex-col bg-surface-medium", {
+    [`${D} max-h-full sm:max-h-[95%] min-h-full sm:min-h-[10rem] sm:rounded-lg sm:border-2`]: t === R,
+    [`${D} w-full sm:w-[95%] md:max-w-2xl`]: t === R && !e,
+    [`${j} rounded-lg border-2`]: t === C,
+    [`${j} w-[95%] sm:w-[50%] md:max-w-2xl`]: t === C && !e,
     [`${e}`]: !!e,
-    "sm:border-border-dark": r === "dark" && t === N,
-    "sm:border-border-accent": r === "light" && t === N,
-    "border-border-dark": r === "dark" && t === E,
-    "border-border-accent": r === "light" && t === E
+    "sm:border-border-dark": r === "dark" && t === R,
+    "sm:border-border-accent": r === "light" && t === R,
+    "border-border-dark": r === "dark" && t === C,
+    "border-border-accent": r === "light" && t === C
   }),
   content: "flex flex-col py-2 sm:py-4 sm:px-4 px-2 overflow-y-auto",
   footer: "flex flex-grow flex-col sm:p-4 p-2",
   header: "sm:p-4 mb-0 p-2",
   close: "sm:p-4 p-2"
-}), Ye = ({
+}), qe = ({
   open: e,
   onOpenChange: t,
   title: r,
   children: a,
-  footer: n,
+  footer: i,
   borderMode: o = "light",
-  kind: s = N,
-  className: l
+  kind: l = R,
+  className: s
 }) => {
-  const u = w(""), g = De({ className: l, kind: s, borderMode: o });
-  return A(() => (e && (u.current = document.title, document.title = `${r} | ${u.current}`), () => {
-    e && (document.title = u.current);
-  }), [r, e]), /* @__PURE__ */ c(W, { children: e && /* @__PURE__ */ c(ze, { open: e, onOpenChange: t, children: /* @__PURE__ */ S(Ue, { className: g.main, children: [
-    /* @__PURE__ */ S("div", { className: "flex flex-row-reverse items-center justify-between", children: [
+  const d = I(""), m = De({ className: s, kind: l, borderMode: o });
+  return V(() => (e && (d.current = document.title, document.title = `${r} | ${d.current}`), () => {
+    e && (document.title = d.current);
+  }), [r, e]), /* @__PURE__ */ c(q, { children: e && /* @__PURE__ */ c(ze, { open: e, onOpenChange: t, children: /* @__PURE__ */ M(Ve, { className: m.main, children: [
+    /* @__PURE__ */ M("div", { className: "flex flex-row-reverse items-center justify-between", children: [
       /* @__PURE__ */ c(
         je,
         {
-          className: g.close,
+          className: m.close,
           trigger: /* @__PURE__ */ c(
-            V,
+            U,
             {
               mode: "dark",
               focusMode: "light",
               noBorder: !0,
               label: "Close",
-              children: /* @__PURE__ */ c(Ae, {})
+              children: /* @__PURE__ */ c(Pe, {})
             }
           )
         }
       ),
-      /* @__PURE__ */ c($e, { className: g.header, children: r })
+      /* @__PURE__ */ c(Ue, { className: m.header, children: r })
     ] }),
-    /* @__PURE__ */ c(Fe, { className: g.content, children: a }),
-    n && /* @__PURE__ */ c("div", { className: g.footer, children: n })
+    /* @__PURE__ */ c(Fe, { className: m.content, children: a }),
+    i && /* @__PURE__ */ c("div", { className: m.footer, children: i })
   ] }) }) });
 };
 export {
   j as MESSAGEBOX_CLASSNAME,
   D as PANEL_CLASSNAME,
-  Ye as Panel
+  qe as Panel
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-panel",
-	"version": "1.3.17",
+	"version": "1.3.18",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -40,7 +40,7 @@
 	},
 	"dependencies": {
 		"@tailwindcss/typography": "0.5.16",
-		"@versini/ui-button": "4.2.0",
+		"@versini/ui-button": "4.2.1",
 		"@versini/ui-icons": "4.6.0",
 		"@versini/ui-modal": "1.2.9",
 		"clsx": "2.1.1",
@@ -49,5 +49,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "95add63a475dc1307dd4ada55909553876a55b73"
+	"gitHead": "2afa12a4fcc5da2231f908342e8e18524126274b"
 }