@react-fabric/core 1.0.0-beta.0

package/dist/cjs/overlays/alert/Alert.js

@@ -0,0 +1,163 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var react = require('@floating-ui/react');
+var classNames = require('classnames');
+var react$1 = require('react');
+var reactI18next = require('react-i18next');
+var Animations = require('../../components/animations/Animations.js');
+var Button = require('../../components/button/Button.js');
+var Icon = require('../../components/icon/Icon.js');
+var icons = require('../../types/icons.js');
+var Title = require('../../typography/Title.js');
+var getColor = require('../../utils/getColor.js');
+require('@react-fabric/utilities');
+var Alert_module = require('./Alert.module.css');
+var jsxRuntime = require('react/jsx-runtime');
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Alert = function Alert(_ref) {
+  var title = _ref.title,
+    message = _ref.message,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "primary" : _ref$color,
+    icon = _ref.icon,
+    rtlFlip = _ref.rtlFlip,
+    actions = _ref.actions,
+    onClose = _ref.onClose,
+    type = _ref.type,
+    okLabel = _ref.okLabel,
+    cancelLabel = _ref.cancelLabel;
+  var _useTranslation = reactI18next.useTranslation("core"),
+    t = _useTranslation.t;
+  var _useFloating = react.useFloating({
+      open: true,
+      onOpenChange: function onOpenChange() {
+        handleClose(false);
+      }
+    }),
+    refs = _useFloating.refs,
+    context = _useFloating.context;
+  var dismiss = react.useDismiss(context, {
+    outsidePressEvent: "mousedown",
+    escapeKey: true
+  });
+  var role = react.useRole(context);
+
+  // Merge all the interactions into prop getters
+  var _useInteractions = react.useInteractions([dismiss, role]),
+    getFloatingProps = _useInteractions.getFloatingProps;
+  var iconType = react$1.useMemo(function () {
+    if (icon) return /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+      icon: icon,
+      size: "md",
+      rtlFlip: rtlFlip,
+      color: color + "-600"
+    });
+    switch (color) {
+      case "danger":
+        return /*#__PURE__*/jsxRuntime.jsx(Animations.AnimationIndicator, {
+          type: "cross",
+          className: getColor.getColorClass(color + "-600")
+        });
+      case "success":
+        return /*#__PURE__*/jsxRuntime.jsx(Animations.AnimationIndicator, {
+          type: "check",
+          className: getColor.getColorClass(color + "-600")
+        });
+      case "warning":
+        return /*#__PURE__*/jsxRuntime.jsx(Animations.AnimationIndicator, {
+          type: "exclaim",
+          className: getColor.getColorClass(color + "-600")
+        });
+      default:
+        return /*#__PURE__*/jsxRuntime.jsx(Animations.AnimationIndicator, {
+          type: type === "confirm" ? "question" : "info",
+          className: getColor.getColorClass(color + "-600")
+        });
+    }
+  }, [color, type, icon]);
+  var handleClose = react$1.useCallback(function (ret) {
+    refs.floating.current && (refs.floating.current.dataset.show = "false");
+    setTimeout(function () {
+      onClose(ret);
+    }, 250);
+  }, [onClose]);
+  react$1.useLayoutEffect(function () {
+    setTimeout(function () {
+      return refs.floating.current && (refs.floating.current.dataset.show = "true");
+    }, 100);
+  }, []);
+  return /*#__PURE__*/jsxRuntime.jsx(react.FloatingPortal, {
+    children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingOverlay, {
+      lockScroll: true,
+      style: {
+        zIndex: "var(--z-overlay-mask)"
+      },
+      className: "bg-base/50 backdrop-blur-sm grid place-items-center",
+      children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
+        context: context,
+        children: /*#__PURE__*/jsxRuntime.jsxs("dialog", _objectSpread(_objectSpread({
+          role: "alertdialog",
+          className: classNames(Alert_module.alert, getColor.getBorderClass(color + "-300"), "grid bg-base border-2 pointer-events-auto overflow-hidden rounded-capped select-none", "min-w-72 max-w-sm p-6 relative outline-0 shadow-lg"),
+          ref: refs.setFloating
+        }, getFloatingProps()), {}, {
+          children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+            className: classNames("area-[icon] text-lg py-2"),
+            children: iconType
+          }), /*#__PURE__*/jsxRuntime.jsx(Title.Title, {
+            className: "font-medium area-[title]",
+            children: title
+          }), /*#__PURE__*/jsxRuntime.jsx("p", {
+            className: "area-[message] py-4",
+            children: message
+          }), /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "area-[message]",
+            children: message
+          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "flex gap-1 justify-center flex-nowrap pt-2 area-[actions]",
+            children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+              className: "contents",
+              onClickCapture: function onClickCapture(e) {
+                return handleClose(e.target.value);
+              },
+              children: actions
+            }), type === "confirm" && /*#__PURE__*/jsxRuntime.jsx(Button.Button, {
+              size: "sm",
+              variant: "link",
+              color: color,
+              onClick: function onClick() {
+                return handleClose(false);
+              },
+              children: cancelLabel !== null && cancelLabel !== void 0 ? cancelLabel : t("action.cancel", "Cancel")
+            }), /*#__PURE__*/jsxRuntime.jsx(Button.Button, {
+              size: "sm",
+              variant: "solid",
+              color: color,
+              onClick: function onClick() {
+                return handleClose(true);
+              },
+              children: okLabel !== null && okLabel !== void 0 ? okLabel : t("action.ok", "OK")
+            })]
+          }), /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "absolute top-2 end-2",
+            children: /*#__PURE__*/jsxRuntime.jsx(Button.Button, {
+              size: "sm",
+              variant: "link",
+              className: "m-0",
+              color: color,
+              onClick: function onClick() {
+                return handleClose(false);
+              },
+              icon: icons.CoreIcons.close,
+              "aria-label": "close"
+            })
+          })]
+        }))
+      })
+    })
+  });
+};
+
+exports.Alert = Alert;

