@versini/ui-panel 3.0.0 → 3.1.0

package/dist/components/Panel/Panel.js

@@ -1,590 +1,35 @@
-import { jsx as s, jsxs as L, Fragment as de } from "react/jsx-runtime";
-import * as h from "react";
-import F, { useRef as N, useLayoutEffect as H, useEffect as B, useState as K, useMemo as Q, useCallback as me, useId as Z } from "react";
-import n from "clsx";
-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", ee = "button", D = "link", xe = ({
-  type: e,
-  size: r,
-  labelRight: t,
-  labelLeft: a,
-  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";
-  switch (e) {
-    case ee:
-    case D:
-      return n({
-        [l]: r === "small",
-        [d]: r === "medium",
-        [c]: r === "large"
-      });
-    case V:
-      return n("flex items-center", {
-        "justify-center": i === "center",
-        "justify-start": i === "left",
-        "justify-end": i === "right",
-        "h-6 w-6 p-0": 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),
-        "h-12 px-4": r === "large" && !o && (t || a),
-        "h-6 py-0": r === "small" && o && !(t || a),
-        "h-6": r === "small" && o && (t || a),
-        "h-8 py-1": r === "medium" && o && !(t || a),
-        "h-8": r === "medium" && o && (t || a),
-        "h-12 py-2": r === "large" && o && !(t || a),
-        "h-12": r === "large" && o && (t || a)
-      });
-  }
-}, we = ({
-  type: e,
-  size: r,
-  labelRight: t,
-  labelLeft: a
-}) => {
-  const i = "text-sm font-medium", o = "text-base font-medium", l = "text-lg font-medium";
-  switch (e) {
-    case ee:
-    case D:
-      return n({
-        "text-center": e === D,
-        [i]: r === "small",
-        [o]: r === "medium",
-        [l]: r === "large"
-      });
-    case V:
-      return n({
-        [i]: r === "small" && (t || a),
-        [o]: r === "medium" && (t || a),
-        [l]: r === "large" && (t || a)
-      });
-  }
-}, Ie = ({
-  mode: e,
-  noBackground: r,
-  truncate: t,
-  variant: a
-}) => {
-  if (r)
-    return "not-prose";
-  if (a === "primary")
-    return n("not-prose", {
-      truncate: t,
-      "text-copy-dark": e === "dark" || e === "system",
-      "text-copy-light": e === "light" || e === "alt-system",
-      "dark:text-copy-light": e === "system",
-      "dark:text-copy-dark": e === "alt-system"
-    });
-  if (a === "secondary")
-    return n("not-prose", {
-      truncate: t,
-      "text-copy-light": e === "dark" || e === "system",
-      "text-copy-dark": e === "light" || e === "alt-system",
-      "dark:text-copy-dark": e === "system",
-      "dark:text-copy-light": e === "alt-system"
-    });
-  if (a === "danger")
-    return n("not-prose", {
-      truncate: t,
-      "text-copy-light": e === "dark" || e === "system",
-      "text-copy-lighter": e === "light" || e === "alt-system",
-      "dark:text-copy-lighter": e === "system",
-      "dark:text-copy-light": e === "alt-system"
-    });
-  if (a === "selected")
-    return n("not-prose text-copy-lighter", {
-      truncate: t
-    });
-}, _e = ({
-  mode: e,
-  noBackground: r,
-  variant: t
-}) => {
-  if (!r) {
-    if (t === "primary")
-      return n({
-        "bg-action-light": e === "dark",
-        "bg-action-dark": e === "light",
-        "bg-action-light dark:bg-action-dark": e === "system",
-        "bg-action-dark dark:bg-action-light": e === "alt-system"
-      });
-    if (t === "secondary")
-      return n({
-        "bg-action-light": e === "light",
-        "bg-action-dark": e === "dark",
-        "bg-action-light dark:bg-action-dark": e === "alt-system",
-        "bg-action-dark dark:bg-action-light": e === "system"
-      });
-    if (t === "danger")
-      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",
-        "bg-action-danger-light dark:bg-action-danger-dark": e === "alt-system"
-      });
-    if (t === "selected")
-      return "bg-action-selected-dark";
-  }
-}, Ne = ({
-  radius: e
-}) => n({
-  "rounded-full": e === "large",
-  "rounded-md": e === "medium",
-  "rounded-xs": e === "small"
-}), Ee = ({
-  mode: e,
-  disabled: r,
-  variant: t
-}) => {
-  if (r)
-    return "";
-  if (t === "primary")
-    return n({
-      "hover:text-copy-dark-hover": e === "dark" || e === "system",
-      "hover:text-copy-light-hover": e === "light" || e === "alt-system",
-      "dark:hover:text-copy-light-hover": e === "system",
-      "dark:hover:text-copy-dark-hover": e === "alt-system",
-      "hover:bg-action-light-hover": e === "dark",
-      "hover:bg-action-dark-hover": e === "light",
-      "hover:bg-action-light-hover dark:hover:bg-action-dark-hover": e === "system",
-      "hover:bg-action-dark-hover dark:hover:bg-action-light-hover": e === "alt-system"
-    });
-  if (t === "secondary")
-    return n({
-      "hover:text-copy-light-hover": e === "dark" || e === "system",
-      "hover:text-copy-dark-hover": e === "light" || e === "alt-system",
-      "dark:hover:text-copy-dark-hover": e === "system",
-      "dark:hover:text-copy-light-hover": e === "alt-system",
-      "hover:bg-action-light-hover": e === "light",
-      "hover:bg-action-dark-hover": e === "dark",
-      "hover:bg-action-light-hover dark:hover:bg-action-dark-hover": e === "alt-system",
-      "hover:bg-action-dark-hover dark:hover:bg-action-light-hover": e === "system"
-    });
-  if (t === "danger")
-    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",
-      "hover:bg-action-danger-light-hover dark:hover:bg-action-danger-dark-hover": e === "alt-system"
-    });
-  if (t === "selected")
-    return "hover:text-copy-light-hover hover:bg-action-selected-dark-hover";
-}, Ce = ({
-  mode: e,
-  disabled: r,
-  variant: t
-}) => {
-  if (r)
-    return "";
-  if (t === "primary")
-    return n({
-      "active:text-copy-dark-active": e === "dark" || e === "system",
-      "active:text-copy-light-active": e === "light" || e === "alt-system",
-      "dark:active:text-copy-light-active": e === "system",
-      "dark:active:text-copy-dark-active": e === "alt-system",
-      "active:bg-action-light-active": e === "dark",
-      "active:bg-action-dark-active": e === "light",
-      "active:bg-action-light-active dark:active:bg-action-dark-active": e === "system",
-      "active:bg-action-dark-active dark:active:bg-action-light-active": e === "alt-system"
-    });
-  if (t === "secondary")
-    return n({
-      "active:text-copy-light-active": e === "dark" || e === "system",
-      "active:text-copy-dark-active": e === "light" || e === "alt-system",
-      "dark:active:text-copy-dark-active": e === "system",
-      "dark:active:text-copy-light-active": e === "alt-system",
-      "active:bg-action-light-active": e === "light",
-      "active:bg-action-dark-active": e === "dark",
-      "active:bg-action-light-active dark:active:bg-action-dark-active": e === "alt-system",
-      "active:bg-action-dark-active dark:active:bg-action-light-active": e === "system"
-    });
-  if (t === "danger")
-    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",
-      "active:bg-action-danger-light-active dark:active:bg-action-danger-dark-active": e === "alt-system"
-    });
-  if (t === "selected")
-    return "active:text-copy-lighter-active active:bg-action-selected-dark-active";
-}, Be = ({
-  mode: e,
-  noBorder: r,
-  variant: t
-}) => {
-  if (r)
-    return "border border-transparent";
-  if (t === "primary")
-    return n("border", {
-      "border-border-medium": e === "dark",
-      "border-border-accent": e === "light",
-      "border-border-medium dark:border-border-accent": e === "system",
-      "border-border-accent dark:border-border-medium": e === "alt-system"
-    });
-  if (t === "secondary")
-    return n("border", {
-      "border-border-medium": e === "light",
-      "border-border-accent": e === "dark",
-      "border-border-medium dark:border-border-accent": e === "alt-system",
-      "border-border-accent dark:border-border-medium": e === "system"
-    });
-  if (t === "danger")
-    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",
-      "border-border-danger-medium dark:border-border-danger-dark": e === "alt-system"
-    });
-  if (t === "selected")
-    return "border border-border-selected-dark";
-}, Se = ({
-  focusMode: e
-}) => 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"
-}), Re = ({
-  mode: e,
-  raw: r,
-  iconClassName: t,
-  variant: a = "primary"
-}) => {
-  if (r)
-    return "";
-  let i = {};
-  return a === "primary" ? i = {
-    "text-copy-dark": e === "dark" || e === "system",
-    "text-copy-light": e === "light" || e === "alt-system",
-    "dark:text-copy-light": e === "system",
-    "dark:text-copy-dark": e === "alt-system"
-  } : a === "secondary" ? i = {
-    "text-copy-light": e === "dark" || e === "system",
-    "text-copy-dark": e === "light" || e === "alt-system",
-    "dark:text-copy-dark": e === "system",
-    "dark:text-copy-light": e === "alt-system"
-  } : a === "danger" ? i = {
-    "text-copy-light": e === "dark" || e === "system",
-    "text-copy-lighter": e === "light" || e === "alt-system",
-    "dark:text-copy-lighter": e === "system",
-    "dark:text-copy-light": e === "alt-system"
-  } : a === "selected" && (i = {
-    "text-copy-lighter": !0
-  }), n(i, t);
-}, Me = ({
-  animated: e
-}) => n({
-  "transition-opacity duration-300 ease-in-out": e
-}), Te = ({
-  type: e,
-  className: r,
-  raw: t,
-  mode: a,
-  focusMode: i,
-  disabled: o,
-  fullWidth: l,
-  size: d,
-  noBorder: c,
-  labelRight: g,
-  labelLeft: y,
-  noBackground: m,
-  variant: u,
-  truncate: f,
-  align: b,
-  radius: w,
-  animated: I
-}) => (u || (u = "primary"), t ? n(X, r) : n(
-  X,
-  Ie({
-    mode: a,
-    variant: u,
-    noBackground: m,
-    truncate: f
-  }),
-  _e({ mode: a, noBackground: m, variant: u }),
-  Ne({ radius: w }),
-  xe({
-    type: e,
-    size: d,
-    labelRight: g,
-    labelLeft: y,
-    align: b,
-    animated: I
-  }),
-  we({ type: e, size: d, labelRight: g, labelLeft: y }),
-  Be({ mode: a, variant: u, noBorder: c }),
-  Se({ focusMode: i }),
-  Ee({ mode: a, variant: u, disabled: o }),
-  Ce({ mode: a, variant: u, disabled: o }),
-  {
-    "w-full": l,
-    "disabled:cursor-not-allowed disabled:opacity-50": o
-  },
-  n({
-    "transition-[width] duration-300 ease-in": I
-  }),
-  r
-)), Le = (e, r, t) => {
-  !r && (!document.activeElement || document.activeElement !== e.currentTarget) && typeof e?.currentTarget?.focus == "function" && e.currentTarget.focus(), typeof t == "function" && t(e);
-}, te = F.forwardRef((e, r) => {
-  const { onClick: t, noInternalClick: a = !1, ...i } = e;
-  return /* @__PURE__ */ s(
-    "button",
-    {
-      ref: r,
-      onClick: (o) => {
-        Le(o, a, t);
-      },
-      ...i
-    }
-  );
-});
-te.displayName = "BaseButton";
-function $e() {
-  const e = N(!1);
-  return B(() => (e.current = !0, () => {
-    e.current = !1;
-  }), []), me(() => e.current, []);
-}
-function Ae(e) {
-  return Q(() => e.every((r) => r == null) ? () => {
-  } : (r) => {
-    e.forEach((t) => {
-      typeof t == "function" ? t(r) : t != null && (t.current = r);
-    });
-  }, [...e]);
-}
-const Oe = {
-  x: 0,
-  y: 0,
-  width: 0,
-  height: 0,
-  top: 0,
-  left: 0,
-  bottom: 0,
-  right: 0
-};
-function P(e) {
-  const r = $e(), t = N(0), a = N(null), [i, o] = K(Oe), l = Q(() => 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];
-}
-const M = {
-  small: 24,
-  // w-6
-  medium: 32,
-  // w-8
-  large: 48
-  // w-12
-}, ze = {
-  small: 16,
-  // px-2 x 2
-  medium: 24,
-  // px-3 x 2
-  large: 32
-  // px-4 x 2
-}, Pe = 2, De = 300, U = F.forwardRef(
-  ({
-    children: e,
-    disabled: r = !1,
-    mode: t = "system",
-    focusMode: a = "system",
-    fullWidth: i = !1,
-    className: o,
-    type: l = "button",
-    raw: d = !1,
-    noBorder: c = !1,
-    "aria-label": g,
-    label: y,
-    size: m = "medium",
-    labelRight: u,
-    labelLeft: f,
-    noBackground: b = !1,
-    align: w = "center",
-    radius: I = "large",
-    variant: j = "secondary",
-    iconClassName: ae,
-    animated: k = !1,
-    ...ie
-  }, oe) => {
-    const ne = Te({
-      type: V,
-      mode: t,
-      focusMode: a,
-      fullWidth: i,
-      disabled: r,
-      raw: d,
-      className: o,
-      noBorder: c,
-      size: m,
-      labelRight: u,
-      labelLeft: f,
-      noBackground: b,
-      align: w,
-      radius: I,
-      variant: j,
-      animated: k
-    }), se = Re({ mode: t, raw: d, iconClassName: ae, variant: j }), G = Me({ animated: k }), le = "flex items-center justify-center relative w-full h-full overflow-hidden", [v, A] = P(), [p, O] = P(), [S, Y] = P(), z = N(0), x = N(null), E = N(null), ce = Ae([oe, x]);
-    return H(() => {
-      S && S.current && k && (z.current = Y.width + ze[m] + (c ? 0 : Pe), 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[m];
-        u && v && A.width > 0 ? C = A.width + z.current : f && p && O.width > 0 && (C = O.width + z.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"));
-      }
-    }, [
-      A,
-      u,
-      v,
-      O,
-      f,
-      p,
-      m,
-      k
-    ]), B(() => () => {
-      E.current && clearTimeout(E.current);
-    }, []), /* @__PURE__ */ s(
-      te,
-      {
-        ref: ce,
-        className: ne,
-        disabled: r,
-        type: l,
-        "aria-label": g || y,
-        ...ie,
-        children: /* @__PURE__ */ L("div", { className: le, children: [
-          /* @__PURE__ */ s(
-            W,
-            {
-              label: f,
-              labelRef: p,
-              labelClass: G,
-              labelInnerClass: "pr-2",
-              initiallyHidden: k
-            }
-          ),
-          /* @__PURE__ */ s("span", { ref: S, className: se, children: e }),
-          /* @__PURE__ */ s(
-            W,
-            {
-              label: u,
-              labelRef: v,
-              labelClass: G,
-              labelInnerClass: "pl-2",
-              initiallyHidden: k
-            }
-          )
-        ] })
-      }
-    );
-  }
-), W = ({
-  labelRef: e,
-  labelClass: r,
-  label: t,
-  labelInnerClass: a,
-  initiallyHidden: i = !1
-}) => /* @__PURE__ */ s(
-  "span",
-  {
-    ref: e,
-    className: r,
-    style: i ? { opacity: 0 } : void 0,
-    children: t && /* @__PURE__ */ s("span", { className: a, children: t })
-  }
-);
-U.displayName = "ButtonIcon";
-/*!
-  @versini/ui-button v8.0.0
-  © 2025 gizmette.com
-*/
-try {
-  window.__VERSINI_UI_BUTTON__ || (window.__VERSINI_UI_BUTTON__ = {
-    version: "8.0.0",
-    buildTime: "09/01/2025 03:17 PM EDT",
-    homepage: "https://github.com/aversini/ui-components",
-    license: "MIT"
-  });
-} catch {
-}
-const Fe = F.forwardRef(
-  ({
-    children: e,
-    mode: r = "system",
-    className: t,
-    active: a = !1,
-    ...i
-  }, o) => {
-    const l = a ? n(
-      "relative",
-      "focus-within:static",
-      "focus-within:after:border-transparent",
-      "after:absolute",
-      "after:content-['']",
-      "after:border-b-2",
-      "after:bottom-[-4px]",
-      "after:left-0",
-      "after:right-0",
-      {
-        "after:border-table-dark": r === "dark",
-        "after:border-table-light": r === "light",
-        "after:border-table-dark dark:after:border-table-light": r === "system",
-        "after:border-table-light dark:after:border-table-dark": r === "alt-system"
-      }
-    ) : "";
-    return /* @__PURE__ */ s("div", { className: l, children: /* @__PURE__ */ s(
-      U,
-      {
-        className: t,
-        ref: o,
-        mode: r,
-        radius: "small",
-        size: "small",
-        align: "center",
-        ...i,
-        children: e
-      }
-    ) });
-  }
-);
-Fe.displayName = "ButtonSort";
-const Ve = ({
-  children: e,
-  fill: r,
-  viewBox: t,
-  className: a,
-  defaultViewBox: i,
-  size: o,
-  title: l,
+import { jsxs as E, jsx as l, Fragment as L } from "react/jsx-runtime";
+import { ButtonIcon as O } from "@versini/ui-button";
+import * as c from "react";
+import { useId as A, useRef as $, useState as R, useEffect as S } from "react";
+import N from "clsx";
+import { useFloating as T, useClick as D, useDismiss as P, useRole as B, useInteractions as V, useMergeRefs as F, FloatingPortal as U, FloatingOverlay as Y, FloatingFocusManager as z } from "@floating-ui/react";
+const M = "av-messagebox", _ = "av-panel", G = ({
+  children: t,
+  fill: e,
+  viewBox: r,
+  className: s,
+  defaultViewBox: o,
+  size: a,
+  title: n,
   semantic: d = !1,
-  ...c
+  ...m
 }) => {
-  const g = n(o, a);
-  return /* @__PURE__ */ L(
+  const u = N(a, s);
+  return /* @__PURE__ */ E(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
-      className: g,
-      viewBox: t || i,
-      fill: r || "currentColor",
+      className: u,
+      viewBox: r || o,
+      fill: e || "currentColor",
       role: "img",
       "aria-hidden": !d,
       focusable: !1,
-      ...c,
+      ...m,
       children: [
-        l && d && /* @__PURE__ */ s("title", { children: l }),
-        e
+        n && d && /* @__PURE__ */ l("title", { children: n }),
+        t
       ]
     }
   );
@@ -602,26 +47,26 @@ try {
   });
 } catch {
 }
-const Ue = ({
-  className: e,
-  viewBox: r,
-  title: t,
-  monotone: a,
-  ...i
-}) => /* @__PURE__ */ s(
-  Ve,
+const j = ({
+  className: t,
+  viewBox: e,
+  title: r,
+  monotone: s,
+  ...o
+}) => /* @__PURE__ */ l(
+  G,
   {
     defaultViewBox: "0 0 384 512",
     size: "size-5",
-    viewBox: r,
-    className: e,
-    title: t || "Close",
-    ...i,
-    children: /* @__PURE__ */ s(
+    viewBox: e,
+    className: t,
+    title: r || "Close",
+    ...o,
+    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",
-        opacity: a ? "1" : "0.4"
+        opacity: s ? "1" : "0.4"
       }
     )
   }
@@ -639,186 +84,204 @@ try {
   });
 } catch {
 }
-const re = h.createContext(null);
-function je({
-  initialOpen: e = !1,
-  open: r,
-  onOpenChange: t
+const y = c.createContext(null);
+function X({
+  initialOpen: t = !1,
+  open: e,
+  onOpenChange: r
 } = {}) {
-  const [a, i] = h.useState(e), [o, l] = h.useState(), [d, c] = h.useState(), g = r ?? a, y = t ?? i, m = ue({
-    open: g,
-    onOpenChange: y
-  }), u = m.context, f = ge(u, {
-    enabled: r == null
-  }), b = he(u, {
+  const [s, o] = c.useState(t), [a, n] = c.useState(), [d, m] = c.useState(), u = e ?? s, w = r ?? o, p = T({
+    open: u,
+    onOpenChange: w
+  }), f = p.context, v = D(f, {
+    enabled: e == null
+  }), x = P(f, {
     outsidePress: !1,
     outsidePressEvent: "mousedown"
-  }), w = fe(u), I = be([f, b, w]);
-  return h.useMemo(
+  }), h = B(f), I = V([v, x, h]);
+  return c.useMemo(
     () => ({
-      open: g,
-      setOpen: y,
+      open: u,
+      setOpen: w,
       ...I,
-      ...m,
-      labelId: o,
+      ...p,
+      labelId: a,
       descriptionId: d,
-      setLabelId: l,
-      setDescriptionId: c
+      setLabelId: n,
+      setDescriptionId: m
     }),
-    [g, y, I, m, o, d]
+    [u, w, I, p, a, d]
   );
 }
-const $ = () => {
-  const e = h.useContext(re);
-  if (e == null)
+const b = () => {
+  const t = c.useContext(y);
+  if (t == null)
     throw new Error("Modal components must be wrapped in <Modal />");
-  return e;
+  return t;
 };
-function Ge({
-  children: e,
-  ...r
+function H({
+  children: t,
+  ...e
 }) {
-  const t = je(r);
-  return /* @__PURE__ */ s(re.Provider, { value: t, children: e });
+  const r = X(e);
+  return /* @__PURE__ */ l(y.Provider, { value: r, children: t });
 }
-const Ye = h.forwardRef(function(e, r) {
-  const { context: t, ...a } = $(), i = ye([a.refs.setFloating, r]);
-  if (!t.open)
+const q = c.forwardRef(function(t, e) {
+  const { context: r, ...s } = b(), o = F([s.refs.setFloating, e]);
+  if (!r.open)
     return null;
-  const { overlayBackground: o, ...l } = e, d = n("grid place-items-center", {
-    [`${o}`]: o,
-    "bg-black sm:bg-black/[.8]": !o
+  const { overlayBackground: a, ...n } = t, d = N("grid place-items-center", {
+    [`${a}`]: a,
+    "bg-black sm:bg-black/[.8]": !a
   });
-  return /* @__PURE__ */ s(ve, { children: /* @__PURE__ */ s(pe, { className: d, lockScroll: !0, children: /* @__PURE__ */ s(ke, { context: t, children: /* @__PURE__ */ s(
+  return /* @__PURE__ */ l(U, { children: /* @__PURE__ */ l(Y, { className: d, lockScroll: !0, children: /* @__PURE__ */ l(z, { context: r, children: /* @__PURE__ */ l(
     "div",
     {
-      ref: i,
-      "aria-labelledby": a.labelId,
-      "aria-describedby": a.descriptionId,
-      ...a.getFloatingProps(l),
-      children: l.children
+      ref: o,
+      "aria-labelledby": s.labelId,
+      "aria-describedby": s.descriptionId,
+      ...s.getFloatingProps(n),
+      children: n.children
     }
   ) }) }) });
-}), He = h.forwardRef(function({ children: e, ...r }, t) {
-  const { setLabelId: a } = $(), i = Z();
-  return h.useLayoutEffect(() => (a(i), () => a(void 0)), [i, a]), /* @__PURE__ */ s("h1", { ...r, ref: t, id: i, children: e });
-}), qe = h.forwardRef(function({ children: e, ...r }, t) {
-  const { setDescriptionId: a } = $(), i = Z();
-  return h.useLayoutEffect(() => (a(i), () => a(void 0)), [i, a]), /* @__PURE__ */ s("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, {
-    ref: r,
-    onClick: l,
-    ...o
+}), J = c.forwardRef(function({ children: t, ...e }, r) {
+  const { setLabelId: s } = b(), o = A();
+  return c.useLayoutEffect(() => (s(o), () => s(void 0)), [o, s]), /* @__PURE__ */ l("h1", { ...e, ref: r, id: o, children: t });
+}), K = c.forwardRef(function({ children: t, ...e }, r) {
+  const { setDescriptionId: s } = b(), o = A();
+  return c.useLayoutEffect(() => (s(o), () => s(void 0)), [o, s]), /* @__PURE__ */ l("div", { ...e, ref: r, id: o, children: t });
+}), Q = c.forwardRef(function(t, e) {
+  const { setOpen: r } = b(), { trigger: s, className: o, ...a } = t, n = c.useCallback(() => r(!1), [r]);
+  return /* @__PURE__ */ l("div", { className: o, children: c.cloneElement(s, {
+    ref: e,
+    onClick: n,
+    ...a
   }) });
 });
 /*!
-  @versini/ui-modal v3.0.0
+  @versini/ui-modal v3.0.1
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_MODAL__ || (window.__VERSINI_UI_MODAL__ = {
-    version: "3.0.0",
-    buildTime: "09/01/2025 03:17 PM EDT",
+    version: "3.0.1",
+    buildTime: "10/11/2025 12:41 PM EDT",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
 } catch {
 }
-const _ = "panel", T = "messagebox", We = ({
-  className: e,
-  kind: r,
-  borderMode: t,
-  animation: a,
-  maxWidth: i = "medium"
-}) => ({
-  main: n("prose prose-lighter flex flex-col bg-surface-dark", {
-    "duration-200 ease-out": a,
-    [`${R} max-h-full sm:max-h-[95%] min-h-full sm:min-h-[10rem] sm:rounded-lg sm:border-2`]: r === _,
-    [`${R} w-full sm:w-[95%] md:max-w-2xl`]: r === _ && !e && i === "small",
-    [`${R} w-full sm:w-[95%] md:max-w-3xl`]: r === _ && !e && i === "medium",
-    [`${R} w-full sm:w-[95%] md:max-w-4xl`]: r === _ && !e && i === "large",
-    [`${q} rounded-lg border-2`]: r === T,
-    [`${q} w-[95%] sm:w-[50%] md:max-w-2xl`]: r === T && !e,
-    [`${e}`]: !!e,
-    "sm:border-border-dark": t === "dark" && r === _,
-    "sm:border-border-accent": t === "light" && r === _,
-    "border-border-dark": t === "dark" && r === T,
-    "border-border-accent": t === "light" && r === T
-  }),
-  content: "flex flex-col py-2 sm:py-4 sm:px-4 px-2 overflow-y-auto",
-  footer: "flex grow flex-col sm:p-4 p-2",
-  header: "sm:p-4 mb-0 p-2",
-  close: "sm:p-4 p-2"
-}), Je = "slide", J = "fade", tt = ({
-  open: e,
-  onOpenChange: r,
-  title: t,
-  children: a,
-  footer: i,
-  borderMode: o = "light",
-  kind: l = _,
+const i = "panel", g = "messagebox", Z = ({
+  className: t,
+  kind: e,
+  borderMode: r,
+  animation: s,
+  maxWidth: o = "medium",
+  maxHeight: a
+}) => {
+  const n = a ?? (e === i ? "large" : void 0);
+  return {
+    main: N("prose prose-lighter flex flex-col bg-surface-dark", {
+      "duration-200 ease-out": s,
+      /**
+       * Panel styles
+       */
+      [`${_} min-h-full sm:min-h-[10rem] sm:rounded-lg sm:border-2`]: e === i,
+      [`${_} w-full sm:w-[95%] md:max-w-2xl`]: e === i && !t && o === "small",
+      [`${_} w-full sm:w-[95%] md:max-w-3xl`]: e === i && !t && o === "medium",
+      [`${_} w-full sm:w-[95%] md:max-w-4xl`]: e === i && !t && o === "large",
+      "max-h-full sm:max-h-[75%]": e === i && n === "small",
+      "max-h-full sm:max-h-[85%]": e === i && n === "medium",
+      "max-h-full sm:max-h-[95%]": e === i && n === "large",
+      "sm:border-border-dark": r === "dark" && e === i,
+      "sm:border-border-accent": r === "light" && e === i,
+      /**
+       * Messagebox styles
+       */
+      [`${M} rounded-lg border-2`]: e === g,
+      [`${M} w-[95%] sm:w-[50%] md:max-w-2xl`]: e === g && !t,
+      "max-h-[75%]": e === g && n === "small",
+      "max-h-[85%]": e === g && n === "medium",
+      "max-h-[95%]": e === g && n === "large",
+      "border-border-dark": r === "dark" && e === g,
+      "border-border-accent": r === "light" && e === g,
+      [`${t}`]: !!t
+    }),
+    content: "flex flex-col py-2 sm:py-4 sm:px-4 px-2 overflow-y-auto",
+    footer: "flex grow flex-col sm:p-4 p-2",
+    header: "sm:p-4 mb-0 p-2",
+    close: "sm:p-4 p-2"
+  };
+}, W = "slide", C = "fade", oe = ({
+  open: t,
+  onOpenChange: e,
+  title: r,
+  children: s,
+  footer: o,
+  borderMode: a = "light",
+  kind: n = i,
   className: d,
-  animation: c = !1,
-  animationType: g = Je,
-  maxWidth: y = "medium"
+  animation: m = !1,
+  animationType: u = W,
+  maxWidth: w = "medium",
+  maxHeight: p
 }) => {
-  const m = N(""), [u, f] = K(
-    c ? g === J ? { opacity: 0 } : {
+  const f = $(""), [v, x] = R(
+    m ? u === C ? { opacity: 0 } : {
       transform: "translateY(-100vh)"
     } : {}
-  ), b = We({
+  ), h = Z({
     className: d,
-    kind: l,
-    borderMode: o,
-    animation: c,
-    maxWidth: y
+    kind: n,
+    borderMode: a,
+    animation: m,
+    maxWidth: w,
+    maxHeight: p
   });
-  return B(() => (e && (m.current = document.title, document.title = `${t} | ${m.current}`), () => {
-    e && (document.title = m.current);
-  }), [t, e]), B(() => {
-    if (c && e) {
-      f(
-        c ? g === J ? { opacity: 0 } : {
+  return S(() => (t && (f.current = document.title, document.title = `${r} | ${f.current}`), () => {
+    t && (document.title = f.current);
+  }), [r, t]), S(() => {
+    if (m && t) {
+      x(
+        m ? u === C ? { opacity: 0 } : {
           transform: "translateY(-666vh)"
         } : {}
       );
-      const w = setTimeout(() => {
-        f(
-          c ? g === "fade" ? { opacity: 1 } : {
+      const I = setTimeout(() => {
+        x(
+          m ? u === "fade" ? { opacity: 1 } : {
             transform: "translateY(0)"
           } : {}
         );
       }, 100);
-      return () => clearTimeout(w);
+      return () => clearTimeout(I);
     }
-  }, [e, c, g]), /* @__PURE__ */ s(de, { children: e && /* @__PURE__ */ s(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(
-        Xe,
+  }, [t, m, u]), /* @__PURE__ */ l(L, { children: t && /* @__PURE__ */ l(H, { open: t, onOpenChange: e, children: /* @__PURE__ */ E(q, { className: h.main, style: v, children: [
+    /* @__PURE__ */ E("div", { className: "flex flex-row-reverse items-center justify-between", children: [
+      /* @__PURE__ */ l(
+        Q,
         {
-          className: b.close,
-          trigger: /* @__PURE__ */ s(
-            U,
+          className: h.close,
+          trigger: /* @__PURE__ */ l(
+            O,
             {
               mode: "dark",
               focusMode: "light",
               noBorder: !0,
               label: "Close",
-              children: /* @__PURE__ */ s(Ue, { monotone: !0 })
+              children: /* @__PURE__ */ l(j, { monotone: !0 })
             }
           )
         }
       ),
-      /* @__PURE__ */ s(He, { className: b.header, children: t })
+      /* @__PURE__ */ l(J, { className: h.header, children: r })
     ] }),
-    /* @__PURE__ */ s(qe, { className: b.content, children: a }),
-    i && /* @__PURE__ */ s("div", { className: b.footer, children: i })
+    /* @__PURE__ */ l(K, { className: h.content, children: s }),
+    o && /* @__PURE__ */ l("div", { className: h.footer, children: o })
   ] }) }) });
 };
 export {
-  q as MESSAGEBOX_CLASSNAME,
-  R as PANEL_CLASSNAME,
-  tt as Panel
+  M as MESSAGEBOX_CLASSNAME,
+  _ as PANEL_CLASSNAME,
+  oe as Panel
 };

package/dist/index.d.ts

@@ -50,14 +50,19 @@ type PanelProps = {
 	animationType?: "slide" | "fade";
 	/**
 	 * The maximum width of the Panel when kind is "panel".
-	 * NOTE: This only applies to panels, not messageboxes.
-	 * NOTE: The max-width only takes effect at the medium breakpoint and above (768px+).
-	 * At smaller viewports, the panel will take the full screen width.
+	 * NOTE: This does not affect messageboxes, which have a fixed width.
 	 * @default "medium"
 	 */
 	maxWidth?: "small" | "medium" | "large";
+	/**
+	 * The maximum height of the Panel or Messagebox.
+	 * For panels: defaults to "large" (95%) if not specified.
+	 * For messageboxes: no max-height is applied unless explicitly set.
+	 * @default "large" (for panels only)
+	 */
+	maxHeight?: "small" | "medium" | "large";
 };
 
-declare const Panel: ({ open, onOpenChange, title, children, footer, borderMode, kind, className, animation, animationType, maxWidth, }: PanelProps) => react_jsx_runtime.JSX.Element;
+declare const Panel: ({ open, onOpenChange, title, children, footer, borderMode, kind, className, animation, animationType, maxWidth, maxHeight, }: PanelProps) => react_jsx_runtime.JSX.Element;
 
 export { MESSAGEBOX_CLASSNAME, PANEL_CLASSNAME, Panel };

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 v3.0.0
+  @versini/ui-panel v3.1.0
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_PANEL__ || (window.__VERSINI_UI_PANEL__ = {
-    version: "3.0.0",
-    buildTime: "09/01/2025 03:18 PM EDT",
+    version: "3.1.0",
+    buildTime: "10/11/2025 12:42 PM EDT",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-panel",
-	"version": "3.0.0",
+	"version": "3.1.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -37,22 +37,22 @@
 		"test": "vitest run"
 	},
 	"peerDependencies": {
-		"react": "^19.0.0",
-		"react-dom": "^19.0.0"
+		"react": "^19.1.0",
+		"react-dom": "^19.1.0"
 	},
 	"devDependencies": {
 		"@testing-library/jest-dom": "6.8.0"
 	},
 	"dependencies": {
 		"@tailwindcss/typography": "0.5.16",
-		"@versini/ui-button": "8.0.0",
+		"@versini/ui-button": "8.0.1",
 		"@versini/ui-icons": "4.11.0",
-		"@versini/ui-modal": "3.0.0",
+		"@versini/ui-modal": "3.0.1",
 		"clsx": "2.1.1",
 		"tailwindcss": "4.1.12"
 	},
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "70a47e9e30172dbb7b36306773fe9511e437fba6"
+	"gitHead": "731554d2c2fc2ae1c3c62ffbe09eba2b77308a70"
 }