@versini/ui-panel 1.3.0 → 1.3.2

package/dist/index.js

@@ -1,36 +1,36 @@
 import { jsx as n, jsxs as x, Fragment as $ } from "react/jsx-runtime";
 import i from "clsx";
-import * as h from "react";
-import M, { useId as P, useRef as D, useEffect as W } from "react";
+import * as m from "react";
+import M, { useId as V, useRef as D, useEffect as W } from "react";
 import { useFloating as G, useClick as X, useDismiss as Y, useRole as q, useInteractions as H, useMergeRefs as J, FloatingPortal as K, FloatingOverlay as Q, FloatingFocusManager as Z } from "@floating-ui/react";
 /*!
-  @versini/ui-panel v1.3.0
+  @versini/ui-panel v1.3.2
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_PANEL__ || (window.__VERSINI_UI_PANEL__ = {
-    version: "1.3.0",
-    buildTime: "01/03/2025 10:45 AM EST",
+    version: "1.3.2",
+    buildTime: "01/04/2025 01:33 PM EST",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
 } catch {
 }
-const C = "av-messagebox", A = "av-panel", O = "av-button", _ = "icon", V = "button", T = "link", ee = ({
+const C = "av-messagebox", P = "av-panel", O = "av-button", _ = "icon", z = "button", T = "link", ee = ({
   type: e,
   size: t,
   labelRight: r,
   labelLeft: a,
   align: o
 }) => {
-  const l = "max-h-8 py-0 px-2", c = "max-h-9 py-1 px-3", d = "max-h-12 py-2 px-4";
+  const d = "max-h-8 py-0 px-2", c = "max-h-9 py-1 px-3", l = "max-h-12 py-2 px-4";
   switch (e) {
-    case V:
+    case z:
     case T:
       return i({
-        [l]: t === "small",
+        [d]: t === "small",
         [c]: t === "medium",
-        [d]: t === "large"
+        [l]: t === "large"
       });
     case _:
       return i("inline-flex items-center", {
@@ -51,20 +51,20 @@ const C = "av-messagebox", A = "av-panel", O = "av-button", _ = "icon", V = "but
   labelRight: r,
   labelLeft: a
 }) => {
-  const o = "text-sm font-medium", l = "text-base font-medium", c = "text-lg font-medium";
+  const o = "text-sm font-medium", d = "text-base font-medium", c = "text-lg font-medium";
   switch (e) {
-    case V:
+    case z:
     case T:
       return i({
         "text-center": e === T,
         [o]: t === "small",
-        [l]: t === "medium",
+        [d]: t === "medium",
         [c]: t === "large"
       });
     case _:
       return i({
         [o]: t === "small" && (r || a),
-        [l]: t === "medium" && (r || a),
+        [d]: t === "medium" && (r || a),
         [c]: t === "large" && (r || a)
       });
   }
@@ -79,34 +79,30 @@ const C = "av-messagebox", A = "av-panel", O = "av-button", _ = "icon", V = "but
   if (a === "primary")
     return i("not-prose", {
       truncate: !r,
-      "text-copy-light": e === "dark",
-      "text-copy-lighter": e === "light",
-      "text-copy-light dark:text-copy-lighter": e === "system",
-      "text-copy-lighter dark:text-copy-light": e === "alt-system"
+      "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 === "secondary")
     return i("not-prose", {
       truncate: !r,
-      "text-copy-light": e === "light",
-      "text-copy-lighter": e === "dark",
-      "text-copy-light dark:text-copy-lighter": e === "alt-system",
-      "text-copy-lighter dark:text-copy-light": e === "system"
+      "text-copy-light": e === "light" || e === "system",
+      "text-copy-lighter": e === "dark" || e === "alt-system",
+      "dark:text-copy-lighter": e === "alt-system",
+      "dark:text-copy-light": e === "system"
     });
   if (a === "danger")
     return i("not-prose", {
       truncate: !r,
-      "text-copy-light": e === "dark",
-      "text-copy-lighter": e === "light",
-      "text-copy-light dark:text-copy-lighter": e === "system",
-      "text-copy-lighter dark:text-copy-light": e === "alt-system"
+      "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 i("not-prose", {
-      truncate: !r,
-      "text-copy-light": e === "dark",
-      "text-copy-lighter": e === "light",
-      "text-copy-light dark:text-copy-lighter": e === "system",
-      "text-copy-lighter dark:text-copy-light": e === "alt-system"
+    return i("not-prose text-copy-lighter", {
+      truncate: !r
     });
 }, ae = ({
   mode: e,
@@ -204,7 +200,7 @@ const C = "av-messagebox", A = "av-panel", O = "av-button", _ = "icon", V = "but
     });
   if (r === "selected")
     return "active:text-copy-lighter-active active:bg-action-selected-dark-active";
-}, le = ({
+}, de = ({
   mode: e,
   noBorder: t,
   variant: r
@@ -234,30 +230,30 @@ const C = "av-messagebox", A = "av-panel", O = "av-button", _ = "icon", V = "but
     });
   if (r === "selected")
     return "border border-border-selected-dark";
-}, de = ({
+}, le = ({
   focusMode: e
 }) => i("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"
-}), z = ({
+}), U = ({
   type: e,
   className: t,
   raw: r,
   mode: a,
   focusMode: o,
-  disabled: l,
+  disabled: d,
   fullWidth: c,
-  size: d,
-  noBorder: m,
+  size: l,
+  noBorder: h,
   labelRight: g,
   labelLeft: b,
   noBackground: f,
   variant: s,
   noTruncate: u,
-  align: p,
-  radius: v
+  align: v,
+  radius: p
 }) => (s || (s = "primary"), r ? i(O, t) : i(
   O,
   te({
@@ -267,22 +263,22 @@ const C = "av-messagebox", A = "av-panel", O = "av-button", _ = "icon", V = "but
     noTruncate: u
   }),
   ae({ mode: a, noBackground: f, variant: s }),
-  oe({ radius: v }),
+  oe({ radius: p }),
   ee({
     type: e,
-    size: d,
+    size: l,
     labelRight: g,
     labelLeft: b,
-    align: p
+    align: v
   }),
-  re({ type: e, size: d, labelRight: g, labelLeft: b }),
-  le({ mode: a, variant: s, noBorder: m }),
-  de({ focusMode: o }),
-  ie({ mode: a, variant: s, disabled: l }),
-  ne({ mode: a, variant: s, disabled: l }),
+  re({ type: e, size: l, labelRight: g, labelLeft: b }),
+  de({ mode: a, variant: s, noBorder: h }),
+  le({ focusMode: o }),
+  ie({ mode: a, variant: s, disabled: d }),
+  ne({ mode: a, variant: s, disabled: d }),
   {
     "w-full": c,
-    "disabled:cursor-not-allowed disabled:opacity-50": l
+    "disabled:cursor-not-allowed disabled:opacity-50": d
   },
   t
 )), ce = (e, t, r) => {
@@ -294,57 +290,57 @@ const C = "av-messagebox", A = "av-panel", O = "av-button", _ = "icon", V = "but
     "button",
     {
       ref: t,
-      onClick: (l) => {
-        ce(l, a, r);
+      onClick: (d) => {
+        ce(d, a, r);
       },
       ...o
     }
   );
 });
 L.displayName = "BaseButton";
-const U = M.forwardRef(
+const A = M.forwardRef(
   ({
     children: e,
     disabled: t = !1,
     mode: r = "system",
     focusMode: a = "system",
     fullWidth: o = !1,
-    className: l,
+    className: d,
     type: c = "button",
-    raw: d = !1,
-    noBorder: m = !1,
+    raw: l = !1,
+    noBorder: h = !1,
     "aria-label": g,
     label: b,
     size: f = "medium",
     labelRight: s,
     labelLeft: u,
-    noBackground: p = !1,
-    align: v = "center",
+    noBackground: v = !1,
+    align: p = "center",
     radius: y = "large",
     variant: I = "primary",
     ...E
   }, B) => {
-    const S = z({
+    const S = U({
       type: _,
       mode: r,
       focusMode: a,
       fullWidth: o,
       disabled: t,
-      raw: d,
-      className: l,
-      noBorder: m,
+      raw: l,
+      className: d,
+      noBorder: h,
       size: f,
       labelRight: s,
       labelLeft: u,
-      noBackground: p,
-      align: v,
+      noBackground: v,
+      align: p,
       radius: y,
       variant: I
     }), R = i({
-      "text-copy-accent-dark": r === "light" && !d,
-      "text-copy-light": r === "dark" && !d,
-      "text-copy-accent-dark dark:text-copy-light": r === "alt-system" && !d,
-      "text-copy-light dark:text-copy-accent-dark": r === "system" && !d
+      "text-copy-accent-dark": r === "light" && !l,
+      "text-copy-light": r === "dark" && !l,
+      "text-copy-accent-dark dark:text-copy-light": r === "alt-system" && !l,
+      "text-copy-light dark:text-copy-accent-dark": r === "system" && !l
     });
     return /* @__PURE__ */ x(
       L,
@@ -364,15 +360,15 @@ const U = M.forwardRef(
     );
   }
 );