package/dist/cjs/overlays/alert/Alert.module.css

@@ -0,0 +1 @@
+@layer comp{.alert{gap:.5rem 1rem;grid-template:"icon title" auto "icon message" auto "input input" auto "actions actions" auto/auto 1fr;margin-top:-100%;opacity:0;transition:margin .4s,opacity .3s .2s;z-index:var(--z-overlay);&[data-show=true]{margin-top:0;opacity:1}}}

package/dist/cjs/overlays/flyout/Flyout.js

@@ -0,0 +1,152 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var react = require('@floating-ui/react');
+var classNames = require('classnames');
+var react$1 = require('react');
+var Animations = require('../../components/animations/Animations.js');
+var Icon = require('../../components/icon/Icon.js');
+var HeadFoot = require('../../core/headfoot/HeadFoot.js');
+var HotKeyWrapper = require('../../hotkeys/HotKeyWrapper.js');
+var icons = require('../../types/icons.js');
+var Flyout_module = require('./Flyout.module.css');
+var jsxRuntime = require('react/jsx-runtime');
+
+var _excluded = ["icon", "iconBg", "iconColor", "iconClassName", "rtlFlip", "title", "actions", "closeOnClick", "headerClassName", "onClose", "onBeforeClose", "children", "loading", "size", "width", "minWidth", "hideMask", "align"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Flyout = function Flyout(_ref) {
+  var icon = _ref.icon,
+    iconBg = _ref.iconBg,
+    iconColor = _ref.iconColor,
+    iconClassName = _ref.iconClassName,
+    rtlFlip = _ref.rtlFlip,
+    title = _ref.title,
+    actions = _ref.actions,
+    closeOnClick = _ref.closeOnClick,
+    headerClassName = _ref.headerClassName,
+    onClose = _ref.onClose,
+    onBeforeClose = _ref.onBeforeClose,
+    children = _ref.children,
+    loading = _ref.loading,
+    size = _ref.size,
+    width = _ref.width,
+    minWidth = _ref.minWidth,
+    hideMask = _ref.hideMask,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? "start" : _ref$align,
+    aria = _objectWithoutProperties(_ref, _excluded);
+  var _useFloating = react.useFloating({
+      open: true,
+      onOpenChange: function onOpenChange() {
+        handleClose(false);
+      }
+    }),
+    refs = _useFloating.refs,
+    context = _useFloating.context;
+  var dismiss = react.useDismiss(context, {
+    outsidePressEvent: "mousedown",
+    escapeKey: true
+  });
+  var role = react.useRole(context);
+
+  // Merge all the interactions into prop getters
+  var _useInteractions = react.useInteractions([dismiss, role]),
+    getFloatingProps = _useInteractions.getFloatingProps;
+  var handleClose = react$1.useCallback(function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    void Promise.resolve(onBeforeClose === null || onBeforeClose === void 0 ? void 0 : onBeforeClose.apply(void 0, args)).then(function (ret) {
+      if (ret !== false) {
+        refs.floating.current && (refs.floating.current.dataset.show = "false");
+        setTimeout(function () {
+          onClose === null || onClose === void 0 || onClose.apply(void 0, args);
+        }, 250);
+      }
+      ret === false && setTimeout(function () {
+        var _refs$floating$curren;
+        return (_refs$floating$curren = refs.floating.current) === null || _refs$floating$curren === void 0 || (_refs$floating$curren = _refs$floating$curren.querySelector('[role="dialog"]')) === null || _refs$floating$curren === void 0 ? void 0 : _refs$floating$curren.focus();
+      }, 50);
+    });
+  }, [onBeforeClose, onClose]);
+  react$1.useEffect(function () {
+    setTimeout(function () {
+      var _refs$floating$curren2;
+      refs.floating.current && (refs.floating.current.dataset.show = "true");
+      (_refs$floating$curren2 = refs.floating.current) === null || _refs$floating$curren2 === void 0 || (_refs$floating$curren2 = _refs$floating$curren2.querySelector('[role="dialog"]')) === null || _refs$floating$curren2 === void 0 || _refs$floating$curren2.focus();
+    }, 50);
+  }, []);
+  var tryClosing = react$1.useCallback(function (e) {
+    if (!!closeOnClick || e.target.closest("[data-flyout-dismiss='true']")) {
+      setTimeout(function () {
+        handleClose();
+      }, 100);
+    }
+  }, [closeOnClick, handleClose]);
+  var Wrapper = react$1.useCallback(function (_ref2) {
+    var children = _ref2.children;
+    if (hideMask) return /*#__PURE__*/jsxRuntime.jsx(react$1.Fragment, {
+      children: children
+    });
+    return /*#__PURE__*/jsxRuntime.jsx(react.FloatingOverlay, {
+      lockScroll: true,
+      style: {
+        zIndex: "var(--z-overlay-mask)"
+      },
+      className: "bg-base/10 backdrop-blur-sm transition-all",
+      children: children
+    });
+  }, [hideMask, handleClose]);
+  return /*#__PURE__*/jsxRuntime.jsx(react.FloatingPortal, {
+    children: /*#__PURE__*/jsxRuntime.jsx(Wrapper, {
+      children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
+        context: context,
+        children: /*#__PURE__*/jsxRuntime.jsx(Wrapper, {
+          children: /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+            "data-align": align,
+            className: classNames(Flyout_module.flyout, "fixed inset-y-0 overflow-hidden flex flex-col flex-nowrap pointer-events-auto shadow-xl", align === "start" ? "start-0" : "end-0", size === "sm" && "w-[20rem]", size === "md" && "w-[40rem]", size === "lg" && "w-[60vw]", size === "xl" && "w-[80vw]"),
+            style: {
+              width: width,
+              minWidth: minWidth
+            },
+            onMouseUpCapture: tryClosing,
+            ref: refs.setFloating
+          }, getFloatingProps()), aria), aria), {}, {
+            children: /*#__PURE__*/jsxRuntime.jsxs(HotKeyWrapper.HotKeyWrapper, {
+              children: [/*#__PURE__*/jsxRuntime.jsxs(HeadFoot.Header, {
+                flex: true,
+                className: classNames(Flyout_module.flyoutHeader, headerClassName),
+                children: [icon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+                  icon: icon,
+                  bg: iconBg,
+                  color: iconColor,
+                  className: classNames(iconClassName, "p-1"),
+                  rtlFlip: rtlFlip
+                }), /*#__PURE__*/jsxRuntime.jsx("label", {
+                  className: "flex-1 truncate py-2 px-1",
+                  children: title
+                }), actions, /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+                  "data-ref": "panelClose",
+                  className: classNames(Flyout_module.panelAction, "cursor-pointer p-1 text-xl self-stretch"),
+                  icon: icons.CoreIcons.close,
+                  onClick: function onClick() {
+                    return handleClose(false);
+                  }
+                })]
+              }), loading && /*#__PURE__*/jsxRuntime.jsx(Animations.Loading, {}), /*#__PURE__*/jsxRuntime.jsx("div", {
+                role: "dialog",
+                className: classNames(Flyout_module.flyoutBody, "flex-1 grid overflow-hidden"),
+                tabIndex: 0,
+                children: children
+              })]
+            })
+          }))
+        })
+      })
+    })
+  });
+};
+
+exports.Flyout = Flyout;

