@omerdlw/base-framework 1.0.6 → 2.0.0

package/dist/chunk-AQ4BNXA2.js

@@ -0,0 +1,349 @@
+import { useModalContainerModel, isSidePosition, hasHeightConstraint, useModalModel, modalTheme, useModalLayerModel, getModalLayout, MODAL_POSITIONS, getModalPosition, getModalLabel } from './chunk-7HQMXTNP.js';
+import { Z_INDEX } from './chunk-QI3ALLIB.js';
+import { useModuleMotion } from './chunk-7TAVYJ3A.js';
+import { ModuleBoundary } from './chunk-GF7TUX5I.js';
+import { cn } from './chunk-TV3WEF5G.js';
+import { Button, Icon } from './chunk-3BUP64Q6.js';
+import { isValidElement, createElement } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+import { createPortal } from 'react-dom';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/modules/modal/motion.ts
+var MODAL_COMPOSITOR_STYLE = Object.freeze({
+  WebkitBackfaceVisibility: "hidden",
+  WebkitFontSmoothing: "antialiased",
+  backfaceVisibility: "hidden",
+  transform: "translateZ(0)",
+  willChange: "transform, opacity"
+});
+function useModalMotion() {
+  return useModuleMotion(modalTheme);
+}
+function getModalPositionMotion(positions, position) {
+  return positions[position] ?? positions.center;
+}
+function hasSlotContent(value) {
+  return value !== null && value !== void 0 && value !== false && value !== "";
+}
+function isHeaderConfig(value) {
+  return Boolean(
+    value && typeof value === "object" && !Array.isArray(value) && !isValidElement(value)
+  );
+}
+function resolveHeaderActions(actions, close) {
+  return typeof actions === "function" ? actions({ close }) : actions || null;
+}
+function CloseButton({
+  close,
+  theme
+}) {
+  if (typeof close !== "function") return null;
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      "aria-label": "Close modal",
+      onClick: close,
+      className: theme.slots.closeButton,
+      children: /* @__PURE__ */ jsx(Icon, { icon: "solar:close-bold", size: 16 })
+    }
+  );
+}
+function SlotRow({
+  center,
+  left,
+  right,
+  sticky,
+  theme,
+  variants
+}) {
+  const hasCenter = hasSlotContent(center);
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      variants,
+      initial: "hidden",
+      animate: "visible",
+      "data-columns": hasCenter ? 3 : 2,
+      "data-sticky": sticky,
+      className: theme.slots.row,
+      style: sticky ? theme.styles.row : void 0,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: theme.slots.rowStart, children: left }),
+        hasCenter && /* @__PURE__ */ jsx("div", { className: theme.slots.rowCenter, children: center }),
+        /* @__PURE__ */ jsx("div", { className: theme.slots.rowEnd, children: right })
+      ]
+    }
+  );
+}
+function resolveHeader(header, close, theme) {
+  const config = isHeaderConfig(header) ? header : {};
+  const customNode = typeof header !== "boolean" && !isHeaderConfig(header) && hasSlotContent(header) ? header : null;
+  const actions = resolveHeaderActions(config.actions, close);
+  const showClose = config.showClose === true;
+  const left = customNode !== null ? null : config.left ?? (config.title ? /* @__PURE__ */ jsx("h2", { id: config.titleId, className: theme.slots.title, children: config.title }) : null);
+  const right = customNode !== null ? null : config.right ?? (hasSlotContent(actions) || showClose ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    actions,
+    showClose && /* @__PURE__ */ jsx(CloseButton, { close, theme })
+  ] }) : null);
+  return { center: customNode ?? config.center ?? null, config, left, right };
+}
+function ModalContainer({
+  bodyClassName,
+  children,
+  className,
+  close,
+  footer,
+  header = {},
+  position = null
+}) {
+  const { theme } = useModalContainerModel();
+  const modalMotion = useModalMotion();
+  const headerRow = header === false ? null : resolveHeader(header, close, theme);
+  const shouldRenderHeader = headerRow && [headerRow.left, headerRow.center, headerRow.right].some(hasSlotContent);
+  const footerConfig = footer && typeof footer === "object" ? footer : {};
+  const {
+    center: footerCenter = null,
+    left: footerLeft = null,
+    right: footerRight = null
+  } = footerConfig;
+  const shouldRenderFooter = footer !== false && [footerLeft, footerCenter, footerRight].some(hasSlotContent);
+  const resolvedPosition = position || headerRow?.config.position || null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-height": isSidePosition(resolvedPosition) ? "full" : hasHeightConstraint(className) ? void 0 : "capped",
+      className: cn(theme.slots.content, className),
+      children: [
+        shouldRenderHeader && /* @__PURE__ */ jsx(
+          SlotRow,
+          {
+            variants: modalMotion.header,
+            left: headerRow.left,
+            center: headerRow.center,
+            right: headerRow.right,
+            theme,
+            sticky: headerRow.config.sticky ? "top" : void 0
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            variants: modalMotion.content,
+            initial: "hidden",
+            animate: "visible",
+            "data-lenis-prevent": true,
+            "data-lenis-prevent-wheel": true,
+            className: cn(theme.slots.body, bodyClassName),
+            children
+          }
+        ),
+        shouldRenderFooter && /* @__PURE__ */ jsx(
+          SlotRow,
+          {
+            variants: modalMotion.footer,
+            left: footerLeft,
+            center: footerCenter,
+            right: footerRight,
+            theme,
+            sticky: footerConfig.sticky ? "bottom" : void 0
+          }
+        )
+      ]
+    }
+  );
+}
+function ModalLayerSwitcher({
+  currentEntry,
+  onSwitchToPrevious,
+  previousEntry,
+  theme
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: theme.slots.switcher, children: [
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        onClick: onSwitchToPrevious,
+        className: theme.slots.switcherButton,
+        children: [
+          /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M7.5 2.5L4 6l3.5 3.5",
+              stroke: "currentColor",
+              strokeWidth: "1.5",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          ) }),
+          getModalLabel(previousEntry.modalType)
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: theme.slots.switcherDivider, children: "/" }),
+    /* @__PURE__ */ jsx("span", { className: theme.slots.switcherCurrent, children: getModalLabel(currentEntry.modalType) })
+  ] });
+}
+function ModalLayer({
+  closeModal,
+  entry,
+  isMobileViewport,
+  isTopModal,
+  modalStack,
+  registry,
+  stackIndex,
+  theme
+}) {
+  const {
+    modalRef,
+    activePosition,
+    ActiveModalComponent,
+    isPanelChrome,
+    previousEntry,
+    baseZIndex
+  } = useModalLayerModel({
+    closeModal,
+    entry,
+    isMobileViewport,
+    isTopModal,
+    modalStack,
+    registry,
+    stackIndex
+  });
+  const modalMotion = useModalMotion();
+  if (!ActiveModalComponent) return null;
+  const layout = getModalLayout(activePosition, isMobileViewport);
+  const positionMotion = getModalPositionMotion(
+    modalMotion.positions,
+    activePosition
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "dialog",
+      "aria-modal": isTopModal,
+      "aria-labelledby": entry.title ? `modal-title-${entry.id}` : void 0,
+      style: { zIndex: baseZIndex },
+      "data-position": getModalPosition(activePosition),
+      "data-inset": activePosition === MODAL_POSITIONS.CENTER && !isMobileViewport ? true : void 0,
+      className: theme.slots.layer,
+      children: /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          ref: modalRef,
+          variants: positionMotion.variants,
+          initial: "hidden",
+          animate: "visible",
+          exit: "exit",
+          transition: positionMotion.transition,
+          "data-active": isTopModal,
+          "data-layout": layout,
+          className: theme.slots.frame,
+          style: { zIndex: Z_INDEX.MODAL_FRAME, ...MODAL_COMPOSITOR_STYLE },
+          onClick: (e) => e.stopPropagation(),
+          children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "data-layout": layout,
+              className: cn(
+                theme.slots.panel,
+                isPanelChrome ? theme.slots.panelChrome : theme.slots.panelBare
+              ),
+              children: [
+                /* @__PURE__ */ jsx(ModuleBoundary, { name: entry.modalType, children: createElement(ActiveModalComponent, {
+                  close: (result) => closeModal(result, entry.id),
+                  data: entry.props,
+                  header: {
+                    actions: entry.headerActions,
+                    position: activePosition,
+                    showClose: entry.showClose,
+                    title: entry.title,
+                    titleId: `modal-title-${entry.id}`
+                  }
+                }) }),
+                !isTopModal && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      const topModal = modalStack[modalStack.length - 1];
+                      if (topModal) closeModal(null, topModal.id);
+                    },
+                    className: theme.slots.dim,
+                    style: theme.styles.dim,
+                    "aria-label": "Close active top modal"
+                  }
+                ),
+                isTopModal && stackIndex > 0 && previousEntry && /* @__PURE__ */ jsx(
+                  ModalLayerSwitcher,
+                  {
+                    currentEntry: entry,
+                    previousEntry,
+                    theme,
+                    onSwitchToPrevious: () => closeModal(null, entry.id)
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function Modal() {
+  const {
+    closeModal,
+    registry,
+    visibleModalStack,
+    topModalEntry,
+    isModalVisible,
+    mounted,
+    isMobileViewport,
+    isTopExitSettling,
+    setIsTopExitSettling,
+    theme
+  } = useModalModel();
+  const modalMotion = useModalMotion();
+  if (!mounted) return null;
+  return createPortal(
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(AnimatePresence, { children: isModalVisible && /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          variants: modalMotion.backdrop,
+          initial: "hidden",
+          animate: "visible",
+          exit: "exit",
+          className: theme.slots.backdrop,
+          style: theme.styles.backdrop,
+          onClick: () => {
+            if (!isTopExitSettling) closeModal(null, topModalEntry.id);
+          }
+        },
+        "global-modal-backdrop"
+      ) }),
+      /* @__PURE__ */ jsx(AnimatePresence, { onExitComplete: () => setIsTopExitSettling(false), children: visibleModalStack.map((entry, index) => /* @__PURE__ */ jsx(
+        ModalLayer,
+        {
+          entry,
+          stackIndex: index,
+          isTopModal: index === visibleModalStack.length - 1 && !isTopExitSettling,
+          isMobileViewport,
+          closeModal,
+          registry,
+          modalStack: visibleModalStack,
+          theme
+        },
+        entry.id
+      )) })
+    ] }),
+    document.body
+  );
+}
+
+export { Modal, ModalContainer, hasSlotContent, isHeaderConfig, resolveHeaderActions };
+//# sourceMappingURL=chunk-AQ4BNXA2.js.map
+//# sourceMappingURL=chunk-AQ4BNXA2.js.map