-U.displayName = "ButtonIcon";
+A.displayName = "ButtonIcon";
 /*!
-  @versini/ui-button v4.0.0
+  @versini/ui-button v4.0.2
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_BUTTON__ || (window.__VERSINI_UI_BUTTON__ = {
-    version: "4.0.0",
-    buildTime: "01/03/2025 10:45 AM EST",
+    version: "4.0.2",
+    buildTime: "01/04/2025 01:33 PM EST",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
@@ -385,41 +381,41 @@ const se = M.forwardRef(
     mode: r = "system",
     focusMode: a = "system",
     fullWidth: o = !1,
-    className: l,
+    className: d,
     type: c = "button",
-    raw: d = !1,
-    noBorder: m = !1,
+    raw: l = !1,
+    noBorder: h = !1,
     "aria-label": g,
     label: b,
     size: f = "medium",
     labelRight: s,
     labelLeft: u,
-    noBackground: p = !1,
-    align: v = "center",
+    noBackground: v = !1,
+    align: p = "center",
     active: y = !1,
     radius: I = "large",
     ...E
   }, B) => {
-    const S = z({
+    const S = U({
       type: _,
       mode: r,
       focusMode: a,
       fullWidth: o,
       disabled: t,
-      raw: d,
-      className: l,
-      noBorder: m,
+      raw: l,
+      className: d,
+      noBorder: h,
       size: f,
       labelRight: s,
       labelLeft: u,
-      noBackground: p,
-      align: v,
+      noBackground: v,
+      align: p,
       radius: I
     }), R = i({
-      "text-copy-accent-dark": r === "light" && !d,
-      "text-copy-light": r === "dark" && !d,
-      "text-copy-accent-dark dark:text-copy-light": r === "alt-system" && !d,
-      "text-copy-light dark:text-copy-accent-dark": r === "system" && !d
+      "text-copy-accent-dark": r === "light" && !l,
+      "text-copy-light": r === "dark" && !l,
+      "text-copy-accent-dark dark:text-copy-light": r === "alt-system" && !l,
+      "text-copy-light dark:text-copy-accent-dark": r === "system" && !l
     }), j = y ? i(
       "relative",
       "focus-within:static",
@@ -462,12 +458,12 @@ const ge = ({
   viewBox: r,
   className: a,
   defaultViewBox: o,
-  size: l,
+  size: d,
   title: c,
-  semantic: d = !1,
-  ...m
+  semantic: l = !1,
+  ...h
 }) => {
-  const g = i(l, a);
+  const g = i(d, a);
   return /* @__PURE__ */ x($, { children: [
     /* @__PURE__ */ n(
       "svg",
@@ -477,13 +473,13 @@ const ge = ({
         viewBox: r || o,
         fill: t || "currentColor",
         role: "img",
-        "aria-hidden": !d,
+        "aria-hidden": !l,
         focusable: !1,
-        ...m,
+        ...h,
         children: e
       }
     ),
-    c && d && /* @__PURE__ */ n("span", { className: "sr-only", children: c })
+    c && l && /* @__PURE__ */ n("span", { className: "sr-only", children: c })
   ] });
 };
 /*!
@@ -493,13 +489,13 @@ const ge = ({
 try {
   window.__VERSINI_UI_SVGICON__ || (window.__VERSINI_UI_SVGICON__ = {
     version: "4.0.0",
-    buildTime: "01/03/2025 10:45 AM EST",
+    buildTime: "01/04/2025 01:33 PM EST",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
 } catch {
 }
-const he = ({
+const me = ({
   className: e,
   viewBox: t,
   title: r,
@@ -518,49 +514,49 @@ const he = ({
   }
 );
 /*!
-  @versini/ui-icons v4.0.0
+  @versini/ui-icons v4.1.0
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_ICONS__ || (window.__VERSINI_UI_ICONS__ = {
-    version: "4.0.0",
-    buildTime: "01/03/2025 10:45 AM EST",
+    version: "4.1.0",
+    buildTime: "01/04/2025 01:33 PM EST",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
 } catch {
 }
-const F = h.createContext(null);
-function me({
+const F = m.createContext(null);
+function he({
   initialOpen: e = !1,
   open: t,
   onOpenChange: r
 } = {}) {
-  const [a, o] = h.useState(e), [l, c] = h.useState(), [d, m] = h.useState(), g = t ?? a, b = r ?? o, f = G({
+  const [a, o] = m.useState(e), [d, c] = m.useState(), [l, h] = m.useState(), g = t ?? a, b = r ?? o, f = G({
     open: g,
     onOpenChange: b
   }), s = f.context, u = X(s, {
     enabled: t == null
-  }), p = Y(s, {
+  }), v = Y(s, {
     outsidePress: !1,
     outsidePressEvent: "mousedown"
-  }), v = q(s), y = H([u, p, v]);
-  return h.useMemo(
+  }), p = q(s), y = H([u, v, p]);
+  return m.useMemo(
     () => ({
       open: g,
       setOpen: b,
       ...y,
       ...f,
-      labelId: l,
-      descriptionId: d,
+      labelId: d,
+      descriptionId: l,
       setLabelId: c,
-      setDescriptionId: m
+      setDescriptionId: h
     }),
-    [g, b, y, f, l, d]
+    [g, b, y, f, d, l]
   );
 }
 const N = () => {
-  const e = h.useContext(F);
+  const e = m.useContext(F);
   if (e == null)
     throw new Error("Modal components must be wrapped in <Modal />");
   return e;
@@ -569,18 +565,18 @@ function ue({
   children: e,
   ...t
 }) {
-  const r = me(t);
+  const r = he(t);
   return /* @__PURE__ */ n(F.Provider, { value: r, children: e });
 }
