@studiometa/js-toolkit 2.0.0-beta.8 → 2.0.0-rc.2

package/utils/collide/collideRectRect.cjs

@@ -0,0 +1,28 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/js-toolkit/utils/collide/collideRectRect.js
+var collideRectRect_exports = {};
+__export(collideRectRect_exports, {
+  default: () => collideRectRect
+});
+module.exports = __toCommonJS(collideRectRect_exports);
+function collideRectRect(rect1, rect2) {
+  return rect1.x + rect1.width >= rect2.x && rect1.x <= rect2.x + rect2.width && rect1.y + rect1.height >= rect2.y && rect1.y <= rect2.y + rect2.height;
+}
+if (module.exports.default) module.exports = module.exports.default;

package/utils/collide/collideRectRect.js

@@ -1,3 +1,6 @@
-export default function collideRectRect(rect1, rect2) {
+function collideRectRect(rect1, rect2) {
   return rect1.x + rect1.width >= rect2.x && rect1.x <= rect2.x + rect2.width && rect1.y + rect1.height >= rect2.y && rect1.y <= rect2.y + rect2.height;
-}
+}
+export {
+  collideRectRect as default
+};

package/utils/collide/index.cjs

@@ -0,0 +1,39 @@
+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 __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+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 __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);
+
+// packages/js-toolkit/utils/collide/index.js
+var collide_exports = {};
+__export(collide_exports, {
+  boundingRectToCircle: () => import_boundingRectToCircle.default,
+  collideCircleCircle: () => import_collideCircleCircle.default,
+  collideCircleRect: () => import_collideCircleRect.default,
+  collidePointCircle: () => import_collidePointCircle.default,
+  collidePointRect: () => import_collidePointRect.default,
+  collideRectRect: () => import_collideRectRect.default
+});
+module.exports = __toCommonJS(collide_exports);
+var import_boundingRectToCircle = __toESM(require("./boundingRectToCircle.cjs"), 1);
+var import_collideCircleCircle = __toESM(require("./collideCircleCircle.cjs"), 1);
+var import_collideCircleRect = __toESM(require("./collideCircleRect.cjs"), 1);
+var import_collidePointCircle = __toESM(require("./collidePointCircle.cjs"), 1);
+var import_collidePointRect = __toESM(require("./collidePointRect.cjs"), 1);
+var import_collideRectRect = __toESM(require("./collideRectRect.cjs"), 1);
+if (module.exports.default) module.exports = module.exports.default;

package/utils/collide/index.d.ts

@@ -1,7 +1,6 @@
-import boundingRectToCircle from "./boundingRectToCircle.js";
-import collideCircleCircle from "./collideCircleCircle.js";
-import collideCircleRect from "./collideCircleRect.js";
-import collidePointCircle from "./collidePointCircle.js";
-import collidePointRect from "./collidePointRect.js";
-import collideRectRect from "./collideRectRect.js";
-export { boundingRectToCircle, collideCircleCircle, collideCircleRect, collidePointCircle, collidePointRect, collideRectRect };
+export { default as boundingRectToCircle } from "./boundingRectToCircle.js";
+export { default as collideCircleCircle } from "./collideCircleCircle.js";
+export { default as collideCircleRect } from "./collideCircleRect.js";
+export { default as collidePointCircle } from "./collidePointCircle.js";
+export { default as collidePointRect } from "./collidePointRect.js";
+export { default as collideRectRect } from "./collideRectRect.js";

package/utils/collide/index.js

@@ -1,7 +1,14 @@
-import boundingRectToCircle from './boundingRectToCircle.js';
-import collideCircleCircle from './collideCircleCircle.js';
-import collideCircleRect from './collideCircleRect.js';
-import collidePointCircle from './collidePointCircle.js';
-import collidePointRect from './collidePointRect.js';
-import collideRectRect from './collideRectRect.js';
-export { boundingRectToCircle, collideCircleCircle, collideCircleRect, collidePointCircle, collidePointRect, collideRectRect };
+import { default as default2 } from "./boundingRectToCircle.js";
+import { default as default3 } from "./collideCircleCircle.js";
+import { default as default4 } from "./collideCircleRect.js";
+import { default as default5 } from "./collidePointCircle.js";
+import { default as default6 } from "./collidePointRect.js";
+import { default as default7 } from "./collideRectRect.js";
+export {
+  default2 as boundingRectToCircle,
+  default3 as collideCircleCircle,
+  default4 as collideCircleRect,
+  default5 as collidePointCircle,
+  default6 as collidePointRect,
+  default7 as collideRectRect
+};

