@versini/ui-panel 2.2.10 → 3.0.1

package/dist/components/Panel/Panel.js

@@ -1,102 +1,269 @@
-import { jsx as l, Fragment as M, jsxs as x } from "react/jsx-runtime";
-import { ButtonIcon as $ } from "@versini/ui-button";
-import { IconClose as v } from "@versini/ui-icons";
-import { Modal as C, ModalContent as y, ModalClose as I, ModalHeading as P, ModalDescription as _ } from "@versini/ui-modal";
-import { useRef as L, useState as Y, useEffect as g } from "react";
-import B from "clsx";
-const h = "av-messagebox", n = "av-panel", o = "panel", f = "messagebox", O = ({
+import { jsxs as v, jsx as n, Fragment as L } from "react/jsx-runtime";
+import { ButtonIcon as O } from "@versini/ui-button";
+import * as l 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,
+  viewBox: r,
+  className: o,
+  defaultViewBox: s,
+  size: c,
+  title: i,
+  semantic: u = !1,
+  ...a
+}) => {
+  const d = E(c, o);
+  return /* @__PURE__ */ v(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      className: d,
+      viewBox: r || s,
+      fill: t || "currentColor",
+      role: "img",
+      "aria-hidden": !u,
+      focusable: !1,
+      ...a,
+      children: [
+        i && u && /* @__PURE__ */ n("title", { children: i }),
+        e
+      ]
+    }
+  );
+};
+/*!
+  @versini/ui-svgicon v4.2.1
+  © 2025 gizmette.com
+*/
+try {
+  window.__VERSINI_UI_SVGICON__ || (window.__VERSINI_UI_SVGICON__ = {
+    version: "4.2.1",
+    buildTime: "08/27/2025 08:27 AM EDT",
+    homepage: "https://github.com/aversini/ui-components",
+    license: "MIT"
+  });
+} catch {
+}
+const G = ({
+  className: e,
+  viewBox: t,
+  title: r,
+  monotone: o,
+  ...s
+}) => /* @__PURE__ */ n(
+  z,
+  {
+    defaultViewBox: "0 0 384 512",
+    size: "size-5",
+    viewBox: t,
+    className: e,
+    title: r || "Close",
+    ...s,
+    children: /* @__PURE__ */ n(
+      "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"
+      }
+    )
+  }
+);
+/*!
+  @versini/ui-icons v4.11.0
+  © 2025 gizmette.com
+*/
+try {
+  window.__VERSINI_UI_ICONS__ || (window.__VERSINI_UI_ICONS__ = {
+    version: "4.11.0",
+    buildTime: "08/27/2025 08:28 AM EDT",
+    homepage: "https://github.com/aversini/ui-components",
+    license: "MIT"
+  });
+} catch {
+}
+const y = l.createContext(null);
+function j({
+  initialOpen: e = !1,
+  open: t,
+  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,
+    onOpenChange: w
+  }), p = m.context, g = D(p, {
+    enabled: t == null
+  }), f = P(p, {
+    outsidePress: !1,
+    outsidePressEvent: "mousedown"
+  }), b = B(p), N = V([g, f, b]);
+  return l.useMemo(
+    () => ({
+      open: d,
+      setOpen: w,
+      ...N,
+      ...m,
+      labelId: c,
+      descriptionId: u,
+      setLabelId: i,
+      setDescriptionId: a
+    }),
+    [d, w, N, m, c, u]
+  );
+}
+const x = () => {
+  const e = l.useContext(y);
+  if (e == null)
+    throw new Error("Modal components must be wrapped in <Modal />");
+  return e;
+};
+function X({
+  children: e,
+  ...t
+}) {
+  const r = j(t);
+  return /* @__PURE__ */ n(y.Provider, { value: r, children: e });
+}
+const q = l.forwardRef(function(e, t) {
+  const { context: r, ...o } = x(), s = F([o.refs.setFloating, t]);
+  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
+  });
+  return /* @__PURE__ */ n(U, { children: /* @__PURE__ */ n(Y, { className: u, lockScroll: !0, children: /* @__PURE__ */ n(k, { context: r, children: /* @__PURE__ */ n(
+    "div",
+    {
+      ref: s,
+      "aria-labelledby": o.labelId,
+      "aria-describedby": o.descriptionId,
+      ...o.getFloatingProps(i),
+      children: i.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
+  }) });
+});
+/*!
+  @versini/ui-modal v3.0.1
+  © 2025 gizmette.com
+*/
+try {
+  window.__VERSINI_UI_MODAL__ || (window.__VERSINI_UI_MODAL__ = {
+    version: "3.0.1",
+    buildTime: "09/01/2025 04:01 PM EDT",
+    homepage: "https://github.com/aversini/ui-components",
+    license: "MIT"
+  });
+} catch {
+}
+const h = "panel", _ = "messagebox", Q = ({
   className: e,
-  kind: r,
-  borderMode: t,
-  animation: d,
+  kind: t,
+  borderMode: r,
+  animation: o,
   maxWidth: s = "medium"
 }) => ({
-  main: B("prose prose-lighter flex flex-col bg-surface-dark", {
-    "duration-200 ease-out": d,
-    [`${n} max-h-full sm:max-h-[95%] min-h-full sm:min-h-[10rem] sm:rounded-lg sm:border-2`]: r === o,
-    [`${n} w-full sm:w-[95%] md:max-w-2xl`]: r === o && !e && s === "small",
-    [`${n} w-full sm:w-[95%] md:max-w-3xl`]: r === o && !e && s === "medium",
-    [`${n} w-full sm:w-[95%] md:max-w-4xl`]: r === o && !e && s === "large",
-    [`${h} rounded-lg border-2`]: r === f,
-    [`${h} w-[95%] sm:w-[50%] md:max-w-2xl`]: r === f && !e,
+  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": t === "dark" && r === o,
-    "sm:border-border-accent": t === "light" && r === o,
-    "border-border-dark": t === "dark" && r === f,
-    "border-border-accent": t === "light" && r === f
+    "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"
-}), T = "slide", p = "fade", H = ({
+}), Z = "slide", M = "fade", se = ({
   open: e,
-  onOpenChange: r,
-  title: t,
-  children: d,
+  onOpenChange: t,
+  title: r,
+  children: o,
   footer: s,
-  borderMode: w = "light",
-  kind: A = o,
-  className: b,
-  animation: m = !1,
-  animationType: c = T,
-  maxWidth: E = "medium"
+  borderMode: c = "light",
+  kind: i = h,
+  className: u,
+  animation: a = !1,
+  animationType: d = Z,
+  maxWidth: w = "medium"
 }) => {
-  const u = L(""), [S, i] = Y(
-    m ? c === p ? { opacity: 0 } : {
+  const m = $(""), [p, g] = R(
+    a ? d === M ? { opacity: 0 } : {
       transform: "translateY(-100vh)"
     } : {}
-  ), a = O({
-    className: b,
-    kind: A,
-    borderMode: w,
-    animation: m,
-    maxWidth: E
+  ), f = Q({
+    className: u,
+    kind: i,
+    borderMode: c,
+    animation: a,
+    maxWidth: w
   });
-  return g(() => (e && (u.current = document.title, document.title = `${t} | ${u.current}`), () => {
-    e && (document.title = u.current);
-  }), [t, e]), g(() => {
-    if (m && e) {
-      i(
-        m ? c === p ? { opacity: 0 } : {
+  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 } : {
           transform: "translateY(-666vh)"
         } : {}
       );
-      const N = setTimeout(() => {
-        i(
-          m ? c === "fade" ? { opacity: 1 } : {
+      const b = setTimeout(() => {
+        g(
+          a ? d === "fade" ? { opacity: 1 } : {
             transform: "translateY(0)"
           } : {}
         );
       }, 100);
-      return () => clearTimeout(N);
+      return () => clearTimeout(b);
     }
-  }, [e, m, c]), /* @__PURE__ */ l(M, { children: e && /* @__PURE__ */ l(C, { open: e, onOpenChange: r, children: /* @__PURE__ */ x(y, { className: a.main, style: S, children: [
-    /* @__PURE__ */ x("div", { className: "flex flex-row-reverse items-center justify-between", children: [
-      /* @__PURE__ */ l(
-        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,
         {
-          className: a.close,
-          trigger: /* @__PURE__ */ l(
-            $,
+          className: f.close,
+          trigger: /* @__PURE__ */ n(
+            O,
             {
               mode: "dark",
               focusMode: "light",
               noBorder: !0,
               label: "Close",
-              children: /* @__PURE__ */ l(v, { monotone: !0 })
+              children: /* @__PURE__ */ n(G, { monotone: !0 })
             }
           )
         }
       ),
-      /* @__PURE__ */ l(P, { className: a.header, children: t })
+      /* @__PURE__ */ n(H, { className: f.header, children: r })
     ] }),
-    /* @__PURE__ */ l(_, { className: a.content, children: d }),
-    s && /* @__PURE__ */ l("div", { className: a.footer, children: s })
+    /* @__PURE__ */ n(J, { className: f.content, children: o }),
+    s && /* @__PURE__ */ n("div", { className: f.footer, children: s })
   ] }) }) });
 };
 export {
-  h as MESSAGEBOX_CLASSNAME,
-  n as PANEL_CLASSNAME,
-  H as Panel
+  C as MESSAGEBOX_CLASSNAME,
+  I as PANEL_CLASSNAME,
+  se as 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.2.10
+  @versini/ui-panel v3.0.1
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_PANEL__ || (window.__VERSINI_UI_PANEL__ = {
-    version: "2.2.10",
-    buildTime: "09/01/2025 02:19 PM EDT",
+    version: "3.0.1",
+    buildTime: "09/01/2025 04:01 PM EDT",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-panel",
-	"version": "2.2.10",
+	"version": "3.0.1",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -37,22 +37,22 @@
 		"test": "vitest run"
 	},
 	"peerDependencies": {
-		"react": "^18.3.1 || ^19.0.0",
-		"react-dom": "^18.3.1 || ^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": "7.1.6",
-		"@versini/ui-icons": "4.10.0",
-		"@versini/ui-modal": "2.0.10",
+		"@versini/ui-button": "8.0.1",
+		"@versini/ui-icons": "4.11.0",
+		"@versini/ui-modal": "3.0.1",
 		"clsx": "2.1.1",
 		"tailwindcss": "4.1.12"
 	},
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "c577149643ec36cad454587166e62410a77aed38"
+	"gitHead": "dcc216644c8c3e7d43a49ea655a22aed21fa4b83"
 }