@studiometa/ui 0.2.13 → 0.2.15

package/molecules/Modal/ModalWithTransition.js

@@ -1 +1,41 @@
-import e from"./Modal.js";class t extends e{static 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"}})}}};open(){return this.$refs.modal.style.visibility="",super.open()}async close(){return await super.close(),this.$refs.modal.style.visibility="hidden",Promise.resolve()}}export{t as default};
+import { Modal } from "./Modal.js";
+class ModalWithTransition extends Modal {
+  static 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"
+          }
+        })
+      }
+    }
+  };
+  open() {
+    this.$refs.modal.style.visibility = "";
+    return super.open();
+  }
+  async close() {
+    await super.close();
+    this.$refs.modal.style.visibility = "hidden";
+    return Promise.resolve();
+  }
+}
+export {
+  ModalWithTransition
+};
+//# sourceMappingURL=ModalWithTransition.js.map

package/molecules/Modal/ModalWithTransition.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/molecules/Modal/ModalWithTransition.ts"],
+  "sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { Modal } from './Modal.js';\n\n/**\n * ModalWithTransition class.\n */\nexport class ModalWithTransition<T extends BaseProps = BaseProps> extends Modal<T> {\n  /**\n   * Modal options.\n   */\n  static config:BaseConfig = {\n    name: 'ModalWithTransition',\n    options: {\n      styles: {\n        type: Object,\n        /**\n         * @returns {ModalStylesOption}\n         */\n        default: () => ({\n          modal: {\n            closed: {\n              opacity: '0',\n              pointerEvents: 'none',\n            },\n            active: 'transition duration-500 ease-out-expo',\n          },\n          overlay: {\n            closed: 'opacity-0',\n            active: 'transition duration-500 ease-out-expo',\n          },\n          container: {\n            closed: 'transform scale-95 opacity-0',\n            active: 'transition duration-500 ease-out-expo',\n          },\n        }),\n      },\n    },\n  };\n\n  open() {\n    this.$refs.modal.style.visibility = '';\n    return super.open();\n  }\n\n  async close() {\n    await super.close();\n    this.$refs.modal.style.visibility = 'hidden';\n    return Promise.resolve();\n  }\n}\n"],
+  "mappings": "AACA,SAAS,aAAa;AAKf,MAAM,4BAA6D,MAAS;AAAA,EAIjF,OAAO,SAAoB;AAAA,IACzB,MAAM;AAAA,IACN,SAAS;AAAA,MACP,QAAQ;AAAA,QACN,MAAM;AAAA,QAIN,SAAS,OAAO;AAAA,UACd,OAAO;AAAA,YACL,QAAQ;AAAA,cACN,SAAS;AAAA,cACT,eAAe;AAAA,YACjB;AAAA,YACA,QAAQ;AAAA,UACV;AAAA,UACA,SAAS;AAAA,YACP,QAAQ;AAAA,YACR,QAAQ;AAAA,UACV;AAAA,UACA,WAAW;AAAA,YACT,QAAQ;AAAA,YACR,QAAQ;AAAA,UACV;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEA,OAAO;AACL,SAAK,MAAM,MAAM,MAAM,aAAa;AACpC,WAAO,MAAM,KAAK;AAAA,EACpB;AAAA,EAEA,MAAM,QAAQ;AACZ,UAAM,MAAM,MAAM;AAClB,SAAK,MAAM,MAAM,MAAM,aAAa;AACpC,WAAO,QAAQ,QAAQ;AAAA,EACzB;AACF;",
+  "names": []
+}

package/molecules/Modal/index.cjs

@@ -0,0 +1,22 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/ui/molecules/Modal/index.ts
+var Modal_exports = {};
+module.exports = __toCommonJS(Modal_exports);
+__reExport(Modal_exports, require("./Modal.cjs"), module.exports);
+__reExport(Modal_exports, require("./ModalWithTransition.cjs"), module.exports);
+if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=index.cjs.map

package/molecules/Modal/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/molecules/Modal/index.ts"],
+  "sourcesContent": ["export * from './Modal.js';\nexport * from './ModalWithTransition.js';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,0BAAc,wBAAd;AACA,0BAAc,sCADd;",
+  "names": []
+}

package/molecules/Modal/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Modal.js';
+export * from './ModalWithTransition.js';

package/molecules/Modal/index.js

@@ -0,0 +1,3 @@
+export * from "./Modal.js";
+export * from "./ModalWithTransition.js";
+//# sourceMappingURL=index.js.map

package/molecules/Modal/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/molecules/Modal/index.ts"],
+  "sourcesContent": ["export * from './Modal.js';\nexport * from './ModalWithTransition.js';\n"],
+  "mappings": "AAAA,cAAc;AACd,cAAc;",
+  "names": []
+}

package/molecules/Panel/Panel.cjs

