@orioncactuscorp/ui 1.14.0 → 1.15.1

package/dist/components/internal/ModalPresentation.js

@@ -1,12 +1,12 @@
 'use client';
-import { jsx as n, jsxs as g } from "react/jsx-runtime";
-import { useCallback as I, useEffect as Z, useId as _, useState as aa } from "react";
+import { jsx as t, jsxs as g } from "react/jsx-runtime";
+import { useCallback as B, useEffect as Z, useId as _, useState as aa } from "react";
 import { Dialog as ea } from "@base-ui-components/react/dialog";
 import { MotionExpand as oa } from "../../react/motion.js";
 import { mergeRefs as ta } from "../../utils/mergeRefs.js";
 import na from "../Background/Background.js";
 import ra from "../Interaction/Interaction.js";
-import { ScrollArea as k, ScrollAreaContainer as x } from "../ScrollArea/ScrollArea.js";
+import { ScrollArea as z, ScrollAreaContainer as F } from "../ScrollArea/ScrollArea.js";
 import { DisclosureIndicator as ia } from "./DisclosureIndicator.js";
 import { normalizeSlotIcon as la } from "./slot.js";
 import e from "../Modal/Modal.module.scss.js";
@@ -16,94 +16,95 @@ import { useMeasuredElement as sa } from "../Modal/useElementSize.js";
 function d(...a) {
   return a.filter(Boolean).join(" ");
 }