package/utils/css/classes.cjs

@@ -0,0 +1,47 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/js-toolkit/utils/css/classes.js
+var classes_exports = {};
+__export(classes_exports, {
+  add: () => add,
+  remove: () => remove,
+  toggle: () => toggle
+});
+module.exports = __toCommonJS(classes_exports);
+function setClasses(element, classNames, method = "add", forceToggle = void 0) {
+  if (!element || !classNames) {
+    return;
+  }
+  const normalizedClassNames = Array.isArray(classNames) ? classNames : classNames.split(" ");
+  if (method !== "toggle") {
+    element.classList[method](...normalizedClassNames);
+  } else {
+    normalizedClassNames.forEach((className) => element.classList[method](className, forceToggle));
+  }
+}
+function add(element, classNames) {
+  setClasses(element, classNames);
+}
+function remove(element, classNames) {
+  setClasses(element, classNames, "remove");
+}
+function toggle(element, classNames, force = void 0) {
+  setClasses(element, classNames, "toggle", force);
+}
+if (module.exports.default) module.exports = module.exports.default;

package/utils/css/classes.d.ts

@@ -1,24 +1,25 @@
 /**
  * Add class names to an element.
  *
- * @param {HTMLElement} element    The element to update.
- * @param {String}      classNames A string of class names.
+ * @param  {HTMLElement}     element    The element to update.
+ * @param  {string|string[]} classNames A string of class names.
  * @return {void}
  */
-export function add(element: HTMLElement, classNames: string): void;
+export function add(element: HTMLElement, classNames: string | string[]): void;
 /**
  * Remove class names from an element.
  *
- * @param  {HTMLElement} element    The element to update.
- * @param  {String}      classNames A string of class names.
+ * @param  {HTMLElement}     element    The element to update.
+ * @param  {string|string[]} classNames A string of class names.
  * @return {void}
  */
-export function remove(element: HTMLElement, classNames: string): void;
+export function remove(element: HTMLElement, classNames: string | string[]): void;
 /**
  * Toggle class names from an element.
  *
- * @param  {HTMLElement} element    The element to update.
- * @param  {String}      classNames A string of class names.
+ * @param  {HTMLElement}     element    The element to update.
+ * @param  {string|string[]} classNames A string of class names.
+ * @param  {boolean}         [force]    Force toggle?
  * @return {void}
  */
-export function toggle(element: HTMLElement, classNames: string): void;
+export function toggle(element: HTMLElement, classNames: string | string[], force?: boolean): void;

package/utils/css/classes.js

