@studiometa/ui 0.1.1 → 0.2.2

package/molecules/Accordion/AccordionItem.js

@@ -0,0 +1,178 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import deepmerge from "deepmerge";
+import { Base } from "@studiometa/js-toolkit";
+import { transition } from "@studiometa/js-toolkit/utils";
+import Accordion from "./AccordionCore.js";
+const _AccordionItem = class extends Base {
+  mounted() {
+    if (this.$parent && this.$parent instanceof Accordion && this.$parent.$options.item) {
+      Object.entries(this.$parent.$options.item).forEach(([key, value]) => {
+        if (key in this.$options) {
+          const type = _AccordionItem.config.options[key].type || _AccordionItem.config.options[key];
+          if (type === Array || type === Object) {
+            this.$options[key] = deepmerge(this.$options[key], value);
+          } else {
+            this.$options[key] = value;
+          }
+        }
+      });
+    }
+    this.$refs.btn.setAttribute("id", this.$id);
+    this.$refs.btn.setAttribute("aria-controls", this.contentId);
+    this.$refs.content.setAttribute("aria-labelledby", this.$id);
+    this.$refs.content.setAttribute("id", this.contentId);
+    const { isOpen } = this.$options;
+    this.updateAttributes(isOpen);
+    const _a = this.$options.styles, { container } = _a, otherStyles = __objRest(_a, ["container"]);
+    const refs = this.$refs;
+    Object.entries(otherStyles).filter(([refName]) => refs[refName]).forEach(([refName, { open, closed } = { open: "", closed: "" }]) => {
+      transition(refs[refName], { to: isOpen ? open : closed }, "keep");
+    });
+  }
+  destroyed() {
+    this.$refs.container.style.visibility = "";
+    this.$refs.container.style.height = "";
+  }
+  onBtnClick() {
+    if (this.$options.isOpen) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+  get contentId() {
+    return `content-${this.$id}`;
+  }
+  updateAttributes(isOpen) {
+    this.$refs.container.style.visibility = isOpen ? "" : "invisible";
+    this.$refs.container.style.height = isOpen ? "" : "0";
+    this.$refs.content.setAttribute("aria-hidden", isOpen ? "false" : "true");
+    this.$refs.btn.setAttribute("aria-expanded", isOpen ? "true" : "false");
+  }
+  open() {
+    return __async(this, null, function* () {
+      if (this.$options.isOpen) {
+        return;
+      }
+      this.$log("open");
+      this.$emit("open");
+      this.$options.isOpen = true;
+      this.updateAttributes(this.$options.isOpen);
+      this.$refs.container.style.visibility = "";
+      const _a = this.$options.styles, { container } = _a, otherStyles = __objRest(_a, ["container"]);
+      const refs = this.$refs;
+      yield Promise.all([
+        transition(refs.container, {
+          from: { height: "0" },
+          active: container.active,
+          to: { height: `${refs.content.offsetHeight}px` }
+        }).then(() => {
+          if (this.$options.isOpen) {
+            refs.content.style.position = "";
+          }
+          return Promise.resolve();
+        }),
+        ...Object.entries(otherStyles).filter(([refName]) => refs[refName]).map(([refName, { open, active, closed } = { open: "", active: "", closed: "" }]) => transition(refs[refName], {
+          from: closed,
+          active,
+          to: open
+        }, "keep"))
+      ]);
+    });
+  }
+  close() {
+    return __async(this, null, function* () {
+      if (!this.$options.isOpen) {
+        return;
+      }
+      this.$log("close");
+      this.$emit("close");
+      this.$options.isOpen = false;
+      const height = this.$refs.container.offsetHeight;
+      this.$refs.content.style.position = "absolute";
+      const _a = this.$options.styles, { container } = _a, otherStyles = __objRest(_a, ["container"]);
+      const refs = this.$refs;
+      yield Promise.all([
+        transition(refs.container, {
+          from: { height: `${height}px` },
+          active: container.active,
+          to: { height: "0" }
+        }).then(() => {
+          if (!this.$options.isOpen) {
+            refs.container.style.height = "0";
+            refs.container.style.visibility = "invisible";
+            this.updateAttributes(this.$options.isOpen);
+          }
+          return Promise.resolve();
+        }),
+        ...Object.entries(otherStyles).filter(([refName]) => refs[refName]).map(([refName, { open, active, closed } = { open: "", active: "", closed: "" }]) => transition(refs[refName], {
+          from: open,
+          active,
+          to: closed
+        }, "keep"))
+      ]);
+    });
+  }
+};
+let AccordionItem = _AccordionItem;
+__publicField(AccordionItem, "config", {
+  name: "AccordionItem",
+  refs: ["btn", "content", "container"],
+  emits: ["open", "close"],
+  options: {
+    isOpen: Boolean,
+    styles: {
+      type: Object,
+      default: () => ({
+        container: {
+          open: "",
+          active: "",
+          closed: ""
+        }
+      })
+    }
+  }
+});
+export {
+  AccordionItem as default
+};

package/molecules/Modal/Modal.cjs

@@ -0,0 +1,176 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// packages/ui/molecules/Modal/Modal.js
+var Modal_exports = {};
+__export(Modal_exports, {
+  default: () => Modal
+});
+var import_js_toolkit = require("@studiometa/js-toolkit");
+var import_utils = require("@studiometa/js-toolkit/utils");
+var { trap, untrap, saveActiveElement } = (0, import_utils.focusTrap)();
+var Modal = class extends import_js_toolkit.Base {
+  get onOpenClick() {
+    return this.open;
+  }
+  get onCloseClick() {
+    return this.close;
+  }
+  get onOverlayClick() {
+    return this.close;
+  }
+  mounted() {
+    this.isOpen = false;
+    this.close();
+    if (this.$options.move) {
+      const target = document.querySelector(this.$options.move) || document.body;
+      this.__refsBackup = this.$refs;
+      this.__refModalPlaceholder = document.createComment("");
+      this.__refModalParentBackup = this.$refs.modal.parentElement || this.$el;
+      this.__refModalParentBackup.insertBefore(this.__refModalPlaceholder, this.$refs.modal);
+      target.appendChild(this.$refs.modal);
+    }
+  }
+  get $refs() {
+    const $refs = super.$refs;
+    if (this.$options.move && this.__refsBackup) {
+      Object.entries(this.__refsBackup).forEach(([key, ref]) => {
+        if (!$refs[key]) {
+          $refs[key] = ref;
+        }
+      });
+    }
+    return $refs;
+  }
+  destroyed() {
+    this.close();
+    if (this.$options.move && this.__refModalParentBackup) {
+      this.__refModalParentBackup.insertBefore(this.$refs.modal, this.__refModalPlaceholder);
+      this.__refModalPlaceholder.remove();
+      delete this.__refModalPlaceholder;
+      delete this.__refModalParentBackup;
+    }
+    return this;
+  }
+  keyed({ event, isUp, isDown, ESC }) {
+    if (!this.isOpen) {
+      return;
+    }
+    if (isDown) {
+      trap(this.$refs.modal, event);
+    }
+    if (ESC && isUp) {
+      this.close();
+    }
+  }
+  open() {
+    return __async(this, null, function* () {
+      if (this.isOpen) {
+        return Promise.resolve();
+      }
+      this.$refs.modal.setAttribute("aria-hidden", "false");
+      document.documentElement.style.overflow = "hidden";
+      this.isOpen = true;
+      this.$emit("open");
+      const refs = this.$refs;
+      return Promise.all(Object.entries(this.$options.styles).map(([refName, { open, active, closed } = { open: "", active: "", closed: "" }]) => (0, import_utils.transition)(refs[refName], {
+        from: closed,
+        active,
+        to: open
+      }, "keep"))).then(() => {
+        if (this.$options.autofocus && this.$refs.modal.querySelector(this.$options.autofocus)) {
+          saveActiveElement();
+          const autofocusElement = this.$refs.modal.querySelector(this.$options.autofocus);
+          autofocusElement.focus();
+        }
+        return Promise.resolve();
+      });
+    });
+  }
+  close() {
+    return __async(this, null, function* () {
+      if (!this.isOpen) {
+        return Promise.resolve();
+      }
+      this.$refs.modal.setAttribute("aria-hidden", "true");
+      document.documentElement.style.overflow = "";
+      this.isOpen = false;
+      untrap();
+      this.$emit("close");
+      const refs = this.$refs;
+      return Promise.all(Object.entries(this.$options.styles).map(([refName, { open, active, closed } = { open: "", active: "", closed: "" }]) => (0, import_utils.transition)(refs[refName], {
+        from: open,
+        active,
+        to: closed
+      }, "keep"))).then(() => Promise.resolve());
+    });
+  }
+};
+__publicField(Modal, "config", {
+  name: "Modal",
+  refs: ["close", "container", "content", "modal", "open", "overlay"],
+  emits: ["open", "close"],
+  options: {
+    move: String,
+    autofocus: { type: String, default: "[autofocus]" },
+    styles: {
+      type: Object,
+      default: () => ({
+        modal: {
+          closed: {
+            opacity: "0",
+            pointerEvents: "none",
+            visibility: "hidden"
+          }
+        }
+      })
+    }
+  }
+});
+module.exports = __toCommonJS(Modal_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/{Modal.d.ts → molecules/Modal/Modal.d.ts}

@@ -8,8 +8,7 @@
  * @property {HTMLElement} overlay
  */
 /**
- * @typedef {import('@studiometa/js-toolkit/utils/css/styles.js').CssStyleObject} CssStyleObject
- * @typedef {Partial<Record<'open'|'active'|'closed', string|CssStyleObject>>} ModalStates
+ * @typedef {Partial<Record<'open'|'active'|'closed', string|Partial<CSSStyleDeclaration>>>} ModalStates
  * @typedef {Partial<Record<keyof ModalRefs, ModalStates>>} ModalStylesOption
  */
 /**
@@ -29,6 +28,7 @@
  */
 /**
  * @typedef {Modal & ModalPrivateInterface} ModalInterface
+ * @typedef {typeof Modal} ModalConstructor
  */
 /**
  * Modal class.
@@ -79,7 +79,7 @@ export default class Modal extends Base {
      *
      * @this {ModalInterface}
      */
-    mounted(): ModalInterface;
+    mounted(): void;
     isOpen: boolean;
     __refsBackup: import("@studiometa/js-toolkit/Base/managers/RefsManager").default & ModalRefs;
     __refModalPlaceholder: Comment;
@@ -111,16 +111,16 @@ export default class Modal extends Base {
      * Open the modal.
      *
      * @this {ModalInterface}
-     * @return {Promise<ModalInterface>} The Modal instance.
+     * @return {Promise<void>} The Modal instance.
      */
-    open(): Promise<ModalInterface>;
+    open(): Promise<void>;
     /**
      * Close the modal.
      *
      * @this {ModalInterface}
-     * @return {Promise<ModalInterface>} The Modal instance.
+     * @return {Promise<void>} The Modal instance.
      */
-    close(): Promise<ModalInterface>;
+    close(): Promise<void>;
 }
 export type ModalRefs = {
     close: HTMLElement;
@@ -130,8 +130,7 @@ export type ModalRefs = {
     open: HTMLElement;
     overlay: HTMLElement;
 };
-export type CssStyleObject = import('@studiometa/js-toolkit/utils/css/styles.js').CssStyleObject;
-export type ModalStates = Partial<Record<'open' | 'active' | 'closed', string | CssStyleObject>>;
+export type ModalStates = Partial<Record<'open' | 'active' | 'closed', string | Partial<CSSStyleDeclaration>>>;
 export type ModalStylesOption = Partial<Record<keyof ModalRefs, ModalStates>>;
 export type ModalOptions = {
     /**
@@ -156,4 +155,5 @@ export type ModalPrivateInterface = {
     refModalUnbindGetRefFilter: Function;
 };
 export type ModalInterface = Modal & ModalPrivateInterface;
+export type ModalConstructor = typeof Modal;
 import { Base } from "@studiometa/js-toolkit";

package/molecules/Modal/Modal.js

@@ -0,0 +1,150 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import { Base } from "@studiometa/js-toolkit";
+import { transition, focusTrap } from "@studiometa/js-toolkit/utils";
+const { trap, untrap, saveActiveElement } = focusTrap();
+class Modal extends Base {
+  get onOpenClick() {
+    return this.open;
+  }
+  get onCloseClick() {
+    return this.close;
+  }
+  get onOverlayClick() {
+    return this.close;
+  }
+  mounted() {
+    this.isOpen = false;
+    this.close();
+    if (this.$options.move) {
+      const target = document.querySelector(this.$options.move) || document.body;
+      this.__refsBackup = this.$refs;
+      this.__refModalPlaceholder = document.createComment("");
+      this.__refModalParentBackup = this.$refs.modal.parentElement || this.$el;
+      this.__refModalParentBackup.insertBefore(this.__refModalPlaceholder, this.$refs.modal);
+      target.appendChild(this.$refs.modal);
+    }
+  }
+  get $refs() {
+    const $refs = super.$refs;
+    if (this.$options.move && this.__refsBackup) {
+      Object.entries(this.__refsBackup).forEach(([key, ref]) => {
+        if (!$refs[key]) {
+          $refs[key] = ref;
+        }
+      });
+    }
+    return $refs;
+  }
+  destroyed() {
+    this.close();
+    if (this.$options.move && this.__refModalParentBackup) {
+      this.__refModalParentBackup.insertBefore(this.$refs.modal, this.__refModalPlaceholder);
+      this.__refModalPlaceholder.remove();
+      delete this.__refModalPlaceholder;
+      delete this.__refModalParentBackup;
+    }
+    return this;
+  }
+  keyed({ event, isUp, isDown, ESC }) {
+    if (!this.isOpen) {
+      return;
+    }
+    if (isDown) {
+      trap(this.$refs.modal, event);
+    }
+    if (ESC && isUp) {
+      this.close();
+    }
+  }
+  open() {
+    return __async(this, null, function* () {
+      if (this.isOpen) {
+        return Promise.resolve();
+      }
+      this.$refs.modal.setAttribute("aria-hidden", "false");
+      document.documentElement.style.overflow = "hidden";
+      this.isOpen = true;
+      this.$emit("open");
+      const refs = this.$refs;
+      return Promise.all(Object.entries(this.$options.styles).map(([refName, { open, active, closed } = { open: "", active: "", closed: "" }]) => transition(refs[refName], {
+        from: closed,
+        active,
+        to: open
+      }, "keep"))).then(() => {
+        if (this.$options.autofocus && this.$refs.modal.querySelector(this.$options.autofocus)) {
+          saveActiveElement();
+          const autofocusElement = this.$refs.modal.querySelector(this.$options.autofocus);
+          autofocusElement.focus();
+        }
+        return Promise.resolve();
+      });
+    });
+  }
+  close() {
+    return __async(this, null, function* () {
+      if (!this.isOpen) {
+        return Promise.resolve();
+      }
+      this.$refs.modal.setAttribute("aria-hidden", "true");
+      document.documentElement.style.overflow = "";
+      this.isOpen = false;
+      untrap();
+      this.$emit("close");
+      const refs = this.$refs;
+      return Promise.all(Object.entries(this.$options.styles).map(([refName, { open, active, closed } = { open: "", active: "", closed: "" }]) => transition(refs[refName], {
+        from: open,
+        active,
+        to: closed
+      }, "keep"))).then(() => Promise.resolve());
+    });
+  }
+}
+__publicField(Modal, "config", {
+  name: "Modal",
+  refs: ["close", "container", "content", "modal", "open", "overlay"],
+  emits: ["open", "close"],
+  options: {
+    move: String,
+    autofocus: { type: String, default: "[autofocus]" },
+    styles: {
+      type: Object,
+      default: () => ({
+        modal: {
+          closed: {
+            opacity: "0",
+            pointerEvents: "none",
+            visibility: "hidden"
+          }
+        }
+      })
+    }
+  }
+});
+export {
+  Modal as default
+};

package/molecules/Modal/ModalWithTransition.cjs

@@ -0,0 +1,100 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// packages/ui/molecules/Modal/ModalWithTransition.js
+var ModalWithTransition_exports = {};
+__export(ModalWithTransition_exports, {
+  default: () => ModalWithTransition
+});
+var import_Modal = __toESM(require("./Modal.cjs"), 1);
+var ModalWithTransition = class extends import_Modal.default {
+  open() {
+    this.$refs.modal.style.visibility = "";
+    return super.open();
+  }
+  close() {
+    var __superGet = (key) => super[key];
+    return __async(this, null, function* () {
+      yield __superGet("close").call(this);
+      this.$refs.modal.style.visibility = "hidden";
+      return Promise.resolve();
+    });
+  }
+};
+__publicField(ModalWithTransition, "config", {
+  name: "ModalWithTransition",
+  options: {
+    styles: {
+      type: Object,
+      default: () => ({
+        modal: {
+          closed: {
+            opacity: "0",
+            pointerEvents: "none"
+          },
+          active: "transition duration-500 ease-out-expo"
+        },
+        overlay: {
+          closed: "opacity-0",
+          active: "transition duration-500 ease-out-expo"
+        },
+        container: {
+          closed: "transform scale-95 opacity-0",
+          active: "transition duration-500 ease-out-expo"
+        }
+      })
+    }
+  }
+});
+module.exports = __toCommonJS(ModalWithTransition_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/molecules/Modal/ModalWithTransition.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @typedef {import('./Modal.js').ModalInterface} ModalInterface
+ * @typedef {import('./Modal.js').ModalStylesOption} ModalStylesOption
+ * @typedef {ModalInterface & ModalWithTransition} ModalWithTransitionInterface
+ */
+/**
+ * ModalWithTransition class.
+ */
+export default class ModalWithTransition extends Modal {
+    /**
+     * Modal options.
+     */
+    static config: {
+        name: string;
+        options: {
+            styles: {
+                type: ObjectConstructor;
+                /**
+                 * @return {ModalStylesOption}
+                 */
+                default: () => ModalStylesOption;
+            };
+        };
+    };
+}
+export type ModalInterface = import('./Modal.js').ModalInterface;
+export type ModalStylesOption = import('./Modal.js').ModalStylesOption;
+export type ModalWithTransitionInterface = ModalInterface & ModalWithTransition;
+import Modal from "./Modal.js";