-function z(a) {
+function C(a) {
   return a != null && a !== !1 && a !== "";
 }
-function xa(a, t) {
-  return a === !0 || a === "auto" && t.canScroll && !t.scrolledToBottom;
+function xa(a, n) {
+  return a === !0 || a === "auto" && n.canScroll && !n.scrolledToBottom;
 }
-function za({
+function Ba({
   bodyNode: a,
-  bodyRef: t,
-  setBodyNode: l,
-  setScrollState: i
+  bodyRef: n,
+  setBodyNode: i,
+  setScrollState: l
 }) {
-  const r = I(
+  const r = B(
     (o) => {
-      i(ca(o));
+      l(ca(o));
     },
-    [i]
-  ), s = I(
+    [l]
+  ), m = B(
     (o) => {
-      ta(l, t, r)(o);
+      ta(i, n, r)(o);
     },
-    [t, l, r]
+    [n, i, r]
   );
   return Z(() => {
     const o = a;
     if (!o || (r(o), typeof ResizeObserver > "u")) return;
-    const m = new ResizeObserver(() => r(o));
-    return m.observe(o), o.firstElementChild && m.observe(o.firstElementChild), () => m.disconnect();
-  }, [a, r]), { setBodyRef: s, updateScrollState: r };
+    const s = new ResizeObserver(() => r(o));
+    return s.observe(o), o.firstElementChild && s.observe(o.firstElementChild), () => s.disconnect();
+  }, [a, r]), { setBodyRef: m, updateScrollState: r };
 }
-function Fa({
+function za({
   children: a,
-  className: t,
-  contentTransition: l,
-  placement: i,
+  className: n,
+  contentTransition: i,
+  placement: l,
   ref: r,
-  resize: s,
+  resize: m,
   scrollable: o,
-  size: m,
+  size: s,
   style: p,
   variant: u
 }) {
-  return /* @__PURE__ */ n(
+  return /* @__PURE__ */ t(
     "div",
     {
       ref: r,
-      className: d(e.surface, e[s], t),
+      className: d(e.surface, e[m], n),
       "data-oc-part": "surface",
       "data-oc-variant": u,
-      "data-oc-size": m,
-      "data-oc-resize": s,
-      "data-oc-content-transition": l,
-      "data-oc-modal-placement": i,
+      "data-oc-size": s,
+      "data-oc-resize": m,
+      "data-oc-content-transition": i,
+      "data-oc-modal-placement": l,
       "data-oc-scrollable": o ? "true" : "false",
       style: p,
       children: a
     }
   );
 }
-function Pa({
-  children: a,
-  className: t = "",
+function Fa({
+  bottomSlot: a,
+  children: n,
+  className: i = "",
   closeContent: l,
-  dragEnabled: i,
-  handleContent: r,
-  leadingContent: s,
-  sticky: o,
-  titleContent: m,
-  trailingContent: p,
-  ...u
+  dragEnabled: r,
+  handleContent: m,
+  leadingContent: o,
+  sticky: s,
+  titleContent: p,
+  trailingContent: u,
+  ...h
 }) {
-  const v = z(s);
+  const v = C(o), N = C(a);
   return /* @__PURE__ */ g(
     na,
     {
-      ...u,
+      ...h,
       as: "header",
       backdrop: "compact",
-      className: d(e.header, t),
+      className: d(e.header, i),
       backColor: "var(--oc-color-theme-background-elevated-normal)",
       frontColor: "transparent",
       "data-oc-part": "header",
       "data-oc-component": "modal-header",
       variant: "strong",
-      "data-oc-draggable": i === void 0 ? void 0 : String(i),
-      "data-oc-sticky": o ? "true" : "false",
+      "data-oc-draggable": r === void 0 ? void 0 : String(r),
+      "data-oc-sticky": s ? "true" : "false",
       children: [
-        r,
+        m,
         /* @__PURE__ */ g(
           "div",
           {
@@ -111,65 +112,66 @@ function Pa({
             "data-oc-has-leading": v ? "true" : "false",
             "data-oc-part": "header-inner",
             children: [
-              v ? /* @__PURE__ */ n("div", { className: e.headerLeading, "data-oc-part": "header-leading", children: s }) : null,
-              /* @__PURE__ */ n("div", { className: e.headerTitle, "data-oc-part": "header-title", children: m ?? a }),
+              v ? /* @__PURE__ */ t("div", { className: e.headerLeading, "data-oc-part": "header-leading", children: o }) : null,
+              /* @__PURE__ */ t("div", { className: e.headerTitle, "data-oc-part": "header-title", children: p ?? n }),
               /* @__PURE__ */ g("div", { className: e.headerTrailing, "data-oc-part": "header-trailing", children: [
-                p,
+                u,
                 l
               ] })
             ]
           }
-        )
+        ),
+        N ? /* @__PURE__ */ t("div", { className: e.headerBottom, "data-oc-part": "header-bottom", children: a }) : null
       ]
     }
   );
 }
-function Ta({
+function Pa({
   className: a = "",
-  title: t,
-  children: l,
-  expanded: i,
+  title: n,
+  children: i,
+  expanded: l,
   defaultExpanded: r = !0,
-  onExpandedChange: s,
+  onExpandedChange: m,
   disabled: o = !1,
-  forceMount: m = !0,
+  forceMount: s = !0,
   headingLevel: p = 2,
   indicator: u,
-  titleAsDialogTitle: v = !0,
-  navigationProps: F,
-  panelProps: P,
-  panelContentProps: T,
-  ref: B,
-  style: N,
+  titleAsDialogTitle: h = !0,
+  navigationProps: v,
+  panelProps: N,
+  panelContentProps: P,
+  ref: T,
+  style: S,
   canRenderHandle: R,
-  handleProps: b,
+  handleProps: M,
   onPanelMotionStateChange: E,
   ...H
 }) {
-  const { height: C, setNode: $ } = sa(), h = _(), [c, j] = da({
-    value: i,
+  const { height: y, setNode: $ } = sa(), b = _(), [c, j] = da({
+    value: l,
     defaultValue: r,
-    onChange: s
+    onChange: m
   }), [D, L] = aa(
     c ? "open" : "closed"
   ), O = `h${p >= 2 && p <= 6 ? p : 2}`, {
     className: w = "",
     id: A,
     onClick: V,
-    ...S
-  } = F ?? {}, {
+    ...I
+  } = v ?? {}, {
     className: q = "",
     id: G,
     role: J,
     ...K
-  } = P ?? {}, { className: Q = "", ...U } = T ?? {}, M = A ?? `${h}-navigation`, y = G ?? `${h}-panel`, W = `${h}-dialog-title`, X = z(t), Y = C > 0 ? {
-    ...N,
-    "--oc-modal-navigation-block-size": `${C}px`
-  } : N;
+  } = N ?? {}, { className: Q = "", ...U } = P ?? {}, k = A ?? `${b}-navigation`, x = G ?? `${b}-panel`, W = `${b}-dialog-title`, X = C(n), Y = y > 0 ? {
+    ...S,
+    "--oc-modal-navigation-block-size": `${y}px`
+  } : S;
   return /* @__PURE__ */ g(
     "section",
     {
-      ref: B,
+      ref: T,
       className: d(e.navigationSection, a),
       style: Y,
       ...H,
@@ -177,38 +179,38 @@ function Ta({
       "data-oc-motion-state": D,
       "data-oc-state": c ? "open" : "closed",
       children: [
-        v && X ? /* @__PURE__ */ n(
+        h && X ? /* @__PURE__ */ t(
           ea.Title,
           {
             className: e.navigationDialogTitle,
             id: W,
-            children: t
+            children: n
           }
         ) : null,
-        R ? /* @__PURE__ */ n(
+        R ? /* @__PURE__ */ t(
           "div",
           {
-            ...b,
+            ...M,
             "aria-hidden": "true",
-            className: d(e.handle, b?.className),
+            className: d(e.handle, M?.className),
             "data-oc-part": "handle"
           }
         ) : null,
-        /* @__PURE__ */ n(O, { className: e.navigationHeading, "data-oc-part": "heading", children: /* @__PURE__ */ g(
+        /* @__PURE__ */ t(O, { className: e.navigationHeading, "data-oc-part": "heading", children: /* @__PURE__ */ g(
           "button",
           {
-            ...S,
+            ...I,
             ref: $,
-            id: M,
+            id: k,
             className: d(
               e.navigation,
               w
             ),
             type: "button",
             disabled: o,
-            "aria-disabled": o ? "true" : S["aria-disabled"],
+            "aria-disabled": o ? "true" : I["aria-disabled"],
             "aria-expanded": c,
-            "aria-controls": y,
+            "aria-controls": x,
             onClick: (f) => {
               V?.(f), !(f.defaultPrevented || o) && j(!c);
             },
@@ -216,32 +218,32 @@ function Ta({
             "data-oc-part": "navigation",
             "data-oc-state": c ? "open" : "closed",
             children: [
-              /* @__PURE__ */ n("span", { className: e.navigationTitle, "data-oc-part": "title", children: t }),
-              u === void 0 ? /* @__PURE__ */ n(
+              /* @__PURE__ */ t("span", { className: e.navigationTitle, "data-oc-part": "title", children: n }),
+              u === void 0 ? /* @__PURE__ */ t(
                 ia,
                 {
                   className: e.navigationIndicator,
                   open: c
                 }
-              ) : u ? /* @__PURE__ */ n(
+              ) : u ? /* @__PURE__ */ t(
                 "span",
                 {
                   className: e.navigationIndicator,
                   "data-oc-part": "indicator",
                   "data-oc-state": c ? "open" : "closed",
-                  children: /* @__PURE__ */ n("span", { "data-oc-part": "indicator-frame", children: la(u) })
+                  children: /* @__PURE__ */ t("span", { "data-oc-part": "indicator-frame", children: la(u) })
                 }
               ) : null,
-              o ? null : /* @__PURE__ */ n(ra, { variant: "light" })
+              o ? null : /* @__PURE__ */ t(ra, { variant: "light" })
             ]
           }
         ) }),
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ t(
           oa,
           {
             className: d(e.navigationPanel, q),
             open: c,
-            forceMount: m,
+            forceMount: s,
             intent: "expand",
             measureBlockSize: "rendered",
             onMotionStateChange: (f) => {
@@ -253,20 +255,20 @@ function Ta({
             },
             ...K,
             "aria-hidden": c ? void 0 : !0,
-            "aria-labelledby": M,
-            id: y,
+            "aria-labelledby": k,
+            id: x,
             inert: c ? void 0 : !0,
             role: J ?? "region",
             "data-oc-component": "modal-navigation-panel",
             "data-oc-state": c ? "open" : "closed",
-            children: /* @__PURE__ */ n(
-              k,
+            children: /* @__PURE__ */ t(
+              z,
               {
                 className: e.navigationPanelScroll,
                 "data-oc-component": "modal-navigation-panel-scroll-area",
                 "data-oc-part": "panel-scroll-area",
-                children: /* @__PURE__ */ n(
-                  x,
+                children: /* @__PURE__ */ t(
+                  F,
                   {
                     ...U,
                     className: d(
@@ -274,7 +276,7 @@ function Ta({
                       Q
                     ),
                     "data-oc-component": "modal-navigation-panel-content",
-                    children: l
+                    children: i
                   }
                 )
               }
@@ -285,22 +287,22 @@ function Ta({
     }
   );
 }
-function Ba({
+function Ta({
   bodyContainerProps: a,
-  bodyContentProps: t,
-  children: l,
-  layout: i,
+  bodyContentProps: n,
+  children: i,
+  layout: l,
   scrollAreaProps: r
 }) {
-  return /* @__PURE__ */ n(
-    k,
+  return /* @__PURE__ */ t(
+    z,
     {
       ...r,
       className: d(e.body, r?.className),
       "data-oc-part": "body",
       "data-oc-component": "modal-body",
-      children: /* @__PURE__ */ n(
-        x,
+      children: /* @__PURE__ */ t(
+        F,
         {
           ...a,
           className: d(
@@ -309,18 +311,18 @@ function Ba({
           ),
           "data-oc-part": "body-container",
           "data-oc-component": "modal-body-container",
-          children: /* @__PURE__ */ n(
+          children: /* @__PURE__ */ t(
             "section",
             {
-              ...t,
+              ...n,
               className: d(
                 e.bodyContent,
-                t?.className
+                n?.className
               ),
               "data-oc-part": "body-content",
               "data-oc-component": "modal-body-content",
-              "data-oc-layout": i,
-              children: l
+              "data-oc-layout": l,
+              children: i
             }
           )
         }
@@ -330,30 +332,30 @@ function Ba({
 }
 function Ra({
   backgroundActive: a,
-  children: t,
-  className: l = "",
-  ...i
+  children: n,
+  className: i = "",
+  ...l
 }) {
-  return /* @__PURE__ */ n(
+  return /* @__PURE__ */ t(
     "footer",
     {
-      ...i,
-      className: d(e.footer, l),
+      ...l,
+      className: d(e.footer, i),
       "data-oc-part": "footer",
       "data-oc-component": "modal-footer",
       "data-oc-background": a ? "true" : "false",
-      children: t
+      children: n
     }
   );
 }
 export {
-  Ba as ModalBodyFrame,
+  Ta as ModalBodyFrame,
   Ra as ModalFooterFrame,
-  Pa as ModalHeaderFrame,
-  Ta as ModalNavigationSectionFrame,
-  Fa as ModalSurfaceFrame,
-  z as hasRenderableModalContent,
+  Fa as ModalHeaderFrame,
+  Pa as ModalNavigationSectionFrame,
+  za as ModalSurfaceFrame,
+  C as hasRenderableModalContent,
   d as mergeModalClassName,
   xa as resolveModalFooterBackground,
-  za as useModalBodyScrollState
+  Ba as useModalBodyScrollState
 };

package/dist/components/internal/OverlayPortalContext.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as e } from "react/jsx-runtime";
+import { useContext as n, createContext as a } from "react";
+const t = a(
+  void 0
+);
+function u({
+  children: r,
+  container: o
+}) {
+  return /* @__PURE__ */ e(t.Provider, { value: o, children: r });
+}
+function l(r) {
+  const o = n(t);
+  return r === void 0 ? o : r;
+}
+export {
+  u as OverlayPortalProvider,
+  l as useOverlayPortalContainer
+};