@versini/ui-panel 3.0.1 → 3.1.0

package/dist/components/Panel/Panel.js

@@ -1,35 +1,35 @@
-import { jsxs as v, jsx as n, Fragment as L } from "react/jsx-runtime";
+import { jsxs as E, jsx as l, Fragment as L } from "react/jsx-runtime";
 import { ButtonIcon as O } from "@versini/ui-button";
-import * as l from "react";
+import * as c from "react";
 import { useId as A, useRef as $, useState as R, useEffect as S } from "react";
-import E 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 k } from "@floating-ui/react";
-const C = "av-messagebox", I = "av-panel", z = ({
-  children: e,
-  fill: t,
+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: o,
-  defaultViewBox: s,
-  size: c,
-  title: i,
-  semantic: u = !1,
-  ...a
+  className: s,
+  defaultViewBox: o,
+  size: a,
+  title: n,
+  semantic: d = !1,
+  ...m
 }) => {
-  const d = E(c, o);
-  return /* @__PURE__ */ v(
+  const u = N(a, s);
+  return /* @__PURE__ */ E(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
-      className: d,
-      viewBox: r || s,
-      fill: t || "currentColor",
+      className: u,
+      viewBox: r || o,
+      fill: e || "currentColor",
       role: "img",
-      "aria-hidden": !u,
+      "aria-hidden": !d,
       focusable: !1,
-      ...a,
+      ...m,
       children: [
-        i && u && /* @__PURE__ */ n("title", { children: i }),
-        e
+        n && d && /* @__PURE__ */ l("title", { children: n }),
+        t
       ]
     }
   );
@@ -47,26 +47,26 @@ try {
   });
 } catch {
 }
-const G = ({
-  className: e,
-  viewBox: t,
+const j = ({
+  className: t,
+  viewBox: e,
   title: r,
-  monotone: o,
-  ...s
-}) => /* @__PURE__ */ n(
-  z,
+  monotone: s,
+  ...o
+}) => /* @__PURE__ */ l(
+  G,
   {
     defaultViewBox: "0 0 384 512",
     size: "size-5",
-    viewBox: t,
-    className: e,
+    viewBox: e,
+    className: t,
     title: r || "Close",
-    ...s,
-    children: /* @__PURE__ */ n(
+    ...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: o ? "1" : "0.4"
+        opacity: s ? "1" : "0.4"
       }
     )
   }
@@ -84,78 +84,78 @@ try {
   });
 } catch {
 }
