@react-fabric/core 1.0.0-beta.0

package/dist/esm/index.js

@@ -0,0 +1,75 @@
+'use client';
+
+export { ActionLabel } from './components/actionLabel/ActionLabel.js';
+export { AnimationBars, AnimationIndicator, AnimationSpinner, Skeleton } from './components/animations/Animations.js';
+export { Avatar } from './components/avatar/Avatar.js';
+export { AvatarGroup } from './components/avatar/AvatarGroup.js';
+export { Badge, getBadgeProps } from './components/badge/Badge.js';
+export { Breadcrumbs } from './components/breadcrumbs/Breadcrumbs.js';
+export { Button } from './components/button/Button.js';
+export { ButtonGroup } from './components/button/ButtonGroup.js';
+export { ConfirmButton } from './components/button/ConfirmButton.js';
+export { ToggleButtonGroup } from './components/button/ToggleButtonGroup.js';
+export { Callout } from './components/callout/Callout.js';
+export { Card } from './components/card/Card.js';
+export { CardCover } from './components/card/CardCover.js';
+export { Chip } from './components/chip/Chip.js';
+export { Collapsable } from './components/collapsable/Collapsable.js';
+export { Divider } from './components/divider/Divider.js';
+export { Dropdown, DropdownDismiss } from './components/dropdown/Dropdown.js';
+export { DropdownTool } from './components/dropdown/DropdownTool.js';
+export { EmptyContent } from './components/empty/EmptyContent.js';
+export { Icon } from './components/icon/Icon.js';
+export { Image, Video } from './components/media/Media.js';
+export { ContextMenu } from './components/menu/ContextMenu.js';
+export { Menu } from './components/menu/Menu.js';
+export { MenuItem } from './components/menu/MenuItem.js';
+export { Meter } from './components/meter/Meter.js';
+export { Navigator } from './components/navigator/Navigator.js';
+export { Panel } from './components/panel/Panel.js';
+export { PanelGroup } from './components/panel/PanelGroup.js';
+export { PanelStack } from './components/panel/PanelStack.js';
+export { ProgressBar } from './components/progress/ProgressBar.js';
+export { ProgressCircle } from './components/progress/ProgressCircle.js';
+export { Tab } from './components/tabpanel/Tab.js';
+export { TabPanel } from './components/tabpanel/TabPanel.js';
+export { Aside } from './core/aside/Aside.js';
+export { ErrorBoundary } from './core/boundary/ErrorBoundary.js';
+export { Content } from './core/content/Content.js';
+export { Footer, Header } from './core/headfoot/HeadFoot.js';
+export { Page } from './core/page/Page.js';
+export { Col, Container, Row } from './core/responsive/Responsive.js';
+export { Section } from './core/section/Section.js';
+export { ThemeProvider } from './core/theme/ThemeProvider.js';
+export { Viewport } from './core/viewport/Viewport.js';
+export { addTranslationBundle } from './i18n/index.js';
+import '@babel/runtime/helpers/defineProperty';
+import '@floating-ui/react';
+import 'classnames';
+import 'react';
+import 'react-i18next';
+export { CoreIcons } from './types/icons.js';
+export { Title } from './typography/Title.js';
+import '@react-fabric/utilities';
+import 'react/jsx-runtime';
+export { Flyout } from './overlays/flyout/Flyout.js';
+export { Modal } from './overlays/modal/Modal.js';
+export { Tooltip } from './overlays/tooltip/Tooltip.js';
+export { Abbr } from './typography/Abbr.js';
+export { Copy } from './typography/Copy.js';
+export { Link } from './typography/Link.js';
+export { Mark } from './typography/Mark.js';
+export { Text } from './typography/Text.js';
+export { useClientService } from './hooks/useClientService.js';
+export { useDebounce } from './hooks/useDebounce.js';
+export { useEffectDebugger, useLayoutEffectDebugger, useMemoDebugger } from './hooks/useEffectDebugger.js';
+export { useIsDark } from './hooks/useIsDark.js';
+export { useIsRtl } from './hooks/useIsRtl.js';
+export { useNavigator } from './hooks/useNavigator.js';
+export { useOverlayService } from './hooks/useOverlayService.js';
+export { useResize } from './hooks/useResize.js';
+export { useResizeObserver } from './hooks/useResizeObserver.js';
+export { useLocalStorage, useSessionStorage } from './hooks/useStorage.js';
+export { HotKey } from './hotkeys/HotKey.js';
+export { HotKeyLabel } from './hotkeys/HotKeyLabel.js';
+export { ApplicationProvider, useApplicationContext, useGlobals, useNotificationService } from './context/Global.js';

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

