@versini/ui-panel 1.2.2 → 1.2.3

package/dist/index.js

@@ -1,20 +1,22 @@
-import { jsx as n, jsxs as y, Fragment as U } from "react/jsx-runtime";
-import o from "clsx";
-import E, { lazy as A, useRef as z, useEffect as O, Suspense as j } from "react";
+import { jsx as i, jsxs as _, Fragment as L } from "react/jsx-runtime";
+import d from "clsx";
+import * as u from "react";
+import T, { useId as P, useRef as j, useEffect as F } from "react";
+import { useFloating as G, useClick as D, useDismiss as W, useRole as X, useInteractions as Y, useMergeRefs as q, FloatingPortal as H, FloatingOverlay as J, FloatingFocusManager as K } from "@floating-ui/react";
 /*!
-  @versini/ui-panel v1.2.2
+  @versini/ui-panel v1.2.3
   © 2024 gizmette.com
 */
 try {
   window.__VERSINI_UI_PANEL__ || (window.__VERSINI_UI_PANEL__ = {
-    version: "1.2.2",
-    buildTime: "12/26/2024 06:05 PM EST",
+    version: "1.2.3",
+    buildTime: "12/27/2024 07:18 PM EST",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
 } catch {
 }
-const M = "av-messagebox", C = "av-panel", R = "av-button";
+const R = "av-messagebox", C = "av-panel", $ = "av-button";
 /*!
   @versini/ui-spacing v1.1.0
   © 2024 gizmette.com
@@ -22,13 +24,13 @@ const M = "av-messagebox", C = "av-panel", R = "av-button";
 try {
   window.__VERSINI_UI_SPACING__ || (window.__VERSINI_UI_SPACING__ = {
     version: "1.1.0",
-    buildTime: "12/26/2024 06:05 PM EST",
+    buildTime: "12/27/2024 07:18 PM EST",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
 } catch {
 }
-const G = (e) => {
+const Q = (e) => {
   let r = "";
   if (typeof e == "number" || typeof e == "string")
     r = "m-" + e;
@@ -37,32 +39,32 @@ const G = (e) => {
     (e == null ? void 0 : e.t) !== void 0 && t.push(`mt-${e.t}`), (e == null ? void 0 : e.r) !== void 0 && t.push(`mr-${e.r}`), (e == null ? void 0 : e.b) !== void 0 && t.push(`mb-${e.b}`), (e == null ? void 0 : e.l) !== void 0 && t.push(`ml-${e.l}`), r = t.join(" ");
   }
   return r;
-}, T = "icon", W = "button", D = "link", H = ({
+}, B = "icon", Z = "button", ee = "link", te = ({
   type: e,
   size: r,
   labelRight: t,
   labelLeft: a,
-  align: d
+  align: o
 }) => {
-  const l = "text-sm font-medium max-h-8 py-0", g = "text-base font-medium max-h-9 py-1", i = "text-lg font-medium max-h-12 py-2";
+  const n = "text-sm font-medium max-h-8 py-0", c = "text-base font-medium max-h-9 py-1", l = "text-lg font-medium max-h-12 py-2";
   switch (e) {
-    case W:
-      return o("px-4", {
-        [l]: r === "small",
-        [g]: r === "medium",
-        [i]: r === "large"
+    case Z:
+      return d("px-4", {
+        [n]: r === "small",
+        [c]: r === "medium",
+        [l]: r === "large"
       });
-    case D:
-      return o("px-4 text-center", {
-        [l]: r === "small",
-        [g]: r === "medium",
-        [i]: r === "large"
+    case ee:
+      return d("px-4 text-center", {
+        [n]: r === "small",
+        [c]: r === "medium",
+        [l]: r === "large"
       });
-    case T:
-      return o("inline-flex items-center", {
-        "justify-center": d === "center",
-        "justify-start": d === "left",
-        "justify-end": d === "right",
+    case B:
+      return d("inline-flex items-center", {
+        "justify-center": o === "center",
+        "justify-start": o === "left",
+        "justify-end": o === "right",
         "h-6 w-6 p-0": r === "small" && !(t || a),
         "h-6 px-4 text-sm font-medium": r === "small" && (t || a),
         "h-8 w-8 p-1": r === "medium" && !(t || a),
@@ -71,7 +73,7 @@ const G = (e) => {
         "h-12 px-4 text-lg font-medium": r === "large" && (t || a)
       });
   }
-}, X = ({
+}, re = ({
   mode: e,
   noBackground: r,
   noTruncate: t,
@@ -80,7 +82,7 @@ const G = (e) => {
   if (r)
     return "not-prose rounded-full";
   if (a === "primary")
-    return o("not-prose rounded-full", {
+    return d("not-prose rounded-full", {
       truncate: !t,
       "bg-action-dark text-copy-light": e === "dark",
       "bg-action-light text-copy-lighter": e === "light",
@@ -88,7 +90,7 @@ const G = (e) => {
       "bg-action-light text-copy-lighter dark:bg-action-dark dark:text-copy-light": e === "alt-system"
     });
   if (a === "secondary")
-    return o("not-prose rounded-full", {
+    return d("not-prose rounded-full", {
       truncate: !t,
       "bg-action-dark text-copy-light": e === "light",
       "bg-action-light text-copy-lighter": e === "dark",
@@ -96,14 +98,14 @@ const G = (e) => {
       "bg-action-light text-copy-lighter dark:bg-action-dark dark:text-copy-light": e === "system"
     });
   if (a === "danger")
-    return o("not-prose rounded-full", {
+    return d("not-prose rounded-full", {
       truncate: !t,
       "bg-action-danger-dark text-copy-light": e === "dark",
       "bg-action-danger-light text-copy-lighter": e === "light",
       "bg-action-danger-dark text-copy-light dark:bg-action-danger-light dark:text-copy-lighter": e === "system",
       "bg-action-danger-light text-copy-lighter dark:bg-action-danger-dark dark:text-copy-light": e === "alt-system"
     });
-}, Y = ({
+}, ae = ({
   mode: e,
   disabled: r,
   variant: t
@@ -111,27 +113,27 @@ const G = (e) => {
   if (r)
     return "";
   if (t === "primary")
-    return o("hover:text-copy-light-hover", {
+    return d("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 (t === "secondary")
-    return o("hover:text-copy-light-hover", {
+    return d("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 (t === "danger")
-    return o("hover:text-copy-light-hover", {
+    return d("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"
     });
-}, F = ({
+}, oe = ({
   mode: e,
   disabled: r,
   variant: t
@@ -139,27 +141,27 @@ const G = (e) => {
   if (r)
     return "";
   if (t === "primary")
-    return o("active:text-copy-light-active", {
+    return d("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 (t === "secondary")
-    return o("active:text-copy-light-active", {
+    return d("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 (t === "danger")
-    return o("active:text-copy-lighter-active", {
+    return d("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"
     });
-}, q = ({
+}, ie = ({
   mode: e,
   noBorder: r,
   variant: t
@@ -167,140 +169,140 @@ const G = (e) => {
   if (r)
     return "border border-transparent";
   if (t === "primary")
-    return o("border", {
+    return d("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 (t === "secondary")
-    return o("border", {
+    return d("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 (t === "danger")
-    return o("border", {
+    return d("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"
     });
-}, J = ({ focusMode: e }) => o("focus:outline", "focus:outline-2", "focus:outline-offset-2", {
+}, ne = ({ focusMode: e }) => d("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"
-}), $ = ({
+}), V = ({
   type: e,
   className: r,
   raw: t,
   mode: a,
-  focusMode: d,
-  disabled: l,
-  fullWidth: g,
-  size: i,
+  focusMode: o,
+  disabled: n,
+  fullWidth: c,
+  size: l,
   noBorder: h,
   labelRight: s,
-  labelLeft: u,
-  spacing: b,
+  labelLeft: b,
+  spacing: f,
   noBackground: m,
-  variant: c,
-  noTruncate: v,
-  align: f
-}) => (c || (c = "primary"), t ? o(R, r) : o(
-  R,
+  variant: g,
+  noTruncate: p,
+  align: v
+}) => (g || (g = "primary"), t ? d($, r) : d(
+  $,
   r,
-  G(b),
-  X({ mode: a, variant: c, noBackground: m, noTruncate: v }),
-  H({ type: e, size: i, labelRight: s, labelLeft: u, align: f }),
-  q({ mode: a, variant: c, noBorder: h }),
-  J({ focusMode: d }),
-  Y({ mode: a, variant: c, disabled: l }),
-  F({ mode: a, variant: c, disabled: l }),
+  Q(f),
+  re({ mode: a, variant: g, noBackground: m, noTruncate: p }),
+  te({ type: e, size: l, labelRight: s, labelLeft: b, align: v }),
+  ie({ mode: a, variant: g, noBorder: h }),
+  ne({ focusMode: o }),
+  ae({ mode: a, variant: g, disabled: n }),
+  oe({ mode: a, variant: g, disabled: n }),
   {
-    "w-full": g,
-    "disabled:cursor-not-allowed disabled:opacity-50": l
+    "w-full": c,
+    "disabled:cursor-not-allowed disabled:opacity-50": n
   }
-)), K = (e, r, t) => {
+)), le = (e, r, t) => {
   var a;
   !r && (!document.activeElement || document.activeElement !== e.currentTarget) && typeof ((a = e == null ? void 0 : e.currentTarget) == null ? void 0 : a.focus) == "function" && e.currentTarget.focus(), typeof t == "function" && t(e);
-}, B = E.forwardRef((e, r) => {
-  const { onClick: t, noInternalClick: a = !1, ...d } = e;
-  return /* @__PURE__ */ n(
+}, M = T.forwardRef((e, r) => {
+  const { onClick: t, noInternalClick: a = !1, ...o } = e;
+  return /* @__PURE__ */ i(
     "button",
     {
       ref: r,
-      onClick: (l) => {
-        K(l, a, t);
+      onClick: (n) => {
+        le(n, a, t);
       },
-      ...d
+      ...o
     }
   );
 });
-B.displayName = "BaseButton";
-const L = E.forwardRef(
+M.displayName = "BaseButton";
+const O = T.forwardRef(
   ({
     children: e,
     disabled: r = !1,
     mode: t = "system",
     focusMode: a = "system",
-    fullWidth: d = !1,
-    className: l,
-    type: g = "button",
-    raw: i = !1,
+    fullWidth: o = !1,
+    className: n,
+    type: c = "button",
+    raw: l = !1,
     noBorder: h = !1,
     "aria-label": s,
-    label: u,
-    size: b = "medium",
+    label: b,
+    size: f = "medium",
     labelRight: m,
-    labelLeft: c,
-    spacing: v,
-    noBackground: f = !1,
-    align: _ = "center",
-    ...w
+    labelLeft: g,
+    spacing: p,
+    noBackground: v = !1,
+    align: y = "center",
+    ...I
   }, N) => {
-    const I = $({
-      type: T,
+    const E = V({
+      type: B,
       mode: t,
       focusMode: a,
-      fullWidth: d,
+      fullWidth: o,
       disabled: r,
-      raw: i,
-      className: l,
+      raw: l,
+      className: n,
       noBorder: h,
-      size: b,
+      size: f,
       labelRight: m,
-      labelLeft: c,
-      spacing: v,
-      noBackground: f,
-      align: _
-    }), S = o({
-      "text-copy-accent-dark": t === "light" && !i,
-      "text-copy-light": t === "dark" && !i,
-      "text-copy-accent-dark dark:text-copy-light": t === "alt-system" && !i,
-      "text-copy-light dark:text-copy-accent-dark": t === "system" && !i
+      labelLeft: g,
+      spacing: p,
+      noBackground: v,
+      align: y
+    }), S = d({
+      "text-copy-accent-dark": t === "light" && !l,
+      "text-copy-light": t === "dark" && !l,
+      "text-copy-accent-dark dark:text-copy-light": t === "alt-system" && !l,
+      "text-copy-light dark:text-copy-accent-dark": t === "system" && !l
     });
-    return /* @__PURE__ */ y(
-      B,
+    return /* @__PURE__ */ _(
+      M,
       {
         ref: N,
-        className: I,
+        className: E,
         disabled: r,
-        type: g,
-        "aria-label": s || u,
-        ...w,
+        type: c,
+        "aria-label": s || b,
+        ...I,
         children: [
-          c && /* @__PURE__ */ n("span", { className: "pr-2", children: c }),
-          /* @__PURE__ */ n("div", { className: S, children: e }),
-          m && /* @__PURE__ */ n("span", { className: "pl-2", children: m })
+          g && /* @__PURE__ */ i("span", { className: "pr-2", children: g }),
+          /* @__PURE__ */ i("div", { className: S, children: e }),
+          m && /* @__PURE__ */ i("span", { className: "pl-2", children: m })
         ]
       }
     );
   }
 );
-L.displayName = "ButtonIcon";
+O.displayName = "ButtonIcon";
 /*!
   @versini/ui-button v1.6.0
   © 2024 gizmette.com
@@ -308,55 +310,55 @@ L.displayName = "ButtonIcon";
 try {
   window.__VERSINI_UI_BUTTON__ || (window.__VERSINI_UI_BUTTON__ = {
     version: "1.6.0",
-    buildTime: "12/26/2024 06:05 PM EST",
+    buildTime: "12/27/2024 07:18 PM EST",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
 } catch {
 }
-const Q = E.forwardRef(
+const de = T.forwardRef(
   ({
     children: e,
     disabled: r = !1,
     mode: t = "system",
     focusMode: a = "system",
-    fullWidth: d = !1,
-    className: l,
-    type: g = "button",
-    raw: i = !1,
+    fullWidth: o = !1,
+    className: n,
+    type: c = "button",
+    raw: l = !1,
     noBorder: h = !1,
     "aria-label": s,
-    label: u,
-    size: b = "medium",
+    label: b,
+    size: f = "medium",
     labelRight: m,
-    labelLeft: c,
-    spacing: v,
-    noBackground: f = !1,
-    align: _ = "center",
-    active: w = !1,
+    labelLeft: g,
+    spacing: p,
+    noBackground: v = !1,
+    align: y = "center",
+    active: I = !1,
     ...N
-  }, I) => {
-    const S = $({
-      type: T,
+  }, E) => {
+    const S = V({
+      type: B,
       mode: t,
       focusMode: a,
-      fullWidth: d,
+      fullWidth: o,
       disabled: r,
-      raw: i,
-      className: l,
+      raw: l,
+      className: n,
       noBorder: h,
-      size: b,
+      size: f,
       labelRight: m,
-      labelLeft: c,
-      spacing: v,
-      noBackground: f,
-      align: _
-    }), P = o({
-      "text-copy-accent-dark": t === "light" && !i,
-      "text-copy-light": t === "dark" && !i,
-      "text-copy-accent-dark dark:text-copy-light": t === "alt-system" && !i,
-      "text-copy-light dark:text-copy-accent-dark": t === "system" && !i
-    }), V = w ? o(
+      labelLeft: g,
+      spacing: p,
+      noBackground: v,
+      align: y
+    }), A = d({
+      "text-copy-accent-dark": t === "light" && !l,
+      "text-copy-light": t === "dark" && !l,
+      "text-copy-accent-dark dark:text-copy-light": t === "alt-system" && !l,
+      "text-copy-light dark:text-copy-accent-dark": t === "system" && !l
+    }), z = I ? d(
       "relative",
       "focus-within:static",
       "focus-within:after:border-transparent",
@@ -373,25 +375,25 @@ const Q = E.forwardRef(
         "after:border-table-light dark:after:border-table-dark": t === "alt-system"
       }
     ) : "";
-    return /* @__PURE__ */ n("div", { className: V, children: /* @__PURE__ */ y(
-      B,
+    return /* @__PURE__ */ i("div", { className: z, children: /* @__PURE__ */ _(
+      M,
       {
-        ref: I,
+        ref: E,
         className: S,
         disabled: r,
-        type: g,
-        "aria-label": s || u,
+        type: c,
+        "aria-label": s || b,
         ...N,
         children: [
-          c && /* @__PURE__ */ n("span", { className: "pr-2", children: c }),
-          /* @__PURE__ */ n("div", { className: P, children: e }),
-          m && /* @__PURE__ */ n("span", { className: "pl-2", children: m })
+          g && /* @__PURE__ */ i("span", { className: "pr-2", children: g }),
+          /* @__PURE__ */ i("div", { className: A, children: e }),
+          m && /* @__PURE__ */ i("span", { className: "pl-2", children: m })
         ]
       }
     ) });
   }
 );
-Q.displayName = "ButtonSort";
+de.displayName = "ButtonSort";
 /*!
   @versini/ui-spacing v1.1.0
   © 2024 gizmette.com
@@ -399,13 +401,13 @@ Q.displayName = "ButtonSort";
 try {
   window.__VERSINI_UI_SPACING__ || (window.__VERSINI_UI_SPACING__ = {
     version: "1.1.0",
-    buildTime: "12/26/2024 06:05 PM EST",
+    buildTime: "12/27/2024 07:18 PM EST",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
 } catch {
 }
-const Z = (e) => {
+const ce = (e) => {
   let r = "";
   if (typeof e == "number" || typeof e == "string")
     r = "m-" + e;
@@ -414,29 +416,29 @@ const Z = (e) => {
     (e == null ? void 0 : e.t) !== void 0 && t.push(`mt-${e.t}`), (e == null ? void 0 : e.r) !== void 0 && t.push(`mr-${e.r}`), (e == null ? void 0 : e.b) !== void 0 && t.push(`mb-${e.b}`), (e == null ? void 0 : e.l) !== void 0 && t.push(`ml-${e.l}`), r = t.join(" ");
   }
   return r;
-}, ee = ({
+}, se = ({
   children: e,
   fill: r,
   viewBox: t,
   className: a,
-  defaultViewBox: d,
-  defaultClassName: l,
-  spacing: g,
-  title: i,
+  defaultViewBox: o,
+  defaultClassName: n,
+  spacing: c,
+  title: l,
   semantic: h = !1,
   ...s
 }) => {
-  const u = Z(g), b = o(
-    u,
-    a || l
+  const b = ce(c), f = d(
+    b,
+    a || n
   );
-  return /* @__PURE__ */ y(U, { children: [
-    /* @__PURE__ */ n(
+  return /* @__PURE__ */ _(L, { children: [
+    /* @__PURE__ */ i(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
-        className: b,
-        viewBox: t || d,
+        className: f,
+        viewBox: t || o,
         fill: r || "currentColor",
         role: "img",
         "aria-hidden": !h,
@@ -445,7 +447,7 @@ const Z = (e) => {
         children: e
       }
     ),
-    i && h && /* @__PURE__ */ n("span", { className: "sr-only", children: i })
+    l && h && /* @__PURE__ */ i("span", { className: "sr-only", children: l })
   ] });
 };
 /*!
@@ -455,21 +457,21 @@ const Z = (e) => {
 try {
   window.__VERSINI_UI_SVGICON__ || (window.__VERSINI_UI_SVGICON__ = {
     version: "1.1.0",
-    buildTime: "12/26/2024 06:05 PM EST",
+    buildTime: "12/27/2024 07:18 PM EST",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
 } catch {
 }
-const te = ({
+const ge = ({
   className: e,
   viewBox: r,
   spacing: t,
   title: a,
-  monotone: d,
-  ...l
-}) => /* @__PURE__ */ n(
-  ee,
+  monotone: o,
+  ...n
+}) => /* @__PURE__ */ i(
+  se,
   {
     defaultViewBox: "0 0 384 512",
     defaultClassName: "size-5",
@@ -477,8 +479,8 @@ const te = ({
     className: e,
     spacing: t,
     title: a || "Close",
-    ...l,
-    children: /* @__PURE__ */ n("path", { d: "M342.6 150.6c12.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.3l105.4 105.3c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256l105.3-105.4z" })
+    ...n,
+    children: /* @__PURE__ */ i("path", { d: "M342.6 150.6c12.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.3l105.4 105.3c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256l105.3-105.4z" })
   }
 );
 /*!
@@ -488,25 +490,112 @@ const te = ({
 try {
   window.__VERSINI_UI_ICONS__ || (window.__VERSINI_UI_ICONS__ = {
     version: "1.19.0",
-    buildTime: "12/26/2024 06:05 PM EST",
+    buildTime: "12/27/2024 07:18 PM EST",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
 } catch {
 }
-const p = "panel", x = "messagebox", re = ({
+const U = u.createContext(null);
+function he({
+  initialOpen: e = !1,
+  open: r,
+  onOpenChange: t
+} = {}) {
+  const [a, o] = u.useState(e), [n, c] = u.useState(), [l, h] = u.useState(), s = r ?? a, b = t ?? o, f = G({
+    open: s,
+    onOpenChange: b
+  }), m = f.context, g = D(m, {
+    enabled: r == null
+  }), p = W(m, {
+    outsidePress: !1,
+    outsidePressEvent: "mousedown"
+  }), v = X(m), y = Y([g, p, v]);
+  return u.useMemo(
+    () => ({
+      open: s,
+      setOpen: b,
+      ...y,
+      ...f,
+      labelId: n,
+      descriptionId: l,
+      setLabelId: c,
+      setDescriptionId: h
+    }),
+    [s, b, y, f, n, l]
+  );
+}
+const w = () => {
+  const e = u.useContext(U);
+  if (e == null)
+    throw new Error("Modal components must be wrapped in <Modal />");
+  return e;
+};
+function ue({
+  children: e,
+  ...r
+}) {
+  const t = he(r);
+  return /* @__PURE__ */ i(U.Provider, { value: t, children: e });
+}
+const me = u.forwardRef(function(e, r) {
+  const { context: t, ...a } = w(), o = q([a.refs.setFloating, r]);
+  if (!t.open)
+    return null;
+  const { overlayBackground: n, ...c } = e, l = d("grid place-items-center", {
+    [`${n}`]: n,
+    "bg-black sm:bg-black/[.8]": !n
+  });
+  return /* @__PURE__ */ i(H, { children: /* @__PURE__ */ i(J, { className: l, lockScroll: !0, children: /* @__PURE__ */ i(K, { context: t, children: /* @__PURE__ */ i(
+    "div",
+    {
+      ref: o,
+      "aria-labelledby": a.labelId,
+      "aria-describedby": a.descriptionId,
+      ...a.getFloatingProps(c),
+      children: c.children
+    }
+  ) }) }) });
+}), be = u.forwardRef(function({ children: e, ...r }, t) {
+  const { setLabelId: a } = w(), o = P();
+  return u.useLayoutEffect(() => (a(o), () => a(void 0)), [o, a]), /* @__PURE__ */ i("h1", { ...r, ref: t, id: o, children: e });
+}), fe = u.forwardRef(function({ children: e, ...r }, t) {
+  const { setDescriptionId: a } = w(), o = P();
+  return u.useLayoutEffect(() => (a(o), () => a(void 0)), [o, a]), /* @__PURE__ */ i("div", { ...r, ref: t, id: o, children: e });
+}), pe = u.forwardRef(function(e, r) {
+  const { setOpen: t } = w(), { trigger: a, className: o, ...n } = e, c = u.useCallback(() => t(!1), [t]);
+  return /* @__PURE__ */ i("div", { className: o, children: u.cloneElement(a, {
+    ref: r,
+    onClick: c,
+    ...n
+  }) });
+});
+/*!
+  @versini/ui-modal v1.1.0
+  © 2024 gizmette.com
+*/
+try {
+  window.__VERSINI_UI_MODAL__ || (window.__VERSINI_UI_MODAL__ = {
+    version: "1.1.0",
+    buildTime: "12/27/2024 07:18 PM EST",
+    homepage: "https://github.com/aversini/ui-components",
+    license: "MIT"
+  });
+} catch {
+}
+const k = "panel", x = "messagebox", ve = ({
   className: e,
   kind: r,
   borderMode: t
 }) => ({
-  main: o("prose prose-lighter flex flex-col bg-surface-medium", {
-    [`${C} max-h-full sm:max-h-[95%] min-h-full sm:min-h-[10rem] sm:rounded-lg sm:border-2`]: r === p,
-    [`${C} w-full sm:w-[95%] md:max-w-2xl`]: r === p && !e,
-    [`${M} rounded-lg border-2`]: r === x,
-    [`${M} w-[95%] sm:w-[50%] md:max-w-2xl`]: r === x && !e,
+  main: d("prose prose-lighter flex flex-col bg-surface-medium", {
+    [`${C} max-h-full sm:max-h-[95%] min-h-full sm:min-h-[10rem] sm:rounded-lg sm:border-2`]: r === k,
+    [`${C} w-full sm:w-[95%] md:max-w-2xl`]: r === k && !e,
+    [`${R} rounded-lg border-2`]: r === x,
+    [`${R} w-[95%] sm:w-[50%] md:max-w-2xl`]: r === x && !e,
     [`${e}`]: !!e,
-    "sm:border-border-dark": t === "dark" && r === p,
-    "sm:border-border-accent": t === "light" && r === p,
+    "sm:border-border-dark": t === "dark" && r === k,
+    "sm:border-border-accent": t === "light" && r === k,
     "border-border-dark": t === "dark" && r === x,
     "border-border-accent": t === "light" && r === x
   }),
@@ -514,49 +603,45 @@ const p = "panel", x = "messagebox", re = ({
   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"
-}), k = (e) => A(
-  () => import("./chunks/index.DaIz2ggm.js").then((r) => ({
-    default: r[e]
-  }))
-), ae = k("Modal"), oe = k("ModalClose"), ie = k("ModalContent"), ne = k("ModalDescription"), le = k("ModalHeading"), ge = ({
+}), we = ({
   open: e,
   onOpenChange: r,
   title: t,
   children: a,
-  footer: d,
-  borderMode: l = "light",
-  kind: g = p,
-  className: i
+  footer: o,
+  borderMode: n = "light",
+  kind: c = k,
+  className: l
 }) => {
-  const h = z(""), s = re({ className: i, kind: g, borderMode: l });
-  return O(() => (e && (h.current = document.title, document.title = `${t} | ${h.current}`), () => {
+  const h = j(""), s = ve({ className: l, kind: c, borderMode: n });
+  return F(() => (e && (h.current = document.title, document.title = `${t} | ${h.current}`), () => {
     e && (document.title = h.current);
-  }), [t, e]), /* @__PURE__ */ n(j, { fallback: /* @__PURE__ */ n("div", {}), children: e && /* @__PURE__ */ n(ae, { open: e, onOpenChange: r, children: /* @__PURE__ */ y(ie, { className: s.main, children: [
-    /* @__PURE__ */ y("div", { className: "flex flex-row-reverse items-center justify-between", children: [
-      /* @__PURE__ */ n(
-        oe,
+  }), [t, e]), /* @__PURE__ */ i(L, { children: e && /* @__PURE__ */ i(ue, { open: e, onOpenChange: r, children: /* @__PURE__ */ _(me, { className: s.main, children: [
+    /* @__PURE__ */ _("div", { className: "flex flex-row-reverse items-center justify-between", children: [
+      /* @__PURE__ */ i(
+        pe,
         {
           className: s.close,
-          trigger: /* @__PURE__ */ n(
-            L,
+          trigger: /* @__PURE__ */ i(
+            O,
             {
               mode: "dark",
               focusMode: "light",
               noBorder: !0,
               label: "Close",
-              children: /* @__PURE__ */ n(te, {})
+              children: /* @__PURE__ */ i(ge, {})
             }
           )
         }
       ),
-      /* @__PURE__ */ n(le, { className: s.header, children: t })
+      /* @__PURE__ */ i(be, { className: s.header, children: t })
     ] }),
-    /* @__PURE__ */ n(ne, { className: s.content, children: a }),
-    d && /* @__PURE__ */ n("div", { className: s.footer, children: d })
+    /* @__PURE__ */ i(fe, { className: s.content, children: a }),
+    o && /* @__PURE__ */ i("div", { className: s.footer, children: o })
   ] }) }) });
 };
 export {
-  M as MESSAGEBOX_CLASSNAME,
+  R as MESSAGEBOX_CLASSNAME,
   C as PANEL_CLASSNAME,
-  ge as Panel
+  we as Panel
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-panel",
-	"version": "1.2.2",
+	"version": "1.2.3",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -48,5 +48,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "abbb7b1770a9130157721d514fe20267fd15f35e"
+	"gitHead": "29ca97023df61f090d2e994c0fee52521a7a7791"
 }

package/dist/chunks/index.DaIz2ggm.js

@@ -1,99 +0,0 @@
-import { jsx as a } from "react/jsx-runtime";
-import { useFloating as _, useClick as C, useDismiss as E, useRole as x, useInteractions as D, useMergeRefs as O, FloatingPortal as R, FloatingOverlay as k, FloatingFocusManager as y } from "@floating-ui/react";
-import F from "clsx";
-import * as o from "react";
-import { useId as h } from "react";
-const I = o.createContext(null);
-function L({
-  initialOpen: n = !1,
-  open: i,
-  onOpenChange: t
-} = {}) {
-  const [e, r] = o.useState(n), [s, l] = o.useState(), [c, b] = o.useState(), u = i ?? e, f = t ?? r, p = _({
-    open: u,
-    onOpenChange: f
-  }), m = p.context, M = C(m, {
-    enabled: i == null
-  }), w = E(m, {
-    outsidePress: !1,
-    outsidePressEvent: "mousedown"
-  }), v = x(m), g = D([M, w, v]);
-  return o.useMemo(
-    () => ({
-      open: u,
-      setOpen: f,
-      ...g,
-      ...p,
-      labelId: s,
-      descriptionId: c,
-      setLabelId: l,
-      setDescriptionId: b
-    }),
-    [u, f, g, p, s, c]
-  );
-}
-const d = () => {
-  const n = o.useContext(I);
-  if (n == null)
-    throw new Error("Modal components must be wrapped in <Modal />");
-  return n;
-};
-function T({
-  children: n,
-  ...i
-}) {
-  const t = L(i);
-  return /* @__PURE__ */ a(I.Provider, { value: t, children: n });
-}
-const A = o.forwardRef(function(n, i) {
-  const { context: t, ...e } = d(), r = O([e.refs.setFloating, i]);
-  if (!t.open)
-    return null;
-  const { overlayBackground: s, ...l } = n, c = F("grid place-items-center", {
-    [`${s}`]: s,
-    "bg-black sm:bg-black/[.8]": !s
-  });
-  return /* @__PURE__ */ a(R, { children: /* @__PURE__ */ a(k, { className: c, lockScroll: !0, children: /* @__PURE__ */ a(y, { context: t, children: /* @__PURE__ */ a(
-    "div",
-    {
-      ref: r,
-      "aria-labelledby": e.labelId,
-      "aria-describedby": e.descriptionId,
-      ...e.getFloatingProps(l),
-      children: l.children
-    }
-  ) }) }) });
-}), U = o.forwardRef(function({ children: n, ...i }, t) {
-  const { setLabelId: e } = d(), r = h();
-  return o.useLayoutEffect(() => (e(r), () => e(void 0)), [r, e]), /* @__PURE__ */ a("h1", { ...i, ref: t, id: r, children: n });
-}), V = o.forwardRef(function({ children: n, ...i }, t) {
-  const { setDescriptionId: e } = d(), r = h();
-  return o.useLayoutEffect(() => (e(r), () => e(void 0)), [r, e]), /* @__PURE__ */ a("div", { ...i, ref: t, id: r, children: n });
-}), j = o.forwardRef(function(n, i) {
-  const { setOpen: t } = d(), { trigger: e, className: r, ...s } = n, l = o.useCallback(() => t(!1), [t]);
-  return /* @__PURE__ */ a("div", { className: r, children: o.cloneElement(e, {
-    ref: i,
-    onClick: l,
-    ...s
-  }) });
-});
-/*!
-  @versini/ui-modal v1.1.0
-  © 2024 gizmette.com
-*/
-try {
-  window.__VERSINI_UI_MODAL__ || (window.__VERSINI_UI_MODAL__ = {
-    version: "1.1.0",
-    buildTime: "12/26/2024 06:05 PM EST",
-    homepage: "https://github.com/aversini/ui-components",
-    license: "MIT"
-  });
-} catch {
-}
-export {
-  T as Modal,
-  j as ModalClose,
-  A as ModalContent,
-  V as ModalDescription,
-  U as ModalHeading
-};