-const y = l.createContext(null);
-function j({
-  initialOpen: e = !1,
-  open: t,
+const y = c.createContext(null);
+function X({
+  initialOpen: t = !1,
+  open: e,
   onOpenChange: r
 } = {}) {
-  const [o, s] = l.useState(e), [c, i] = l.useState(), [u, a] = l.useState(), d = t ?? o, w = r ?? s, m = T({
-    open: d,
+  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
-  }), p = m.context, g = D(p, {
-    enabled: t == null
-  }), f = P(p, {
+  }), f = p.context, v = D(f, {
+    enabled: e == null
+  }), x = P(f, {
     outsidePress: !1,
     outsidePressEvent: "mousedown"
-  }), b = B(p), N = V([g, f, b]);
-  return l.useMemo(
+  }), h = B(f), I = V([v, x, h]);
+  return c.useMemo(
     () => ({
-      open: d,
+      open: u,
       setOpen: w,
-      ...N,
-      ...m,
-      labelId: c,
-      descriptionId: u,
-      setLabelId: i,
-      setDescriptionId: a
+      ...I,
+      ...p,
+      labelId: a,
+      descriptionId: d,
+      setLabelId: n,
+      setDescriptionId: m
     }),
-    [d, w, N, m, c, u]
+    [u, w, I, p, a, d]
   );
 }
-const x = () => {
-  const e = l.useContext(y);
-  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 X({
-  children: e,
-  ...t
+function H({
+  children: t,
+  ...e
 }) {
-  const r = j(t);
-  return /* @__PURE__ */ n(y.Provider, { value: r, children: e });
+  const r = X(e);
+  return /* @__PURE__ */ l(y.Provider, { value: r, children: t });
 }
-const q = l.forwardRef(function(e, t) {
-  const { context: r, ...o } = x(), s = F([o.refs.setFloating, t]);
+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: c, ...i } = e, u = E("grid place-items-center", {
-    [`${c}`]: c,
-    "bg-black sm:bg-black/[.8]": !c
+  const { overlayBackground: a, ...n } = t, d = N("grid place-items-center", {
+    [`${a}`]: a,
+    "bg-black sm:bg-black/[.8]": !a
   });
-  return /* @__PURE__ */ n(U, { children: /* @__PURE__ */ n(Y, { className: u, lockScroll: !0, children: /* @__PURE__ */ n(k, { context: r, children: /* @__PURE__ */ n(
+  return /* @__PURE__ */ l(U, { children: /* @__PURE__ */ l(Y, { className: d, lockScroll: !0, children: /* @__PURE__ */ l(z, { context: r, children: /* @__PURE__ */ l(
     "div",
     {
-      ref: s,
-      "aria-labelledby": o.labelId,
-      "aria-describedby": o.descriptionId,
-      ...o.getFloatingProps(i),
-      children: i.children
+      ref: o,
+      "aria-labelledby": s.labelId,
+      "aria-describedby": s.descriptionId,
+      ...s.getFloatingProps(n),
+      children: n.children
     }
   ) }) }) });
-}), H = l.forwardRef(function({ children: e, ...t }, r) {
-  const { setLabelId: o } = x(), s = A();
-  return l.useLayoutEffect(() => (o(s), () => o(void 0)), [s, o]), /* @__PURE__ */ n("h1", { ...t, ref: r, id: s, children: e });
-}), J = l.forwardRef(function({ children: e, ...t }, r) {
-  const { setDescriptionId: o } = x(), s = A();
-  return l.useLayoutEffect(() => (o(s), () => o(void 0)), [s, o]), /* @__PURE__ */ n("div", { ...t, ref: r, id: s, children: e });
-}), K = l.forwardRef(function(e, t) {
-  const { setOpen: r } = x(), { trigger: o, className: s, ...c } = e, i = l.useCallback(() => r(!1), [r]);
-  return /* @__PURE__ */ n("div", { className: s, children: l.cloneElement(o, {
-    ref: t,
-    onClick: i,
-    ...c
+}), 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
   }) });
 });
 /*!
@@ -165,105 +165,123 @@ const q = l.forwardRef(function(e, t) {
 try {
   window.__VERSINI_UI_MODAL__ || (window.__VERSINI_UI_MODAL__ = {
     version: "3.0.1",
-    buildTime: "09/01/2025 04:01 PM EDT",
+    buildTime: "10/11/2025 12:41 PM EDT",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
 } catch {
 }
-const h = "panel", _ = "messagebox", Q = ({
-  className: e,
-  kind: t,
+const i = "panel", g = "messagebox", Z = ({
+  className: t,
+  kind: e,
   borderMode: r,
-  animation: o,
-  maxWidth: s = "medium"
-}) => ({
-  main: E("prose prose-lighter flex flex-col bg-surface-dark", {
-    "duration-200 ease-out": o,
-    [`${I} max-h-full sm:max-h-[95%] min-h-full sm:min-h-[10rem] sm:rounded-lg sm:border-2`]: t === h,
-    [`${I} w-full sm:w-[95%] md:max-w-2xl`]: t === h && !e && s === "small",
-    [`${I} w-full sm:w-[95%] md:max-w-3xl`]: t === h && !e && s === "medium",
-    [`${I} w-full sm:w-[95%] md:max-w-4xl`]: t === h && !e && s === "large",
-    [`${C} rounded-lg border-2`]: t === _,
-    [`${C} w-[95%] sm:w-[50%] md:max-w-2xl`]: t === _ && !e,
-    [`${e}`]: !!e,
-    "sm:border-border-dark": r === "dark" && t === h,
-    "sm:border-border-accent": r === "light" && t === h,
-    "border-border-dark": r === "dark" && t === _,
-    "border-border-accent": r === "light" && 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"
-}), Z = "slide", M = "fade", se = ({
-  open: e,
-  onOpenChange: t,
+  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: o,
-  footer: s,
-  borderMode: c = "light",
-  kind: i = h,
-  className: u,
-  animation: a = !1,
-  animationType: d = Z,
-  maxWidth: w = "medium"
+  children: s,
+  footer: o,
+  borderMode: a = "light",
+  kind: n = i,
+  className: d,
+  animation: m = !1,
+  animationType: u = W,
+  maxWidth: w = "medium",
+  maxHeight: p
 }) => {
-  const m = $(""), [p, g] = R(
-    a ? d === M ? { opacity: 0 } : {
+  const f = $(""), [v, x] = R(
+    m ? u === C ? { opacity: 0 } : {
       transform: "translateY(-100vh)"
     } : {}
-  ), f = Q({
-    className: u,
-    kind: i,
-    borderMode: c,
-    animation: a,
-    maxWidth: w
+  ), h = Z({
+    className: d,
+    kind: n,
+    borderMode: a,
+    animation: m,
+    maxWidth: w,
+    maxHeight: p
   });
-  return S(() => (e && (m.current = document.title, document.title = `${r} | ${m.current}`), () => {
-    e && (document.title = m.current);
-  }), [r, e]), S(() => {
-    if (a && e) {
-      g(
-        a ? d === M ? { 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 b = setTimeout(() => {
-        g(
-          a ? d === "fade" ? { opacity: 1 } : {
+      const I = setTimeout(() => {
+        x(
+          m ? u === "fade" ? { opacity: 1 } : {
             transform: "translateY(0)"
           } : {}
         );
       }, 100);
-      return () => clearTimeout(b);
+      return () => clearTimeout(I);
     }
-  }, [e, a, d]), /* @__PURE__ */ n(L, { children: e && /* @__PURE__ */ n(X, { open: e, onOpenChange: t, children: /* @__PURE__ */ v(q, { className: f.main, style: p, children: [
-    /* @__PURE__ */ v("div", { className: "flex flex-row-reverse items-center justify-between", children: [
-      /* @__PURE__ */ n(
-        K,
+  }, [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: f.close,
-          trigger: /* @__PURE__ */ n(
+          className: h.close,
+          trigger: /* @__PURE__ */ l(
             O,
             {
               mode: "dark",
               focusMode: "light",
               noBorder: !0,
               label: "Close",
-              children: /* @__PURE__ */ n(G, { monotone: !0 })
+              children: /* @__PURE__ */ l(j, { monotone: !0 })
             }
           )
         }
       ),
-      /* @__PURE__ */ n(H, { className: f.header, children: r })
+      /* @__PURE__ */ l(J, { className: h.header, children: r })
     ] }),
-    /* @__PURE__ */ n(J, { className: f.content, children: o }),
-    s && /* @__PURE__ */ n("div", { className: f.footer, children: s })
+    /* @__PURE__ */ l(K, { className: h.content, children: s }),
+    o && /* @__PURE__ */ l("div", { className: h.footer, children: o })
   ] }) }) });
 };
 export {
-  C as MESSAGEBOX_CLASSNAME,
-  I as PANEL_CLASSNAME,
-  se 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.1
+  @versini/ui-panel v3.1.0
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_PANEL__ || (window.__VERSINI_UI_PANEL__ = {
-    version: "3.0.1",
-    buildTime: "09/01/2025 04:01 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.1",
+	"version": "3.1.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -54,5 +54,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "dcc216644c8c3e7d43a49ea655a22aed21fa4b83"
+	"gitHead": "731554d2c2fc2ae1c3c62ffbe09eba2b77308a70"
 }