@@ -0,0 +1,163 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { useFloating, useDismiss, useRole, useInteractions, FloatingPortal, FloatingOverlay, FloatingFocusManager } from '@floating-ui/react';
+import classNames from 'classnames';
+import { useMemo, useCallback, useLayoutEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { AnimationIndicator } from '../../components/animations/Animations.js';
+import { Button } from '../../components/button/Button.js';
+import { Icon } from '../../components/icon/Icon.js';
+import { CoreIcons } from '../../types/icons.js';
+import { Title } from '../../typography/Title.js';
+import { getColorClass, getBorderClass } from '../../utils/getColor.js';
+import '@react-fabric/utilities';
+import classes from './Alert.module.css';
+import { jsx, jsxs } from '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 = useTranslation("core"),
+    t = _useTranslation.t;
+  var _useFloating = useFloating({
+      open: true,
+      onOpenChange: function onOpenChange() {
+        handleClose(false);
+      }
+    }),
+    refs = _useFloating.refs,
+    context = _useFloating.context;
+  var dismiss = useDismiss(context, {
+    outsidePressEvent: "mousedown",
+    escapeKey: true
+  });
+  var role = useRole(context);
+
+  // Merge all the interactions into prop getters
+  var _useInteractions = useInteractions([dismiss, role]),
+    getFloatingProps = _useInteractions.getFloatingProps;
+  var iconType = useMemo(function () {
+    if (icon) return /*#__PURE__*/jsx(Icon, {
+      icon: icon,
+      size: "md",
+      rtlFlip: rtlFlip,
+      color: color + "-600"
+    });
+    switch (color) {
+      case "danger":
+        return /*#__PURE__*/jsx(AnimationIndicator, {
+          type: "cross",
+          className: getColorClass(color + "-600")
+        });
+      case "success":
+        return /*#__PURE__*/jsx(AnimationIndicator, {
+          type: "check",
+          className: getColorClass(color + "-600")
+        });
+      case "warning":
+        return /*#__PURE__*/jsx(AnimationIndicator, {
+          type: "exclaim",
+          className: getColorClass(color + "-600")
+        });
+      default:
+        return /*#__PURE__*/jsx(AnimationIndicator, {
+          type: type === "confirm" ? "question" : "info",
+          className: getColorClass(color + "-600")
+        });
+    }
+  }, [color, type, icon]);
+  var handleClose = useCallback(function (ret) {
+    refs.floating.current && (refs.floating.current.dataset.show = "false");
+    setTimeout(function () {
+      onClose(ret);
+    }, 250);
+  }, [onClose]);
+  useLayoutEffect(function () {
+    setTimeout(function () {
+      return refs.floating.current && (refs.floating.current.dataset.show = "true");
+    }, 100);
+  }, []);
+  return /*#__PURE__*/jsx(FloatingPortal, {
+    children: /*#__PURE__*/jsx(FloatingOverlay, {
+      lockScroll: true,
+      style: {
+        zIndex: "var(--z-overlay-mask)"
+      },
+      className: "bg-base/50 backdrop-blur-sm grid place-items-center",
+      children: /*#__PURE__*/jsx(FloatingFocusManager, {
+        context: context,
+        children: /*#__PURE__*/jsxs("dialog", _objectSpread(_objectSpread({
+          role: "alertdialog",
+          className: classNames(classes.alert, 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__*/jsx("div", {
+            className: classNames("area-[icon] text-lg py-2"),
+            children: iconType
+          }), /*#__PURE__*/jsx(Title, {
+            className: "font-medium area-[title]",
+            children: title
+          }), /*#__PURE__*/jsx("p", {
+            className: "area-[message] py-4",
+            children: message
+          }), /*#__PURE__*/jsx("div", {
+            className: "area-[message]",
+            children: message
+          }), /*#__PURE__*/jsxs("div", {
+            className: "flex gap-1 justify-center flex-nowrap pt-2 area-[actions]",
+            children: [/*#__PURE__*/jsx("div", {
+              className: "contents",
+              onClickCapture: function onClickCapture(e) {
+                return handleClose(e.target.value);
+              },
+              children: actions
+            }), type === "confirm" && /*#__PURE__*/jsx(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__*/jsx(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__*/jsx("div", {
+            className: "absolute top-2 end-2",
+            children: /*#__PURE__*/jsx(Button, {
+              size: "sm",
+              variant: "link",
+              className: "m-0",
+              color: color,
+              onClick: function onClick() {
+                return handleClose(false);
+              },
+              icon: CoreIcons.close,
+              "aria-label": "close"
+            })
+          })]
+        }))
+      })
+    })
+  });
+};
+
+export { Alert };

package/dist/esm/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/esm/overlays/flyout/Flyout.js

@@ -0,0 +1,152 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { useFloating, useDismiss, useRole, useInteractions, FloatingOverlay, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
+import classNames from 'classnames';
+import { useCallback, useEffect, Fragment } from 'react';
+import { Loading } from '../../components/animations/Animations.js';
+import { Icon } from '../../components/icon/Icon.js';
+import { Header } from '../../core/headfoot/HeadFoot.js';
+import { HotKeyWrapper } from '../../hotkeys/HotKeyWrapper.js';
+import { CoreIcons } from '../../types/icons.js';
+import classes from './Flyout.module.css';
+import { jsx, jsxs } from '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 = useFloating({
+      open: true,
+      onOpenChange: function onOpenChange() {
+        handleClose(false);
+      }
+    }),
+    refs = _useFloating.refs,
+    context = _useFloating.context;
+  var dismiss = useDismiss(context, {
+    outsidePressEvent: "mousedown",
+    escapeKey: true
+  });
+  var role = useRole(context);
+
+  // Merge all the interactions into prop getters
+  var _useInteractions = useInteractions([dismiss, role]),
+    getFloatingProps = _useInteractions.getFloatingProps;
+  var handleClose = 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]);
+  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 = useCallback(function (e) {
+    if (!!closeOnClick || e.target.closest("[data-flyout-dismiss='true']")) {
+      setTimeout(function () {
+        handleClose();
+      }, 100);
+    }
+  }, [closeOnClick, handleClose]);
+  var Wrapper = useCallback(function (_ref2) {
+    var children = _ref2.children;
+    if (hideMask) return /*#__PURE__*/jsx(Fragment, {
+      children: children
+    });
+    return /*#__PURE__*/jsx(FloatingOverlay, {
+      lockScroll: true,
+      style: {
+        zIndex: "var(--z-overlay-mask)"
+      },
+      className: "bg-base/10 backdrop-blur-sm transition-all",
+      children: children
+    });
+  }, [hideMask, handleClose]);
+  return /*#__PURE__*/jsx(FloatingPortal, {
+    children: /*#__PURE__*/jsx(Wrapper, {
+      children: /*#__PURE__*/jsx(FloatingFocusManager, {
+        context: context,
+        children: /*#__PURE__*/jsx(Wrapper, {
+          children: /*#__PURE__*/jsx("div", _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+            "data-align": align,
+            className: classNames(classes.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__*/jsxs(HotKeyWrapper, {
+              children: [/*#__PURE__*/jsxs(Header, {
+                flex: true,
+                className: classNames(classes.flyoutHeader, headerClassName),
+                children: [icon && /*#__PURE__*/jsx(Icon, {
+                  icon: icon,
+                  bg: iconBg,
+                  color: iconColor,
+                  className: classNames(iconClassName, "p-1"),
+                  rtlFlip: rtlFlip
+                }), /*#__PURE__*/jsx("label", {
+                  className: "flex-1 truncate py-2 px-1",
+                  children: title
+                }), actions, /*#__PURE__*/jsx(Icon, {
+                  "data-ref": "panelClose",
+                  className: classNames(classes.panelAction, "cursor-pointer p-1 text-xl self-stretch"),
+                  icon: CoreIcons.close,
+                  onClick: function onClick() {
+                    return handleClose(false);
+                  }
+                })]
+              }), loading && /*#__PURE__*/jsx(Loading, {}), /*#__PURE__*/jsx("div", {
+                role: "dialog",
+                className: classNames(classes.flyoutBody, "flex-1 grid overflow-hidden"),
+                tabIndex: 0,
+                children: children
+              })]
+            })
+          }))
+        })
+      })
+    })
+  });
+};
+
+export { Flyout };

package/dist/esm/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/esm/overlays/message/Message.js

@@ -0,0 +1,84 @@
+'use client';
+
+import classNames from 'classnames';
+import { useRef, useCallback, useLayoutEffect } from 'react';
+import { Icon } from '../../components/icon/Icon.js';
+import { getBgClass, getColorClass } from '../../utils/getColor.js';
+import '@react-fabric/utilities';
+import classes from './Message.module.css';
+import { jsxs, jsx } from '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 = useRef(null);
+  var handleClose = useCallback(function (ret) {
+    elRef.current && (elRef.current.dataset.show = "false");
+    setTimeout(function () {
+      onClose(ret);
+    }, 250);
+  }, [onClose]);
+  useLayoutEffect(function () {
+    setTimeout(function () {
+      return elRef.current && (elRef.current.dataset.show = "true");
+    }, 100);
+  }, []);
+  return /*#__PURE__*/jsxs("div", {
+    className: classNames(classes.message, color ? getBgClass(color + "-300") : "bg-invert", color ? 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__*/jsx(Icon, {
+      icon: icon,
+      size: "md",
+      rtlFlip: rtlFlip
+    }), title && /*#__PURE__*/jsx("div", {
+      className: "font-medium",
+      children: title
+    }), /*#__PURE__*/jsx("div", {
+      className: "truncate flex-initial",
+      children: message
+    }), actions && /*#__PURE__*/jsx("div", {
+      className: "flex gap-1 flex-nowrap",
+      onClickCapture: function onClickCapture(e) {
+        return handleClose(e.target.value);
+      },
+      children: actions
+    }), /*#__PURE__*/jsx("div", {
+      role: "none",
+      className: "cursor-pointer opacity-65 absolute end-1 hover:opacity-90",
+      onClick: function onClick() {
+        return handleClose();
+      },
+      children: "\xD7"
+    })]
+  });
+};
+
+export { Message };