-const be = h.forwardRef(function(e, t) {
+const be = m.forwardRef(function(e, t) {
   const { context: r, ...a } = N(), o = J([a.refs.setFloating, t]);
   if (!r.open)
     return null;
-  const { overlayBackground: l, ...c } = e, d = i("grid place-items-center", {
-    [`${l}`]: l,
-    "bg-black sm:bg-black/[.8]": !l
+  const { overlayBackground: d, ...c } = e, l = i("grid place-items-center", {
+    [`${d}`]: d,
+    "bg-black sm:bg-black/[.8]": !d
   });
-  return /* @__PURE__ */ n(K, { children: /* @__PURE__ */ n(Q, { className: d, lockScroll: !0, children: /* @__PURE__ */ n(Z, { context: r, children: /* @__PURE__ */ n(
+  return /* @__PURE__ */ n(K, { children: /* @__PURE__ */ n(Q, { className: l, lockScroll: !0, children: /* @__PURE__ */ n(Z, { context: r, children: /* @__PURE__ */ n(
     "div",
     {
       ref: o,
@@ -590,18 +586,18 @@ const be = h.forwardRef(function(e, t) {
       children: c.children
     }
   ) }) }) });
-}), fe = h.forwardRef(function({ children: e, ...t }, r) {
-  const { setLabelId: a } = N(), o = P();
-  return h.useLayoutEffect(() => (a(o), () => a(void 0)), [o, a]), /* @__PURE__ */ n("h1", { ...t, ref: r, id: o, children: e });
-}), pe = h.forwardRef(function({ children: e, ...t }, r) {
-  const { setDescriptionId: a } = N(), o = P();
-  return h.useLayoutEffect(() => (a(o), () => a(void 0)), [o, a]), /* @__PURE__ */ n("div", { ...t, ref: r, id: o, children: e });
-}), ve = h.forwardRef(function(e, t) {
-  const { setOpen: r } = N(), { trigger: a, className: o, ...l } = e, c = h.useCallback(() => r(!1), [r]);
-  return /* @__PURE__ */ n("div", { className: o, children: h.cloneElement(a, {
+}), fe = m.forwardRef(function({ children: e, ...t }, r) {
+  const { setLabelId: a } = N(), o = V();
+  return m.useLayoutEffect(() => (a(o), () => a(void 0)), [o, a]), /* @__PURE__ */ n("h1", { ...t, ref: r, id: o, children: e });
+}), ve = m.forwardRef(function({ children: e, ...t }, r) {
+  const { setDescriptionId: a } = N(), o = V();
+  return m.useLayoutEffect(() => (a(o), () => a(void 0)), [o, a]), /* @__PURE__ */ n("div", { ...t, ref: r, id: o, children: e });
+}), pe = m.forwardRef(function(e, t) {
+  const { setOpen: r } = N(), { trigger: a, className: o, ...d } = e, c = m.useCallback(() => r(!1), [r]);
+  return /* @__PURE__ */ n("div", { className: o, children: m.cloneElement(a, {
     ref: t,
     onClick: c,
-    ...l
+    ...d
   }) });
 });
 /*!
@@ -611,7 +607,7 @@ const be = h.forwardRef(function(e, t) {
 try {
   window.__VERSINI_UI_MODAL__ || (window.__VERSINI_UI_MODAL__ = {
     version: "1.2.0",
-    buildTime: "01/03/2025 10:45 AM EST",
+    buildTime: "01/04/2025 01:33 PM EST",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
@@ -623,8 +619,8 @@ const k = "panel", w = "messagebox", ye = ({
   borderMode: r
 }) => ({
   main: i("prose prose-lighter flex flex-col bg-surface-medium", {
-    [`${A} max-h-full sm:max-h-[95%] min-h-full sm:min-h-[10rem] sm:rounded-lg sm:border-2`]: t === k,
-    [`${A} w-full sm:w-[95%] md:max-w-2xl`]: t === k && !e,
+    [`${P} max-h-full sm:max-h-[95%] min-h-full sm:min-h-[10rem] sm:rounded-lg sm:border-2`]: t === k,
+    [`${P} w-full sm:w-[95%] md:max-w-2xl`]: t === k && !e,
     [`${C} rounded-lg border-2`]: t === w,
     [`${C} w-[95%] sm:w-[50%] md:max-w-2xl`]: t === w && !e,
     [`${e}`]: !!e,
@@ -643,39 +639,39 @@ const k = "panel", w = "messagebox", ye = ({
   title: r,
   children: a,
   footer: o,
-  borderMode: l = "light",
+  borderMode: d = "light",
   kind: c = k,
-  className: d
+  className: l
 }) => {
-  const m = D(""), g = ye({ className: d, kind: c, borderMode: l });
-  return W(() => (e && (m.current = document.title, document.title = `${r} | ${m.current}`), () => {
-    e && (document.title = m.current);
+  const h = D(""), g = ye({ className: l, kind: c, borderMode: d });
+  return W(() => (e && (h.current = document.title, document.title = `${r} | ${h.current}`), () => {
+    e && (document.title = h.current);
   }), [r, e]), /* @__PURE__ */ n($, { children: e && /* @__PURE__ */ n(ue, { open: e, onOpenChange: t, children: /* @__PURE__ */ x(be, { className: g.main, children: [
     /* @__PURE__ */ x("div", { className: "flex flex-row-reverse items-center justify-between", children: [
       /* @__PURE__ */ n(
-        ve,
+        pe,
         {
           className: g.close,
           trigger: /* @__PURE__ */ n(
-            U,
+            A,
             {
               mode: "dark",
               focusMode: "light",
               noBorder: !0,
               label: "Close",
-              children: /* @__PURE__ */ n(he, {})
+              children: /* @__PURE__ */ n(me, {})
             }
           )
         }
       ),
       /* @__PURE__ */ n(fe, { className: g.header, children: r })
     ] }),
-    /* @__PURE__ */ n(pe, { className: g.content, children: a }),
+    /* @__PURE__ */ n(ve, { className: g.content, children: a }),
     o && /* @__PURE__ */ n("div", { className: g.footer, children: o })
   ] }) }) });
 };
 export {
   C as MESSAGEBOX_CLASSNAME,
-  A as PANEL_CLASSNAME,
+  P as PANEL_CLASSNAME,
   Ne as Panel
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-panel",
-	"version": "1.3.0",
+	"version": "1.3.2",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -39,8 +39,8 @@
 	},
 	"dependencies": {
 		"@tailwindcss/typography": "0.5.15",
-		"@versini/ui-button": "4.0.0",
-		"@versini/ui-icons": "4.0.0",
+		"@versini/ui-button": "4.0.2",
+		"@versini/ui-icons": "4.1.0",
 		"@versini/ui-modal": "1.2.0",
 		"clsx": "2.1.1",
 		"tailwindcss": "3.4.17"
@@ -48,5 +48,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "406bf426c5b3186ef7197e0b51d83ec0de689cde"
+	"gitHead": "bf6b0d285a70c47a5efc225f32756b95cb963a49"
 }