@orioncactuscorp/ui 1.13.0 → 1.14.0

package/dist/components/internal/ModalPresentation.js

@@ -0,0 +1,359 @@
+'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 { 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 { DisclosureIndicator as ia } from "./DisclosureIndicator.js";
+import { normalizeSlotIcon as la } from "./slot.js";
+import e from "../Modal/Modal.module.scss.js";
+import { getModalScrollState as ca } from "../Modal/modalScrollArbitration.js";
+import { useControllableState as da } from "../Modal/useControllableState.js";
+import { useMeasuredElement as sa } from "../Modal/useElementSize.js";
+function d(...a) {
+  return a.filter(Boolean).join(" ");
+}
+function z(a) {
+  return a != null && a !== !1 && a !== "";
+}
+function xa(a, t) {
+  return a === !0 || a === "auto" && t.canScroll && !t.scrolledToBottom;
+}
+function za({
+  bodyNode: a,
+  bodyRef: t,
+  setBodyNode: l,
+  setScrollState: i
+}) {
+  const r = I(
+    (o) => {
+      i(ca(o));
+    },
+    [i]
+  ), s = I(
+    (o) => {
+      ta(l, t, r)(o);
+    },
+    [t, l, 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 };
+}
+function Fa({
+  children: a,
+  className: t,
+  contentTransition: l,
+  placement: i,
+  ref: r,
+  resize: s,
+  scrollable: o,
+  size: m,
+  style: p,
+  variant: u
+}) {
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      ref: r,
+      className: d(e.surface, e[s], t),
+      "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-scrollable": o ? "true" : "false",
+      style: p,
+      children: a
+    }
+  );
+}
+function Pa({
+  children: a,
+  className: t = "",
+  closeContent: l,
+  dragEnabled: i,
+  handleContent: r,
+  leadingContent: s,
+  sticky: o,
+  titleContent: m,
+  trailingContent: p,
+  ...u
+}) {
+  const v = z(s);
+  return /* @__PURE__ */ g(
+    na,
+    {
+      ...u,
+      as: "header",
+      backdrop: "compact",
+      className: d(e.header, t),
+      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",
+      children: [
+        r,
+        /* @__PURE__ */ g(
+          "div",
+          {
+            className: e.headerInner,
+            "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 }),
+              /* @__PURE__ */ g("div", { className: e.headerTrailing, "data-oc-part": "header-trailing", children: [
+                p,
+                l
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function Ta({
+  className: a = "",
+  title: t,
+  children: l,
+  expanded: i,
+  defaultExpanded: r = !0,
+  onExpandedChange: s,
+  disabled: o = !1,
+  forceMount: m = !0,
+  headingLevel: p = 2,
+  indicator: u,
+  titleAsDialogTitle: v = !0,
+  navigationProps: F,
+  panelProps: P,
+  panelContentProps: T,
+  ref: B,
+  style: N,
+  canRenderHandle: R,
+  handleProps: b,
+  onPanelMotionStateChange: E,
+  ...H
+}) {
+  const { height: C, setNode: $ } = sa(), h = _(), [c, j] = da({
+    value: i,
+    defaultValue: r,
+    onChange: s
+  }), [D, L] = aa(
+    c ? "open" : "closed"
+  ), O = `h${p >= 2 && p <= 6 ? p : 2}`, {
+    className: w = "",
+    id: A,
+    onClick: V,
+    ...S
+  } = F ?? {}, {
+    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;
+  return /* @__PURE__ */ g(
+    "section",
+    {
+      ref: B,
+      className: d(e.navigationSection, a),
+      style: Y,
+      ...H,
+      "data-oc-component": "modal-navigation-section",
+      "data-oc-motion-state": D,
+      "data-oc-state": c ? "open" : "closed",
+      children: [
+        v && X ? /* @__PURE__ */ n(
+          ea.Title,
+          {
+            className: e.navigationDialogTitle,
+            id: W,
+            children: t
+          }
+        ) : null,
+        R ? /* @__PURE__ */ n(
+          "div",
+          {
+            ...b,
+            "aria-hidden": "true",
+            className: d(e.handle, b?.className),
+            "data-oc-part": "handle"
+          }
+        ) : null,
+        /* @__PURE__ */ n(O, { className: e.navigationHeading, "data-oc-part": "heading", children: /* @__PURE__ */ g(
+          "button",
+          {
+            ...S,
+            ref: $,
+            id: M,
+            className: d(
+              e.navigation,
+              w
+            ),
+            type: "button",
+            disabled: o,
+            "aria-disabled": o ? "true" : S["aria-disabled"],
+            "aria-expanded": c,
+            "aria-controls": y,
+            onClick: (f) => {
+              V?.(f), !(f.defaultPrevented || o) && j(!c);
+            },
+            "data-oc-component": "modal-navigation",
+            "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(
+                ia,
+                {
+                  className: e.navigationIndicator,
+                  open: c
+                }
+              ) : u ? /* @__PURE__ */ n(
+                "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) })
+                }
+              ) : null,
+              o ? null : /* @__PURE__ */ n(ra, { variant: "light" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ n(
+          oa,
+          {
+            className: d(e.navigationPanel, q),
+            open: c,
+            forceMount: m,
+            intent: "expand",
+            measureBlockSize: "rendered",
+            onMotionStateChange: (f) => {
+              L(f), E?.(f);
+            },
+            contentProps: {
+              className: e.navigationPanelFrame,
+              "data-oc-part": "panel-inner"
+            },
+            ...K,
+            "aria-hidden": c ? void 0 : !0,
+            "aria-labelledby": M,
+            id: y,
+            inert: c ? void 0 : !0,
+            role: J ?? "region",
+            "data-oc-component": "modal-navigation-panel",
+            "data-oc-state": c ? "open" : "closed",
+            children: /* @__PURE__ */ n(
+              k,
+              {
+                className: e.navigationPanelScroll,
+                "data-oc-component": "modal-navigation-panel-scroll-area",
+                "data-oc-part": "panel-scroll-area",
+                children: /* @__PURE__ */ n(
+                  x,
+                  {
+                    ...U,
+                    className: d(
+                      e.navigationPanelInner,
+                      Q
+                    ),
+                    "data-oc-component": "modal-navigation-panel-content",
+                    children: l
+                  }
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function Ba({
+  bodyContainerProps: a,
+  bodyContentProps: t,
+  children: l,
+  layout: i,
+  scrollAreaProps: r
+}) {
+  return /* @__PURE__ */ n(
+    k,
+    {
+      ...r,
+      className: d(e.body, r?.className),
+      "data-oc-part": "body",
+      "data-oc-component": "modal-body",
+      children: /* @__PURE__ */ n(
+        x,
+        {
+          ...a,
+          className: d(
+            e.bodyContainer,
+            a?.className
+          ),
+          "data-oc-part": "body-container",
+          "data-oc-component": "modal-body-container",
+          children: /* @__PURE__ */ n(
+            "section",
+            {
+              ...t,
+              className: d(
+                e.bodyContent,
+                t?.className
+              ),
+              "data-oc-part": "body-content",
+              "data-oc-component": "modal-body-content",
+              "data-oc-layout": i,
+              children: l
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function Ra({
+  backgroundActive: a,
+  children: t,
+  className: l = "",
+  ...i
+}) {
+  return /* @__PURE__ */ n(
+    "footer",
+    {
+      ...i,
+      className: d(e.footer, l),
+      "data-oc-part": "footer",
+      "data-oc-component": "modal-footer",
+      "data-oc-background": a ? "true" : "false",
+      children: t
+    }
+  );
+}
+export {
+  Ba as ModalBodyFrame,
+  Ra as ModalFooterFrame,
+  Pa as ModalHeaderFrame,
+  Ta as ModalNavigationSectionFrame,
+  Fa as ModalSurfaceFrame,
+  z as hasRenderableModalContent,
+  d as mergeModalClassName,
+  xa as resolveModalFooterBackground,
+  za as useModalBodyScrollState
+};

package/dist/index.js

@@ -1,116 +1,132 @@
-import { default as t } from "./components/SectionHeader/SectionHeader.js";
+import { default as e } from "./components/SectionHeader/SectionHeader.js";
 import { default as a } from "./components/Button/Button.js";
-import { default as n, ActionAreaButton as d } from "./components/ActionArea/ActionArea.js";
-import { default as i, ActionAreaLayoutActionArea as u, ActionAreaLayoutBody as p, ActionAreaLayoutFooter as s, ActionAreaLayout as x } from "./components/ActionArea/ActionAreaLayout.js";
+import { default as l, ActionAreaButton as i } from "./components/ActionArea/ActionArea.js";
+import { default as f, ActionAreaLayoutActionArea as p, ActionAreaLayoutBody as u, ActionAreaLayoutFooter as s, ActionAreaLayout as x } from "./components/ActionArea/ActionAreaLayout.js";
 import { default as m } from "./components/Badge/Badge.js";
 import { default as g } from "./components/Background/Background.js";
-import { default as T } from "./components/Divider/Divider.js";
-import { default as B } from "./components/Loading/Loading.js";
-import { default as S } from "./components/Skeleton/Skeleton.js";
-import { default as y, CellItem as I } from "./components/Cell/Cell.js";
-import { default as b } from "./components/TextButton/TextButton.js";
-import { default as v } from "./components/IconButton/IconButton.js";
-import { default as h } from "./components/BackgroundIconButton/BackgroundIconButton.js";
-import { default as P } from "./components/Interaction/Interaction.js";
-import { Field as E, FieldControl as G, FieldErrorMessage as N, FieldLabel as j, FieldMessage as q } from "./components/Field/Field.js";
-import { FieldGroup as J, FieldLegend as K, Fieldset as O, FieldsetContent as Q } from "./components/Fieldset/Fieldset.js";
-import { default as V } from "./components/Checkbox/Checkbox.js";
+import { default as M } from "./components/Divider/Divider.js";
+import { default as C } from "./components/Loading/Loading.js";
+import { default as W } from "./components/Skeleton/Skeleton.js";
+import { default as S, CellItem as y } from "./components/Cell/Cell.js";
+import { default as I } from "./components/TextButton/TextButton.js";
+import { default as k } from "./components/IconButton/IconButton.js";
+import { default as D } from "./components/BackgroundIconButton/BackgroundIconButton.js";
+import { default as H } from "./components/Interaction/Interaction.js";
+import { Field as N, FieldControl as P, FieldErrorMessage as E, FieldLabel as G, FieldMessage as j } from "./components/Field/Field.js";
+import { FieldGroup as z, FieldLegend as J, Fieldset as K, FieldsetContent as O } from "./components/Fieldset/Fieldset.js";
+import { default as U } from "./components/Checkbox/Checkbox.js";
 import { default as X } from "./components/CheckMark/CheckMark.js";
 import { default as Z } from "./components/Radio/Radio.js";
 import { default as $ } from "./components/Switch/Switch.js";
-import { default as eo } from "./components/TextInput/TextInput.js";
+import { default as to } from "./components/TextInput/TextInput.js";
 import { default as ro } from "./components/TextInput/TextInputContent.js";
-import { default as lo } from "./components/TextArea/TextArea.js";
-import { default as fo } from "./components/TextArea/TextAreaContent.js";
-import { default as uo } from "./components/Select/Select.js";
+import { default as no } from "./components/TextArea/TextArea.js";
+import { default as io } from "./components/TextArea/TextAreaContent.js";
+import { default as po } from "./components/Select/Select.js";
 import { default as so } from "./components/Select/SelectContent.js";
-import { MenuContent as co, MenuItem as mo, MenuRoot as Ao, MenuSeparator as go, MenuTrigger as Mo } from "./components/Menu/Menu.js";
-import { default as Co, AlertAction as Bo, AlertActionArea as Fo, AlertContent as So, AlertDescription as Lo, AlertHeading as yo, AlertRoot as Io } from "./components/Alert/Alert.js";
-import { default as bo, AccordionContent as Ro, AccordionDescription as vo, AccordionDetails as Do, AccordionItem as ho, AccordionSummary as Ho } from "./components/Accordion/Accordion.js";
-import { TabsList as wo, TabsPanel as Eo, TabsRoot as Go, TabsTab as No } from "./components/Tabs/Tabs.js";
-import { default as qo, ModalBody as zo, ModalClose as Jo, ModalContent as Ko, ModalFooter as Oo, ModalHeader as Qo, ModalNavigationSection as Uo, ModalRoot as Vo, ModalTrigger as Wo } from "./components/Modal/Modal.js";
-import { TooltipContent as Yo, TooltipProvider as Zo, TooltipRoot as _o, TooltipTrigger as $o } from "./components/Tooltip/Tooltip.js";
-import { ScrollArea as ee, ScrollAreaContainer as te } from "./components/ScrollArea/ScrollArea.js";
-import { getBreakpoint as ae, getBreakpoints as le } from "./utils/breakpoints.js";
-import { SvgIcon as de } from "@orioncactuscorp/icons";
+import { MenuContent as co, MenuItem as mo, MenuRoot as Ao, MenuSeparator as go, MenuTrigger as Fo } from "./components/Menu/Menu.js";
+import { default as To, FloatingWindowBody as Co, FloatingWindowClose as wo, FloatingWindowContent as Wo, FloatingWindowDescription as Bo, FloatingWindowDragHandle as So, FloatingWindowFooter as yo, FloatingWindowHeader as Lo, FloatingWindowNavigationSection as Io, FloatingWindowRoot as Ro, FloatingWindowTitle as ko, FloatingWindowTrigger as bo, ModalWindowRoot as Do } from "./components/FloatingWindow/FloatingWindow.js";
+import { FloatingWindowManager as Ho } from "./components/FloatingWindow/FloatingWindowManager.js";
+import { default as No, AlertAction as Po, AlertActionArea as Eo, AlertContent as Go, AlertDescription as jo, AlertHeading as qo, AlertRoot as zo } from "./components/Alert/Alert.js";
+import { default as Ko, AccordionContent as Oo, AccordionDescription as Qo, AccordionDetails as Uo, AccordionItem as Vo, AccordionSummary as Xo } from "./components/Accordion/Accordion.js";
+import { TabsList as Zo, TabsPanel as _o, TabsRoot as $o, TabsTab as ot } from "./components/Tabs/Tabs.js";
+import { default as et, ModalBody as rt, ModalClose as at, ModalContent as nt, ModalFooter as lt, ModalHeader as it, ModalNavigationSection as dt, ModalRoot as ft, ModalTrigger as pt } from "./components/Modal/Modal.js";
+import { TooltipContent as st, TooltipProvider as xt, TooltipRoot as ct, TooltipTrigger as mt } from "./components/Tooltip/Tooltip.js";
+import { ScrollArea as gt, ScrollAreaContainer as Ft } from "./components/ScrollArea/ScrollArea.js";
+import { getBreakpoint as Tt, getBreakpoints as Ct } from "./utils/breakpoints.js";
+import { SvgIcon as Wt } from "@orioncactuscorp/icons";
 export {
-  bo as Accordion,
-  Ro as AccordionContent,
-  vo as AccordionDescription,
-  Do as AccordionDetails,
-  ho as AccordionItem,
-  Ho as AccordionSummary,
-  n as ActionArea,
-  d as ActionAreaButton,
-  i as ActionAreaLayout,
-  u as ActionAreaLayoutActionArea,
-  p as ActionAreaLayoutBody,
+  Ko as Accordion,
+  Oo as AccordionContent,
+  Qo as AccordionDescription,
+  Uo as AccordionDetails,
+  Vo as AccordionItem,
+  Xo as AccordionSummary,
+  l as ActionArea,
+  i as ActionAreaButton,
+  f as ActionAreaLayout,
+  p as ActionAreaLayoutActionArea,
+  u as ActionAreaLayoutBody,
   s as ActionAreaLayoutFooter,
   x as ActionAreaLayoutRoot,
-  Co as Alert,
-  Bo as AlertAction,
-  Fo as AlertActionArea,
-  So as AlertContent,
-  Lo as AlertDescription,
-  yo as AlertHeading,
-  Io as AlertRoot,
+  No as Alert,
+  Po as AlertAction,
+  Eo as AlertActionArea,
+  Go as AlertContent,
+  jo as AlertDescription,
+  qo as AlertHeading,
+  zo as AlertRoot,
   g as Background,
-  h as BackgroundIconButton,
+  D as BackgroundIconButton,
   m as Badge,
   a as Button,
-  y as Cell,
-  I as CellItem,
+  S as Cell,
+  y as CellItem,
   X as CheckMark,
-  V as Checkbox,
-  T as Divider,
-  E as Field,
-  G as FieldControl,
-  N as FieldErrorMessage,
-  J as FieldGroup,
-  j as FieldLabel,
-  K as FieldLegend,
-  q as FieldMessage,
-  O as Fieldset,
-  Q as FieldsetContent,
-  v as IconButton,
-  P as Interaction,
-  B as Loading,
+  U as Checkbox,
+  M as Divider,
+  N as Field,
+  P as FieldControl,
+  E as FieldErrorMessage,
+  z as FieldGroup,
+  G as FieldLabel,
+  J as FieldLegend,
+  j as FieldMessage,
+  K as Fieldset,
+  O as FieldsetContent,
+  To as FloatingWindow,
+  Co as FloatingWindowBody,
+  wo as FloatingWindowClose,
+  Wo as FloatingWindowContent,
+  Bo as FloatingWindowDescription,
+  So as FloatingWindowDragHandle,
+  yo as FloatingWindowFooter,
+  Lo as FloatingWindowHeader,
+  Ho as FloatingWindowManager,
+  Io as FloatingWindowNavigationSection,
+  Ro as FloatingWindowRoot,
+  ko as FloatingWindowTitle,
+  bo as FloatingWindowTrigger,
+  k as IconButton,
+  H as Interaction,
+  C as Loading,
   co as MenuContent,
   mo as MenuItem,
   Ao as MenuRoot,
   go as MenuSeparator,
-  Mo as MenuTrigger,
-  qo as Modal,
-  zo as ModalBody,
-  Jo as ModalClose,
-  Ko as ModalContent,
-  Oo as ModalFooter,
-  Qo as ModalHeader,
-  Uo as ModalNavigationSection,
-  Vo as ModalRoot,
-  Wo as ModalTrigger,
+  Fo as MenuTrigger,
+  et as Modal,
+  rt as ModalBody,
+  at as ModalClose,
+  nt as ModalContent,
+  lt as ModalFooter,
+  it as ModalHeader,
+  dt as ModalNavigationSection,
+  ft as ModalRoot,
+  pt as ModalTrigger,
+  Do as ModalWindowRoot,
   Z as Radio,
-  ee as ScrollArea,
-  te as ScrollAreaContainer,
-  t as SectionHeader,
-  uo as Select,
+  gt as ScrollArea,
+  Ft as ScrollAreaContainer,
+  e as SectionHeader,
+  po as Select,
   so as SelectContent,
-  S as Skeleton,
-  de as SvgIcon,
+  W as Skeleton,
+  Wt as SvgIcon,
   $ as Switch,
-  wo as TabsList,
-  Eo as TabsPanel,
-  Go as TabsRoot,
-  No as TabsTab,
-  lo as TextArea,
-  fo as TextAreaContent,
-  b as TextButton,
-  eo as TextInput,
+  Zo as TabsList,
+  _o as TabsPanel,
+  $o as TabsRoot,
+  ot as TabsTab,
+  no as TextArea,
+  io as TextAreaContent,
+  I as TextButton,
+  to as TextInput,
   ro as TextInputContent,
-  Yo as TooltipContent,
-  Zo as TooltipProvider,
-  _o as TooltipRoot,
-  $o as TooltipTrigger,
-  ae as getBreakpoint,
-  le as getBreakpoints
+  st as TooltipContent,
+  xt as TooltipProvider,
+  ct as TooltipRoot,
+  mt as TooltipTrigger,
+  Tt as getBreakpoint,
+  Ct as getBreakpoints
 };