package/dist/chunk-AQ4BNXA2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/modules/modal/motion.ts","../src/modules/modal/header.ts","../src/modules/modal/overlay.tsx"],"names":[],"mappings":"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","file":"chunk-AQ4BNXA2.js","sourcesContent":["import { useModuleMotion } from \"@/theme\";\nimport { modalTheme } from \"./constants\";\nimport { type ModalPosition, type ModalPositionMotion } from \"./types\";\n\nexport const MODAL_COMPOSITOR_STYLE = Object.freeze({\n  WebkitBackfaceVisibility: \"hidden\",\n  WebkitFontSmoothing: \"antialiased\",\n  backfaceVisibility: \"hidden\",\n  transform: \"translateZ(0)\",\n  willChange: \"transform, opacity\",\n} as const);\n\nexport function useModalMotion() {\n  return useModuleMotion(modalTheme);\n}\n\nexport function getModalPositionMotion(\n  positions: Readonly<Record<ModalPosition, ModalPositionMotion>>,\n  position: ModalPosition,\n): ModalPositionMotion {\n  return positions[position] ?? positions.center;\n}\n","import { isValidElement, type ReactNode } from \"react\";\n\nexport function hasSlotContent(value: unknown): boolean {\n  return (\n    value !== null && value !== undefined && value !== false && value !== \"\"\n  );\n}\n\nexport function isHeaderConfig(value: unknown): boolean {\n  return Boolean(\n    value &&\n    typeof value === \"object\" &&\n    !Array.isArray(value) &&\n    !isValidElement(value),\n  );\n}\n\nexport function resolveHeaderActions(\n  actions:\n    | ReactNode\n    | ((props: { close?: (result?: unknown) => void }) => ReactNode)\n    | undefined,\n  close?: (result?: unknown) => void,\n): ReactNode {\n  return typeof actions === \"function\" ? actions({ close }) : actions || null;\n}\n","\"use client\";\n\nimport { createElement, type ReactNode } from \"react\";\nimport { motion, AnimatePresence, type Variants } from \"motion/react\";\nimport { Button, Icon } from \"@/atoms\";\nimport { Z_INDEX } from \"@/tokens\";\nimport { cn } from \"@/utils\";\nimport { createPortal } from \"react-dom\";\nimport { ModuleBoundary } from \"@/kernel\";\nimport { MODAL_POSITIONS } from \"./constants\";\nimport {\n  MODAL_COMPOSITOR_STYLE,\n  getModalPositionMotion,\n  useModalMotion,\n} from \"./motion\";\nimport {\n  type ModalContainerFooterConfig,\n  type ModalContainerHeaderConfig,\n  type ModalContainerProps,\n  type ModalThemeSlot,\n  type ModalComponent,\n  type ModalEntry,\n} from \"./types\";\nimport {\n  getModalLayout,\n  getModalPosition,\n  hasHeightConstraint,\n  isSidePosition,\n} from \"./layout\";\nimport {\n  hasSlotContent,\n  isHeaderConfig,\n  resolveHeaderActions,\n} from \"./header\";\nimport { getModalLabel } from \"./identity\";\nimport {\n  useModalContainerModel,\n  useModalLayerModel,\n  useModalModel,\n} from \"./hooks\";\nimport { type ResolvedTheme } from \"@/theme\";\n\ntype Theme = ResolvedTheme<ModalThemeSlot>;\n\nfunction CloseButton({\n  close,\n  theme,\n}: {\n  close?: (result?: unknown) => void;\n  theme: Theme;\n}) {\n  if (typeof close !== \"function\") return null;\n  return (\n    <Button\n      type=\"button\"\n      aria-label=\"Close modal\"\n      onClick={close}\n      className={theme.slots.closeButton}\n    >\n      <Icon icon=\"solar:close-bold\" size={16} />\n    </Button>\n  );\n}\n\nfunction SlotRow({\n  center,\n  left,\n  right,\n  sticky,\n  theme,\n  variants,\n}: {\n  center: ReactNode;\n  left: ReactNode;\n  right: ReactNode;\n  sticky?: \"top\" | \"bottom\";\n  theme: Theme;\n  variants: Variants;\n}) {\n  const hasCenter = hasSlotContent(center);\n  return (\n    <motion.div\n      variants={variants}\n      initial=\"hidden\"\n      animate=\"visible\"\n      data-columns={hasCenter ? 3 : 2}\n      data-sticky={sticky}\n      className={theme.slots.row}\n      style={sticky ? theme.styles.row : undefined}\n    >\n      <div className={theme.slots.rowStart}>{left}</div>\n      {hasCenter && <div className={theme.slots.rowCenter}>{center}</div>}\n      <div className={theme.slots.rowEnd}>{right}</div>\n    </motion.div>\n  );\n}\n\nfunction resolveHeader(\n  header: ModalContainerProps[\"header\"],\n  close: ModalContainerProps[\"close\"],\n  theme: Theme,\n) {\n  const config: ModalContainerHeaderConfig = isHeaderConfig(header)\n    ? (header as ModalContainerHeaderConfig)\n    : {};\n  const customNode =\n    typeof header !== \"boolean\" &&\n    !isHeaderConfig(header) &&\n    hasSlotContent(header)\n      ? (header as ReactNode)\n      : null;\n  const actions = resolveHeaderActions(config.actions, close);\n  const showClose = config.showClose === true;\n\n  const left =\n    customNode !== null\n      ? null\n      : (config.left ??\n        (config.title ? (\n          <h2 id={config.titleId} className={theme.slots.title}>\n            {config.title}\n          </h2>\n        ) : null));\n  const right =\n    customNode !== null\n      ? null\n      : (config.right ??\n        (hasSlotContent(actions) || showClose ? (\n          <>\n            {actions}\n            {showClose && <CloseButton close={close} theme={theme} />}\n          </>\n        ) : null));\n\n  return { center: customNode ?? config.center ?? null, config, left, right };\n}\n\nexport function ModalContainer({\n  bodyClassName,\n  children,\n  className,\n  close,\n  footer,\n  header = {},\n  position = null,\n}: ModalContainerProps) {\n  const { theme } = useModalContainerModel();\n  const modalMotion = useModalMotion();\n  const headerRow =\n    header === false ? null : resolveHeader(header, close, theme);\n  const shouldRenderHeader =\n    headerRow &&\n    [headerRow.left, headerRow.center, headerRow.right].some(hasSlotContent);\n\n  const footerConfig: ModalContainerFooterConfig =\n    footer && typeof footer === \"object\"\n      ? (footer as ModalContainerFooterConfig)\n      : {};\n  const {\n    center: footerCenter = null,\n    left: footerLeft = null,\n    right: footerRight = null,\n  } = footerConfig;\n  const shouldRenderFooter =\n    footer !== false &&\n    [footerLeft, footerCenter, footerRight].some(hasSlotContent);\n\n  const resolvedPosition = position || headerRow?.config.position || null;\n\n  return (\n    <div\n      data-height={\n        isSidePosition(resolvedPosition)\n          ? \"full\"\n          : hasHeightConstraint(className)\n            ? undefined\n            : \"capped\"\n      }\n      className={cn(theme.slots.content, className)}\n    >\n      {shouldRenderHeader && (\n        <SlotRow\n          variants={modalMotion.header}\n          left={headerRow.left}\n          center={headerRow.center}\n          right={headerRow.right}\n          theme={theme}\n          sticky={headerRow.config.sticky ? \"top\" : undefined}\n        />\n      )}\n\n      <motion.div\n        variants={modalMotion.content}\n        initial=\"hidden\"\n        animate=\"visible\"\n        data-lenis-prevent\n        data-lenis-prevent-wheel\n        className={cn(theme.slots.body, bodyClassName)}\n      >\n        {children}\n      </motion.div>\n\n      {shouldRenderFooter && (\n        <SlotRow\n          variants={modalMotion.footer}\n          left={footerLeft}\n          center={footerCenter}\n          right={footerRight}\n          theme={theme}\n          sticky={footerConfig.sticky ? \"bottom\" : undefined}\n        />\n      )}\n    </div>\n  );\n}\n\nfunction ModalLayerSwitcher({\n  currentEntry,\n  onSwitchToPrevious,\n  previousEntry,\n  theme,\n}: {\n  currentEntry: ModalEntry;\n  onSwitchToPrevious: () => void;\n  previousEntry: ModalEntry;\n  theme: Theme;\n}) {\n  return (\n    <div className={theme.slots.switcher}>\n      <Button\n        type=\"button\"\n        onClick={onSwitchToPrevious}\n        className={theme.slots.switcherButton}\n      >\n        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n          <path\n            d=\"M7.5 2.5L4 6l3.5 3.5\"\n            stroke=\"currentColor\"\n            strokeWidth=\"1.5\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n        {getModalLabel(previousEntry.modalType)}\n      </Button>\n      <span className={theme.slots.switcherDivider}>/</span>\n      <span className={theme.slots.switcherCurrent}>\n        {getModalLabel(currentEntry.modalType)}\n      </span>\n    </div>\n  );\n}\n\nfunction ModalLayer({\n  closeModal,\n  entry,\n  isMobileViewport,\n  isTopModal,\n  modalStack,\n  registry,\n  stackIndex,\n  theme,\n}: {\n  closeModal: (result?: unknown, targetModalId?: number | null) => void;\n  entry: ModalEntry;\n  isMobileViewport: boolean;\n  isTopModal: boolean;\n  modalStack: ModalEntry[];\n  registry: { get: (key: string) => ModalComponent | undefined };\n  stackIndex: number;\n  theme: Theme;\n}) {\n  const {\n    modalRef,\n    activePosition,\n    ActiveModalComponent,\n    isPanelChrome,\n    previousEntry,\n    baseZIndex,\n  } = useModalLayerModel({\n    closeModal,\n    entry,\n    isMobileViewport,\n    isTopModal,\n    modalStack,\n    registry,\n    stackIndex,\n  });\n  const modalMotion = useModalMotion();\n  if (!ActiveModalComponent) return null;\n  const layout = getModalLayout(activePosition, isMobileViewport);\n  const positionMotion = getModalPositionMotion(\n    modalMotion.positions,\n    activePosition,\n  );\n  return (\n    <div\n      role=\"dialog\"\n      aria-modal={isTopModal}\n      aria-labelledby={entry.title ? `modal-title-${entry.id}` : undefined}\n      style={{ zIndex: baseZIndex }}\n      data-position={getModalPosition(activePosition)}\n      data-inset={\n        activePosition === MODAL_POSITIONS.CENTER && !isMobileViewport\n          ? true\n          : undefined\n      }\n      className={theme.slots.layer}\n    >\n      <motion.div\n        ref={modalRef}\n        variants={positionMotion.variants}\n        initial=\"hidden\"\n        animate=\"visible\"\n        exit=\"exit\"\n        transition={positionMotion.transition}\n        data-active={isTopModal}\n        data-layout={layout}\n        className={theme.slots.frame}\n        style={{ zIndex: Z_INDEX.MODAL_FRAME, ...MODAL_COMPOSITOR_STYLE }}\n        onClick={(e) => e.stopPropagation()}\n      >\n        <div\n          data-layout={layout}\n          className={cn(\n            theme.slots.panel,\n            isPanelChrome ? theme.slots.panelChrome : theme.slots.panelBare,\n          )}\n        >\n          <ModuleBoundary name={entry.modalType}>\n            {createElement(ActiveModalComponent, {\n              close: (result: unknown) => closeModal(result, entry.id),\n              data: entry.props,\n              header: {\n                actions: entry.headerActions,\n                position: activePosition,\n                showClose: entry.showClose,\n                title: entry.title,\n                titleId: `modal-title-${entry.id}`,\n              },\n            })}\n          </ModuleBoundary>\n\n          {!isTopModal && (\n            <div\n              onClick={(e) => {\n                e.stopPropagation();\n                const topModal = modalStack[modalStack.length - 1];\n                if (topModal) closeModal(null, topModal.id);\n              }}\n              className={theme.slots.dim}\n              style={theme.styles.dim}\n              aria-label=\"Close active top modal\"\n            />\n          )}\n\n          {isTopModal && stackIndex > 0 && previousEntry && (\n            <ModalLayerSwitcher\n              currentEntry={entry}\n              previousEntry={previousEntry}\n              theme={theme}\n              onSwitchToPrevious={() => closeModal(null, entry.id)}\n            />\n          )}\n        </div>\n      </motion.div>\n    </div>\n  );\n}\n\nexport function Modal() {\n  const {\n    closeModal,\n    registry,\n    visibleModalStack,\n    topModalEntry,\n    isModalVisible,\n    mounted,\n    isMobileViewport,\n    isTopExitSettling,\n    setIsTopExitSettling,\n    theme,\n  } = useModalModel();\n  const modalMotion = useModalMotion();\n  if (!mounted) return null;\n  return createPortal(\n    <>\n      <AnimatePresence>\n        {isModalVisible && (\n          <motion.div\n            key=\"global-modal-backdrop\"\n            variants={modalMotion.backdrop}\n            initial=\"hidden\"\n            animate=\"visible\"\n            exit=\"exit\"\n            className={theme.slots.backdrop}\n            style={theme.styles.backdrop}\n            onClick={() => {\n              if (!isTopExitSettling) closeModal(null, topModalEntry.id);\n            }}\n          />\n        )}\n      </AnimatePresence>\n\n      <AnimatePresence onExitComplete={() => setIsTopExitSettling(false)}>\n        {visibleModalStack.map((entry: ModalEntry, index: number) => (\n          <ModalLayer\n            key={entry.id}\n            entry={entry}\n            stackIndex={index}\n            isTopModal={\n              index === visibleModalStack.length - 1 && !isTopExitSettling\n            }\n            isMobileViewport={isMobileViewport}\n            closeModal={closeModal}\n            registry={registry}\n            modalStack={visibleModalStack}\n            theme={theme}\n          />\n        ))}\n      </AnimatePresence>\n    </>,\n    document.body,\n  );\n}\n"]}