@versini/ui-panel 2.0.9 → 2.2.0

package/README.md

@@ -1,3 +1,46 @@
 # @versini/ui-panel
 
-A simple panel component for React.
+[![npm version](https://img.shields.io/npm/v/@versini/ui-panel?style=flat-square)](https://www.npmjs.com/package/@versini/ui-panel)
+
+> An accessible React slide-out panel component built with TypeScript and TailwindCSS.
+
+The Panel component provides slide-out panels and drawers with focus management, keyboard navigation, and customizable positioning.
+
+
+## Table of Contents
+
+- [Features](#features)
+- [Installation](#installation)
+- [Usage](#usage)
+
+## Installation
+
+```bash
+npm install @versini/ui-panel
+```
+
+> **Note**: This component requires TailwindCSS and the `@versini/ui-styles` plugin for proper styling. See the [root README](../../README.md#tailwindcss-setup) for complete setup instructions.
+
+## Usage
+
+```tsx
+import { Panel } from "@versini/ui-panel";
+import { useState } from "react";
+
+function App() {
+  const [open, setOpen] = useState(false);
+  
+  return (
+    <>
+      <button onClick={() => setOpen(true)}>Open Panel</button>
+      <Panel
+        title="Panel Title"
+        open={open}
+        onOpenChange={setOpen}
+      >
+        Panel content goes here.
+      </Panel>
+    </>
+  );
+}
+```

package/dist/components/Panel/Panel.js

@@ -1,64 +1,64 @@
-import { jsx as l, jsxs as T, Fragment as J } from "react/jsx-runtime";
-import * as f from "react";
-import z, { useRef as I, useLayoutEffect as G, useEffect as B, useState as K, useMemo as Q, useCallback as ue, useId as Z } from "react";
+import { jsx as l, jsxs as L, Fragment as J } from "react/jsx-runtime";
+import * as h from "react";
+import F, { useRef as N, useLayoutEffect as Y, useEffect as B, useState as K, useMemo as Q, useCallback as ue, useId as Z } from "react";
 import n from "clsx";
 import { useFloating as me, useClick as ge, useDismiss as he, useRole as fe, useInteractions as be, useMergeRefs as ve, FloatingPortal as ye, FloatingOverlay as pe, FloatingFocusManager as ke } from "@floating-ui/react";
-const Y = "av-messagebox", H = "av-panel", W = "av-button", F = "icon", ee = "button", $ = "link", xe = ({
+const H = "av-messagebox", R = "av-panel", q = "av-button", V = "icon", ee = "button", z = "link", we = ({
   type: e,
   size: t,
   labelRight: r,
   labelLeft: a,
-  align: o,
-  animated: i
+  align: i,
+  animated: o
 }) => {
-  const c = "max-h-8 py-0 px-2", u = "max-h-9 h-8 px-3", s = "max-h-12 py-2 px-4";
+  const c = "max-h-8 py-0 px-2", d = "max-h-9 h-8 px-3", s = "max-h-12 py-2 px-4";
   switch (e) {
     case ee:
-    case $:
+    case z:
       return n({
         [c]: t === "small",
-        [u]: t === "medium",
+        [d]: t === "medium",
         [s]: t === "large"
       });
-    case F:
+    case V:
       return n("flex items-center", {
-        "justify-center": o === "center",
-        "justify-start": o === "left",
-        "justify-end": o === "right",
-        "h-6 w-6 p-0": t === "small" && !i && !(r || a),
-        "h-6 px-2": t === "small" && !i && (r || a),
-        "h-8 w-8 p-1": t === "medium" && !i && !(r || a),
-        "h-8 px-3": t === "medium" && !i && (r || a),
-        "h-12 w-12 p-2": t === "large" && !i && !(r || a),
-        "h-12 px-4": t === "large" && !i && (r || a),
-        "h-6 py-0": t === "small" && i && !(r || a),
-        "h-6": t === "small" && i && (r || a),
-        "h-8 py-1": t === "medium" && i && !(r || a),
-        "h-8": t === "medium" && i && (r || a),
-        "h-12 py-2": t === "large" && i && !(r || a),
-        "h-12": t === "large" && i && (r || a)
+        "justify-center": i === "center",
+        "justify-start": i === "left",
+        "justify-end": i === "right",
+        "h-6 w-6 p-0": t === "small" && !o && !(r || a),
+        "h-6 px-2": t === "small" && !o && (r || a),
+        "h-8 w-8 p-1": t === "medium" && !o && !(r || a),
+        "h-8 px-3": t === "medium" && !o && (r || a),
+        "h-12 w-12 p-2": t === "large" && !o && !(r || a),
+        "h-12 px-4": t === "large" && !o && (r || a),
+        "h-6 py-0": t === "small" && o && !(r || a),
+        "h-6": t === "small" && o && (r || a),
+        "h-8 py-1": t === "medium" && o && !(r || a),
+        "h-8": t === "medium" && o && (r || a),
+        "h-12 py-2": t === "large" && o && !(r || a),
+        "h-12": t === "large" && o && (r || a)
       });
   }
-}, we = ({
+}, xe = ({
   type: e,
   size: t,
   labelRight: r,
   labelLeft: a
 }) => {
-  const o = "text-sm font-medium", i = "text-base font-medium", c = "text-lg font-medium";
+  const i = "text-sm font-medium", o = "text-base font-medium", c = "text-lg font-medium";
   switch (e) {
     case ee:
-    case $:
+    case z:
       return n({
-        "text-center": e === $,
-        [o]: t === "small",
-        [i]: t === "medium",
+        "text-center": e === z,
+        [i]: t === "small",
+        [o]: t === "medium",
         [c]: t === "large"
       });
-    case F:
+    case V:
       return n({
-        [o]: t === "small" && (r || a),
-        [i]: t === "medium" && (r || a),
+        [i]: t === "small" && (r || a),
+        [o]: t === "medium" && (r || a),
         [c]: t === "large" && (r || a)
       });
   }
@@ -252,69 +252,68 @@ const Y = "av-messagebox", H = "av-panel", W = "av-button", F = "icon", ee = "bu
   className: t,
   raw: r,
   mode: a,
-  focusMode: o,
-  disabled: i,
+  focusMode: i,
+  disabled: o,
   fullWidth: c,
-  size: u,
+  size: d,
   noBorder: s,
   labelRight: g,
-  labelLeft: b,
-  noBackground: m,
-  variant: d,
-  truncate: h,
-  align: x,
-  radius: E,
-  animated: w
-}) => (d || (d = "primary"), r ? n(W, t) : n(
-  W,
+  labelLeft: v,
+  noBackground: u,
+  variant: m,
+  truncate: f,
+  align: b,
+  radius: x,
+  animated: I
+}) => (m || (m = "primary"), r ? n(q, t) : n(
+  q,
   Ie({
     mode: a,
-    variant: d,
-    noBackground: m,
-    truncate: h
+    variant: m,
+    noBackground: u,
+    truncate: f
   }),
-  _e({ mode: a, noBackground: m, variant: d }),
-  Ne({ radius: E }),
-  xe({
+  _e({ mode: a, noBackground: u, variant: m }),
+  Ne({ radius: x }),
+  we({
     type: e,
-    size: u,
+    size: d,
     labelRight: g,
-    labelLeft: b,
-    align: x,
-    animated: w
+    labelLeft: v,
+    align: b,
+    animated: I
   }),
-  we({ type: e, size: u, labelRight: g, labelLeft: b }),
-  Be({ mode: a, variant: d, noBorder: s }),
-  Se({ focusMode: o }),
-  Ee({ mode: a, variant: d, disabled: i }),
-  Ce({ mode: a, variant: d, disabled: i }),
+  xe({ type: e, size: d, labelRight: g, labelLeft: v }),
+  Be({ mode: a, variant: m, noBorder: s }),
+  Se({ focusMode: i }),
+  Ee({ mode: a, variant: m, disabled: o }),
+  Ce({ mode: a, variant: m, disabled: o }),
   {
     "w-full": c,
-    "disabled:cursor-not-allowed disabled:opacity-50": i
+    "disabled:cursor-not-allowed disabled:opacity-50": o
   },
   n({
-    "transition-[width] duration-300 ease-in": w
+    "transition-[width] duration-300 ease-in": I
   }),
   t
 )), Le = (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);
-}, re = z.forwardRef((e, t) => {
-  const { onClick: r, noInternalClick: a = !1, ...o } = e;
+  !t && (!document.activeElement || document.activeElement !== e.currentTarget) && typeof e?.currentTarget?.focus == "function" && e.currentTarget.focus(), typeof r == "function" && r(e);
+}, re = F.forwardRef((e, t) => {
+  const { onClick: r, noInternalClick: a = !1, ...i } = e;
   return /* @__PURE__ */ l(
     "button",
     {
       ref: t,
-      onClick: (i) => {
-        Le(i, a, r);
+      onClick: (o) => {
+        Le(o, a, r);
       },
-      ...o
+      ...i
     }
   );
 });
 re.displayName = "BaseButton";
 function Oe() {
-  const e = I(!1);
+  const e = N(!1);
   return B(() => (e.current = !0, () => {
     e.current = !1;
   }), []), ue(() => e.current, []);
@@ -338,92 +337,92 @@ const Pe = {
   right: 0
 };
 function D(e) {
-  const t = Oe(), r = I(0), a = I(null), [o, i] = K(Pe), c = Q(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((u) => {
-    const s = u[0];
+  const t = Oe(), r = N(0), a = N(null), [i, o] = K(Pe), c = Q(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((d) => {
+    const s = d[0];
     s && (cancelAnimationFrame(r.current), r.current = requestAnimationFrame(() => {
-      a.current && t() && i(s.contentRect);
+      a.current && t() && o(s.contentRect);
     }));
   }), [t]);
-  return B(() => (a.current && (c == null || c.observe(a.current, e)), () => {
-    c == null || c.disconnect(), r.current && cancelAnimationFrame(r.current);
-  }), [c, e]), [a, o];
+  return B(() => (a.current && c?.observe(a.current, e), () => {
+    c?.disconnect(), r.current && cancelAnimationFrame(r.current);
+  }), [c, e]), [a, i];
 }
-const R = {
+const M = {
   small: 24,
   // w-6
   medium: 32,
   // w-8
   large: 48
   // w-12
-}, De = {
-  small: 8 * 2,
+}, $e = {
+  small: 16,
   // px-2 x 2
-  medium: 12 * 2,
+  medium: 24,
   // px-3 x 2
-  large: 16 * 2
+  large: 32
   // px-4 x 2
-}, $e = 2, ze = 300, V = z.forwardRef(
+}, De = 2, ze = 300, U = F.forwardRef(
   ({
     children: e,
     disabled: t = !1,
     mode: r = "system",
     focusMode: a = "system",
-    fullWidth: o = !1,
-    className: i,
+    fullWidth: i = !1,
+    className: o,
     type: c = "button",
-    raw: u = !1,
+    raw: d = !1,
     noBorder: s = !1,
     "aria-label": g,
-    label: b,
-    size: m = "medium",
-    labelRight: d,
-    labelLeft: h,
-    noBackground: x = !1,
-    align: E = "center",
-    radius: w = "large",
+    label: v,
+    size: u = "medium",
+    labelRight: m,
+    labelLeft: f,
+    noBackground: b = !1,
+    align: x = "center",
+    radius: I = "large",
     variant: ae = "primary",
     iconClassName: ie,
-    animated: p = !1,
+    animated: k = !1,
     ...oe
   }, ne) => {
     const le = Te({
-      type: F,
+      type: V,
       mode: r,
       focusMode: a,
-      fullWidth: o,
+      fullWidth: i,
       disabled: t,
-      raw: u,
-      className: i,
+      raw: d,
+      className: o,
       noBorder: s,
-      size: m,
-      labelRight: d,
-      labelLeft: h,
-      noBackground: x,
-      align: E,
-      radius: w,
+      size: u,
+      labelRight: m,
+      labelLeft: f,
+      noBackground: b,
+      align: x,
+      radius: I,
       variant: ae,
-      animated: p
-    }), ce = Re({ mode: r, raw: u, iconClassName: ie }), U = Me({ animated: p }), se = "flex items-center justify-center relative w-full h-full overflow-hidden", [v, O] = D(), [y, A] = D(), [S, j] = D(), P = I(0), k = I(null), _ = I(null), de = Ae([ne, k]);
-    return G(() => {
-      S && S.current && p && (P.current = j.width + De[m] + (s ? 0 : $e), k.current && !k.current.style.width && (k.current.style.width = `${R[m]}px`));
-    }, [j, S, m, s, p]), G(() => {
-      if (k && k.current && p) {
-        let N = R[m];
-        d && v && O.width > 0 ? N = O.width + P.current : h && y && A.width > 0 && (N = A.width + P.current), _.current && clearTimeout(_.current), N !== parseInt(k.current.style.width || "0", 10) && (v.current && (v.current.style.opacity = "0"), y.current && (y.current.style.opacity = "0"), k.current.style.width = `${N}px`, N > R[m] && (_.current = setTimeout(() => {
-          v.current && d && (v.current.style.opacity = "1"), y.current && h && (y.current.style.opacity = "1"), _.current = null;
-        }, ze * 0.8))), N === R[m] && (v.current && (v.current.style.opacity = "0"), y.current && (y.current.style.opacity = "0"));
+      animated: k
+    }), ce = Re({ mode: r, raw: d, iconClassName: ie }), j = Me({ animated: k }), se = "flex items-center justify-center relative w-full h-full overflow-hidden", [y, A] = D(), [p, P] = D(), [S, G] = D(), $ = N(0), w = N(null), E = N(null), de = Ae([ne, w]);
+    return Y(() => {
+      S && S.current && k && ($.current = G.width + $e[u] + (s ? 0 : De), w.current && !w.current.style.width && (w.current.style.width = `${M[u]}px`));
+    }, [G, S, u, s, k]), Y(() => {
+      if (w && w.current && k) {
+        let C = M[u];
+        m && y && A.width > 0 ? C = A.width + $.current : f && p && P.width > 0 && (C = P.width + $.current), E.current && clearTimeout(E.current), C !== parseInt(w.current.style.width || "0", 10) && (y.current && (y.current.style.opacity = "0"), p.current && (p.current.style.opacity = "0"), w.current.style.width = `${C}px`, C > M[u] && (E.current = setTimeout(() => {
+          y.current && m && (y.current.style.opacity = "1"), p.current && f && (p.current.style.opacity = "1"), E.current = null;
+        }, ze * 0.8))), C === M[u] && (y.current && (y.current.style.opacity = "0"), p.current && (p.current.style.opacity = "0"));
       }
     }, [
-      O,
-      d,
-      v,
       A,
-      h,
-      y,
       m,
-      p
+      y,
+      P,
+      f,
+      p,
+      u,
+      k
     ]), B(() => () => {
-      _.current && clearTimeout(_.current);
+      E.current && clearTimeout(E.current);
     }, []), /* @__PURE__ */ l(
       re,
       {
@@ -431,50 +430,50 @@ const R = {
         className: le,
         disabled: t,
         type: c,
-        "aria-label": g || b,
+        "aria-label": g || v,
         ...oe,
-        children: /* @__PURE__ */ T("div", { className: se, children: [
+        children: /* @__PURE__ */ L("div", { className: se, children: [
           /* @__PURE__ */ l(
-            q,
+            X,
             {
-              label: h,
-              labelRef: y,
-              labelClass: U,
+              label: f,
+              labelRef: p,
+              labelClass: j,
               labelInnerClass: "pr-2",
-              initiallyHidden: p
+              initiallyHidden: k
             }
           ),
           /* @__PURE__ */ l("span", { ref: S, className: ce, children: e }),
           /* @__PURE__ */ l(
-            q,
+            X,
             {
-              label: d,
-              labelRef: v,
-              labelClass: U,
+              label: m,
+              labelRef: y,
+              labelClass: j,
               labelInnerClass: "pl-2",
-              initiallyHidden: p
+              initiallyHidden: k
             }
           )
         ] })
       }
     );
   }
-), q = ({
+), X = ({
   labelRef: e,
   labelClass: t,
   label: r,
   labelInnerClass: a,
-  initiallyHidden: o = !1
+  initiallyHidden: i = !1
 }) => /* @__PURE__ */ l(
   "span",
   {
     ref: e,
     className: t,
-    style: o ? { opacity: 0 } : void 0,
+    style: i ? { opacity: 0 } : void 0,
     children: r && /* @__PURE__ */ l("span", { className: a, children: r })
   }
 );
-V.displayName = "ButtonIcon";
+U.displayName = "ButtonIcon";
 /*!
   @versini/ui-button v6.0.9
   © 2025 gizmette.com
@@ -482,20 +481,20 @@ V.displayName = "ButtonIcon";
 try {
   window.__VERSINI_UI_BUTTON__ || (window.__VERSINI_UI_BUTTON__ = {
     version: "6.0.9",
-    buildTime: "07/14/2025 12:04 PM EDT",
+    buildTime: "08/04/2025 12:23 PM EDT",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
 } catch {
 }
-const Fe = z.forwardRef(
+const Fe = F.forwardRef(
   ({
     children: e,
     mode: t = "system",
     className: r,
     active: a = !1,
-    ...o
-  }, i) => {
+    ...i
+  }, o) => {
     const c = a ? n(
       "relative",
       "focus-within:static",
@@ -514,13 +513,13 @@ const Fe = z.forwardRef(
       }
     ) : "";
     return /* @__PURE__ */ l("div", { className: c, children: /* @__PURE__ */ l(
-      V,
+      U,
       {
         className: n("justify-center", r),
-        ref: i,
+        ref: o,
         mode: t,
         radius: "small",
-        ...o,
+        ...i,
         children: e
       }
     ) });
@@ -532,26 +531,26 @@ const Ve = ({
   fill: t,
   viewBox: r,
   className: a,
-  defaultViewBox: o,
-  size: i,
+  defaultViewBox: i,
+  size: o,
   title: c,
-  semantic: u = !1,
+  semantic: d = !1,
   ...s
 }) => {
-  const g = n(i, a);
-  return /* @__PURE__ */ l(J, { children: /* @__PURE__ */ T(
+  const g = n(o, a);
+  return /* @__PURE__ */ l(J, { children: /* @__PURE__ */ L(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       className: g,
-      viewBox: r || o,
+      viewBox: r || i,
       fill: t || "currentColor",
       role: "img",
-      "aria-hidden": !u,
+      "aria-hidden": !d,
       focusable: !1,
       ...s,
       children: [
-        c && u && /* @__PURE__ */ l("title", { children: c }),
+        c && d && /* @__PURE__ */ l("title", { children: c }),
         e
       ]
     }
@@ -575,7 +574,7 @@ const Ue = ({
   viewBox: t,
   title: r,
   monotone: a,
-  ...o
+  ...i
 }) => /* @__PURE__ */ l(
   Ve,
   {
@@ -584,7 +583,7 @@ const Ue = ({
     viewBox: t,
     className: e,
     title: r || "Close",
-    ...o,
+    ...i,
     children: /* @__PURE__ */ l(
       "path",
       {
@@ -607,37 +606,37 @@ try {
   });
 } catch {
 }
-const te = f.createContext(null);
+const te = h.createContext(null);
 function je({
   initialOpen: e = !1,
   open: t,
   onOpenChange: r
 } = {}) {
-  const [a, o] = f.useState(e), [i, c] = f.useState(), [u, s] = f.useState(), g = t ?? a, b = r ?? o, m = me({
+  const [a, i] = h.useState(e), [o, c] = h.useState(), [d, s] = h.useState(), g = t ?? a, v = r ?? i, u = me({
     open: g,
-    onOpenChange: b
-  }), d = m.context, h = ge(d, {
+    onOpenChange: v
+  }), m = u.context, f = ge(m, {
     enabled: t == null
-  }), x = he(d, {
+  }), b = he(m, {
     outsidePress: !1,
     outsidePressEvent: "mousedown"
-  }), E = fe(d), w = be([h, x, E]);
-  return f.useMemo(
+  }), x = fe(m), I = be([f, b, x]);
+  return h.useMemo(
     () => ({
       open: g,
-      setOpen: b,
-      ...w,
-      ...m,
-      labelId: i,
-      descriptionId: u,
+      setOpen: v,
+      ...I,
+      ...u,
+      labelId: o,
+      descriptionId: d,
       setLabelId: c,
       setDescriptionId: s
     }),
-    [g, b, w, m, i, u]
+    [g, v, I, u, o, d]
   );
 }
-const L = () => {
-  const e = f.useContext(te);
+const O = () => {
+  const e = h.useContext(te);
   if (e == null)
     throw new Error("Modal components must be wrapped in <Modal />");
   return e;
@@ -649,36 +648,36 @@ function Ge({
   const r = je(t);
   return /* @__PURE__ */ l(te.Provider, { value: r, children: e });
 }
-const Ye = f.forwardRef(function(e, t) {
-  const { context: r, ...a } = L(), o = ve([a.refs.setFloating, t]);
+const Ye = h.forwardRef(function(e, t) {
+  const { context: r, ...a } = O(), i = ve([a.refs.setFloating, t]);
   if (!r.open)
     return null;
-  const { overlayBackground: i, ...c } = e, u = n("grid place-items-center", {
-    [`${i}`]: i,
-    "bg-black sm:bg-black/[.8]": !i
+  const { overlayBackground: o, ...c } = e, d = n("grid place-items-center", {
+    [`${o}`]: o,
+    "bg-black sm:bg-black/[.8]": !o
   });
-  return /* @__PURE__ */ l(ye, { children: /* @__PURE__ */ l(pe, { className: u, lockScroll: !0, children: /* @__PURE__ */ l(ke, { context: r, children: /* @__PURE__ */ l(
+  return /* @__PURE__ */ l(ye, { children: /* @__PURE__ */ l(pe, { className: d, lockScroll: !0, children: /* @__PURE__ */ l(ke, { context: r, children: /* @__PURE__ */ l(
     "div",
     {
-      ref: o,
+      ref: i,
       "aria-labelledby": a.labelId,
       "aria-describedby": a.descriptionId,
       ...a.getFloatingProps(c),
       children: c.children
     }
   ) }) }) });
-}), He = f.forwardRef(function({ children: e, ...t }, r) {
-  const { setLabelId: a } = L(), o = Z();
-  return f.useLayoutEffect(() => (a(o), () => a(void 0)), [o, a]), /* @__PURE__ */ l("h1", { ...t, ref: r, id: o, children: e });
-}), We = f.forwardRef(function({ children: e, ...t }, r) {
-  const { setDescriptionId: a } = L(), o = Z();
-  return f.useLayoutEffect(() => (a(o), () => a(void 0)), [o, a]), /* @__PURE__ */ l("div", { ...t, ref: r, id: o, children: e });
-}), qe = f.forwardRef(function(e, t) {
-  const { setOpen: r } = L(), { trigger: a, className: o, ...i } = e, c = f.useCallback(() => r(!1), [r]);
-  return /* @__PURE__ */ l("div", { className: o, children: f.cloneElement(a, {
+}), He = h.forwardRef(function({ children: e, ...t }, r) {
+  const { setLabelId: a } = O(), i = Z();
+  return h.useLayoutEffect(() => (a(i), () => a(void 0)), [i, a]), /* @__PURE__ */ l("h1", { ...t, ref: r, id: i, children: e });
+}), qe = h.forwardRef(function({ children: e, ...t }, r) {
+  const { setDescriptionId: a } = O(), i = Z();
+  return h.useLayoutEffect(() => (a(i), () => a(void 0)), [i, a]), /* @__PURE__ */ l("div", { ...t, ref: r, id: i, children: e });
+}), Xe = h.forwardRef(function(e, t) {
+  const { setOpen: r } = O(), { trigger: a, className: i, ...o } = e, c = h.useCallback(() => r(!1), [r]);
+  return /* @__PURE__ */ l("div", { className: i, children: h.cloneElement(a, {
     ref: t,
     onClick: c,
-    ...i
+    ...o
   }) });
 });
 /*!
@@ -688,67 +687,72 @@ const Ye = f.forwardRef(function(e, t) {
 try {
   window.__VERSINI_UI_MODAL__ || (window.__VERSINI_UI_MODAL__ = {
     version: "2.0.5",
-    buildTime: "07/14/2025 12:04 PM EDT",
+    buildTime: "08/04/2025 12:23 PM EDT",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
 } catch {
 }
-const C = "panel", M = "messagebox", Xe = ({
+const _ = "panel", T = "messagebox", We = ({
   className: e,
   kind: t,
   borderMode: r,
-  animation: a
+  animation: a,
+  maxWidth: i = "medium"
 }) => ({
   main: n("prose prose-lighter flex flex-col bg-surface-medium", {
     "duration-200 ease-out": a,
-    [`${H} max-h-full sm:max-h-[95%] min-h-full sm:min-h-[10rem] sm:rounded-lg sm:border-2`]: t === C,
-    [`${H} w-full sm:w-[95%] md:max-w-2xl`]: t === C && !e,
-    [`${Y} rounded-lg border-2`]: t === M,
-    [`${Y} w-[95%] sm:w-[50%] md:max-w-2xl`]: t === M && !e,
+    [`${R} max-h-full sm:max-h-[95%] min-h-full sm:min-h-[10rem] sm:rounded-lg sm:border-2`]: t === _,
+    [`${R} w-full sm:w-[95%] md:max-w-2xl`]: t === _ && !e && i === "small",
+    [`${R} w-full sm:w-[95%] md:max-w-3xl`]: t === _ && !e && i === "medium",
+    [`${R} w-full sm:w-[95%] md:max-w-4xl`]: t === _ && !e && i === "large",
+    [`${H} rounded-lg border-2`]: t === T,
+    [`${H} w-[95%] sm:w-[50%] md:max-w-2xl`]: t === T && !e,
     [`${e}`]: !!e,
-    "sm:border-border-dark": r === "dark" && t === C,
-    "sm:border-border-accent": r === "light" && t === C,
-    "border-border-dark": r === "dark" && t === M,
-    "border-border-accent": r === "light" && t === M
+    "sm:border-border-dark": r === "dark" && t === _,
+    "sm:border-border-accent": r === "light" && t === _,
+    "border-border-dark": r === "dark" && t === T,
+    "border-border-accent": r === "light" && 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"
-}), Je = "slide", X = "fade", rr = ({
+}), Je = "slide", W = "fade", rr = ({
   open: e,
   onOpenChange: t,
   title: r,
   children: a,
-  footer: o,
-  borderMode: i = "light",
-  kind: c = C,
-  className: u,
+  footer: i,
+  borderMode: o = "light",
+  kind: c = _,
+  className: d,
   animation: s = !1,
-  animationType: g = Je
+  animationType: g = Je,
+  maxWidth: v = "medium"
 }) => {
-  const b = I(""), [m, d] = K(
-    s ? g === X ? { opacity: 0 } : {
+  const u = N(""), [m, f] = K(
+    s ? g === W ? { opacity: 0 } : {
       transform: "translateY(-100vh)"
     } : {}
-  ), h = Xe({
-    className: u,
+  ), b = We({
+    className: d,
     kind: c,
-    borderMode: i,
-    animation: s
+    borderMode: o,
+    animation: s,
+    maxWidth: v
   });
-  return B(() => (e && (b.current = document.title, document.title = `${r} | ${b.current}`), () => {
-    e && (document.title = b.current);
+  return B(() => (e && (u.current = document.title, document.title = `${r} | ${u.current}`), () => {
+    e && (document.title = u.current);
   }), [r, e]), B(() => {
     if (s && e) {
-      d(
-        s ? g === X ? { opacity: 0 } : {
+      f(
+        s ? g === W ? { opacity: 0 } : {
           transform: "translateY(-666vh)"
         } : {}
       );
       const x = setTimeout(() => {
-        d(
+        f(
           s ? g === "fade" ? { opacity: 1 } : {
             transform: "translateY(0)"
           } : {}
@@ -756,14 +760,14 @@ const C = "panel", M = "messagebox", Xe = ({
       }, 100);
       return () => clearTimeout(x);
     }
-  }, [e, s, g]), /* @__PURE__ */ l(J, { children: e && /* @__PURE__ */ l(Ge, { open: e, onOpenChange: t, children: /* @__PURE__ */ T(Ye, { className: h.main, style: m, children: [
-    /* @__PURE__ */ T("div", { className: "flex flex-row-reverse items-center justify-between", children: [
+  }, [e, s, g]), /* @__PURE__ */ l(J, { children: e && /* @__PURE__ */ l(Ge, { open: e, onOpenChange: t, children: /* @__PURE__ */ L(Ye, { className: b.main, style: m, children: [
+    /* @__PURE__ */ L("div", { className: "flex flex-row-reverse items-center justify-between", children: [
       /* @__PURE__ */ l(
-        qe,
+        Xe,
         {
-          className: h.close,
+          className: b.close,
           trigger: /* @__PURE__ */ l(
-            V,
+            U,
             {
               mode: "dark",
               focusMode: "light",
@@ -774,14 +778,14 @@ const C = "panel", M = "messagebox", Xe = ({
           )
         }
       ),
-      /* @__PURE__ */ l(He, { className: h.header, children: r })
+      /* @__PURE__ */ l(He, { className: b.header, children: r })
     ] }),
-    /* @__PURE__ */ l(We, { className: h.content, children: a }),
-    o && /* @__PURE__ */ l("div", { className: h.footer, children: o })
+    /* @__PURE__ */ l(qe, { className: b.content, children: a }),
+    i && /* @__PURE__ */ l("div", { className: b.footer, children: i })
   ] }) }) });
 };
 export {
-  Y as MESSAGEBOX_CLASSNAME,
-  H as PANEL_CLASSNAME,
+  H as MESSAGEBOX_CLASSNAME,
+  R as PANEL_CLASSNAME,
   rr as Panel
 };

package/dist/index.d.ts

@@ -48,8 +48,16 @@ type PanelProps = {
 	 * @default "slide"
 	 */
 	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.
+	 * @default "medium"
+	 */
+	maxWidth?: "small" | "medium" | "large";
 };
 
-declare const Panel: ({ open, onOpenChange, title, children, footer, borderMode, kind, className, animation, animationType, }: PanelProps) => react_jsx_runtime.JSX.Element;
+declare const Panel: ({ open, onOpenChange, title, children, footer, borderMode, kind, className, animation, animationType, maxWidth, }: 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 v2.0.9
+  @versini/ui-panel v2.2.0
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_PANEL__ || (window.__VERSINI_UI_PANEL__ = {
-    version: "2.0.9",
-    buildTime: "07/14/2025 12:04 PM EDT",
+    version: "2.2.0",
+    buildTime: "08/04/2025 12:23 PM EDT",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-panel",
-	"version": "2.0.9",
+	"version": "2.2.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -27,6 +27,7 @@
 		"dev:types": "tsup --watch src",
 		"dev": "npm-run-all clean --parallel dev:js dev:types",
 		"lint": "biome lint src",
+		"lint:fix": "biome check src --write --no-errors-on-unmatched",
 		"prettier": "biome check --write --no-errors-on-unmatched",
 		"start": "static-server dist --port 5173",
 		"test:coverage:ui": "vitest --coverage --ui",
@@ -52,5 +53,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "097e81ba959c30dc2ee37ff9050981a02420360b"
+	"gitHead": "14d53d66c2f014604b12f5e3ef0bb8708c996c21"
 }