package/dist/esm/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/esm/overlays/modal/Modal.js

@@ -0,0 +1,132 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { useFloating, useDismiss, useRole, useInteractions, FloatingPortal, FloatingOverlay, FloatingFocusManager } from '@floating-ui/react';
+import classNames from 'classnames';
+import { useCallback, useEffect } from 'react';
+import { Loading } from '../../components/animations/Animations.js';
+import { Icon } from '../../components/icon/Icon.js';
+import { Header } from '../../core/headfoot/HeadFoot.js';
+import { HotKeyWrapper } from '../../hotkeys/HotKeyWrapper.js';
+import { CoreIcons } from '../../types/icons.js';
+import classes from './Modal.module.css';
+import { jsx, jsxs } from '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 = useFloating({
+      open: true,
+      onOpenChange: function onOpenChange() {
+        handleClose(false);
+      }
+    }),
+    refs = _useFloating.refs,
+    context = _useFloating.context;
+  var dismiss = useDismiss(context, {
+    outsidePressEvent: "mousedown",
+    escapeKey: true
+  });
+  var role = useRole(context);
+
+  // Merge all the interactions into prop getters
+  var _useInteractions = useInteractions([dismiss, role]),
+    getFloatingProps = _useInteractions.getFloatingProps;
+  var handleClose = 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]);
+  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__*/jsx(FloatingPortal, {
+    children: /*#__PURE__*/jsx(FloatingOverlay, {
+      lockScroll: true,
+      style: {
+        zIndex: "var(--z-overlay-mask)"
+      },
+      className: "bg-base/50 backdrop-blur-sm grid place-items-center",
+      children: /*#__PURE__*/jsx(FloatingFocusManager, {
+        context: context,
+        children: /*#__PURE__*/jsx("dialog", _objectSpread(_objectSpread(_objectSpread({
+          className: classNames(classes.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__*/jsxs(HotKeyWrapper, {
+            children: [/*#__PURE__*/jsxs(Header, {
+              flex: true,
+              className: classNames(classes.modalHeader, headerClassName),
+              children: [icon && /*#__PURE__*/jsx(Icon, {
+                icon: icon,
+                bg: iconBg,
+                color: iconColor,
+                className: classNames(iconClassName, "p-1"),
+                rtlFlip: rtlFlip
+              }), /*#__PURE__*/jsx("label", {
+                className: "flex-1 truncate py-2 px-1",
+                children: title
+              }), actions, /*#__PURE__*/jsx(Icon, {
+                "data-ref": "panelClose",
+                className: classNames(classes.panelAction, "cursor-pointer p-1 text-xl self-stretch"),
+                icon: CoreIcons.close,
+                onClick: function onClick() {
+                  return handleClose(false);
+                }
+              })]
+            }), loading && /*#__PURE__*/jsx(Loading, {}), /*#__PURE__*/jsx("div", {
+              role: "dialog",
+              className: classNames(classes.modalBody, "flex-1 grid overflow-hidden"),
+              tabIndex: 0,
+              children: children
+            })]
+          })
+        }))
+      })
+    })
+  });
+};
+
+export { Modal };

package/dist/esm/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}}}