@@ -1,8 +1,6 @@
-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 __export = (target, all) => {
@@ -17,24 +15,25 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 
-// packages/ui/molecules/Panel/Panel.js
+// packages/ui/molecules/Panel/Panel.ts
 var Panel_exports = {};
 __export(Panel_exports, {
-  default: () => Panel
+  Panel: () => Panel
 });
 module.exports = __toCommonJS(Panel_exports);
 var import_utils = require("@studiometa/js-toolkit/utils");
-var import_Modal = __toESM(require("../Modal/Modal.cjs"), 1);
-var _Panel = class extends import_Modal.default {
+var import_Modal = require("../Modal/index.cjs");
+var DEFAULT_POSITION = "left";
+var _Panel = class extends import_Modal.Modal {
+  isClosing = false;
   get translateClass() {
-    return _Panel.translateClasses[this.$options.position] ?? _Panel.translateClasses[_Panel.config.options.position.default];
+    return _Panel.translateClasses[this.$options.position] ?? _Panel.translateClasses[DEFAULT_POSITION];
   }
   get containerOffset() {
     const { offsetTop, offsetLeft, offsetWidth, offsetHeight } = this.$refs.container;
@@ -59,14 +58,18 @@ var _Panel = class extends import_Modal.default {
       return Promise.resolve();
     }
     this.$refs.modal.classList.remove("pointer-events-none");
-    (0, import_utils.transition)(this.$refs.container, {
-      from: {
-        transform: this.containerOffset
+    (0, import_utils.transition)(
+      this.$refs.container,
+      {
+        from: {
+          transform: this.containerOffset
+        },
+        to: {
+          transform: "none"
+        }
       },
-      to: {
-        transform: "none"
-      }
-    }, "keep");
+      "keep"
+    );
     (0, import_utils.transition)(this.$refs.overlay, {
       from: "opacity-0"
     });
@@ -79,17 +82,25 @@ var _Panel = class extends import_Modal.default {
     this.isClosing = true;
     this.$refs.modal.classList.add("pointer-events-none");
     await Promise.all([
-      (0, import_utils.transition)(this.$refs.container, {
-        from: {
-          transform: "none"
+      (0, import_utils.transition)(
+        this.$refs.container,
+        {
+          from: {
+            transform: "none"
+          },
+          to: {
+            transform: this.containerOffset
+          }
         },
-        to: {
-          transform: this.containerOffset
-        }
-      }, "keep"),
-      (0, import_utils.transition)(this.$refs.overlay, {
-        to: "opacity-0"
-      }, "keep")
+        "keep"
+      ),
+      (0, import_utils.transition)(
+        this.$refs.overlay,
+        {
+          to: "opacity-0"
+        },
+        "keep"
+      )
     ]);
     this.isClosing = false;
     return super.close();
@@ -101,7 +112,7 @@ __publicField(Panel, "config", {
   options: {
     position: {
       type: String,
-      default: "left"
+      default: DEFAULT_POSITION
     }
   }
 });
@@ -112,3 +123,4 @@ __publicField(Panel, "translateClasses", {
   left: "-translate-x-full"
 });
 if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=Panel.cjs.map

package/molecules/Panel/Panel.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/molecules/Panel/Panel.ts"],
+  "sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { transition, matrix } from '@studiometa/js-toolkit/utils';\nimport { Modal } from '../Modal/index.js';\n\nexport interface PanelProps extends BaseProps {\n  $options: {\n    position: 'top' | 'right' | 'bottom' | 'left'\n  }\n}\n\nconst DEFAULT_POSITION = 'left';\n\n/**\n * Panel class.\n */\nexport class Panel<T extends BaseProps = BaseProps> extends Modal<T & PanelProps> {\n  /**\n   * Config.\n   */\n  static config:BaseConfig = {\n    name: 'Panel',\n    options: {\n      position: {\n        type: String,\n        default: DEFAULT_POSITION,\n      },\n    },\n  };\n\n  static translateClasses = {\n    top: '-translate-y-full',\n    right: 'translate-x-full',\n    bottom: 'translate-y-full',\n    left: '-translate-x-full',\n  };\n\n  isClosing = false;\n\n  /**\n   * Get the translation class.\n   * @returns {string}\n   */\n  get translateClass() {\n    return (\n      Panel.translateClasses[this.$options.position] ??\n      Panel.translateClasses[DEFAULT_POSITION]\n    );\n  }\n\n  get containerOffset() {\n    const { offsetTop, offsetLeft, offsetWidth, offsetHeight } = this.$refs.container;\n\n    const store = {\n      top: {\n        translateY: (offsetTop + offsetHeight) * -1,\n      },\n      right: {\n        translateX: window.innerWidth - offsetLeft + offsetWidth * 2,\n      },\n      bottom: {\n        translateY: window.innerHeight - offsetTop + offsetHeight * 2,\n      },\n      left: {\n        translateX: (offsetLeft + offsetWidth) * -1,\n      },\n    };\n\n    return matrix(store[this.$options.position]);\n  }\n\n  /**\n   * Animate before opening.\n   *\n   * @this {PanelInterface}\n   * @returns {Promise<void>}\n   */\n  async open() {\n    if (this.isOpen) {\n      return Promise.resolve();\n    }\n\n    this.$refs.modal.classList.remove('pointer-events-none');\n    transition(\n      this.$refs.container,\n      {\n        from: {\n          transform: this.containerOffset,\n        },\n        to: {\n          transform: 'none',\n        },\n      },\n      'keep',\n    );\n    transition(this.$refs.overlay, {\n      from: 'opacity-0',\n    });\n\n    return super.open();\n  }\n\n  /**\n   * Animate before closing.\n   *\n   * @this {PanelInterface}\n   * @returns {Promise<void>}\n   */\n  async close() {\n    if (!this.isOpen || this.isClosing) {\n      return Promise.resolve();\n    }\n\n    this.isClosing = true;\n\n    this.$refs.modal.classList.add('pointer-events-none');\n    await Promise.all([\n      transition(\n        this.$refs.container,\n        {\n          from: {\n            transform: 'none',\n          },\n          to: {\n            transform: this.containerOffset,\n          },\n        },\n        'keep',\n      ),\n      transition(\n        this.$refs.overlay,\n        {\n          to: 'opacity-0',\n        },\n        'keep',\n      ),\n    ]);\n\n    this.isClosing = false;\n\n    return super.close();\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAmC;AACnC,mBAAsB;AAQtB,IAAM,mBAAmB;AAKlB,IAAM,SAAN,cAAqD,mBAAsB;AAAA,EAqBhF,YAAY;AAAA,EAMZ,IAAI,iBAAiB;AACnB,WACE,OAAM,iBAAiB,KAAK,SAAS,aACrC,OAAM,iBAAiB;AAAA,EAE3B;AAAA,EAEA,IAAI,kBAAkB;AACpB,UAAM,EAAE,WAAW,YAAY,aAAa,aAAa,IAAI,KAAK,MAAM;AAExE,UAAM,QAAQ;AAAA,MACZ,KAAK;AAAA,QACH,aAAa,YAAY,gBAAgB;AAAA,MAC3C;AAAA,MACA,OAAO;AAAA,QACL,YAAY,OAAO,aAAa,aAAa,cAAc;AAAA,MAC7D;AAAA,MACA,QAAQ;AAAA,QACN,YAAY,OAAO,cAAc,YAAY,eAAe;AAAA,MAC9D;AAAA,MACA,MAAM;AAAA,QACJ,aAAa,aAAa,eAAe;AAAA,MAC3C;AAAA,IACF;AAEA,eAAO,qBAAO,MAAM,KAAK,SAAS,SAAS;AAAA,EAC7C;AAAA,EAQA,MAAM,OAAO;AACX,QAAI,KAAK,QAAQ;AACf,aAAO,QAAQ,QAAQ;AAAA,IACzB;AAEA,SAAK,MAAM,MAAM,UAAU,OAAO,qBAAqB;AACvD;AAAA,MACE,KAAK,MAAM;AAAA,MACX;AAAA,QACE,MAAM;AAAA,UACJ,WAAW,KAAK;AAAA,QAClB;AAAA,QACA,IAAI;AAAA,UACF,WAAW;AAAA,QACb;AAAA,MACF;AAAA,MACA;AAAA,IACF;AACA,iCAAW,KAAK,MAAM,SAAS;AAAA,MAC7B,MAAM;AAAA,IACR,CAAC;AAED,WAAO,MAAM,KAAK;AAAA,EACpB;AAAA,EAQA,MAAM,QAAQ;AACZ,QAAI,CAAC,KAAK,UAAU,KAAK,WAAW;AAClC,aAAO,QAAQ,QAAQ;AAAA,IACzB;AAEA,SAAK,YAAY;AAEjB,SAAK,MAAM,MAAM,UAAU,IAAI,qBAAqB;AACpD,UAAM,QAAQ,IAAI;AAAA,UAChB;AAAA,QACE,KAAK,MAAM;AAAA,QACX;AAAA,UACE,MAAM;AAAA,YACJ,WAAW;AAAA,UACb;AAAA,UACA,IAAI;AAAA,YACF,WAAW,KAAK;AAAA,UAClB;AAAA,QACF;AAAA,QACA;AAAA,MACF;AAAA,UACA;AAAA,QACE,KAAK,MAAM;AAAA,QACX;AAAA,UACE,IAAI;AAAA,QACN;AAAA,QACA;AAAA,MACF;AAAA,IACF,CAAC;AAED,SAAK,YAAY;AAEjB,WAAO,MAAM,MAAM;AAAA,EACrB;AACF;AA9HO,IAAM,QAAN;AAIL,cAJW,OAIJ,UAAoB;AAAA,EACzB,MAAM;AAAA,EACN,SAAS;AAAA,IACP,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AACF;AAEA,cAdW,OAcJ,oBAAmB;AAAA,EACxB,KAAK;AAAA,EACL,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AACR;",
+  "names": []
+}

package/molecules/Panel/Panel.d.ts

@@ -1,42 +1,43 @@
-/**
- * @typedef {import('../Modal/Modal.js').ModalInterface} ModalInterface
- * @typedef {Panel & ModalInterface} PanelInterface
- * @typedef {typeof Modal} ModalConstructor
- */
+import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';
+import { Modal } from '../Modal/index.js';
+export interface PanelProps extends BaseProps {
+    $options: {
+        position: 'top' | 'right' | 'bottom' | 'left';
+    };
+}
 /**
  * Panel class.
  */
-export default class Panel extends Modal {
+export declare class Panel<T extends BaseProps = BaseProps> extends Modal<T & PanelProps> {
     /**
      * Config.
      */
-    static config: {
-        name: string;
-        options: {
-            position: {
-                type: StringConstructor;
-                default: string;
-            };
-        };
-    };
+    static config: BaseConfig;
     static translateClasses: {
         top: string;
         right: string;
         bottom: string;
         left: string;
     };
+    isClosing: boolean;
     /**
      * Get the translation class.
      * @returns {string}
      */
     get translateClass(): string;
+    get containerOffset(): string;
     /**
+     * Animate before opening.
+     *
      * @this {PanelInterface}
+     * @returns {Promise<void>}
      */
-    get containerOffset(): string;
-    isClosing: boolean;
+    open(): Promise<void>;
+    /**
+     * Animate before closing.
+     *
+     * @this {PanelInterface}
+     * @returns {Promise<void>}
+     */
+    close(): Promise<void>;
 }
-export type ModalInterface = import('../Modal/Modal.js').ModalInterface;
-export type PanelInterface = Panel & ModalInterface;
-export type ModalConstructor = typeof Modal;
-import Modal from "../Modal/Modal.js";

package/molecules/Panel/Panel.js

@@ -1 +1,98 @@
-import{transition as s,matrix as a}from"@studiometa/js-toolkit/utils";import l from"../Modal/Modal.js";class t extends l{static config={name:"Panel",options:{position:{type:String,default:"left"}}};static translateClasses={top:"-translate-y-full",right:"translate-x-full",bottom:"translate-y-full",left:"-translate-x-full"};get translateClass(){return t.translateClasses[this.$options.position]??t.translateClasses[t.config.options.position.default]}get containerOffset(){const{offsetTop:e,offsetLeft:o,offsetWidth:n,offsetHeight:i}=this.$refs.container,r={top:{translateY:(e+i)*-1},right:{translateX:window.innerWidth-o+n*2},bottom:{translateY:window.innerHeight-e+i*2},left:{translateX:(o+n)*-1}};return a(r[this.$options.position])}async open(){return this.isOpen?Promise.resolve():(this.$refs.modal.classList.remove("pointer-events-none"),s(this.$refs.container,{from:{transform:this.containerOffset},to:{transform:"none"}},"keep"),s(this.$refs.overlay,{from:"opacity-0"}),super.open())}async close(){return!this.isOpen||this.isClosing?Promise.resolve():(this.isClosing=!0,this.$refs.modal.classList.add("pointer-events-none"),await Promise.all([s(this.$refs.container,{from:{transform:"none"},to:{transform:this.containerOffset}},"keep"),s(this.$refs.overlay,{to:"opacity-0"},"keep")]),this.isClosing=!1,super.close())}}export{t as default};
+import { transition, matrix } from "@studiometa/js-toolkit/utils";
+import { Modal } from "../Modal/index.js";
+const DEFAULT_POSITION = "left";
+class Panel extends Modal {
+  static config = {
+    name: "Panel",
+    options: {
+      position: {
+        type: String,
+        default: DEFAULT_POSITION
+      }
+    }
+  };
+  static translateClasses = {
+    top: "-translate-y-full",
+    right: "translate-x-full",
+    bottom: "translate-y-full",
+    left: "-translate-x-full"
+  };
+  isClosing = false;
+  get translateClass() {
+    return Panel.translateClasses[this.$options.position] ?? Panel.translateClasses[DEFAULT_POSITION];
+  }
+  get containerOffset() {
+    const { offsetTop, offsetLeft, offsetWidth, offsetHeight } = this.$refs.container;
+    const store = {
+      top: {
+        translateY: (offsetTop + offsetHeight) * -1
+      },
+      right: {
+        translateX: window.innerWidth - offsetLeft + offsetWidth * 2
+      },
+      bottom: {
+        translateY: window.innerHeight - offsetTop + offsetHeight * 2
+      },
+      left: {
+        translateX: (offsetLeft + offsetWidth) * -1
+      }
+    };
+    return matrix(store[this.$options.position]);
+  }
+  async open() {
+    if (this.isOpen) {
+      return Promise.resolve();
+    }
+    this.$refs.modal.classList.remove("pointer-events-none");
+    transition(
+      this.$refs.container,
+      {
+        from: {
+          transform: this.containerOffset
+        },
+        to: {
+          transform: "none"
+        }
+      },
+      "keep"
+    );
+    transition(this.$refs.overlay, {
+      from: "opacity-0"
+    });
+    return super.open();
+  }
+  async close() {
+    if (!this.isOpen || this.isClosing) {
+      return Promise.resolve();
+    }
+    this.isClosing = true;
+    this.$refs.modal.classList.add("pointer-events-none");
+    await Promise.all([
+      transition(
+        this.$refs.container,
+        {
+          from: {
+            transform: "none"
+          },
+          to: {
+            transform: this.containerOffset
+          }
+        },
+        "keep"
+      ),
+      transition(
+        this.$refs.overlay,
+        {
+          to: "opacity-0"
+        },
+        "keep"
+      )
+    ]);
+    this.isClosing = false;
+    return super.close();
+  }
+}
+export {
+  Panel
+};
+//# sourceMappingURL=Panel.js.map

package/molecules/Panel/Panel.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/molecules/Panel/Panel.ts"],
+  "sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { transition, matrix } from '@studiometa/js-toolkit/utils';\nimport { Modal } from '../Modal/index.js';\n\nexport interface PanelProps extends BaseProps {\n  $options: {\n    position: 'top' | 'right' | 'bottom' | 'left'\n  }\n}\n\nconst DEFAULT_POSITION = 'left';\n\n/**\n * Panel class.\n */\nexport class Panel<T extends BaseProps = BaseProps> extends Modal<T & PanelProps> {\n  /**\n   * Config.\n   */\n  static config:BaseConfig = {\n    name: 'Panel',\n    options: {\n      position: {\n        type: String,\n        default: DEFAULT_POSITION,\n      },\n    },\n  };\n\n  static translateClasses = {\n    top: '-translate-y-full',\n    right: 'translate-x-full',\n    bottom: 'translate-y-full',\n    left: '-translate-x-full',\n  };\n\n  isClosing = false;\n\n  /**\n   * Get the translation class.\n   * @returns {string}\n   */\n  get translateClass() {\n    return (\n      Panel.translateClasses[this.$options.position] ??\n      Panel.translateClasses[DEFAULT_POSITION]\n    );\n  }\n\n  get containerOffset() {\n    const { offsetTop, offsetLeft, offsetWidth, offsetHeight } = this.$refs.container;\n\n    const store = {\n      top: {\n        translateY: (offsetTop + offsetHeight) * -1,\n      },\n      right: {\n        translateX: window.innerWidth - offsetLeft + offsetWidth * 2,\n      },\n      bottom: {\n        translateY: window.innerHeight - offsetTop + offsetHeight * 2,\n      },\n      left: {\n        translateX: (offsetLeft + offsetWidth) * -1,\n      },\n    };\n\n    return matrix(store[this.$options.position]);\n  }\n\n  /**\n   * Animate before opening.\n   *\n   * @this {PanelInterface}\n   * @returns {Promise<void>}\n   */\n  async open() {\n    if (this.isOpen) {\n      return Promise.resolve();\n    }\n\n    this.$refs.modal.classList.remove('pointer-events-none');\n    transition(\n      this.$refs.container,\n      {\n        from: {\n          transform: this.containerOffset,\n        },\n        to: {\n          transform: 'none',\n        },\n      },\n      'keep',\n    );\n    transition(this.$refs.overlay, {\n      from: 'opacity-0',\n    });\n\n    return super.open();\n  }\n\n  /**\n   * Animate before closing.\n   *\n   * @this {PanelInterface}\n   * @returns {Promise<void>}\n   */\n  async close() {\n    if (!this.isOpen || this.isClosing) {\n      return Promise.resolve();\n    }\n\n    this.isClosing = true;\n\n    this.$refs.modal.classList.add('pointer-events-none');\n    await Promise.all([\n      transition(\n        this.$refs.container,\n        {\n          from: {\n            transform: 'none',\n          },\n          to: {\n            transform: this.containerOffset,\n          },\n        },\n        'keep',\n      ),\n      transition(\n        this.$refs.overlay,\n        {\n          to: 'opacity-0',\n        },\n        'keep',\n      ),\n    ]);\n\n    this.isClosing = false;\n\n    return super.close();\n  }\n}\n"],
+  "mappings": "AACA,SAAS,YAAY,cAAc;AACnC,SAAS,aAAa;AAQtB,MAAM,mBAAmB;AAKlB,MAAM,cAA+C,MAAsB;AAAA,EAIhF,OAAO,SAAoB;AAAA,IACzB,MAAM;AAAA,IACN,SAAS;AAAA,MACP,UAAU;AAAA,QACR,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EAEA,OAAO,mBAAmB;AAAA,IACxB,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,EACR;AAAA,EAEA,YAAY;AAAA,EAMZ,IAAI,iBAAiB;AACnB,WACE,MAAM,iBAAiB,KAAK,SAAS,aACrC,MAAM,iBAAiB;AAAA,EAE3B;AAAA,EAEA,IAAI,kBAAkB;AACpB,UAAM,EAAE,WAAW,YAAY,aAAa,aAAa,IAAI,KAAK,MAAM;AAExE,UAAM,QAAQ;AAAA,MACZ,KAAK;AAAA,QACH,aAAa,YAAY,gBAAgB;AAAA,MAC3C;AAAA,MACA,OAAO;AAAA,QACL,YAAY,OAAO,aAAa,aAAa,cAAc;AAAA,MAC7D;AAAA,MACA,QAAQ;AAAA,QACN,YAAY,OAAO,cAAc,YAAY,eAAe;AAAA,MAC9D;AAAA,MACA,MAAM;AAAA,QACJ,aAAa,aAAa,eAAe;AAAA,MAC3C;AAAA,IACF;AAEA,WAAO,OAAO,MAAM,KAAK,SAAS,SAAS;AAAA,EAC7C;AAAA,EAQA,MAAM,OAAO;AACX,QAAI,KAAK,QAAQ;AACf,aAAO,QAAQ,QAAQ;AAAA,IACzB;AAEA,SAAK,MAAM,MAAM,UAAU,OAAO,qBAAqB;AACvD;AAAA,MACE,KAAK,MAAM;AAAA,MACX;AAAA,QACE,MAAM;AAAA,UACJ,WAAW,KAAK;AAAA,QAClB;AAAA,QACA,IAAI;AAAA,UACF,WAAW;AAAA,QACb;AAAA,MACF;AAAA,MACA;AAAA,IACF;AACA,eAAW,KAAK,MAAM,SAAS;AAAA,MAC7B,MAAM;AAAA,IACR,CAAC;AAED,WAAO,MAAM,KAAK;AAAA,EACpB;AAAA,EAQA,MAAM,QAAQ;AACZ,QAAI,CAAC,KAAK,UAAU,KAAK,WAAW;AAClC,aAAO,QAAQ,QAAQ;AAAA,IACzB;AAEA,SAAK,YAAY;AAEjB,SAAK,MAAM,MAAM,UAAU,IAAI,qBAAqB;AACpD,UAAM,QAAQ,IAAI;AAAA,MAChB;AAAA,QACE,KAAK,MAAM;AAAA,QACX;AAAA,UACE,MAAM;AAAA,YACJ,WAAW;AAAA,UACb;AAAA,UACA,IAAI;AAAA,YACF,WAAW,KAAK;AAAA,UAClB;AAAA,QACF;AAAA,QACA;AAAA,MACF;AAAA,MACA;AAAA,QACE,KAAK,MAAM;AAAA,QACX;AAAA,UACE,IAAI;AAAA,QACN;AAAA,QACA;AAAA,MACF;AAAA,IACF,CAAC;AAED,SAAK,YAAY;AAEjB,WAAO,MAAM,MAAM;AAAA,EACrB;AACF;",
+  "names": []
+}

package/molecules/Panel/index.cjs

@@ -0,0 +1,21 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/ui/molecules/Panel/index.ts
+var Panel_exports = {};
+module.exports = __toCommonJS(Panel_exports);
+__reExport(Panel_exports, require("./Panel.cjs"), module.exports);
+if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=index.cjs.map

package/molecules/Panel/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/molecules/Panel/index.ts"],
+  "sourcesContent": ["export * from './Panel.js';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,0BAAc,wBAAd;",
+  "names": []
+}

package/molecules/Panel/index.d.ts

@@ -0,0 +1 @@
+export * from './Panel.js';

package/molecules/Panel/index.js

@@ -0,0 +1,2 @@
+export * from "./Panel.js";
+//# sourceMappingURL=index.js.map

package/molecules/Panel/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/molecules/Panel/index.ts"],
+  "sourcesContent": ["export * from './Panel.js';\n"],
+  "mappings": "AAAA,cAAc;",
+  "names": []
+}

package/molecules/Slider/AbstractSliderChild.cjs

@@ -1,8 +1,6 @@
-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 __export = (target, all) => {
@@ -17,27 +15,27 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 
-// packages/ui/molecules/Slider/AbstractSliderChild.js
+// packages/ui/molecules/Slider/AbstractSliderChild.ts
 var AbstractSliderChild_exports = {};
 __export(AbstractSliderChild_exports, {
-  default: () => AbstractSliderChild
+  AbstractSliderChild: () => AbstractSliderChild
 });
 module.exports = __toCommonJS(AbstractSliderChild_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
 var import_utils = require("@studiometa/js-toolkit/utils");
-var import_Slider = __toESM(require("./Slider.cjs"), 1);
+var import_Slider = require("./Slider.cjs");
 var AbstractSliderChild = class extends import_js_toolkit.Base {
-  $parent;
   mounted() {
-    if (!(this.$parent instanceof import_Slider.default)) {
-      throw new Error(`The \`${this.$options.name}\` component must be a direct child of a \`Slider\` component.`);
+    if (!(this.$parent instanceof import_Slider.Slider)) {
+      throw new Error(
+        `The \`${this.$options.name}\` component must be a direct child of a \`Slider\` component.`
+      );
     }
     this.$parent.$on("index", this);
   }
@@ -69,3 +67,4 @@ __publicField(AbstractSliderChild, "config", {
   name: "AbstractSliderChild"
 });
 if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=AbstractSliderChild.cjs.map

package/molecules/Slider/AbstractSliderChild.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/molecules/Slider/AbstractSliderChild.ts"],
+  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig, BaseInterface } from '@studiometa/js-toolkit';\nimport { nextFrame, domScheduler, isFunction } from '@studiometa/js-toolkit/utils';\nimport { Slider } from './Slider.js';\n\nexport interface AbstractSliderChildProps extends BaseProps {\n  $parent: Slider;\n}\n\n/**\n * AbstractSliderChild class.\n */\nexport class AbstractSliderChild<T extends BaseProps = BaseProps> extends Base<T & AbstractSliderChildProps> implements BaseInterface {\n  /**\n   * Config.\n   */\n  static config:BaseConfig = {\n    name: 'AbstractSliderChild',\n  };\n\n  /**\n   * Listen to the `goto` event of the parent on mount.\n   */\n  mounted() {\n    if (!(this.$parent instanceof Slider)) {\n      throw new Error(\n        `The \\`${this.$options.name}\\` component must be a direct child of a \\`Slider\\` component.`,\n      );\n    }\n\n    this.$parent.$on('index', this);\n  }\n\n  /**\n   * Trigger update on resize.\n   */\n  resized() {\n    nextFrame(() => {\n      this.update(this.$parent.currentIndex);\n    });\n  }\n\n  /**\n   * Remove the event listener.\n   */\n  destroyed() {\n    this.$parent.$off('index', this);\n  }\n\n  /**\n   * Dispatch event.\n   *\n   * @param   {CustomEvent} event\n   * @returns {void}\n   */\n  handleEvent(event) {\n    if (event.type === 'index') {\n      domScheduler.read(() => {\n        const callback = this.update(event.detail[0]);\n        if (isFunction(callback)) {\n          domScheduler.write(() => {\n            // @ts-ignore\n            callback();\n          });\n        }\n      });\n    }\n  }\n\n  // eslint-disable-next-line jsdoc/require-returns-check\n  /**\n   * Update the child component with the given index.\n   * @param   {number} index The new active index.\n   * @returns {void|(()=>void)}\n   */\n  update(index):void|(()=>void) {\n    throw new Error(`The \\`AbstractSliderChild.update(${index})\\` method must be implemented.`);\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAqB;AAErB,mBAAoD;AACpD,oBAAuB;AAShB,IAAM,sBAAN,cAAmE,uBAA4D;AAAA,EAWpI,UAAU;AACR,QAAI,EAAE,KAAK,mBAAmB,uBAAS;AACrC,YAAM,IAAI;AAAA,QACR,SAAS,KAAK,SAAS;AAAA,MACzB;AAAA,IACF;AAEA,SAAK,QAAQ,IAAI,SAAS,IAAI;AAAA,EAChC;AAAA,EAKA,UAAU;AACR,gCAAU,MAAM;AACd,WAAK,OAAO,KAAK,QAAQ,YAAY;AAAA,IACvC,CAAC;AAAA,EACH;AAAA,EAKA,YAAY;AACV,SAAK,QAAQ,KAAK,SAAS,IAAI;AAAA,EACjC;AAAA,EAQA,YAAY,OAAO;AACjB,QAAI,MAAM,SAAS,SAAS;AAC1B,gCAAa,KAAK,MAAM;AACtB,cAAM,WAAW,KAAK,OAAO,MAAM,OAAO,EAAE;AAC5C,gBAAI,yBAAW,QAAQ,GAAG;AACxB,oCAAa,MAAM,MAAM;AAEvB,qBAAS;AAAA,UACX,CAAC;AAAA,QACH;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAQA,OAAO,OAAuB;AAC5B,UAAM,IAAI,MAAM,oCAAoC,sCAAsC;AAAA,EAC5F;AACF;AA9DE,cAJW,qBAIJ,UAAoB;AAAA,EACzB,MAAM;AACR;",
+  "names": []
+}

package/molecules/Slider/AbstractSliderChild.d.ts

@@ -1,36 +1,27 @@
-/**
- * @typedef {AbstractSliderChild & { $parent: Slider, $refs: { progress: HTMLElement } }} AbstractSliderChildInterface
- */
+import { Base } from '@studiometa/js-toolkit';
+import type { BaseProps, BaseConfig, BaseInterface } from '@studiometa/js-toolkit';
+import { Slider } from './Slider.js';
+export interface AbstractSliderChildProps extends BaseProps {
+    $parent: Slider;
+}
 /**
  * AbstractSliderChild class.
  */
-export default class AbstractSliderChild extends Base {
+export declare class AbstractSliderChild<T extends BaseProps = BaseProps> extends Base<T & AbstractSliderChildProps> implements BaseInterface {
     /**
      * Config.
      */
-    static config: {
-        name: string;
-    };
-    /**
-     * @type {Slider}
-     */
-    $parent: Slider;
+    static config: BaseConfig;
     /**
      * Listen to the `goto` event of the parent on mount.
-     * @returns {void}
      */
     mounted(): void;
     /**
      * Trigger update on resize.
-     *
-     * @this    {AbstractSliderChildInterface}
-     * @returns {void}
      */
-    resized(this: AbstractSliderChildInterface): void;
+    resized(): void;
     /**
      * Remove the event listener.
-     *
-     * @returns {void}
      */
     destroyed(): void;
     /**
@@ -39,21 +30,11 @@ export default class AbstractSliderChild extends Base {
      * @param   {CustomEvent} event
      * @returns {void}
      */
-    handleEvent(event: CustomEvent): void;
+    handleEvent(event: any): void;
     /**
      * Update the child component with the given index.
-     *
-     * @this    {AbstractSliderChildInterface}
      * @param   {number} index The new active index.
      * @returns {void|(()=>void)}
      */
-    update(this: AbstractSliderChildInterface, index: number): void | (() => void);
+    update(index: any): void | (() => void);
 }
-export type AbstractSliderChildInterface = AbstractSliderChild & {
-    $parent: Slider;
-    $refs: {
-        progress: HTMLElement;
-    };
-};
-import { Base } from "@studiometa/js-toolkit";
-import Slider from "./Slider.js";

package/molecules/Slider/AbstractSliderChild.js

@@ -1 +1,43 @@
-import{Base as r}from"@studiometa/js-toolkit";import{nextFrame as d,domScheduler as i,isFunction as n}from"@studiometa/js-toolkit/utils";import o from"./Slider.js";class a extends r{static config={name:"AbstractSliderChild"};$parent;mounted(){if(!(this.$parent instanceof o))throw new Error(`The \`${this.$options.name}\` component must be a direct child of a \`Slider\` component.`);this.$parent.$on("index",this)}resized(){d(()=>{this.update(this.$parent.currentIndex)})}destroyed(){this.$parent.$off("index",this)}handleEvent(e){e.type==="index"&&i.read(()=>{const t=this.update(e.detail[0]);n(t)&&i.write(()=>{t()})})}update(e){throw new Error(`The \`AbstractSliderChild.update(${e})\` method must be implemented.`)}}export{a as default};
+import { Base } from "@studiometa/js-toolkit";
+import { nextFrame, domScheduler, isFunction } from "@studiometa/js-toolkit/utils";
+import { Slider } from "./Slider.js";
+class AbstractSliderChild extends Base {
+  static config = {
+    name: "AbstractSliderChild"
+  };
+  mounted() {
+    if (!(this.$parent instanceof Slider)) {
+      throw new Error(
+        `The \`${this.$options.name}\` component must be a direct child of a \`Slider\` component.`
+      );
+    }
+    this.$parent.$on("index", this);
+  }
+  resized() {
+    nextFrame(() => {
+      this.update(this.$parent.currentIndex);
+    });
+  }
+  destroyed() {
+    this.$parent.$off("index", this);
+  }
+  handleEvent(event) {
+    if (event.type === "index") {
+      domScheduler.read(() => {
+        const callback = this.update(event.detail[0]);
+        if (isFunction(callback)) {
+          domScheduler.write(() => {
+            callback();
+          });
+        }
+      });
+    }
+  }
+  update(index) {
+    throw new Error(`The \`AbstractSliderChild.update(${index})\` method must be implemented.`);
+  }
+}
+export {
+  AbstractSliderChild
+};
+//# sourceMappingURL=AbstractSliderChild.js.map