@@ -1,21 +1,25 @@
-function setClasses(element, classNames) {
-  var method = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'add';
-
+function setClasses(element, classNames, method = "add", forceToggle = void 0) {
   if (!element || !classNames) {
     return;
   }
-
-  classNames.split(' ').forEach(className => {
-    element.classList[method](className);
-  });
+  const normalizedClassNames = Array.isArray(classNames) ? classNames : classNames.split(" ");
+  if (method !== "toggle") {
+    element.classList[method](...normalizedClassNames);
+  } else {
+    normalizedClassNames.forEach((className) => element.classList[method](className, forceToggle));
+  }
 }
-
-export function add(element, classNames) {
+function add(element, classNames) {
   setClasses(element, classNames);
 }
-export function remove(element, classNames) {
-  setClasses(element, classNames, 'remove');
+function remove(element, classNames) {
+  setClasses(element, classNames, "remove");
+}
+function toggle(element, classNames, force = void 0) {
+  setClasses(element, classNames, "toggle", force);
 }
-export function toggle(element, classNames) {
-  setClasses(element, classNames, 'toggle');
-}
+export {
+  add,
+  remove,
+  toggle
+};

package/utils/css/index.cjs

@@ -0,0 +1,38 @@
+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 __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+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 __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);
+
+// packages/js-toolkit/utils/css/index.js
+var css_exports = {};
+__export(css_exports, {
+  addClass: () => import_classes.add,
+  addStyle: () => import_styles.add,
+  matrix: () => import_matrix.default,
+  removeClass: () => import_classes.remove,
+  removeStyle: () => import_styles.remove,
+  toggleClass: () => import_classes.toggle,
+  transition: () => import_transition.default
+});
+module.exports = __toCommonJS(css_exports);
+var import_classes = require("./classes.cjs");
+var import_styles = require("./styles.cjs");
+var import_matrix = __toESM(require("./matrix.cjs"), 1);
+var import_transition = __toESM(require("./transition.cjs"), 1);
+if (module.exports.default) module.exports = module.exports.default;

package/utils/css/index.d.ts

@@ -1,5 +1,4 @@
-import * as classes from "./classes.js";
-import * as styles from "./styles.js";
-import matrix from "./matrix.js";
-import transition from "./transition.js";
-export { classes, styles, matrix, transition };
+export { default as matrix } from "./matrix.js";
+export { default as transition } from "./transition.js";
+export { add as addClass, remove as removeClass, toggle as toggleClass } from "./classes.js";
+export { add as addStyle, remove as removeStyle } from "./styles.js";

package/utils/css/index.js

@@ -1,5 +1,13 @@
-import * as classes from './classes.js';
-import * as styles from './styles.js';
-import matrix from './matrix.js';
-import transition from './transition.js';
-export { classes, styles, matrix, transition };
+import { add, remove, toggle } from "./classes.js";
+import { add as add2, remove as remove2 } from "./styles.js";
+import { default as default2 } from "./matrix.js";
+import { default as default3 } from "./transition.js";
+export {
+  add as addClass,
+  add2 as addStyle,
+  default2 as matrix,
+  remove as removeClass,
+  remove2 as removeStyle,
+  toggle as toggleClass,
+  default3 as transition
+};

package/utils/css/matrix.cjs

@@ -0,0 +1,30 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/js-toolkit/utils/css/matrix.js
+var matrix_exports = {};
+__export(matrix_exports, {
+  default: () => matrix
+});
+module.exports = __toCommonJS(matrix_exports);
+function matrix(transform) {
+  var _a, _b, _c, _d, _e, _f;
+  transform = transform || {};
+  return `matrix(${(_a = transform.scaleX) != null ? _a : 1}, ${(_b = transform.skewY) != null ? _b : 0}, ${(_c = transform.skewX) != null ? _c : 0}, ${(_d = transform.scaleY) != null ? _d : 1}, ${(_e = transform.translateX) != null ? _e : 0}, ${(_f = transform.translateY) != null ? _f : 0})`;
+}
+if (module.exports.default) module.exports = module.exports.default;

package/utils/css/matrix.js

@@ -1,6 +1,8 @@
-export default function matrix(transform) {
-  var _transform$scaleX, _transform$skewY, _transform$skewX, _transform$scaleY, _transform$translateX, _transform$translateY;
-
+function matrix(transform) {
+  var _a, _b, _c, _d, _e, _f;
   transform = transform || {};
-  return "matrix(".concat((_transform$scaleX = transform.scaleX) !== null && _transform$scaleX !== void 0 ? _transform$scaleX : 1, ", ").concat((_transform$skewY = transform.skewY) !== null && _transform$skewY !== void 0 ? _transform$skewY : 0, ", ").concat((_transform$skewX = transform.skewX) !== null && _transform$skewX !== void 0 ? _transform$skewX : 0, ", ").concat((_transform$scaleY = transform.scaleY) !== null && _transform$scaleY !== void 0 ? _transform$scaleY : 1, ", ").concat((_transform$translateX = transform.translateX) !== null && _transform$translateX !== void 0 ? _transform$translateX : 0, ", ").concat((_transform$translateY = transform.translateY) !== null && _transform$translateY !== void 0 ? _transform$translateY : 0, ")");
-}
+  return `matrix(${(_a = transform.scaleX) != null ? _a : 1}, ${(_b = transform.skewY) != null ? _b : 0}, ${(_c = transform.skewX) != null ? _c : 0}, ${(_d = transform.scaleY) != null ? _d : 1}, ${(_e = transform.translateX) != null ? _e : 0}, ${(_f = transform.translateY) != null ? _f : 0})`;
+}
+export {
+  matrix as default
+};

package/utils/css/styles.cjs

@@ -0,0 +1,44 @@
+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 __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+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 __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);
+
+// packages/js-toolkit/utils/css/styles.js
+var styles_exports = {};
+__export(styles_exports, {
+  add: () => add,
+  remove: () => remove
+});
+module.exports = __toCommonJS(styles_exports);
+var import_isObject = __toESM(require("../object/isObject.cjs"), 1);
+function setStyles(element, styles, method = "add") {
+  if (!element || !styles || !(0, import_isObject.default)(styles)) {
+    return;
+  }
+  Object.entries(styles).forEach(([prop, value]) => {
+    element.style[prop] = method === "add" ? value : "";
+  });
+}
+function add(element, styles) {
+  setStyles(element, styles);
+}
+function remove(element, styles) {
+  setStyles(element, styles, "remove");
+}
+if (module.exports.default) module.exports = module.exports.default;

package/utils/css/styles.d.ts

@@ -1,28 +1,16 @@
-/**
- * @typedef {Record<string, string | null> & Partial<CSSStyleDeclaration>} CssStyleObject
- */
-/**
- * Manage a list of style properties on an element.
- *
- * @param {HTMLElement}    element The element to update.
- * @param {CssStyleObject} styles  An object of styles properties and values.
- * @param {String}         method  The method to use: add or remove.
- */
-export default function setStyles(element: HTMLElement, styles: CssStyleObject, method?: string): void;
 /**
  * Add styles to an element.
  *
- * @param {HTMLElement}    element The element to update.
- * @param {CssStyleObject} styles  A string of class names.
+ * @param {HTMLElement}                  element The element to update.
+ * @param {Partial<CSSStyleDeclaration>} styles  A string of class names.
  * @return {void}
  */
-export function add(element: HTMLElement, styles: CssStyleObject): void;
+export function add(element: HTMLElement, styles: Partial<CSSStyleDeclaration>): void;
 /**
  * Remove class names from an element.
  *
- * @param  {HTMLElement}    element The element to update.
- * @param  {CssStyleObject} styles  A string of class names.
+ * @param  {HTMLElement}                  element The element to update.
+ * @param  {Partial<CSSStyleDeclaration>} styles  A string of class names.
  * @return {void}
  */
-export function remove(element: HTMLElement, styles: CssStyleObject): void;
-export type CssStyleObject = Record<string, string | null> & Partial<CSSStyleDeclaration>;
+export function remove(element: HTMLElement, styles: Partial<CSSStyleDeclaration>): void;

package/utils/css/styles.js

@@ -1,19 +1,19 @@
-import isObject from '../object/isObject.js';
-export default function setStyles(element, styles) {
-  var method = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'add';
-
+import isObject from "../object/isObject.js";
+function setStyles(element, styles, method = "add") {
   if (!element || !styles || !isObject(styles)) {
     return;
   }
-
-  Object.entries(styles).forEach(_ref => {
-    var [prop, value] = _ref;
-    element.style[prop] = method === 'add' ? value : '';
+  Object.entries(styles).forEach(([prop, value]) => {
+    element.style[prop] = method === "add" ? value : "";
   });
 }
-export function add(element, styles) {
+function add(element, styles) {
   setStyles(element, styles);
 }
-export function remove(element, styles) {
-  setStyles(element, styles, 'remove');
-}
+function remove(element, styles) {
+  setStyles(element, styles, "remove");
+}
+export {
+  add,
+  remove
+};

package/utils/css/transition.cjs

@@ -0,0 +1,120 @@
+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) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+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 __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/js-toolkit/utils/css/transition.js
+var transition_exports = {};
+__export(transition_exports, {
+  default: () => transition,
+  setClassesOrStyles: () => setClassesOrStyles
+});
+module.exports = __toCommonJS(transition_exports);
+var import_nextFrame = __toESM(require("../nextFrame.cjs"), 1);
+var classes = __toESM(require("./classes.cjs"), 1);
+var styles = __toESM(require("./styles.cjs"), 1);
+var cache = /* @__PURE__ */ new WeakMap();
+var Transition = class {
+  constructor(element) {
+    __publicField(this, "isTransitioning", false);
+    __publicField(this, "transitionEndHandler", null);
+    cache.set(element, this);
+  }
+  static getInstance(element) {
+    let instance = cache.get(element);
+    if (!instance) {
+      instance = new this(element);
+    }
+    return instance;
+  }
+};
+function setClassesOrStyles(element, classesOrStyles, method = "add") {
+  if (typeof classesOrStyles === "string" || Array.isArray(classesOrStyles)) {
+    classes[method](element, classesOrStyles);
+  } else {
+    styles[method](element, classesOrStyles);
+  }
+}
+function testTransition(element) {
+  if (typeof window === "undefined") {
+    return false;
+  }
+  const { transitionDuration } = window.getComputedStyle(element);
+  return !!transitionDuration && transitionDuration !== "0s";
+}
+async function start(element, classesOrStyles) {
+  const trs = Transition.getInstance(element);
+  trs.isTransitioning = true;
+  setClassesOrStyles(element, classesOrStyles.from);
+  await (0, import_nextFrame.default)();
+  setClassesOrStyles(element, classesOrStyles.active);
+  await (0, import_nextFrame.default)();
+}
+async function next(element, classesOrStyles) {
+  const hasTransition = testTransition(element);
+  return new Promise(async (resolve) => {
+    if (hasTransition) {
+      const trs = Transition.getInstance(element);
+      trs.transitionEndHandler = resolve;
+      element.addEventListener("transitionend", trs.transitionEndHandler, false);
+    }
+    setClassesOrStyles(element, classesOrStyles.from, "remove");
+    setClassesOrStyles(element, classesOrStyles.to);
+    await (0, import_nextFrame.default)();
+    if (!hasTransition) {
+      resolve();
+    }
+  });
+}
+function end(element, classesOrStyles, mode = "remove") {
+  const trs = Transition.getInstance(element);
+  element.removeEventListener("transitionend", trs.transitionEndHandler, false);
+  if (mode === "remove") {
+    setClassesOrStyles(element, classesOrStyles.to, "remove");
+  }
+  setClassesOrStyles(element, classesOrStyles.active, "remove");
+  trs.isTransitioning = false;
+  trs.transitionEndHandler = null;
+}
+async function transition(element, name, endMode = "remove") {
+  const classesOrStyles = typeof name === "string" ? {
+    from: `${name}-from`,
+    active: `${name}-active`,
+    to: `${name}-to`
+  } : {
+    from: "",
+    active: "",
+    to: "",
+    ...name
+  };
+  const trs = Transition.getInstance(element);
+  if (trs.isTransitioning) {
+    end(element, classesOrStyles);
+  }
+  await start(element, classesOrStyles);
+  await next(element, classesOrStyles);
+  end(element, classesOrStyles, endMode);
+  return Promise.resolve();
+}
+if (module.exports.default) module.exports = module.exports.default;

package/utils/css/transition.d.ts

@@ -1,20 +1,26 @@
 /**
  * Update either the classes or the styles of an element with the given method.
  *
- * @param {HTMLElement}   element         The element to update.
- * @param {String|Object} classesOrStyles The classes or styles to apply.
- * @param {String}        method          The method to use, one of `add` or `remove`.
+ * @param {HTMLElement}     element         The element to update.
+ * @param {ClassesOrStyles} classesOrStyles The classes or styles to apply.
+ * @param {'add'|'remove'}  method          The method to use, one of `add` or `remove`.
  */
-export function setClassesOrStyles(element: HTMLElement, classesOrStyles: string | any, method?: string): void;
+export function setClassesOrStyles(element: HTMLElement, classesOrStyles: ClassesOrStyles, method?: 'add' | 'remove'): void;
 /**
  * Manage CSS transition with class.
  *
  * This is heavily inspired by the Vue `<transition>` component
  * and the `@barba/css` package, many thanks to them!
  *
- * @param  {HTMLElement}   element The target element.
- * @param  {String|Object} name    The name of the transition or an object with the hooks classesOrStyles.
- * @param  {String}        endMode    Whether to remove or keep the `to` classes/styles
- * @return {Promise}               A promise resolving at the end of the transition.
+ * @param  {HTMLElement}             element The target element.
+ * @param  {string|TransitionStyles} name    The name of the transition or an object with the hooks classesOrStyles.
+ * @param  {String}                  endMode Whether to remove or keep the `to` classes/styles
+ * @return {Promise<void>}                   A promise resolving at the end of the transition.
  */
-export default function transition(element: HTMLElement, name: string | any, endMode?: string): Promise<any>;
+export default function transition(element: HTMLElement, name: string | TransitionStyles, endMode?: string): Promise<void>;
+export type ClassesOrStyles = string | string[] | Partial<CSSStyleDeclaration>;
+export type TransitionStyles = {
+    from?: ClassesOrStyles;
+    active?: ClassesOrStyles;
+    to?: ClassesOrStyles;
+};