package/dist/cjs/overlays/flyout/Flyout.module.css

@@ -0,0 +1 @@
+@layer comp{.flyout{max-width:70vw;transition:margin .5s;width:32rem;z-index:var(--z-overlay);& .flyoutHeader{background-color:theme(backgroundColor.base);border-bottom:.5px solid theme(borderColor.dimmed)}& .flyoutBody{grid-template:"head head head" auto ". loader ." auto "side-s content side-e" 1fr "foot foot foot" auto/auto 1fr auto}&[data-align=start]{margin-inline-start:-100%}&[data-align=end]{margin-inline-end:-100%}&[data-show=true]{margin:0}}}

package/dist/cjs/overlays/message/Message.js

@@ -0,0 +1,84 @@
+'use strict';
+
+var classNames = require('classnames');
+var react = require('react');
+var Icon = require('../../components/icon/Icon.js');
+var getColor = require('../../utils/getColor.js');
+require('@react-fabric/utilities');
+var Message_module = require('./Message.module.css');
+var jsxRuntime = require('react/jsx-runtime');
+
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+var Message = function Message(_ref) {
+  var title = _ref.title,
+    message = _ref.message,
+    color = _ref.color,
+    icon = _ref.icon,
+    rtlFlip = _ref.rtlFlip,
+    actions = _ref.actions,
+    onClose = _ref.onClose;
+  var elRef = react.useRef(null);
+  var handleClose = react.useCallback(function (ret) {
+    elRef.current && (elRef.current.dataset.show = "false");
+    setTimeout(function () {
+      onClose(ret);
+    }, 250);
+  }, [onClose]);
+  react.useLayoutEffect(function () {
+    setTimeout(function () {
+      return elRef.current && (elRef.current.dataset.show = "true");
+    }, 100);
+  }, []);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: classNames(Message_module.message, color ? getColor.getBgClass(color + "-300") : "bg-invert", color ? getColor.getColorClass(color + "-900") : "text-invert", "flex flex-nowrap gap-1 px-8 relative justify-center max-w-md pointer-events-auto rounded mb-2 select-none"),
+    ref: elRef,
+    children: [icon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+      icon: icon,
+      size: "md",
+      rtlFlip: rtlFlip
+    }), title && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "font-medium",
+      children: title
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "truncate flex-initial",
+      children: message
+    }), actions && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex gap-1 flex-nowrap",
+      onClickCapture: function onClickCapture(e) {
+        return handleClose(e.target.value);
+      },
+      children: actions
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      role: "none",
+      className: "cursor-pointer opacity-65 absolute end-1 hover:opacity-90",
+      onClick: function onClick() {
+        return handleClose();
+      },
+      children: "\xD7"
+    })]
+  });
+};
+
+exports.Message = Message;

