@versini/ui-panel 1.1.0 → 1.1.2

package/dist/chunks/index.CYbntI7I.js

@@ -0,0 +1,272 @@
+import { jsx as c, jsxs as E, Fragment as T } from "react/jsx-runtime";
+import I from "clsx";
+import * as i from "react";
+import { useRef as _, useReducer as M, useEffect as D, useId as A } from "react";
+import { useFloating as x, useClick as S, useDismiss as P, useRole as $, useInteractions as F, useMergeRefs as O, FloatingPortal as k, FloatingOverlay as L, FloatingFocusManager as U } from "@floating-ui/react";
+const w = "SET_ANNOUNCEMENT", C = "CLEAR_ANNOUNCEMENT", V = {
+  alert: null,
+  alertdialog: null,
+  log: "polite",
+  marquee: null,
+  progressbar: null,
+  status: "polite",
+  timer: "assertive"
+}, B = (e, n) => {
+  switch (n == null ? void 0 : n.type) {
+    case w:
+      return {
+        ...e,
+        announcement: n.payload
+      };
+    case C:
+      return {
+        ...e,
+        announcement: null
+      };
+    default:
+      return e;
+  }
+}, j = ({
+  onAnnouncementClear: e,
+  dispatch: n
+}) => {
+  n({
+    type: C
+  }), typeof e == "function" && e();
+}, b = ({
+  children: e,
+  clearAnnouncementDelay: n,
+  clearAnnouncementTimeoutRef: t,
+  onAnnouncementClear: o,
+  dispatch: l
+}) => {
+  clearTimeout(t.current), e !== null && l({
+    type: w,
+    payload: e
+  }), n && (t.current = setTimeout(
+    () => j({
+      onAnnouncementClear: o,
+      dispatch: l
+    }),
+    n
+  ));
+}, G = ({
+  children: e,
+  announcementTimeoutRef: n,
+  announcementDelay: t,
+  clearAnnouncementDelay: o,
+  clearAnnouncementTimeoutRef: l,
+  onAnnouncementClear: r,
+  dispatch: a
+}) => {
+  clearTimeout(n.current), t ? n.current = setTimeout(b, t, {
+    children: e,
+    clearAnnouncementDelay: o,
+    clearAnnouncementTimeoutRef: l,
+    onAnnouncementClear: r,
+    dispatch: a
+  }) : b({
+    children: e,
+    clearAnnouncementDelay: o,
+    clearAnnouncementTimeoutRef: l,
+    onAnnouncementClear: r,
+    dispatch: a
+  });
+};
+function W({
+  children: e,
+  className: n,
+  politeness: t,
+  role: o = null,
+  announcementDelay: l,
+  clearAnnouncementDelay: r,
+  onAnnouncementClear: a,
+  visible: s,
+  ...p
+}) {
+  const u = _(null), d = _(null), [m, f] = M(B, {
+    announcement: null
+  });
+  let h = t;
+  typeof h > "u" && (h = o ? V[o] : "assertive"), D(() => {
+    G({
+      announcementTimeoutRef: u,
+      announcementDelay: l,
+      children: e,
+      clearAnnouncementDelay: r,
+      clearAnnouncementTimeoutRef: d,
+      onAnnouncementClear: a,
+      dispatch: f
+    });
+  }, [
+    e,
+    l,
+    r,
+    a
+  ]);
+  const g = I(n, {
+    "sr-only": !s
+  });
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      "aria-live": h,
+      ...o && { role: o },
+      className: g,
+      ...p,
+      children: m.announcement
+    }
+  );
+}
+const N = i.createContext(null);
+function q({
+  initialOpen: e = !1,
+  open: n,
+  onOpenChange: t
+} = {}) {
+  const [o, l] = i.useState(e), [r, a] = i.useState(), [s, p] = i.useState(), u = n ?? o, d = t ?? l, m = x({
+    open: u,
+    onOpenChange: d
+  }), f = m.context, h = S(f, {
+    enabled: n == null
+  }), g = P(f, {
+    outsidePress: !1,
+    outsidePressEvent: "mousedown"
+  }), R = $(f), y = F([h, g, R]);
+  return i.useMemo(
+    () => ({
+      open: u,
+      setOpen: d,
+      ...y,
+      ...m,
+      labelId: r,
+      descriptionId: s,
+      setLabelId: a,
+      setDescriptionId: p
+    }),
+    [u, d, y, m, r, s]
+  );
+}
+const v = () => {
+  const e = i.useContext(N);
+  if (e == null)
+    throw new Error("Modal components must be wrapped in <Modal />");
+  return e;
+};
+function X({
+  children: e,
+  ...n
+}) {
+  const t = q(n);
+  return /* @__PURE__ */ c(N.Provider, { value: t, children: e });
+}
+const Y = i.forwardRef(function(e, n) {
+  const { context: t, ...o } = v(), l = O([o.refs.setFloating, n]);
+  if (!t.open)
+    return null;
+  const { overlayBackground: r, ...a } = e, s = I("grid place-items-center", {
+    [`${r}`]: r,
+    "bg-black sm:bg-black/[.8]": !r
+  });
+  return /* @__PURE__ */ c(k, { children: /* @__PURE__ */ c(L, { className: s, lockScroll: !0, children: /* @__PURE__ */ c(U, { context: t, children: /* @__PURE__ */ c(
+    "div",
+    {
+      ref: l,
+      "aria-labelledby": o.labelId,
+      "aria-describedby": o.descriptionId,
+      ...o.getFloatingProps(a),
+      children: a.children
+    }
+  ) }) }) });
+}), Z = i.forwardRef(function({ children: e, ...n }, t) {
+  const { setLabelId: o } = v(), l = A();
+  return i.useLayoutEffect(() => (o(l), () => o(void 0)), [l, o]), /* @__PURE__ */ c("h1", { ...n, ref: t, id: l, children: e });
+}), ee = i.forwardRef(function({ children: e, ...n }, t) {
+  const { setDescriptionId: o } = v(), l = A();
+  return i.useLayoutEffect(() => (o(l), () => o(void 0)), [l, o]), /* @__PURE__ */ c("div", { ...n, ref: t, id: l, children: e });
+}), ne = i.forwardRef(function(e, n) {
+  const { setOpen: t } = v(), { trigger: o, className: l, ...r } = e, a = i.useCallback(() => t(!1), [t]);
+  return /* @__PURE__ */ c("div", { className: l, children: i.cloneElement(o, {
+    ref: n,
+    onClick: a,
+    ...r
+  }) });
+});
+/*!
+  @versini/ui-spacing v1.0.0
+  © 2024 gizmette.com
+*/
+try {
+  window.__VERSINI_UI_SPACING__ || (window.__VERSINI_UI_SPACING__ = {
+    version: "1.0.0",
+    buildTime: "12/24/2024 06:47 PM EST",
+    homepage: "https://github.com/aversini/ui-components",
+    license: "MIT"
+  });
+} catch {
+}
+const H = (e) => {
+  let n = "";
+  if (typeof e == "number" || typeof e == "string")
+    n = "m-" + e;
+  else {
+    const t = [];
+    (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}`), n = t.join(" ");
+  }
+  return n;
+}, te = ({
+  children: e,
+  fill: n,
+  viewBox: t,
+  className: o,
+  defaultViewBox: l,
+  defaultClassName: r,
+  spacing: a,
+  title: s,
+  semantic: p = !1,
+  ...u
+}) => {
+  const d = H(a), m = I(
+    d,
+    o || r
+  );
+  return /* @__PURE__ */ E(T, { children: [
+    /* @__PURE__ */ c(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        className: m,
+        viewBox: t || l,
+        fill: n || "currentColor",
+        role: "img",
+        "aria-hidden": !p,
+        focusable: !1,
+        ...u,
+        children: e
+      }
+    ),
+    s && p && /* @__PURE__ */ c("span", { className: "sr-only", children: s })
+  ] });
+};
+/*!
+  @versini/ui-private v1.6.0
+  © 2024 gizmette.com
+*/
+try {
+  window.__VERSINI_UI_PRIVATE__ || (window.__VERSINI_UI_PRIVATE__ = {
+    version: "1.6.0",
+    buildTime: "12/24/2024 06:47 PM EST",
+    homepage: "https://github.com/aversini/ui-components",
+    license: "MIT"
+  });
+} catch {
+}
+export {
+  W as LiveRegion,
+  X as Modal,
+  ne as ModalClose,
+  Y as ModalContent,
+  ee as ModalDescription,
+  Z as ModalHeading,
+  te as SvgIcon
+};

package/dist/index.js

@@ -1,73 +1,87 @@
-import { jsx as l, jsxs as y, Fragment as V } from "react/jsx-runtime";
+import { jsx as n, jsxs as y, Fragment as V } from "react/jsx-runtime";
 import o from "clsx";
-import E, { lazy as z, useRef as U, useEffect as j, Suspense as O } from "react";
+import T, { lazy as U, useRef as z, useEffect as j, Suspense as O } from "react";
 /*!
-  @versini/ui-panel v1.1.0
+  @versini/ui-panel v1.1.2
   © 2024 gizmette.com
 */
 try {
   window.__VERSINI_UI_PANEL__ || (window.__VERSINI_UI_PANEL__ = {
-    version: "1.1.0",
-    buildTime: "12/18/2024 12:35 PM EST",
+    version: "1.1.2",
+    buildTime: "12/24/2024 06:47 PM EST",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
 } catch {
 }
-const S = "av-messagebox", R = "av-panel", C = "av-button", W = (e) => {
-  let t = "";
+const M = "av-messagebox", R = "av-panel", C = "av-button";
+/*!
+  @versini/ui-spacing v1.0.0
+  © 2024 gizmette.com
+*/
+try {
+  window.__VERSINI_UI_SPACING__ || (window.__VERSINI_UI_SPACING__ = {
+    version: "1.0.0",
+    buildTime: "12/24/2024 06:47 PM EST",
+    homepage: "https://github.com/aversini/ui-components",
+    license: "MIT"
+  });
+} catch {
+}
+const G = (e) => {
+  let r = "";
   if (typeof e == "number" || typeof e == "string")
-    t = "m-" + e;
+    r = "m-" + e;
   else {
-    const r = [];
-    (e == null ? void 0 : e.t) !== void 0 && r.push(`mt-${e.t}`), (e == null ? void 0 : e.r) !== void 0 && r.push(`mr-${e.r}`), (e == null ? void 0 : e.b) !== void 0 && r.push(`mb-${e.b}`), (e == null ? void 0 : e.l) !== void 0 && r.push(`ml-${e.l}`), t = r.join(" ");
+    const t = [];
+    (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 t;
-}, T = "icon", D = "button", G = "link", H = ({
+  return r;
+}, S = "icon", W = "button", D = "link", H = ({
   type: e,
-  size: t,
-  labelRight: r,
+  size: r,
+  labelRight: t,
   labelLeft: a,
-  align: n
+  align: d
 }) => {
-  const d = "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 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";
   switch (e) {
-    case D:
+    case W:
       return o("px-4", {
-        [d]: t === "small",
-        [g]: t === "medium",
-        [i]: t === "large"
+        [l]: r === "small",
+        [g]: r === "medium",
+        [i]: r === "large"
       });
-    case G:
+    case D:
       return o("px-4 text-center", {
-        [d]: t === "small",
-        [g]: t === "medium",
-        [i]: t === "large"
+        [l]: r === "small",
+        [g]: r === "medium",
+        [i]: r === "large"
       });
-    case T:
+    case S:
       return o("inline-flex items-center", {
-        "justify-center": n === "center",
-        "justify-start": n === "left",
-        "justify-end": n === "right",
-        "h-6 w-6 p-0": t === "small" && !(r || a),
-        "h-6 px-4 text-sm font-medium": t === "small" && (r || a),
-        "h-8 w-8 p-1": t === "medium" && !(r || a),
-        "h-8 px-4 text-base font-medium": t === "medium" && (r || a),
-        "h-12 w-12 p-2": t === "large" && !(r || a),
-        "h-12 px-4 text-lg font-medium": t === "large" && (r || a)
+        "justify-center": d === "center",
+        "justify-start": d === "left",
+        "justify-end": d === "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),
+        "h-8 px-4 text-base font-medium": r === "medium" && (t || a),
+        "h-12 w-12 p-2": r === "large" && !(t || a),
+        "h-12 px-4 text-lg font-medium": r === "large" && (t || a)
       });
   }
 }, X = ({
   mode: e,
-  noBackground: t,
-  noTruncate: r,
+  noBackground: r,
+  noTruncate: t,
   variant: a
 }) => {
-  if (t)
+  if (r)
     return "not-prose rounded-full";
   if (a === "primary")
     return o("not-prose rounded-full", {
-      truncate: !r,
+      truncate: !t,
       "bg-action-dark text-copy-light": e === "dark",
       "bg-action-light text-copy-lighter": e === "light",
       "bg-action-dark text-copy-light dark:bg-action-light dark:text-copy-lighter": e === "system",
@@ -75,7 +89,7 @@ const S = "av-messagebox", R = "av-panel", C = "av-button", W = (e) => {
     });
   if (a === "secondary")
     return o("not-prose rounded-full", {
-      truncate: !r,
+      truncate: !t,
       "bg-action-dark text-copy-light": e === "light",
       "bg-action-light text-copy-lighter": e === "dark",
       "bg-action-dark text-copy-light dark:bg-action-light dark:text-copy-lighter": e === "alt-system",
@@ -83,7 +97,7 @@ const S = "av-messagebox", R = "av-panel", C = "av-button", W = (e) => {
     });
   if (a === "danger")
     return o("not-prose rounded-full", {
-      truncate: !r,
+      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",
@@ -91,26 +105,26 @@ const S = "av-messagebox", R = "av-panel", C = "av-button", W = (e) => {
     });
 }, Y = ({
   mode: e,
-  disabled: t,
-  variant: r
+  disabled: r,
+  variant: t
 }) => {
-  if (t)
+  if (r)
     return "";
-  if (r === "primary")
+  if (t === "primary")
     return o("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 (r === "secondary")
+  if (t === "secondary")
     return o("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 (r === "danger")
+  if (t === "danger")
     return o("hover:text-copy-light-hover", {
       "hover:bg-action-danger-dark-hover": e === "dark",
       "hover:bg-action-danger-light-hover": e === "light",
@@ -119,26 +133,26 @@ const S = "av-messagebox", R = "av-panel", C = "av-button", W = (e) => {
     });
 }, F = ({
   mode: e,
-  disabled: t,
-  variant: r
+  disabled: r,
+  variant: t
 }) => {
-  if (t)
+  if (r)
     return "";
-  if (r === "primary")
+  if (t === "primary")
     return o("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 (r === "secondary")
+  if (t === "secondary")
     return o("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 (r === "danger")
+  if (t === "danger")
     return o("active:text-copy-lighter-active", {
       "active:bg-action-danger-dark-active": e === "dark",
       "active:bg-action-danger-light-active": e === "light",
@@ -147,26 +161,26 @@ const S = "av-messagebox", R = "av-panel", C = "av-button", W = (e) => {
     });
 }, q = ({
   mode: e,
-  noBorder: t,
-  variant: r
+  noBorder: r,
+  variant: t
 }) => {
-  if (t)
+  if (r)
     return "border border-transparent";
-  if (r === "primary")
+  if (t === "primary")
     return o("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 (r === "secondary")
+  if (t === "secondary")
     return o("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 (r === "danger")
+  if (t === "danger")
     return o("border", {
       "border-border-danger-dark": e === "dark",
       "border-border-danger-medium": e === "light",
@@ -178,13 +192,13 @@ const S = "av-messagebox", R = "av-panel", C = "av-button", W = (e) => {
   "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"
-}), L = ({
+}), P = ({
   type: e,
-  className: t,
-  raw: r,
+  className: r,
+  raw: t,
   mode: a,
-  focusMode: n,
-  disabled: d,
+  focusMode: d,
+  disabled: l,
   fullWidth: g,
   size: i,
   noBorder: h,
@@ -195,45 +209,45 @@ const S = "av-messagebox", R = "av-panel", C = "av-button", W = (e) => {
   variant: c,
   noTruncate: f,
   align: v
-}) => (c || (c = "primary"), r ? o(C, t) : o(
+}) => (c || (c = "primary"), t ? o(C, r) : o(
   C,
-  t,
-  W(b),
+  r,
+  G(b),
   X({ mode: a, variant: c, noBackground: m, noTruncate: f }),
   H({ type: e, size: i, labelRight: s, labelLeft: u, align: v }),
   q({ mode: a, variant: c, noBorder: h }),
-  J({ focusMode: n }),
-  Y({ mode: a, variant: c, disabled: d }),
-  F({ mode: a, variant: c, disabled: d }),
+  J({ focusMode: d }),
+  Y({ mode: a, variant: c, disabled: l }),
+  F({ mode: a, variant: c, disabled: l }),
   {
     "w-full": g,
-    "disabled:cursor-not-allowed disabled:opacity-50": d
+    "disabled:cursor-not-allowed disabled:opacity-50": l
   }
-)), K = (e, t, r) => {
+)), K = (e, r, t) => {
   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);
-}, M = E.forwardRef((e, t) => {
-  const { onClick: r, noInternalClick: a = !1, ...n } = e;
-  return /* @__PURE__ */ l(
+  !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 = T.forwardRef((e, r) => {
+  const { onClick: t, noInternalClick: a = !1, ...d } = e;
+  return /* @__PURE__ */ n(
     "button",
     {
-      ref: t,
-      onClick: (d) => {
-        K(d, a, r);
+      ref: r,
+      onClick: (l) => {
+        K(l, a, t);
       },
-      ...n
+      ...d
     }
   );
 });
-M.displayName = "BaseButton";
-const $ = E.forwardRef(
+B.displayName = "BaseButton";
+const $ = T.forwardRef(
   ({
     children: e,
-    disabled: t = !1,
-    mode: r = "system",
+    disabled: r = !1,
+    mode: t = "system",
     focusMode: a = "system",
-    fullWidth: n = !1,
-    className: d,
+    fullWidth: d = !1,
+    className: l,
     type: g = "button",
     raw: i = !1,
     noBorder: h = !1,
@@ -247,14 +261,14 @@ const $ = E.forwardRef(
     align: _ = "center",
     ...w
   }, N) => {
-    const I = L({
-      type: T,
-      mode: r,
+    const I = P({
+      type: S,
+      mode: t,
       focusMode: a,
-      fullWidth: n,
-      disabled: t,
+      fullWidth: d,
+      disabled: r,
       raw: i,
-      className: d,
+      className: l,
       noBorder: h,
       size: b,
       labelRight: m,
@@ -262,25 +276,25 @@ const $ = E.forwardRef(
       spacing: f,
       noBackground: v,
       align: _
-    }), B = o({
-      "text-copy-accent-dark": r === "light" && !i,
-      "text-copy-light": r === "dark" && !i,
-      "text-copy-accent-dark dark:text-copy-light": r === "alt-system" && !i,
-      "text-copy-light dark:text-copy-accent-dark": r === "system" && !i
+    }), E = 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
     });
     return /* @__PURE__ */ y(
-      M,
+      B,
       {
         ref: N,
         className: I,
-        disabled: t,
+        disabled: r,
         type: g,
         "aria-label": s || u,
         ...w,
         children: [
-          c && /* @__PURE__ */ l("span", { className: "pr-2", children: c }),
-          /* @__PURE__ */ l("div", { className: B, children: e }),
-          m && /* @__PURE__ */ l("span", { className: "pl-2", children: m })
+          c && /* @__PURE__ */ n("span", { className: "pr-2", children: c }),
+          /* @__PURE__ */ n("div", { className: E, children: e }),
+          m && /* @__PURE__ */ n("span", { className: "pl-2", children: m })
         ]
       }
     );
@@ -288,26 +302,26 @@ const $ = E.forwardRef(
 );
 $.displayName = "ButtonIcon";
 /*!
-  @versini/ui-button v1.2.0
+  @versini/ui-button v1.3.0
   © 2024 gizmette.com
 */
 try {
   window.__VERSINI_UI_BUTTON__ || (window.__VERSINI_UI_BUTTON__ = {
-    version: "1.2.0",
-    buildTime: "12/18/2024 12:35 PM EST",
+    version: "1.3.0",
+    buildTime: "12/24/2024 06:47 PM EST",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
 } catch {
 }
-const Q = E.forwardRef(
+const Q = T.forwardRef(
   ({
     children: e,
-    disabled: t = !1,
-    mode: r = "system",
+    disabled: r = !1,
+    mode: t = "system",
     focusMode: a = "system",
-    fullWidth: n = !1,
-    className: d,
+    fullWidth: d = !1,
+    className: l,
     type: g = "button",
     raw: i = !1,
     noBorder: h = !1,
@@ -322,14 +336,14 @@ const Q = E.forwardRef(
     active: w = !1,
     ...N
   }, I) => {
-    const B = L({
-      type: T,
-      mode: r,
+    const E = P({
+      type: S,
+      mode: t,
       focusMode: a,
-      fullWidth: n,
-      disabled: t,
+      fullWidth: d,
+      disabled: r,
       raw: i,
-      className: d,
+      className: l,
       noBorder: h,
       size: b,
       labelRight: m,
@@ -337,11 +351,11 @@ const Q = E.forwardRef(
       spacing: f,
       noBackground: v,
       align: _
-    }), P = o({
-      "text-copy-accent-dark": r === "light" && !i,
-      "text-copy-light": r === "dark" && !i,
-      "text-copy-accent-dark dark:text-copy-light": r === "alt-system" && !i,
-      "text-copy-light dark:text-copy-accent-dark": r === "system" && !i
+    }), L = 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
     }), A = w ? o(
       "relative",
       "focus-within:static",
@@ -353,47 +367,60 @@ const Q = E.forwardRef(
       "after:left-0",
       "after:right-0",
       {
-        "after:border-table-dark": r === "dark",
-        "after:border-table-light": r === "light",
-        "after:border-table-dark dark:after:border-table-light": r === "system",
-        "after:border-table-light dark:after:border-table-dark": r === "alt-system"
+        "after:border-table-dark": t === "dark",
+        "after:border-table-light": t === "light",
+        "after:border-table-dark dark:after:border-table-light": t === "system",
+        "after:border-table-light dark:after:border-table-dark": t === "alt-system"
       }
     ) : "";
-    return /* @__PURE__ */ l("div", { className: A, children: /* @__PURE__ */ y(
-      M,
+    return /* @__PURE__ */ n("div", { className: A, children: /* @__PURE__ */ y(
+      B,
       {
         ref: I,
-        className: B,
-        disabled: t,
+        className: E,
+        disabled: r,
         type: g,
         "aria-label": s || u,
         ...N,
         children: [
-          c && /* @__PURE__ */ l("span", { className: "pr-2", children: c }),
-          /* @__PURE__ */ l("div", { className: P, children: e }),
-          m && /* @__PURE__ */ l("span", { className: "pl-2", children: m })
+          c && /* @__PURE__ */ n("span", { className: "pr-2", children: c }),
+          /* @__PURE__ */ n("div", { className: L, children: e }),
+          m && /* @__PURE__ */ n("span", { className: "pl-2", children: m })
         ]
       }
     ) });
   }
 );
 Q.displayName = "ButtonSort";
+/*!
+  @versini/ui-spacing v1.0.0
+  © 2024 gizmette.com
+*/
+try {
+  window.__VERSINI_UI_SPACING__ || (window.__VERSINI_UI_SPACING__ = {
+    version: "1.0.0",
+    buildTime: "12/24/2024 06:47 PM EST",
+    homepage: "https://github.com/aversini/ui-components",
+    license: "MIT"
+  });
+} catch {
+}
 const Z = (e) => {
-  let t = "";
+  let r = "";
   if (typeof e == "number" || typeof e == "string")
-    t = "m-" + e;
+    r = "m-" + e;
   else {
-    const r = [];
-    (e == null ? void 0 : e.t) !== void 0 && r.push(`mt-${e.t}`), (e == null ? void 0 : e.r) !== void 0 && r.push(`mr-${e.r}`), (e == null ? void 0 : e.b) !== void 0 && r.push(`mb-${e.b}`), (e == null ? void 0 : e.l) !== void 0 && r.push(`ml-${e.l}`), t = r.join(" ");
+    const t = [];
+    (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 t;
+  return r;
 }, ee = ({
   children: e,
-  fill: t,
-  viewBox: r,
+  fill: r,
+  viewBox: t,
   className: a,
-  defaultViewBox: n,
-  defaultClassName: d,
+  defaultViewBox: d,
+  defaultClassName: l,
   spacing: g,
   title: i,
   semantic: h = !1,
@@ -401,16 +428,16 @@ const Z = (e) => {
 }) => {
   const u = Z(g), b = o(
     u,
-    a || d
+    a || l
   );
   return /* @__PURE__ */ y(V, { children: [
-    /* @__PURE__ */ l(
+    /* @__PURE__ */ n(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
         className: b,
-        viewBox: r || n,
-        fill: t || "currentColor",
+        viewBox: t || d,
+        fill: r || "currentColor",
         role: "img",
         "aria-hidden": !h,
         focusable: !1,
@@ -418,118 +445,118 @@ const Z = (e) => {
         children: e
       }
     ),
-    i && h && /* @__PURE__ */ l("span", { className: "sr-only", children: i })
+    i && h && /* @__PURE__ */ n("span", { className: "sr-only", children: i })
   ] });
 };
 /*!
-  @versini/ui-private v1.5.0
+  @versini/ui-private v1.6.0
   © 2024 gizmette.com
 */
 try {
   window.__VERSINI_UI_PRIVATE__ || (window.__VERSINI_UI_PRIVATE__ = {
-    version: "1.5.0",
-    buildTime: "12/18/2024 12:34 PM EST",
+    version: "1.6.0",
+    buildTime: "12/24/2024 06:47 PM EST",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
 } catch {
 }
-const re = ({
+const te = ({
   className: e,
-  viewBox: t,
-  spacing: r,
+  viewBox: r,
+  spacing: t,
   title: a,
-  monotone: n,
-  ...d
-}) => /* @__PURE__ */ l(
+  monotone: d,
+  ...l
+}) => /* @__PURE__ */ n(
   ee,
   {
     defaultViewBox: "0 0 384 512",
     defaultClassName: "size-5",
-    viewBox: t,
+    viewBox: r,
     className: e,
-    spacing: r,
+    spacing: t,
     title: a || "Close",
-    ...d,
-    children: /* @__PURE__ */ l("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" })
+    ...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" })
   }
 );
 /*!
-  @versini/ui-icons v1.16.0
+  @versini/ui-icons v1.17.0
   © 2024 gizmette.com
 */
 try {
   window.__VERSINI_UI_ICONS__ || (window.__VERSINI_UI_ICONS__ = {
-    version: "1.16.0",
-    buildTime: "12/18/2024 12:35 PM EST",
+    version: "1.17.0",
+    buildTime: "12/24/2024 06:47 PM EST",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
 } catch {
 }
-const p = "panel", x = "messagebox", te = ({
+const p = "panel", x = "messagebox", re = ({
   className: e,
-  kind: t,
-  borderMode: r
+  kind: r,
+  borderMode: t
 }) => ({
   main: o("prose prose-lighter flex flex-col bg-surface-medium", {
-    [`${R} max-h-full sm:max-h-[95%] min-h-full sm:min-h-[10rem] sm:rounded-lg sm:border-2`]: t === p,
-    [`${R} w-full sm:w-[95%] md:max-w-2xl`]: t === p && !e,
-    [`${S} rounded-lg border-2`]: t === x,
-    [`${S} w-[95%] sm:w-[50%] md:max-w-2xl`]: t === x && !e,
+    [`${R} max-h-full sm:max-h-[95%] min-h-full sm:min-h-[10rem] sm:rounded-lg sm:border-2`]: r === p,
+    [`${R} 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,
     [`${e}`]: !!e,
-    "sm:border-border-dark": r === "dark" && t === p,
-    "sm:border-border-accent": r === "light" && t === p,
-    "border-border-dark": r === "dark" && t === x,
-    "border-border-accent": r === "light" && t === x
+    "sm:border-border-dark": t === "dark" && r === p,
+    "sm:border-border-accent": t === "light" && r === p,
+    "border-border-dark": t === "dark" && r === x,
+    "border-border-accent": t === "light" && r === x
   }),
   content: "flex flex-col py-2 sm:py-4 sm:px-4 px-2 overflow-y-auto",
   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) => z(
-  () => import("./chunks/index.CgcpUI_B.js").then((t) => ({
-    default: t[e]
+}), k = (e) => U(
+  () => import("./chunks/index.CYbntI7I.js").then((r) => ({
+    default: r[e]
   }))
-), ae = k("Modal"), oe = k("ModalClose"), ie = k("ModalContent"), le = k("ModalDescription"), de = k("ModalHeading"), ge = ({
+), ae = k("Modal"), oe = k("ModalClose"), ie = k("ModalContent"), ne = k("ModalDescription"), le = k("ModalHeading"), ge = ({
   open: e,
-  onOpenChange: t,
-  title: r,
+  onOpenChange: r,
+  title: t,
   children: a,
-  footer: n,
-  borderMode: d = "light",
+  footer: d,
+  borderMode: l = "light",
   kind: g = p,
   className: i
 }) => {
-  const h = U(""), s = te({ className: i, kind: g, borderMode: d });
-  return j(() => (e && (h.current = document.title, document.title = `${r} | ${h.current}`), () => {
+  const h = z(""), s = re({ className: i, kind: g, borderMode: l });
+  return j(() => (e && (h.current = document.title, document.title = `${t} | ${h.current}`), () => {
     e && (document.title = h.current);
-  }), [r, e]), /* @__PURE__ */ l(O, { fallback: /* @__PURE__ */ l("div", {}), children: e && /* @__PURE__ */ l(ae, { open: e, onOpenChange: t, children: /* @__PURE__ */ y(ie, { className: s.main, children: [
+  }), [t, e]), /* @__PURE__ */ n(O, { 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__ */ l(
+      /* @__PURE__ */ n(
         oe,
         {
           className: s.close,
-          trigger: /* @__PURE__ */ l(
+          trigger: /* @__PURE__ */ n(
             $,
             {
               mode: "dark",
               focusMode: "light",
               noBorder: !0,
               label: "Close",
-              children: /* @__PURE__ */ l(re, {})
+              children: /* @__PURE__ */ n(te, {})
             }
           )
         }
       ),
-      /* @__PURE__ */ l(de, { className: s.header, children: r })
+      /* @__PURE__ */ n(le, { className: s.header, children: t })
     ] }),
-    /* @__PURE__ */ l(le, { className: s.content, children: a }),
-    n && /* @__PURE__ */ l("div", { className: s.footer, children: n })
+    /* @__PURE__ */ n(ne, { className: s.content, children: a }),
+    d && /* @__PURE__ */ n("div", { className: s.footer, children: d })
   ] }) }) });
 };
 export {
-  S as MESSAGEBOX_CLASSNAME,
+  M as MESSAGEBOX_CLASSNAME,
   R as PANEL_CLASSNAME,
   ge as Panel
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-panel",
-	"version": "1.1.0",
+	"version": "1.1.2",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -39,14 +39,14 @@
 	},
 	"dependencies": {
 		"@tailwindcss/typography": "0.5.15",
-		"@versini/ui-button": "1.2.0",
-		"@versini/ui-icons": "1.16.0",
-		"@versini/ui-private": "1.5.0",
+		"@versini/ui-button": "1.3.0",
+		"@versini/ui-icons": "1.17.0",
+		"@versini/ui-private": "1.6.0",
 		"clsx": "2.1.1",
-		"tailwindcss": "3.4.15"
+		"tailwindcss": "3.4.17"
 	},
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "413e5c7cd8228d2f135f54fa897101401207229b"
+	"gitHead": "cb948414a675c01f3328ed6470ccf4b58f73534f"
 }

package/dist/chunks/index.CgcpUI_B.js

@@ -1,258 +0,0 @@
-import { jsx as i, jsxs as T, Fragment as D } from "react/jsx-runtime";
-import y from "clsx";
-import * as c from "react";
-import { useRef as A, useReducer as M, useEffect as _, useId as R } from "react";
-import { useFloating as x, useClick as S, useDismiss as $, useRole as F, useInteractions as O, useMergeRefs as P, FloatingPortal as k, FloatingOverlay as L, FloatingFocusManager as U } from "@floating-ui/react";
-const w = "SET_ANNOUNCEMENT", I = "CLEAR_ANNOUNCEMENT", V = {
-  alert: null,
-  alertdialog: null,
-  log: "polite",
-  marquee: null,
-  progressbar: null,
-  status: "polite",
-  timer: "assertive"
-}, B = (e, n) => {
-  switch (n == null ? void 0 : n.type) {
-    case w:
-      return {
-        ...e,
-        announcement: n.payload
-      };
-    case I:
-      return {
-        ...e,
-        announcement: null
-      };
-    default:
-      return e;
-  }
-}, j = ({
-  onAnnouncementClear: e,
-  dispatch: n
-}) => {
-  n({
-    type: I
-  }), typeof e == "function" && e();
-}, C = ({
-  children: e,
-  clearAnnouncementDelay: n,
-  clearAnnouncementTimeoutRef: o,
-  onAnnouncementClear: l,
-  dispatch: t
-}) => {
-  clearTimeout(o.current), e !== null && t({
-    type: w,
-    payload: e
-  }), n && (o.current = setTimeout(
-    () => j({
-      onAnnouncementClear: l,
-      dispatch: t
-    }),
-    n
-  ));
-}, q = ({
-  children: e,
-  announcementTimeoutRef: n,
-  announcementDelay: o,
-  clearAnnouncementDelay: l,
-  clearAnnouncementTimeoutRef: t,
-  onAnnouncementClear: r,
-  dispatch: a
-}) => {
-  clearTimeout(n.current), o ? n.current = setTimeout(C, o, {
-    children: e,
-    clearAnnouncementDelay: l,
-    clearAnnouncementTimeoutRef: t,
-    onAnnouncementClear: r,
-    dispatch: a
-  }) : C({
-    children: e,
-    clearAnnouncementDelay: l,
-    clearAnnouncementTimeoutRef: t,
-    onAnnouncementClear: r,
-    dispatch: a
-  });
-};
-function W({
-  children: e,
-  className: n,
-  politeness: o,
-  role: l = null,
-  announcementDelay: t,
-  clearAnnouncementDelay: r,
-  onAnnouncementClear: a,
-  visible: s,
-  ...p
-}) {
-  const u = A(null), d = A(null), [m, f] = M(B, {
-    announcement: null
-  });
-  let h = o;
-  typeof h > "u" && (h = l ? V[l] : "assertive"), _(() => {
-    q({
-      announcementTimeoutRef: u,
-      announcementDelay: t,
-      children: e,
-      clearAnnouncementDelay: r,
-      clearAnnouncementTimeoutRef: d,
-      onAnnouncementClear: a,
-      dispatch: f
-    });
-  }, [
-    e,
-    t,
-    r,
-    a
-  ]);
-  const g = y(n, {
-    "sr-only": !s
-  });
-  return /* @__PURE__ */ i(
-    "div",
-    {
-      "aria-live": h,
-      ...l && { role: l },
-      className: g,
-      ...p,
-      children: m.announcement
-    }
-  );
-}
-const E = c.createContext(null);
-function H({
-  initialOpen: e = !1,
-  open: n,
-  onOpenChange: o
-} = {}) {
-  const [l, t] = c.useState(e), [r, a] = c.useState(), [s, p] = c.useState(), u = n ?? l, d = o ?? t, m = x({
-    open: u,
-    onOpenChange: d
-  }), f = m.context, h = S(f, {
-    enabled: n == null
-  }), g = $(f, {
-    outsidePress: !1,
-    outsidePressEvent: "mousedown"
-  }), N = F(f), b = O([h, g, N]);
-  return c.useMemo(
-    () => ({
-      open: u,
-      setOpen: d,
-      ...b,
-      ...m,
-      labelId: r,
-      descriptionId: s,
-      setLabelId: a,
-      setDescriptionId: p
-    }),
-    [u, d, b, m, r, s]
-  );
-}
-const v = () => {
-  const e = c.useContext(E);
-  if (e == null)
-    throw new Error("Modal components must be wrapped in <Modal />");
-  return e;
-};
-function X({
-  children: e,
-  ...n
-}) {
-  const o = H(n);
-  return /* @__PURE__ */ i(E.Provider, { value: o, children: e });
-}
-const Y = c.forwardRef(function(e, n) {
-  const { context: o, ...l } = v(), t = P([l.refs.setFloating, n]);
-  if (!o.open)
-    return null;
-  const { overlayBackground: r, ...a } = e, s = y("grid place-items-center", {
-    [`${r}`]: r,
-    "bg-black sm:bg-black/[.8]": !r
-  });
-  return /* @__PURE__ */ i(k, { children: /* @__PURE__ */ i(L, { className: s, lockScroll: !0, children: /* @__PURE__ */ i(U, { context: o, children: /* @__PURE__ */ i(
-    "div",
-    {
-      ref: t,
-      "aria-labelledby": l.labelId,
-      "aria-describedby": l.descriptionId,
-      ...l.getFloatingProps(a),
-      children: a.children
-    }
-  ) }) }) });
-}), Z = c.forwardRef(function({ children: e, ...n }, o) {
-  const { setLabelId: l } = v(), t = R();
-  return c.useLayoutEffect(() => (l(t), () => l(void 0)), [t, l]), /* @__PURE__ */ i("h1", { ...n, ref: o, id: t, children: e });
-}), ee = c.forwardRef(function({ children: e, ...n }, o) {
-  const { setDescriptionId: l } = v(), t = R();
-  return c.useLayoutEffect(() => (l(t), () => l(void 0)), [t, l]), /* @__PURE__ */ i("div", { ...n, ref: o, id: t, children: e });
-}), ne = c.forwardRef(function(e, n) {
-  const { setOpen: o } = v(), { trigger: l, className: t, ...r } = e, a = c.useCallback(() => o(!1), [o]);
-  return /* @__PURE__ */ i("div", { className: t, children: c.cloneElement(l, {
-    ref: n,
-    onClick: a,
-    ...r
-  }) });
-}), z = (e) => {
-  let n = "";
-  if (typeof e == "number" || typeof e == "string")
-    n = "m-" + e;
-  else {
-    const o = [];
-    (e == null ? void 0 : e.t) !== void 0 && o.push(`mt-${e.t}`), (e == null ? void 0 : e.r) !== void 0 && o.push(`mr-${e.r}`), (e == null ? void 0 : e.b) !== void 0 && o.push(`mb-${e.b}`), (e == null ? void 0 : e.l) !== void 0 && o.push(`ml-${e.l}`), n = o.join(" ");
-  }
-  return n;
-}, oe = ({
-  children: e,
-  fill: n,
-  viewBox: o,
-  className: l,
-  defaultViewBox: t,
-  defaultClassName: r,
-  spacing: a,
-  title: s,
-  semantic: p = !1,
-  ...u
-}) => {
-  const d = z(a), m = y(
-    d,
-    l || r
-  );
-  return /* @__PURE__ */ T(D, { children: [
-    /* @__PURE__ */ i(
-      "svg",
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        className: m,
-        viewBox: o || t,
-        fill: n || "currentColor",
-        role: "img",
-        "aria-hidden": !p,
-        focusable: !1,
-        ...u,
-        children: e
-      }
-    ),
-    s && p && /* @__PURE__ */ i("span", { className: "sr-only", children: s })
-  ] });
-};
-/*!
-  @versini/ui-private v1.5.0
-  © 2024 gizmette.com
-*/
-try {
-  window.__VERSINI_UI_PRIVATE__ || (window.__VERSINI_UI_PRIVATE__ = {
-    version: "1.5.0",
-    buildTime: "12/18/2024 12:34 PM EST",
-    homepage: "https://github.com/aversini/ui-components",
-    license: "MIT"
-  });
-} catch {
-}
-export {
-  W as LiveRegion,
-  X as Modal,
-  ne as ModalClose,
-  Y as ModalContent,
-  ee as ModalDescription,
-  Z as ModalHeading,
-  oe as SvgIcon
-};