package/dist/cjs/overlays/message/Message.module.css

@@ -0,0 +1 @@
+@layer comp{.message{margin-top:-100%;opacity:0;transition:margin .4s,opacity .3s .2s;&[data-show=true]{margin-top:0;opacity:1}}}

package/dist/cjs/overlays/modal/Modal.js

@@ -0,0 +1,132 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var react = require('@floating-ui/react');
+var classNames = require('classnames');
+var react$1 = require('react');
+var Animations = require('../../components/animations/Animations.js');
+var Icon = require('../../components/icon/Icon.js');
+var HeadFoot = require('../../core/headfoot/HeadFoot.js');
+var HotKeyWrapper = require('../../hotkeys/HotKeyWrapper.js');
+var icons = require('../../types/icons.js');
+var Modal_module = require('./Modal.module.css');
+var jsxRuntime = require('react/jsx-runtime');
+
+var _excluded = ["icon", "iconBg", "iconColor", "iconClassName", "rtlFlip", "title", "actions", "headerClassName", "onClose", "onBeforeClose", "children", "loading", "size", "width", "height", "minHeight", "minWidth"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Modal = function Modal(_ref) {
+  var icon = _ref.icon,
+    iconBg = _ref.iconBg,
+    iconColor = _ref.iconColor,
+    iconClassName = _ref.iconClassName,
+    rtlFlip = _ref.rtlFlip,
+    title = _ref.title,
+    actions = _ref.actions,
+    headerClassName = _ref.headerClassName,
+    onClose = _ref.onClose,
+    onBeforeClose = _ref.onBeforeClose,
+    children = _ref.children,
+    loading = _ref.loading,
+    size = _ref.size,
+    width = _ref.width,
+    height = _ref.height,
+    minHeight = _ref.minHeight,
+    minWidth = _ref.minWidth,
+    aria = _objectWithoutProperties(_ref, _excluded);
+  var _useFloating = react.useFloating({
+      open: true,
+      onOpenChange: function onOpenChange() {
+        handleClose(false);
+      }
+    }),
+    refs = _useFloating.refs,
+    context = _useFloating.context;
+  var dismiss = react.useDismiss(context, {
+    outsidePressEvent: "mousedown",
+    escapeKey: true
+  });
+  var role = react.useRole(context);
+
+  // Merge all the interactions into prop getters
+  var _useInteractions = react.useInteractions([dismiss, role]),
+    getFloatingProps = _useInteractions.getFloatingProps;
+  var handleClose = react$1.useCallback(function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    void Promise.resolve(onBeforeClose === null || onBeforeClose === void 0 ? void 0 : onBeforeClose.apply(void 0, args)).then(function (ret) {
+      if (ret !== false) {
+        refs.floating.current && (refs.floating.current.dataset.show = "false");
+        setTimeout(function () {
+          onClose === null || onClose === void 0 || onClose.apply(void 0, args);
+        }, 250);
+      }
+      ret === false && setTimeout(function () {
+        var _refs$floating$curren;
+        return (_refs$floating$curren = refs.floating.current) === null || _refs$floating$curren === void 0 || (_refs$floating$curren = _refs$floating$curren.querySelector("[role='dialog']")) === null || _refs$floating$curren === void 0 ? void 0 : _refs$floating$curren.focus();
+      }, 50);
+    });
+  }, [onBeforeClose, onClose]);
+  react$1.useEffect(function () {
+    setTimeout(function () {
+      var _refs$floating$curren2;
+      refs.floating.current && (refs.floating.current.dataset.show = "true");
+      (_refs$floating$curren2 = refs.floating.current) === null || _refs$floating$curren2 === void 0 || (_refs$floating$curren2 = _refs$floating$curren2.querySelector("[role='dialog']")) === null || _refs$floating$curren2 === void 0 || _refs$floating$curren2.focus();
+    }, 50);
+  }, []);
+  return /*#__PURE__*/jsxRuntime.jsx(react.FloatingPortal, {
+    children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingOverlay, {
+      lockScroll: true,
+      style: {
+        zIndex: "var(--z-overlay-mask)"
+      },
+      className: "bg-base/50 backdrop-blur-sm grid place-items-center",
+      children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
+        context: context,
+        children: /*#__PURE__*/jsxRuntime.jsx("dialog", _objectSpread(_objectSpread(_objectSpread({
+          className: classNames(Modal_module.modal, "rounded-capped relative overflow-hidden flex flex-col flex-nowrap", "ring-1 ring-tint-100 ring-offset-1 focus-within:ring-primary-300 shadow-xl", size === "sm" && "w-[20rem]", size === "md" && "w-[40rem]", size === "lg" && "w-[60vw]", size === "xl" && "w-[80vw]", size === "screen" && "w-screen h-screen"),
+          style: {
+            width: width,
+            height: height,
+            minHeight: minHeight,
+            minWidth: minWidth
+          },
+          ref: refs.setFloating
+        }, getFloatingProps()), aria), {}, {
+          children: /*#__PURE__*/jsxRuntime.jsxs(HotKeyWrapper.HotKeyWrapper, {
+            children: [/*#__PURE__*/jsxRuntime.jsxs(HeadFoot.Header, {
+              flex: true,
+              className: classNames(Modal_module.modalHeader, headerClassName),
+              children: [icon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+                icon: icon,
+                bg: iconBg,
+                color: iconColor,
+                className: classNames(iconClassName, "p-1"),
+                rtlFlip: rtlFlip
+              }), /*#__PURE__*/jsxRuntime.jsx("label", {
+                className: "flex-1 truncate py-2 px-1",
+                children: title
+              }), actions, /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+                "data-ref": "panelClose",
+                className: classNames(Modal_module.panelAction, "cursor-pointer p-1 text-xl self-stretch"),
+                icon: icons.CoreIcons.close,
+                onClick: function onClick() {
+                  return handleClose(false);
+                }
+              })]
+            }), loading && /*#__PURE__*/jsxRuntime.jsx(Animations.Loading, {}), /*#__PURE__*/jsxRuntime.jsx("div", {
+              role: "dialog",
+              className: classNames(Modal_module.modalBody, "flex-1 grid overflow-hidden"),
+              tabIndex: 0,
+              children: children
+            })]
+          })
+        }))
+      })
+    })
+  });
+};
+
+exports.Modal = Modal;

package/dist/cjs/overlays/modal/Modal.module.css

@@ -0,0 +1 @@
+@layer comp{.modal{margin-top:-100%;max-height:90vh;max-width:90vw;opacity:0;transition:margin .4s,opacity .3s .2s;width:32rem;z-index:var(--z-overlay);&[data-show=true]{margin-top:0;opacity:1}& .modalHeader{background-color:theme(backgroundColor.base);border-bottom:.5px solid theme(borderColor.dimmed)}& .modalBody{grid-template:"head head head" auto ". loader ." auto "side-s content side-e" 1fr "foot foot foot" auto/auto 1fr auto}}}