@studiometa/js-toolkit 3.1.1 → 3.3.0

package/utils/collide/collideCircleCircle.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/utils/collide/collideCircleCircle.ts"],
-  "sourcesContent": ["/**\n * @typedef {Object} Circle\n * @property {number} x Circle's x position\n * @property {number} y Circle's y position\n * @property {number} radius Circle's radius\n */\n\n/**\n * Test if a circle collides with another.\n * Inspired by http://www.jeffreythompson.org/collision-detection/circle-circle.php\n *\n * @param {Circle} circle1 Circle 1\n * @param {Circle} circle2 Circle 2\n * @returns {boolean} Are the sides of one circle touching the other ?\n */\nexport function collideCircleCircle(circle1, circle2) {\n  // get distance between the circle's centers\n  // use the Pythagorean Theorem to compute the distance\n  const distX = circle1.x - circle2.x;\n  const distY = circle1.y - circle2.y;\n  const distance = Math.sqrt(distX * distX + distY * distY);\n\n  // if the distance is less than the sum of the circle's\n  // radii, the circles are touching!\n  if (distance <= circle1.radius + circle2.radius) {\n    return true;\n  }\n  return false;\n}\n"],
-  "mappings": "AAeO,SAAS,oBAAoB,SAAS,SAAS;AAGpD,QAAM,QAAQ,QAAQ,IAAI,QAAQ;AAClC,QAAM,QAAQ,QAAQ,IAAI,QAAQ;AAClC,QAAM,WAAW,KAAK,KAAK,QAAQ,QAAQ,QAAQ,KAAK;AAIxD,MAAI,YAAY,QAAQ,SAAS,QAAQ,QAAQ;AAC/C,WAAO;AAAA,EACT;AACA,SAAO;AACT;",
+  "sourcesContent": ["/**\n * @typedef {Object} Circle\n * @property {number} x Circle's x position\n * @property {number} y Circle's y position\n * @property {number} radius Circle's radius\n */\n\n/**\n * Test if a circle collides with another.\n * Inspired by http://www.jeffreythompson.org/collision-detection/circle-circle.php\n *\n * @param {Circle} circle1 Circle 1\n * @param {Circle} circle2 Circle 2\n * @return {boolean} Are the sides of one circle touching the other ?\n * @link https://js-toolkit.studiometa.dev/utils/collision/collideCircleCircle.html\n*/\nexport function collideCircleCircle(circle1, circle2) {\n  // get distance between the circle's centers\n  // use the Pythagorean Theorem to compute the distance\n  const distX = circle1.x - circle2.x;\n  const distY = circle1.y - circle2.y;\n  const distance = Math.sqrt(distX * distX + distY * distY);\n\n  // if the distance is less than the sum of the circle's\n  // radii, the circles are touching!\n  if (distance <= circle1.radius + circle2.radius) {\n    return true;\n  }\n  return false;\n}\n"],
+  "mappings": "AAgBO,SAAS,oBAAoB,SAAS,SAAS;AAGpD,QAAM,QAAQ,QAAQ,IAAI,QAAQ;AAClC,QAAM,QAAQ,QAAQ,IAAI,QAAQ;AAClC,QAAM,WAAW,KAAK,KAAK,QAAQ,QAAQ,QAAQ,KAAK;AAIxD,MAAI,YAAY,QAAQ,SAAS,QAAQ,QAAQ;AAC/C,WAAO;AAAA,EACT;AACA,SAAO;AACT;",
   "names": []
 }

package/utils/collide/collideCircleRect.d.ts

@@ -17,6 +17,7 @@
  *
  * @param {Circle} circle Circle
  * @param {Rect} rect Rectangle
- * @returns {boolean} Are the sides of the circle touching the rectangle ?
- */
+ * @return {boolean} Are the sides of the circle touching the rectangle ?
+ * @link https://js-toolkit.studiometa.dev/utils/collision/collideCircleRect.html
+*/
 export declare function collideCircleRect(circle: any, rect: any): boolean;

package/utils/collide/collideCircleRect.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/utils/collide/collideCircleRect.ts"],
-  "sourcesContent": ["/**\n * @typedef {Object} Rect\n * @property {number} x Rectangle's x position\n * @property {number} y Rectangle's y position\n * @property {number} width Rectangle's width\n * @property {number} height Rectangle's height\n */\n\n/**\n * @typedef {Object} Circle\n * @property {number} x Circle's x position\n * @property {number} y Circle's y position\n * @property {number} radius Circle's radius\n */\n\n/**\n * Test if a circle collides with a rectangle.\n * Inspired by http://www.jeffreythompson.org/collision-detection/circle-rect.php\n *\n * @param {Circle} circle Circle\n * @param {Rect} rect Rectangle\n * @returns {boolean} Are the sides of the circle touching the rectangle ?\n */\nexport function collideCircleRect(circle, rect) {\n  // temporary variables to set edges for testing\n  let testX = circle.x;\n  let testY = circle.y;\n\n  // which edge is closest?\n  if (circle.x < rect.x) {\n    testX = rect.x; // test left edge\n  } else if (circle.x > rect.x + rect.width) {\n    testX = rect.x + rect.width; // right edge\n  }\n\n  if (circle.y < rect.y) {\n    testY = rect.y; // top edge\n  } else if (circle.y > rect.y + rect.height) {\n    testY = rect.y + rect.height; // bottom edge\n  }\n\n  // get distance from closest edges\n  const distX = circle.x - testX;\n  const distY = circle.y - testY;\n  const distance = Math.sqrt(distX * distX + distY * distY);\n\n  // if the distance is less than the radius, collision!\n  if (distance <= circle.radius) {\n    return true;\n  }\n  return false;\n}\n"],
-  "mappings": "AAuBO,SAAS,kBAAkB,QAAQ,MAAM;AAE9C,MAAI,QAAQ,OAAO;AACnB,MAAI,QAAQ,OAAO;AAGnB,MAAI,OAAO,IAAI,KAAK,GAAG;AACrB,YAAQ,KAAK;AAAA,EACf,WAAW,OAAO,IAAI,KAAK,IAAI,KAAK,OAAO;AACzC,YAAQ,KAAK,IAAI,KAAK;AAAA,EACxB;AAEA,MAAI,OAAO,IAAI,KAAK,GAAG;AACrB,YAAQ,KAAK;AAAA,EACf,WAAW,OAAO,IAAI,KAAK,IAAI,KAAK,QAAQ;AAC1C,YAAQ,KAAK,IAAI,KAAK;AAAA,EACxB;AAGA,QAAM,QAAQ,OAAO,IAAI;AACzB,QAAM,QAAQ,OAAO,IAAI;AACzB,QAAM,WAAW,KAAK,KAAK,QAAQ,QAAQ,QAAQ,KAAK;AAGxD,MAAI,YAAY,OAAO,QAAQ;AAC7B,WAAO;AAAA,EACT;AACA,SAAO;AACT;",
+  "sourcesContent": ["/**\n * @typedef {Object} Rect\n * @property {number} x Rectangle's x position\n * @property {number} y Rectangle's y position\n * @property {number} width Rectangle's width\n * @property {number} height Rectangle's height\n */\n\n/**\n * @typedef {Object} Circle\n * @property {number} x Circle's x position\n * @property {number} y Circle's y position\n * @property {number} radius Circle's radius\n */\n\n/**\n * Test if a circle collides with a rectangle.\n * Inspired by http://www.jeffreythompson.org/collision-detection/circle-rect.php\n *\n * @param {Circle} circle Circle\n * @param {Rect} rect Rectangle\n * @return {boolean} Are the sides of the circle touching the rectangle ?\n * @link https://js-toolkit.studiometa.dev/utils/collision/collideCircleRect.html\n*/\nexport function collideCircleRect(circle, rect) {\n  // temporary variables to set edges for testing\n  let testX = circle.x;\n  let testY = circle.y;\n\n  // which edge is closest?\n  if (circle.x < rect.x) {\n    testX = rect.x; // test left edge\n  } else if (circle.x > rect.x + rect.width) {\n    testX = rect.x + rect.width; // right edge\n  }\n\n  if (circle.y < rect.y) {\n    testY = rect.y; // top edge\n  } else if (circle.y > rect.y + rect.height) {\n    testY = rect.y + rect.height; // bottom edge\n  }\n\n  // get distance from closest edges\n  const distX = circle.x - testX;\n  const distY = circle.y - testY;\n  const distance = Math.sqrt(distX * distX + distY * distY);\n\n  // if the distance is less than the radius, collision!\n  if (distance <= circle.radius) {\n    return true;\n  }\n  return false;\n}\n"],
+  "mappings": "AAwBO,SAAS,kBAAkB,QAAQ,MAAM;AAE9C,MAAI,QAAQ,OAAO;AACnB,MAAI,QAAQ,OAAO;AAGnB,MAAI,OAAO,IAAI,KAAK,GAAG;AACrB,YAAQ,KAAK;AAAA,EACf,WAAW,OAAO,IAAI,KAAK,IAAI,KAAK,OAAO;AACzC,YAAQ,KAAK,IAAI,KAAK;AAAA,EACxB;AAEA,MAAI,OAAO,IAAI,KAAK,GAAG;AACrB,YAAQ,KAAK;AAAA,EACf,WAAW,OAAO,IAAI,KAAK,IAAI,KAAK,QAAQ;AAC1C,YAAQ,KAAK,IAAI,KAAK;AAAA,EACxB;AAGA,QAAM,QAAQ,OAAO,IAAI;AACzB,QAAM,QAAQ,OAAO,IAAI;AACzB,QAAM,WAAW,KAAK,KAAK,QAAQ,QAAQ,QAAQ,KAAK;AAGxD,MAAI,YAAY,OAAO,QAAQ;AAC7B,WAAO;AAAA,EACT;AACA,SAAO;AACT;",
   "names": []
 }

package/utils/collide/collidePointCircle.d.ts

@@ -15,6 +15,7 @@
  *
  * @param {Point} point Point
  * @param {Circle} circle Circle
- * @returns {boolean} Is the point inside the circle's bounds ?
- */
+ * @return {boolean} Is the point inside the circle's bounds ?
+ * @link https://js-toolkit.studiometa.dev/utils/collision/collidePointCircle.html
+*/
 export declare function collidePointCircle(point: any, circle: any): boolean;

package/utils/collide/collidePointCircle.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/utils/collide/collidePointCircle.ts"],
-  "sourcesContent": ["/**\n * @typedef {Object} Point\n * @property {number} x Point's x position\n * @property {number} y Point's y position\n */\n\n/**\n * @typedef {Object} Circle\n * @property {number} x Circle's x position\n * @property {number} y Circle's y position\n * @property {number} radius Circle's radius\n */\n\n/**\n * Test if a point is inside a circle.\n * Inspired by http://www.jeffreythompson.org/collision-detection/point-circle.php\n *\n * @param {Point} point Point\n * @param {Circle} circle Circle\n * @returns {boolean} Is the point inside the circle's bounds ?\n */\nexport function collidePointCircle(point, circle) {\n  // get distance between the point and circle's center\n  // using the Pythagorean Theorem\n  const distX = point.x - circle.x;\n  const distY = point.y - circle.y;\n  const distance = Math.sqrt(distX * distX + distY * distY);\n\n  // if the distance is less than the circle's\n  // radius the point is inside!\n  return distance <= circle.radius;\n}\n"],
-  "mappings": "AAqBO,SAAS,mBAAmB,OAAO,QAAQ;AAGhD,QAAM,QAAQ,MAAM,IAAI,OAAO;AAC/B,QAAM,QAAQ,MAAM,IAAI,OAAO;AAC/B,QAAM,WAAW,KAAK,KAAK,QAAQ,QAAQ,QAAQ,KAAK;AAIxD,SAAO,YAAY,OAAO;AAC5B;",
+  "sourcesContent": ["/**\n * @typedef {Object} Point\n * @property {number} x Point's x position\n * @property {number} y Point's y position\n */\n\n/**\n * @typedef {Object} Circle\n * @property {number} x Circle's x position\n * @property {number} y Circle's y position\n * @property {number} radius Circle's radius\n */\n\n/**\n * Test if a point is inside a circle.\n * Inspired by http://www.jeffreythompson.org/collision-detection/point-circle.php\n *\n * @param {Point} point Point\n * @param {Circle} circle Circle\n * @return {boolean} Is the point inside the circle's bounds ?\n * @link https://js-toolkit.studiometa.dev/utils/collision/collidePointCircle.html\n*/\nexport function collidePointCircle(point, circle) {\n  // get distance between the point and circle's center\n  // using the Pythagorean Theorem\n  const distX = point.x - circle.x;\n  const distY = point.y - circle.y;\n  const distance = Math.sqrt(distX * distX + distY * distY);\n\n  // if the distance is less than the circle's\n  // radius the point is inside!\n  return distance <= circle.radius;\n}\n"],
+  "mappings": "AAsBO,SAAS,mBAAmB,OAAO,QAAQ;AAGhD,QAAM,QAAQ,MAAM,IAAI,OAAO;AAC/B,QAAM,QAAQ,MAAM,IAAI,OAAO;AAC/B,QAAM,WAAW,KAAK,KAAK,QAAQ,QAAQ,QAAQ,KAAK;AAIxD,SAAO,YAAY,OAAO;AAC5B;",
   "names": []
 }

package/utils/collide/collidePointRect.d.ts

@@ -16,6 +16,7 @@
  *
  * @param {Point} point Point
  * @param {Rect} rect Rectangle
- * @returns {boolean} Is the point inside the rectangle's bounds ?
- */
+ * @return {boolean} Is the point inside the rectangle's bounds ?
+ * @link https://js-toolkit.studiometa.dev/utils/collision/collidePointRect.html
+*/
 export declare function collidePointRect(point: any, rect: any): boolean;

package/utils/collide/collidePointRect.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/utils/collide/collidePointRect.ts"],
-  "sourcesContent": ["/**\n * @typedef {Object} Point\n * @property {number} x Point's x position\n * @property {number} y Point's y position\n */\n\n/**\n * @typedef {Object} Rect\n * @property {number} x Rectangle's x position\n * @property {number} y Rectangle's y position\n * @property {number} width Rectangle's width\n * @property {number} height Rectangle's height\n */\n\n/**\n * Test if a point collides with a rectangle.\n * Inspired by http://www.jeffreythompson.org/collision-detection/point-rect.php\n *\n * @param {Point} point Point\n * @param {Rect} rect Rectangle\n * @returns {boolean} Is the point inside the rectangle's bounds ?\n */\nexport function collidePointRect(point, rect) {\n  return (\n    point.x >= rect.x && // right of the left edge AND\n    point.x <= rect.x + rect.width && // left of the right edge AND\n    point.y >= rect.y && // below the top AND\n    point.y <= rect.y + rect.height // above the bottom\n  );\n}\n"],
-  "mappings": "AAsBO,SAAS,iBAAiB,OAAO,MAAM;AAC5C,SACE,MAAM,KAAK,KAAK;AAAA,EAChB,MAAM,KAAK,KAAK,IAAI,KAAK;AAAA,EACzB,MAAM,KAAK,KAAK;AAAA,EAChB,MAAM,KAAK,KAAK,IAAI,KAAK;AAE7B;",
+  "sourcesContent": ["/**\n * @typedef {Object} Point\n * @property {number} x Point's x position\n * @property {number} y Point's y position\n */\n\n/**\n * @typedef {Object} Rect\n * @property {number} x Rectangle's x position\n * @property {number} y Rectangle's y position\n * @property {number} width Rectangle's width\n * @property {number} height Rectangle's height\n */\n\n/**\n * Test if a point collides with a rectangle.\n * Inspired by http://www.jeffreythompson.org/collision-detection/point-rect.php\n *\n * @param {Point} point Point\n * @param {Rect} rect Rectangle\n * @return {boolean} Is the point inside the rectangle's bounds ?\n * @link https://js-toolkit.studiometa.dev/utils/collision/collidePointRect.html\n*/\nexport function collidePointRect(point, rect) {\n  return (\n    point.x >= rect.x && // right of the left edge AND\n    point.x <= rect.x + rect.width && // left of the right edge AND\n    point.y >= rect.y && // below the top AND\n    point.y <= rect.y + rect.height // above the bottom\n  );\n}\n"],
+  "mappings": "AAuBO,SAAS,iBAAiB,OAAO,MAAM;AAC5C,SACE,MAAM,KAAK,KAAK;AAAA,EAChB,MAAM,KAAK,KAAK,IAAI,KAAK;AAAA,EACzB,MAAM,KAAK,KAAK;AAAA,EAChB,MAAM,KAAK,KAAK,IAAI,KAAK;AAE7B;",
   "names": []
 }

package/utils/collide/collideRectRect.d.ts

@@ -11,6 +11,7 @@
  *
  * @param {Rect} rect1 Rectangle 1
  * @param {Rect} rect2 Rectangle 2
- * @returns {boolean} Are the sides of one rectangle touching the other ?
- */
+ * @return {boolean} Are the sides of one rectangle touching the other ?
+ * @link https://js-toolkit.studiometa.dev/utils/collision/collideRectRect.html
+*/
 export declare function collideRectRect(rect1: any, rect2: any): boolean;

package/utils/collide/collideRectRect.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/utils/collide/collideRectRect.ts"],
-  "sourcesContent": ["/**\n * @typedef {Object} Rect\n * @property {number} x Rectangle's x position\n * @property {number} y Rectangle's y position\n * @property {number} width Rectangle's width\n * @property {number} height Rectangle's height\n */\n\n/**\n * Test if a rectangle collides with another rectangle.\n * Inspired by http://www.jeffreythompson.org/collision-detection/rect-rect.php\n *\n * @param {Rect} rect1 Rectangle 1\n * @param {Rect} rect2 Rectangle 2\n * @returns {boolean} Are the sides of one rectangle touching the other ?\n */\nexport function collideRectRect(rect1, rect2) {\n  return (\n    rect1.x + rect1.width >= rect2.x && // rect1 right edge past rect2 left AND\n    rect1.x <= rect2.x + rect2.width && // rect1 left edge past rect2 right AND\n    rect1.y + rect1.height >= rect2.y && // rect1 top edge past rect2 bottom AND\n    rect1.y <= rect2.y + rect2.height // rect1 bottom edge past rect2 top\n  );\n}\n"],
-  "mappings": "AAgBO,SAAS,gBAAgB,OAAO,OAAO;AAC5C,SACE,MAAM,IAAI,MAAM,SAAS,MAAM;AAAA,EAC/B,MAAM,KAAK,MAAM,IAAI,MAAM;AAAA,EAC3B,MAAM,IAAI,MAAM,UAAU,MAAM;AAAA,EAChC,MAAM,KAAK,MAAM,IAAI,MAAM;AAE/B;",
+  "sourcesContent": ["/**\n * @typedef {Object} Rect\n * @property {number} x Rectangle's x position\n * @property {number} y Rectangle's y position\n * @property {number} width Rectangle's width\n * @property {number} height Rectangle's height\n */\n\n/**\n * Test if a rectangle collides with another rectangle.\n * Inspired by http://www.jeffreythompson.org/collision-detection/rect-rect.php\n *\n * @param {Rect} rect1 Rectangle 1\n * @param {Rect} rect2 Rectangle 2\n * @return {boolean} Are the sides of one rectangle touching the other ?\n * @link https://js-toolkit.studiometa.dev/utils/collision/collideRectRect.html\n*/\nexport function collideRectRect(rect1, rect2) {\n  return (\n    rect1.x + rect1.width >= rect2.x && // rect1 right edge past rect2 left AND\n    rect1.x <= rect2.x + rect2.width && // rect1 left edge past rect2 right AND\n    rect1.y + rect1.height >= rect2.y && // rect1 top edge past rect2 bottom AND\n    rect1.y <= rect2.y + rect2.height // rect1 bottom edge past rect2 top\n  );\n}\n"],
+  "mappings": "AAiBO,SAAS,gBAAgB,OAAO,OAAO;AAC5C,SACE,MAAM,IAAI,MAAM,SAAS,MAAM;AAAA,EAC/B,MAAM,KAAK,MAAM,IAAI,MAAM;AAAA,EAC3B,MAAM,IAAI,MAAM,UAAU,MAAM;AAAA,EAChC,MAAM,KAAK,MAAM,IAAI,MAAM;AAE/B;",
   "names": []
 }

package/utils/css/animate.d.ts

@@ -40,6 +40,7 @@ export interface AnimateOptions extends Omit<TweenOptions, 'duration'> {
 export type Animate = Tween;
 /**
  * Animate one or more elements.
- */
+ * @link https://js-toolkit.studiometa.dev/utils/css/animate.html
+*/
 export declare function animate(elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>, keyframes: Keyframe[], options?: AnimateOptions): Animate;
 export {};

package/utils/css/animate.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/utils/css/animate.ts"],
-  "sourcesContent": ["import { clamp01, lerp, map, mean } from '../math/index.js';\nimport { isDefined, isFunction, isNumber } from '../is.js';\nimport { transform, TRANSFORM_PROPS } from './transform.js';\nimport { domScheduler as scheduler } from '../scheduler.js';\nimport { tween, normalizeEase } from '../tween.js';\nimport { eachElements } from './utils.js';\nimport { startsWith } from '../string/index.js';\nimport type { TransformProps } from './transform.js';\nimport type { EasingFunction } from '../math/index.js';\nimport type { BezierCurve, Tween, TweenOptions } from '../tween.js';\n\nexport type CSSCustomPropertyName = `--${string}`;\n\ntype KeyframeTransforms<Type> = {\n  [Property in keyof Type]: number | [number, string];\n};\n\nexport type Keyframe = Partial<\n  KeyframeTransforms<TransformProps> & {\n    opacity: number;\n    transformOrigin: string;\n    easing: EasingFunction | BezierCurve;\n    offset: number;\n    [key: CSSCustomPropertyName]: number;\n  }\n>;\n\nexport type NormalizedKeyframe = Keyframe & {\n  easing: EasingFunction;\n  offset: number;\n  vars: string[];\n};\n\nexport interface AnimateOptions extends Omit<TweenOptions, 'duration'> {\n  /**\n   * The duration of the tween, in seconds.\n   * When using multiple targets, it can be a function which will be\n   * called with the current target and its index and should return\n   * the duration in seconds for this element.\n   *\n   * Defaults to `1`.\n   */\n  duration?: number | ((target: HTMLElement, index: number) => number);\n  /**\n   * Delay between the start of each target animation, in seconds.\n   * When using multiple targets, it can be a function which will be called\n   * with the current target and its index and should return the delay\n   * in seconds for this element's tween.\n   *\n   * Defaults to `0`.\n   */\n  stagger?: number | ((target: HTMLElement, index: number) => number);\n}\n\nexport type Animate = Tween;\n\nlet id = 0;\nconst running = new WeakMap();\n\nconst CSSUnitConverter = {\n  '%': (value, getSizeRef) => (value * getSizeRef()) / 100,\n  vh: (value) => (value * window.innerHeight) / 100,\n  vw: (value) => (value * window.innerWidth) / 100,\n  vmin: (value) => (value * Math.min(window.innerWidth, window.innerHeight)) / 100,\n  vmax: (value) => (value * Math.max(window.innerWidth, window.innerHeight)) / 100,\n};\n\n/**\n * Get the value from a step property.\n */\nfunction getAnimationStepValue(val: number | [number, string], getSizeRef: () => number): number {\n  if (isNumber(val)) {\n    return val;\n  }\n\n  if (!val[1] || !CSSUnitConverter[val[1]]) {\n    return val[0];\n  }\n\n  return CSSUnitConverter[val[1]](val[0], getSizeRef);\n}\n\nconst generateTranslateRenderStrategy = (sizeRef) => (element, fromValue, toValue, progress) =>\n  lerp(\n    getAnimationStepValue(\n      fromValue ?? 0,\n      /* istanbul ignore next */\n      () => element[sizeRef],\n    ),\n    getAnimationStepValue(toValue ?? 0, () => element[sizeRef]),\n    progress,\n  );\nconst widthBasedTranslateRenderStrategy = generateTranslateRenderStrategy('offsetWidth');\nconst heightBasedTranslateRenderStrategy = generateTranslateRenderStrategy('offsetHeight');\n\nconst generateLerpRenderStrategy = (defaultValue) => (element, fromValue, toValue, progress) =>\n  lerp(fromValue ?? defaultValue, toValue ?? defaultValue, progress);\nconst scaleRenderStrategy = generateLerpRenderStrategy(1);\nconst degreesRenderStrategy = generateLerpRenderStrategy(0);\n\nconst transformRenderStrategies = {\n  x: widthBasedTranslateRenderStrategy,\n  y: heightBasedTranslateRenderStrategy,\n  z: widthBasedTranslateRenderStrategy,\n  scale: scaleRenderStrategy,\n  scaleX: scaleRenderStrategy,\n  scaleY: scaleRenderStrategy,\n  scaleZ: scaleRenderStrategy,\n  skew: degreesRenderStrategy,\n  skewX: degreesRenderStrategy,\n  skewY: degreesRenderStrategy,\n  rotate: degreesRenderStrategy,\n  rotateX: degreesRenderStrategy,\n  rotateY: degreesRenderStrategy,\n  rotateZ: degreesRenderStrategy,\n};\n\n/**\n * Render an element style based on 2 keyframes and a progress value.\n */\nfunction render(\n  element: HTMLElement,\n  from: NormalizedKeyframe,\n  to: NormalizedKeyframe,\n  progress: number,\n) {\n  const stepProgress = to.easing(map(progress, from.offset, to.offset, 0, 1));\n\n  scheduler.read(() => {\n    let opacity: false | number | string = false;\n    if (isDefined(from.opacity) || isDefined(to.opacity)) {\n      opacity = map(stepProgress, 0, 1, from.opacity ?? 1, to.opacity ?? 1);\n    } else if (element.style.opacity) {\n      opacity = '';\n    }\n\n    let transformOrigin: false | string = false;\n    if (isDefined(to.transformOrigin)) {\n      transformOrigin = to.transformOrigin;\n    } else if (element.style.transformOrigin) {\n      transformOrigin = '';\n    }\n\n    let customProperties: false | [string, number][] = false;\n    if (isDefined(from.vars) && isDefined(to.vars)) {\n      customProperties = [];\n      for (const customPropertyName of from.vars) {\n        customProperties.push([\n          customPropertyName,\n          lerp(from[customPropertyName], to[customPropertyName], stepProgress),\n        ]);\n      }\n    }\n\n    const props = {};\n\n    for (const name of TRANSFORM_PROPS) {\n      if (isDefined(from[name]) || isDefined(to[name])) {\n        props[name] = transformRenderStrategies[name](element, from[name], to[name], stepProgress);\n      }\n    }\n\n    scheduler.write(() => {\n      if (opacity !== false) {\n        // @ts-ignore\n        element.style.opacity = opacity;\n      }\n      if (transformOrigin !== false) {\n        element.style.transformOrigin = transformOrigin;\n      }\n      if (customProperties !== false) {\n        for (const customProperty of customProperties) {\n          element.style.setProperty(customProperty[0], customProperty[1].toString());\n        }\n      }\n      transform(element, props);\n    });\n  });\n}\n\n/**\n * Animate an element.\n */\nfunction singleAnimate(\n  element: HTMLElement,\n  keyframes: Keyframe[],\n  options: TweenOptions = {},\n): Animate {\n  const keyframesCount = keyframes.length - 1;\n  const normalizedKeyframes = keyframes.map(\n    (keyframe, index): NormalizedKeyframe => ({\n      ...keyframe,\n      offset: keyframe.offset ?? index / keyframesCount,\n      easing: normalizeEase(keyframe.easing),\n      vars: Object.keys(keyframe).filter((key) => startsWith(key, '--')),\n    }),\n  );\n\n  if (!running.has(element)) {\n    running.set(element, new Map());\n  }\n\n  const key = `animate-${id}`;\n  id += 1;\n\n  /**\n   * Set the progress value.\n   */\n  function callback(progress: number) {\n    let toIndex = 0;\n    while (\n      normalizedKeyframes[toIndex] &&\n      normalizedKeyframes[toIndex].offset <= progress &&\n      normalizedKeyframes[toIndex].offset !== 1\n    ) {\n      toIndex += 1;\n    }\n\n    render(element, normalizedKeyframes[toIndex - 1], normalizedKeyframes[toIndex], progress);\n  }\n\n  const controls = tween(callback, {\n    ...options,\n    onStart(progress) {\n      if (isFunction(options.onStart)) {\n        options.onStart(progress);\n      }\n      // Stop running instances\n      const runningKeys = running.get(element);\n      for (const [runningKey, runningPause] of runningKeys.entries()) {\n        runningPause();\n        runningKeys.delete(runningKey);\n      }\n      runningKeys.set(key, controls.pause);\n      running.set(element, runningKeys);\n    },\n  });\n\n  return controls;\n}\n\ntype Duration = number;\ntype Delay = number;\ntype DurationWithDelay = number;\n\n/**\n * Animate one or more elements.\n */\nexport function animate(\n  elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>,\n  keyframes: Keyframe[],\n  options: AnimateOptions = {},\n): Animate {\n  if (elementOrElements instanceof HTMLElement) {\n    return singleAnimate(elementOrElements, keyframes, {\n      ...options,\n      duration: isFunction(options.duration)\n        ? options.duration(elementOrElements, 0)\n        : options.duration,\n    });\n  }\n\n  const stagger = options.stagger ?? 0;\n  const staggerIsFunction = isFunction(stagger);\n  const durationFn = isFunction(options.duration) ? options.duration : null;\n  const progressFn = isFunction(options.onProgress) ? options.onProgress : null;\n  const progresses: number[] = [];\n  const timings: [Duration, Delay, DurationWithDelay][] = [];\n  let duration = 0;\n  let previousTimings = [0, 0, 0];\n\n  const controls = eachElements(elementOrElements, (element, index) => {\n    const delay = staggerIsFunction ? stagger(element, index) : stagger * index;\n    const itemOptions = { ...options, delay } as TweenOptions;\n\n    if (durationFn) {\n      itemOptions.duration = durationFn(element, index);\n    } else if (!isDefined(itemOptions.duration)) {\n      itemOptions.duration = 1;\n    }\n\n    timings[index] = [itemOptions.duration, delay, itemOptions.duration + delay];\n\n    if (timings[index][2] > previousTimings[2]) {\n      // eslint-disable-next-line prefer-destructuring\n      duration = timings[index][2];\n    }\n\n    previousTimings = timings[index];\n\n    progresses[index] = 0;\n    itemOptions.onProgress = (itemProgress) => {\n      progresses[index] = itemProgress;\n      if (progressFn) {\n        progressFn(mean(progresses));\n      }\n    };\n\n    return singleAnimate(element, keyframes, itemOptions);\n  });\n\n  const delegate = (key) =>\n    // eslint-disable-next-line consistent-return\n    function delegated() {\n      if (key === 'progress') {\n        if (arguments.length === 1) {\n          // eslint-disable-next-line prefer-rest-params\n          const newProgress = arguments[0];\n          const newTime = lerp(0, duration, newProgress);\n          for (const [index, control] of controls.entries()) {\n            const controlProgress = clamp01(\n              map(newTime, timings[index][1], timings[index][2], 0, 1),\n            );\n            control.progress(controlProgress);\n          }\n        }\n\n        return mean(progresses);\n      }\n\n      for (const control of controls) {\n        // eslint-disable-next-line prefer-rest-params\n        control[key].call(null, arguments);\n      }\n    };\n\n  return {\n    start: delegate('start'),\n    pause: delegate('pause'),\n    finish: delegate('finish'),\n    play: delegate('play'),\n    progress: delegate('progress'),\n  };\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { clamp01, lerp, map, mean } from '../math/index.js';\nimport { isDefined, isFunction, isNumber } from '../is.js';\nimport { transform, TRANSFORM_PROPS } from './transform.js';\nimport { domScheduler as scheduler } from '../scheduler.js';\nimport { tween, normalizeEase } from '../tween.js';\nimport { eachElements } from './utils.js';\nimport { startsWith } from '../string/index.js';\nimport type { TransformProps } from './transform.js';\nimport type { EasingFunction } from '../math/index.js';\nimport type { BezierCurve, Tween, TweenOptions } from '../tween.js';\n\nexport type CSSCustomPropertyName = `--${string}`;\n\ntype KeyframeTransforms<Type> = {\n  [Property in keyof Type]: number | [number, string];\n};\n\nexport type Keyframe = Partial<\n  KeyframeTransforms<TransformProps> & {\n    opacity: number;\n    transformOrigin: string;\n    easing: EasingFunction | BezierCurve;\n    offset: number;\n    [key: CSSCustomPropertyName]: number;\n  }\n>;\n\nexport type NormalizedKeyframe = Keyframe & {\n  easing: EasingFunction;\n  offset: number;\n  vars: string[];\n};\n\nexport interface AnimateOptions extends Omit<TweenOptions, 'duration'> {\n  /**\n   * The duration of the tween, in seconds.\n   * When using multiple targets, it can be a function which will be\n   * called with the current target and its index and should return\n   * the duration in seconds for this element.\n   *\n   * Defaults to `1`.\n   */\n  duration?: number | ((target: HTMLElement, index: number) => number);\n  /**\n   * Delay between the start of each target animation, in seconds.\n   * When using multiple targets, it can be a function which will be called\n   * with the current target and its index and should return the delay\n   * in seconds for this element's tween.\n   *\n   * Defaults to `0`.\n   */\n  stagger?: number | ((target: HTMLElement, index: number) => number);\n}\n\nexport type Animate = Tween;\n\nlet id = 0;\nconst running = new WeakMap();\n\nconst CSSUnitConverter = {\n  '%': (value, getSizeRef) => (value * getSizeRef()) / 100,\n  vh: (value) => (value * window.innerHeight) / 100,\n  vw: (value) => (value * window.innerWidth) / 100,\n  vmin: (value) => (value * Math.min(window.innerWidth, window.innerHeight)) / 100,\n  vmax: (value) => (value * Math.max(window.innerWidth, window.innerHeight)) / 100,\n};\n\n/**\n * Get the value from a step property.\n */\nfunction getAnimationStepValue(val: number | [number, string], getSizeRef: () => number): number {\n  if (isNumber(val)) {\n    return val;\n  }\n\n  if (!val[1] || !CSSUnitConverter[val[1]]) {\n    return val[0];\n  }\n\n  return CSSUnitConverter[val[1]](val[0], getSizeRef);\n}\n\nconst generateTranslateRenderStrategy = (sizeRef) => (element, fromValue, toValue, progress) =>\n  lerp(\n    getAnimationStepValue(\n      fromValue ?? 0,\n      /* istanbul ignore next */\n      () => element[sizeRef],\n    ),\n    getAnimationStepValue(toValue ?? 0, () => element[sizeRef]),\n    progress,\n  );\nconst widthBasedTranslateRenderStrategy = generateTranslateRenderStrategy('offsetWidth');\nconst heightBasedTranslateRenderStrategy = generateTranslateRenderStrategy('offsetHeight');\n\nconst generateLerpRenderStrategy = (defaultValue) => (element, fromValue, toValue, progress) =>\n  lerp(fromValue ?? defaultValue, toValue ?? defaultValue, progress);\nconst scaleRenderStrategy = generateLerpRenderStrategy(1);\nconst degreesRenderStrategy = generateLerpRenderStrategy(0);\n\nconst transformRenderStrategies = {\n  x: widthBasedTranslateRenderStrategy,\n  y: heightBasedTranslateRenderStrategy,\n  z: widthBasedTranslateRenderStrategy,\n  scale: scaleRenderStrategy,\n  scaleX: scaleRenderStrategy,\n  scaleY: scaleRenderStrategy,\n  scaleZ: scaleRenderStrategy,\n  skew: degreesRenderStrategy,\n  skewX: degreesRenderStrategy,\n  skewY: degreesRenderStrategy,\n  rotate: degreesRenderStrategy,\n  rotateX: degreesRenderStrategy,\n  rotateY: degreesRenderStrategy,\n  rotateZ: degreesRenderStrategy,\n};\n\n/**\n * Render an element style based on 2 keyframes and a progress value.\n */\nfunction render(\n  element: HTMLElement,\n  from: NormalizedKeyframe,\n  to: NormalizedKeyframe,\n  progress: number,\n) {\n  const stepProgress = to.easing(map(progress, from.offset, to.offset, 0, 1));\n\n  scheduler.read(() => {\n    let opacity: false | number | string = false;\n    if (isDefined(from.opacity) || isDefined(to.opacity)) {\n      opacity = map(stepProgress, 0, 1, from.opacity ?? 1, to.opacity ?? 1);\n    } else if (element.style.opacity) {\n      opacity = '';\n    }\n\n    let transformOrigin: false | string = false;\n    if (isDefined(to.transformOrigin)) {\n      transformOrigin = to.transformOrigin;\n    } else if (element.style.transformOrigin) {\n      transformOrigin = '';\n    }\n\n    let customProperties: false | [string, number][] = false;\n    if (isDefined(from.vars) && isDefined(to.vars)) {\n      customProperties = [];\n      for (const customPropertyName of from.vars) {\n        customProperties.push([\n          customPropertyName,\n          lerp(from[customPropertyName], to[customPropertyName], stepProgress),\n        ]);\n      }\n    }\n\n    const props = {};\n\n    for (const name of TRANSFORM_PROPS) {\n      if (isDefined(from[name]) || isDefined(to[name])) {\n        props[name] = transformRenderStrategies[name](element, from[name], to[name], stepProgress);\n      }\n    }\n\n    scheduler.write(() => {\n      if (opacity !== false) {\n        // @ts-ignore\n        element.style.opacity = opacity;\n      }\n      if (transformOrigin !== false) {\n        element.style.transformOrigin = transformOrigin;\n      }\n      if (customProperties !== false) {\n        for (const customProperty of customProperties) {\n          element.style.setProperty(customProperty[0], customProperty[1].toString());\n        }\n      }\n      transform(element, props);\n    });\n  });\n}\n\n/**\n * Animate an element.\n */\nfunction singleAnimate(\n  element: HTMLElement,\n  keyframes: Keyframe[],\n  options: TweenOptions = {},\n): Animate {\n  const keyframesCount = keyframes.length - 1;\n  const normalizedKeyframes = keyframes.map(\n    (keyframe, index): NormalizedKeyframe => ({\n      ...keyframe,\n      offset: keyframe.offset ?? index / keyframesCount,\n      easing: normalizeEase(keyframe.easing),\n      vars: Object.keys(keyframe).filter((key) => startsWith(key, '--')),\n    }),\n  );\n\n  if (!running.has(element)) {\n    running.set(element, new Map());\n  }\n\n  const key = `animate-${id}`;\n  id += 1;\n\n  /**\n   * Set the progress value.\n   */\n  function callback(progress: number) {\n    let toIndex = 0;\n    while (\n      normalizedKeyframes[toIndex] &&\n      normalizedKeyframes[toIndex].offset <= progress &&\n      normalizedKeyframes[toIndex].offset !== 1\n    ) {\n      toIndex += 1;\n    }\n\n    render(element, normalizedKeyframes[toIndex - 1], normalizedKeyframes[toIndex], progress);\n  }\n\n  const controls = tween(callback, {\n    ...options,\n    onStart(progress) {\n      if (isFunction(options.onStart)) {\n        options.onStart(progress);\n      }\n      // Stop running instances\n      const runningKeys = running.get(element);\n      for (const [runningKey, runningPause] of runningKeys.entries()) {\n        runningPause();\n        runningKeys.delete(runningKey);\n      }\n      runningKeys.set(key, controls.pause);\n      running.set(element, runningKeys);\n    },\n  });\n\n  return controls;\n}\n\ntype Duration = number;\ntype Delay = number;\ntype DurationWithDelay = number;\n\n/**\n * Animate one or more elements.\n * @link https://js-toolkit.studiometa.dev/utils/css/animate.html\n*/\nexport function animate(\n  elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>,\n  keyframes: Keyframe[],\n  options: AnimateOptions = {},\n): Animate {\n  if (elementOrElements instanceof HTMLElement) {\n    return singleAnimate(elementOrElements, keyframes, {\n      ...options,\n      duration: isFunction(options.duration)\n        ? options.duration(elementOrElements, 0)\n        : options.duration,\n    });\n  }\n\n  const stagger = options.stagger ?? 0;\n  const staggerIsFunction = isFunction(stagger);\n  const durationFn = isFunction(options.duration) ? options.duration : null;\n  const progressFn = isFunction(options.onProgress) ? options.onProgress : null;\n  const progresses: number[] = [];\n  const timings: [Duration, Delay, DurationWithDelay][] = [];\n  let duration = 0;\n  let previousTimings = [0, 0, 0];\n\n  const controls = eachElements(elementOrElements, (element, index) => {\n    const delay = staggerIsFunction ? stagger(element, index) : stagger * index;\n    const itemOptions = { ...options, delay } as TweenOptions;\n\n    if (durationFn) {\n      itemOptions.duration = durationFn(element, index);\n    } else if (!isDefined(itemOptions.duration)) {\n      itemOptions.duration = 1;\n    }\n\n    timings[index] = [itemOptions.duration, delay, itemOptions.duration + delay];\n\n    if (timings[index][2] > previousTimings[2]) {\n      // eslint-disable-next-line prefer-destructuring\n      duration = timings[index][2];\n    }\n\n    previousTimings = timings[index];\n\n    progresses[index] = 0;\n    itemOptions.onProgress = (itemProgress) => {\n      progresses[index] = itemProgress;\n      if (progressFn) {\n        progressFn(mean(progresses));\n      }\n    };\n\n    return singleAnimate(element, keyframes, itemOptions);\n  });\n\n  const delegate = (key) =>\n    // eslint-disable-next-line consistent-return\n    function delegated() {\n      if (key === 'progress') {\n        if (arguments.length === 1) {\n          // eslint-disable-next-line prefer-rest-params\n          const newProgress = arguments[0];\n          const newTime = lerp(0, duration, newProgress);\n          for (const [index, control] of controls.entries()) {\n            const controlProgress = clamp01(\n              map(newTime, timings[index][1], timings[index][2], 0, 1),\n            );\n            control.progress(controlProgress);\n          }\n        }\n\n        return mean(progresses);\n      }\n\n      for (const control of controls) {\n        // eslint-disable-next-line prefer-rest-params\n        control[key].call(null, arguments);\n      }\n    };\n\n  return {\n    start: delegate('start'),\n    pause: delegate('pause'),\n    finish: delegate('finish'),\n    play: delegate('play'),\n    progress: delegate('progress'),\n  };\n}\n"],
+  "mappings": "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",
   "names": ["key"]
 }

package/utils/css/classes.d.ts

@@ -1,12 +1,15 @@
 /**
  * Add class names to an element.
- */
+ * @link https://js-toolkit.studiometa.dev/utils/css/addClass.html
+*/
 export declare function add(element: Element | Element[] | NodeListOf<Element>, classNames: string | string[]): void;
 /**
  * Remove class names from an element.
- */
+ * @link https://js-toolkit.studiometa.dev/utils/css/removeClass.html
+*/
 export declare function remove(element: Element | Element[] | NodeListOf<Element>, classNames: string | string[]): void;
 /**
  * Toggle class names from an element.
- */
+ * @link https://js-toolkit.studiometa.dev/utils/css/toggleClass.html
+*/
 export declare function toggle(element: Element | Element[] | NodeListOf<Element>, classNames: string | string[], force?: boolean): void;

package/utils/css/classes.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/utils/css/classes.ts"],
-  "sourcesContent": ["import { isArray } from '../is.js';\n// eslint-disable-next-line import/extensions\nimport { eachElements } from './utils.js';\n\n/**\n * Manage a list of classes as string on an element.\n */\nfunction setClasses(\n  element: Element | Element[] | NodeListOf<Element>,\n  classNames: string | string[],\n  method: 'add' | 'remove' | 'toggle',\n  forceToggle?: boolean,\n) {\n  if (!element || !classNames) {\n    return;\n  }\n\n  const normalizedClassNames = isArray(classNames)\n    ? classNames\n    : classNames.split(' ').filter((className) => className);\n\n  if (method !== 'toggle') {\n    eachElements(element, (el) => el.classList[method](...normalizedClassNames));\n  } else {\n    for (const className of normalizedClassNames)\n      eachElements(element, (el) => el.classList[method](className, forceToggle));\n  }\n}\n\n/**\n * Add class names to an element.\n */\nexport function add(\n  element: Element | Element[] | NodeListOf<Element>,\n  classNames: string | string[],\n) {\n  setClasses(element, classNames, 'add');\n}\n\n/**\n * Remove class names from an element.\n */\nexport function remove(\n  element: Element | Element[] | NodeListOf<Element>,\n  classNames: string | string[],\n) {\n  setClasses(element, classNames, 'remove');\n}\n\n/**\n * Toggle class names from an element.\n */\nexport function toggle(\n  element: Element | Element[] | NodeListOf<Element>,\n  classNames: string | string[],\n  force?: boolean,\n) {\n  setClasses(element, classNames, 'toggle', force);\n}\n"],
-  "mappings": "AAAA,SAAS,eAAe;AAExB,SAAS,oBAAoB;AAK7B,SAAS,WACP,SACA,YACA,QACA,aACA;AACA,MAAI,CAAC,WAAW,CAAC,YAAY;AAC3B;AAAA,EACF;AAEA,QAAM,uBAAuB,QAAQ,UAAU,IAC3C,aACA,WAAW,MAAM,GAAG,EAAE,OAAO,CAAC,cAAc,SAAS;AAEzD,MAAI,WAAW,UAAU;AACvB,iBAAa,SAAS,CAAC,OAAO,GAAG,UAAU,MAAM,EAAE,GAAG,oBAAoB,CAAC;AAAA,EAC7E,OAAO;AACL,eAAW,aAAa;AACtB,mBAAa,SAAS,CAAC,OAAO,GAAG,UAAU,MAAM,EAAE,WAAW,WAAW,CAAC;AAAA,EAC9E;AACF;AAKO,SAAS,IACd,SACA,YACA;AACA,aAAW,SAAS,YAAY,KAAK;AACvC;AAKO,SAAS,OACd,SACA,YACA;AACA,aAAW,SAAS,YAAY,QAAQ;AAC1C;AAKO,SAAS,OACd,SACA,YACA,OACA;AACA,aAAW,SAAS,YAAY,UAAU,KAAK;AACjD;",
+  "sourcesContent": ["import { isArray } from '../is.js';\n// eslint-disable-next-line import/extensions\nimport { eachElements } from './utils.js';\n\n/**\n * Manage a list of classes as string on an element.\n */\nfunction setClasses(\n  element: Element | Element[] | NodeListOf<Element>,\n  classNames: string | string[],\n  method: 'add' | 'remove' | 'toggle',\n  forceToggle?: boolean,\n) {\n  if (!element || !classNames) {\n    return;\n  }\n\n  const normalizedClassNames = isArray(classNames)\n    ? classNames\n    : classNames.split(' ').filter((className) => className);\n\n  if (method !== 'toggle') {\n    eachElements(element, (el) => el.classList[method](...normalizedClassNames));\n  } else {\n    for (const className of normalizedClassNames)\n      eachElements(element, (el) => el.classList[method](className, forceToggle));\n  }\n}\n\n/**\n * Add class names to an element.\n * @link https://js-toolkit.studiometa.dev/utils/css/addClass.html\n*/\nexport function add(\n  element: Element | Element[] | NodeListOf<Element>,\n  classNames: string | string[],\n) {\n  setClasses(element, classNames, 'add');\n}\n\n/**\n * Remove class names from an element.\n * @link https://js-toolkit.studiometa.dev/utils/css/removeClass.html\n*/\nexport function remove(\n  element: Element | Element[] | NodeListOf<Element>,\n  classNames: string | string[],\n) {\n  setClasses(element, classNames, 'remove');\n}\n\n/**\n * Toggle class names from an element.\n * @link https://js-toolkit.studiometa.dev/utils/css/toggleClass.html\n*/\nexport function toggle(\n  element: Element | Element[] | NodeListOf<Element>,\n  classNames: string | string[],\n  force?: boolean,\n) {\n  setClasses(element, classNames, 'toggle', force);\n}\n"],
+  "mappings": "AAAA,SAAS,eAAe;AAExB,SAAS,oBAAoB;AAK7B,SAAS,WACP,SACA,YACA,QACA,aACA;AACA,MAAI,CAAC,WAAW,CAAC,YAAY;AAC3B;AAAA,EACF;AAEA,QAAM,uBAAuB,QAAQ,UAAU,IAC3C,aACA,WAAW,MAAM,GAAG,EAAE,OAAO,CAAC,cAAc,SAAS;AAEzD,MAAI,WAAW,UAAU;AACvB,iBAAa,SAAS,CAAC,OAAO,GAAG,UAAU,MAAM,EAAE,GAAG,oBAAoB,CAAC;AAAA,EAC7E,OAAO;AACL,eAAW,aAAa;AACtB,mBAAa,SAAS,CAAC,OAAO,GAAG,UAAU,MAAM,EAAE,WAAW,WAAW,CAAC;AAAA,EAC9E;AACF;AAMO,SAAS,IACd,SACA,YACA;AACA,aAAW,SAAS,YAAY,KAAK;AACvC;AAMO,SAAS,OACd,SACA,YACA;AACA,aAAW,SAAS,YAAY,QAAQ;AAC1C;AAMO,SAAS,OACd,SACA,YACA,OACA;AACA,aAAW,SAAS,YAAY,UAAU,KAAK;AACjD;",
   "names": []
 }

package/utils/css/getOffsetSizes.d.ts

@@ -1,6 +1,7 @@
 /**
  * Get a `DOMRect` like `Object` for an element, without its transforms.
- */
+ * @link https://js-toolkit.studiometa.dev/utils/css/getOffsetSizes.html
+*/
 export declare function getOffsetSizes(element: HTMLElement): {
     x: number;
     y: number;

package/utils/css/getOffsetSizes.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/utils/css/getOffsetSizes.ts"],
-  "sourcesContent": ["/**\n * Get a `DOMRect` like `Object` for an element, without its transforms.\n */\nexport function getOffsetSizes(element: HTMLElement) {\n  let parent = element;\n  let x = -window.scrollX;\n  let y = -window.scrollY;\n\n  while (parent) {\n    x += parent.offsetLeft;\n    y += parent.offsetTop;\n    // @ts-ignore\n    parent = parent.offsetParent;\n  }\n\n  const width = element.offsetWidth;\n  const height = element.offsetHeight;\n\n  return {\n    x,\n    y,\n    width,\n    height,\n    top: y,\n    right: width + x,\n    bottom: height + y,\n    left: x,\n  };\n}\n"],
-  "mappings": "AAGO,SAAS,eAAe,SAAsB;AACnD,MAAI,SAAS;AACb,MAAI,IAAI,CAAC,OAAO;AAChB,MAAI,IAAI,CAAC,OAAO;AAEhB,SAAO,QAAQ;AACb,SAAK,OAAO;AACZ,SAAK,OAAO;AAEZ,aAAS,OAAO;AAAA,EAClB;AAEA,QAAM,QAAQ,QAAQ;AACtB,QAAM,SAAS,QAAQ;AAEvB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL,OAAO,QAAQ;AAAA,IACf,QAAQ,SAAS;AAAA,IACjB,MAAM;AAAA,EACR;AACF;",
+  "sourcesContent": ["/**\n * Get a `DOMRect` like `Object` for an element, without its transforms.\n * @link https://js-toolkit.studiometa.dev/utils/css/getOffsetSizes.html\n*/\nexport function getOffsetSizes(element: HTMLElement) {\n  let parent = element;\n  let x = -window.scrollX;\n  let y = -window.scrollY;\n\n  while (parent) {\n    x += parent.offsetLeft;\n    y += parent.offsetTop;\n    // @ts-ignore\n    parent = parent.offsetParent;\n  }\n\n  const width = element.offsetWidth;\n  const height = element.offsetHeight;\n\n  return {\n    x,\n    y,\n    width,\n    height,\n    top: y,\n    right: width + x,\n    bottom: height + y,\n    left: x,\n  };\n}\n"],
+  "mappings": "AAIO,SAAS,eAAe,SAAsB;AACnD,MAAI,SAAS;AACb,MAAI,IAAI,CAAC,OAAO;AAChB,MAAI,IAAI,CAAC,OAAO;AAEhB,SAAO,QAAQ;AACb,SAAK,OAAO;AACZ,SAAK,OAAO;AAEZ,aAAS,OAAO;AAAA,EAClB;AAEA,QAAM,QAAQ,QAAQ;AACtB,QAAM,SAAS,QAAQ;AAEvB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL,OAAO,QAAQ;AAAA,IACf,QAAQ,SAAS;AAAA,IACjB,MAAM;AAAA,EACR;AACF;",
   "names": []
 }

package/utils/css/matrix.d.ts

@@ -9,19 +9,20 @@ type MatrixTransform = {
 /**
  * Format a CSS transform matrix with the given values.
  *
- * @param   {Object} transform
- * @param   {number} [transform.scaleX=1]     The scale on the x axis.
- * @param   {number} [transform.scaleY=1]     The scale on the y axis.
- * @param   {number} [transform.skewX=0]      The skew on the x axis.
- * @param   {number} [transform.skewY=0]      The skew on the y axis.
- * @param   {number} [transform.translateX=0] The translate on the x axis.
- * @param   {number} [transform.translateY=0] The translate on the y axis.
- * @returns {string}                           A formatted CSS matrix transform.
+ * @param  {Object} transform
+ * @param  {number} [transform.scaleX=1]     The scale on the x axis.
+ * @param  {number} [transform.scaleY=1]     The scale on the y axis.
+ * @param  {number} [transform.skewX=0]      The skew on the x axis.
+ * @param  {number} [transform.skewY=0]      The skew on the y axis.
+ * @param  {number} [transform.translateX=0] The translate on the x axis.
+ * @param  {number} [transform.translateY=0] The translate on the y axis.
+ * @return {string}                           A formatted CSS matrix transform.
  * @example
  * ```js
  * matrix({ scaleX: 0.5, scaleY: 0.5 });
  * // matrix(0.5, 0, 0, 0.5, 0, 0)
  * ```
- */
+ * @link https://js-toolkit.studiometa.dev/utils/css/matrix.html
+*/
 export declare function matrix(transform?: MatrixTransform): string;
 export {};

package/utils/css/matrix.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/utils/css/matrix.ts"],
-  "sourcesContent": ["type MatrixTransform = {\n  scaleX?: number;\n  scaleY?: number;\n  skewX?: number;\n  skewY?: number;\n  translateX?: number;\n  translateY?: number;\n};\n\n/**\n * Format a CSS transform matrix with the given values.\n *\n * @param   {Object} transform\n * @param   {number} [transform.scaleX=1]     The scale on the x axis.\n * @param   {number} [transform.scaleY=1]     The scale on the y axis.\n * @param   {number} [transform.skewX=0]      The skew on the x axis.\n * @param   {number} [transform.skewY=0]      The skew on the y axis.\n * @param   {number} [transform.translateX=0] The translate on the x axis.\n * @param   {number} [transform.translateY=0] The translate on the y axis.\n * @returns {string}                           A formatted CSS matrix transform.\n * @example\n * ```js\n * matrix({ scaleX: 0.5, scaleY: 0.5 });\n * // matrix(0.5, 0, 0, 0.5, 0, 0)\n * ```\n */\nexport function matrix(transform?: MatrixTransform): string {\n  // eslint-disable-next-line no-param-reassign\n  transform = transform || {};\n  return `matrix(${transform.scaleX ?? 1}, ${transform.skewY ?? 0}, ${transform.skewX ?? 0}, ${\n    transform.scaleY ?? 1\n  }, ${transform.translateX ?? 0}, ${transform.translateY ?? 0})`;\n}\n"],
-  "mappings": "AA0BO,SAAS,OAAO,WAAqC;AAE1D,cAAY,aAAa,CAAC;AAC1B,SAAO,UAAU,UAAU,UAAU,CAAC,KAAK,UAAU,SAAS,CAAC,KAAK,UAAU,SAAS,CAAC,KACtF,UAAU,UAAU,CACtB,KAAK,UAAU,cAAc,CAAC,KAAK,UAAU,cAAc,CAAC;AAC9D;",
+  "sourcesContent": ["type MatrixTransform = {\n  scaleX?: number;\n  scaleY?: number;\n  skewX?: number;\n  skewY?: number;\n  translateX?: number;\n  translateY?: number;\n};\n\n/**\n * Format a CSS transform matrix with the given values.\n *\n * @param  {Object} transform\n * @param  {number} [transform.scaleX=1]     The scale on the x axis.\n * @param  {number} [transform.scaleY=1]     The scale on the y axis.\n * @param  {number} [transform.skewX=0]      The skew on the x axis.\n * @param  {number} [transform.skewY=0]      The skew on the y axis.\n * @param  {number} [transform.translateX=0] The translate on the x axis.\n * @param  {number} [transform.translateY=0] The translate on the y axis.\n * @return {string}                           A formatted CSS matrix transform.\n * @example\n * ```js\n * matrix({ scaleX: 0.5, scaleY: 0.5 });\n * // matrix(0.5, 0, 0, 0.5, 0, 0)\n * ```\n * @link https://js-toolkit.studiometa.dev/utils/css/matrix.html\n*/\nexport function matrix(transform?: MatrixTransform): string {\n  // eslint-disable-next-line no-param-reassign\n  transform = transform || {};\n  return `matrix(${transform.scaleX ?? 1}, ${transform.skewY ?? 0}, ${transform.skewX ?? 0}, ${\n    transform.scaleY ?? 1\n  }, ${transform.translateX ?? 0}, ${transform.translateY ?? 0})`;\n}\n"],
+  "mappings": "AA2BO,SAAS,OAAO,WAAqC;AAE1D,cAAY,aAAa,CAAC;AAC1B,SAAO,UAAU,UAAU,UAAU,CAAC,KAAK,UAAU,SAAS,CAAC,KAAK,UAAU,SAAS,CAAC,KACtF,UAAU,UAAU,CACtB,KAAK,UAAU,cAAc,CAAC,KAAK,UAAU,cAAc,CAAC;AAC9D;",
   "names": []
 }

package/utils/css/styles.d.ts

@@ -1,8 +1,10 @@
 /**
  * Add styles to an element.
- */
+ * @link https://js-toolkit.studiometa.dev/utils/css/addStyle.html
+*/
 export declare function add(elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>, styles: Partial<CSSStyleDeclaration>): void;
 /**
  * Remove class names from an element.
- */
+ * @link https://js-toolkit.studiometa.dev/utils/css/removeStyle.html
+*/
 export declare function remove(elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>, styles: Partial<CSSStyleDeclaration>): void;

package/utils/css/styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/utils/css/styles.ts"],
-  "sourcesContent": ["import { isObject } from '../is.js';\n// eslint-disable-next-line import/extensions\nimport { eachElements } from './utils.js';\n\n/**\n * Manage a list of style properties on an element.\n */\nfunction setStyles(\n  elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>,\n  styles: Partial<CSSStyleDeclaration>,\n  method: 'add' | 'remove' = 'add',\n) {\n  if (!elementOrElements || !styles || !isObject(styles)) {\n    return;\n  }\n\n  eachElements(elementOrElements, (el) => {\n    for (const [prop, value] of Object.entries(styles)) {\n      el.style[prop] = method === 'add' ? value : '';\n    }\n  });\n}\n\n/**\n * Add styles to an element.\n */\nexport function add(\n  elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>,\n  styles: Partial<CSSStyleDeclaration>,\n) {\n  setStyles(elementOrElements, styles);\n}\n\n/**\n * Remove class names from an element.\n */\nexport function remove(\n  elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>,\n  styles: Partial<CSSStyleDeclaration>,\n) {\n  setStyles(elementOrElements, styles, 'remove');\n}\n"],
-  "mappings": "AAAA,SAAS,gBAAgB;AAEzB,SAAS,oBAAoB;AAK7B,SAAS,UACP,mBACA,QACA,SAA2B,OAC3B;AACA,MAAI,CAAC,qBAAqB,CAAC,UAAU,CAAC,SAAS,MAAM,GAAG;AACtD;AAAA,EACF;AAEA,eAAa,mBAAmB,CAAC,OAAO;AACtC,eAAW,CAAC,MAAM,KAAK,KAAK,OAAO,QAAQ,MAAM,GAAG;AAClD,SAAG,MAAM,IAAI,IAAI,WAAW,QAAQ,QAAQ;AAAA,IAC9C;AAAA,EACF,CAAC;AACH;AAKO,SAAS,IACd,mBACA,QACA;AACA,YAAU,mBAAmB,MAAM;AACrC;AAKO,SAAS,OACd,mBACA,QACA;AACA,YAAU,mBAAmB,QAAQ,QAAQ;AAC/C;",
+  "sourcesContent": ["import { isObject } from '../is.js';\n// eslint-disable-next-line import/extensions\nimport { eachElements } from './utils.js';\n\n/**\n * Manage a list of style properties on an element.\n */\nfunction setStyles(\n  elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>,\n  styles: Partial<CSSStyleDeclaration>,\n  method: 'add' | 'remove' = 'add',\n) {\n  if (!elementOrElements || !styles || !isObject(styles)) {\n    return;\n  }\n\n  eachElements(elementOrElements, (el) => {\n    for (const [prop, value] of Object.entries(styles)) {\n      el.style[prop] = method === 'add' ? value : '';\n    }\n  });\n}\n\n/**\n * Add styles to an element.\n * @link https://js-toolkit.studiometa.dev/utils/css/addStyle.html\n*/\nexport function add(\n  elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>,\n  styles: Partial<CSSStyleDeclaration>,\n) {\n  setStyles(elementOrElements, styles);\n}\n\n/**\n * Remove class names from an element.\n * @link https://js-toolkit.studiometa.dev/utils/css/removeStyle.html\n*/\nexport function remove(\n  elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>,\n  styles: Partial<CSSStyleDeclaration>,\n) {\n  setStyles(elementOrElements, styles, 'remove');\n}\n"],
+  "mappings": "AAAA,SAAS,gBAAgB;AAEzB,SAAS,oBAAoB;AAK7B,SAAS,UACP,mBACA,QACA,SAA2B,OAC3B;AACA,MAAI,CAAC,qBAAqB,CAAC,UAAU,CAAC,SAAS,MAAM,GAAG;AACtD;AAAA,EACF;AAEA,eAAa,mBAAmB,CAAC,OAAO;AACtC,eAAW,CAAC,MAAM,KAAK,KAAK,OAAO,QAAQ,MAAM,GAAG;AAClD,SAAG,MAAM,IAAI,IAAI,WAAW,QAAQ,QAAQ;AAAA,IAC9C;AAAA,EACF,CAAC;AACH;AAMO,SAAS,IACd,mBACA,QACA;AACA,YAAU,mBAAmB,MAAM;AACrC;AAMO,SAAS,OACd,mBACA,QACA;AACA,YAAU,mBAAmB,QAAQ,QAAQ;AAC/C;",
   "names": []
 }

package/utils/css/transform.d.ts

@@ -17,5 +17,6 @@ export type TransformProps = Partial<{
 export declare const TRANSFORM_PROPS: string[];
 /**
  * Generate a CSS transform.
- */
+ * @link https://js-toolkit.studiometa.dev/utils/css/transform.html
+*/
 export declare function transform(elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>, props: TransformProps): string;

package/utils/css/transform.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/utils/css/transform.ts"],
-  "sourcesContent": ["import { isDefined } from '../is.js';\n// eslint-disable-next-line import/extensions\nimport { eachElements } from './utils.js';\n\nexport type TransformProps = Partial<{\n  x: number;\n  y: number;\n  z: number;\n  rotate: number;\n  rotateX: number;\n  rotateY: number;\n  rotateZ: number;\n  scale: number;\n  scaleX: number;\n  scaleY: number;\n  scaleZ: number;\n  skew: number;\n  skewX: number;\n  skewY: number;\n}>;\n\nexport const TRANSFORM_PROPS = [\n  'x',\n  'y',\n  'z',\n  'rotate',\n  'rotateX',\n  'rotateY',\n  'rotateZ',\n  'scale',\n  'scaleX',\n  'scaleY',\n  'scaleZ',\n  'skew',\n  'skewX',\n  'skewY',\n];\n\n/**\n * Generate a CSS transform.\n */\nexport function transform(\n  elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>,\n  props: TransformProps,\n): string {\n  if (!elementOrElements) return\n\n  let value = '';\n\n  if (isDefined(props.x) || isDefined(props.y) || isDefined(props.z)) {\n    value += `translate3d(${props.x ?? 0}px, ${props.y ?? 0}px, ${props.z ?? 0}px) `;\n  }\n\n  if (isDefined(props.rotate)) {\n    value += `rotate(${props.rotate}deg) `;\n  } else {\n    if (isDefined(props.rotateX)) {\n      value += `rotateX(${props.rotateX}deg) `;\n    }\n\n    if (isDefined(props.rotateY)) {\n      value += `rotateY(${props.rotateY}deg) `;\n    }\n\n    if (isDefined(props.rotateZ)) {\n      value += `rotateZ(${props.rotateZ}deg) `;\n    }\n  }\n\n  if (isDefined(props.scale)) {\n    value += `scale(${props.scale}) `;\n  } else {\n    if (isDefined(props.scaleX)) {\n      value += `scaleX(${props.scaleX}) `;\n    }\n\n    if (isDefined(props.scaleY)) {\n      value += `scaleY(${props.scaleY}) `;\n    }\n\n    if (isDefined(props.scaleZ)) {\n      value += `scaleZ(${props.scaleZ}) `;\n    }\n  }\n\n  if (isDefined(props.skew)) {\n    value += `skew(${props.skew}deg) `;\n  } else {\n    if (isDefined(props.skewX)) {\n      value += `skewX(${props.skewX}deg) `;\n    }\n\n    if (isDefined(props.skewY)) {\n      value += `skewY(${props.skewY}deg) `;\n    }\n  }\n\n  eachElements(elementOrElements, (element) => {\n    element.style.transform = value;\n  });\n  return value;\n}\n"],
-  "mappings": "AAAA,SAAS,iBAAiB;AAE1B,SAAS,oBAAoB;AAmBtB,MAAM,kBAAkB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAKO,SAAS,UACd,mBACA,OACQ;AACR,MAAI,CAAC,kBAAmB;AAExB,MAAI,QAAQ;AAEZ,MAAI,UAAU,MAAM,CAAC,KAAK,UAAU,MAAM,CAAC,KAAK,UAAU,MAAM,CAAC,GAAG;AAClE,aAAS,eAAe,MAAM,KAAK,CAAC,OAAO,MAAM,KAAK,CAAC,OAAO,MAAM,KAAK,CAAC;AAAA,EAC5E;AAEA,MAAI,UAAU,MAAM,MAAM,GAAG;AAC3B,aAAS,UAAU,MAAM,MAAM;AAAA,EACjC,OAAO;AACL,QAAI,UAAU,MAAM,OAAO,GAAG;AAC5B,eAAS,WAAW,MAAM,OAAO;AAAA,IACnC;AAEA,QAAI,UAAU,MAAM,OAAO,GAAG;AAC5B,eAAS,WAAW,MAAM,OAAO;AAAA,IACnC;AAEA,QAAI,UAAU,MAAM,OAAO,GAAG;AAC5B,eAAS,WAAW,MAAM,OAAO;AAAA,IACnC;AAAA,EACF;AAEA,MAAI,UAAU,MAAM,KAAK,GAAG;AAC1B,aAAS,SAAS,MAAM,KAAK;AAAA,EAC/B,OAAO;AACL,QAAI,UAAU,MAAM,MAAM,GAAG;AAC3B,eAAS,UAAU,MAAM,MAAM;AAAA,IACjC;AAEA,QAAI,UAAU,MAAM,MAAM,GAAG;AAC3B,eAAS,UAAU,MAAM,MAAM;AAAA,IACjC;AAEA,QAAI,UAAU,MAAM,MAAM,GAAG;AAC3B,eAAS,UAAU,MAAM,MAAM;AAAA,IACjC;AAAA,EACF;AAEA,MAAI,UAAU,MAAM,IAAI,GAAG;AACzB,aAAS,QAAQ,MAAM,IAAI;AAAA,EAC7B,OAAO;AACL,QAAI,UAAU,MAAM,KAAK,GAAG;AAC1B,eAAS,SAAS,MAAM,KAAK;AAAA,IAC/B;AAEA,QAAI,UAAU,MAAM,KAAK,GAAG;AAC1B,eAAS,SAAS,MAAM,KAAK;AAAA,IAC/B;AAAA,EACF;AAEA,eAAa,mBAAmB,CAAC,YAAY;AAC3C,YAAQ,MAAM,YAAY;AAAA,EAC5B,CAAC;AACD,SAAO;AACT;",
+  "sourcesContent": ["import { isDefined } from '../is.js';\n// eslint-disable-next-line import/extensions\nimport { eachElements } from './utils.js';\n\nexport type TransformProps = Partial<{\n  x: number;\n  y: number;\n  z: number;\n  rotate: number;\n  rotateX: number;\n  rotateY: number;\n  rotateZ: number;\n  scale: number;\n  scaleX: number;\n  scaleY: number;\n  scaleZ: number;\n  skew: number;\n  skewX: number;\n  skewY: number;\n}>;\n\nexport const TRANSFORM_PROPS = [\n  'x',\n  'y',\n  'z',\n  'rotate',\n  'rotateX',\n  'rotateY',\n  'rotateZ',\n  'scale',\n  'scaleX',\n  'scaleY',\n  'scaleZ',\n  'skew',\n  'skewX',\n  'skewY',\n];\n\n/**\n * Generate a CSS transform.\n * @link https://js-toolkit.studiometa.dev/utils/css/transform.html\n*/\nexport function transform(\n  elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>,\n  props: TransformProps,\n): string {\n  if (!elementOrElements) return\n\n  let value = '';\n\n  if (isDefined(props.x) || isDefined(props.y) || isDefined(props.z)) {\n    value += `translate3d(${props.x ?? 0}px, ${props.y ?? 0}px, ${props.z ?? 0}px) `;\n  }\n\n  if (isDefined(props.rotate)) {\n    value += `rotate(${props.rotate}deg) `;\n  } else {\n    if (isDefined(props.rotateX)) {\n      value += `rotateX(${props.rotateX}deg) `;\n    }\n\n    if (isDefined(props.rotateY)) {\n      value += `rotateY(${props.rotateY}deg) `;\n    }\n\n    if (isDefined(props.rotateZ)) {\n      value += `rotateZ(${props.rotateZ}deg) `;\n    }\n  }\n\n  if (isDefined(props.scale)) {\n    value += `scale(${props.scale}) `;\n  } else {\n    if (isDefined(props.scaleX)) {\n      value += `scaleX(${props.scaleX}) `;\n    }\n\n    if (isDefined(props.scaleY)) {\n      value += `scaleY(${props.scaleY}) `;\n    }\n\n    if (isDefined(props.scaleZ)) {\n      value += `scaleZ(${props.scaleZ}) `;\n    }\n  }\n\n  if (isDefined(props.skew)) {\n    value += `skew(${props.skew}deg) `;\n  } else {\n    if (isDefined(props.skewX)) {\n      value += `skewX(${props.skewX}deg) `;\n    }\n\n    if (isDefined(props.skewY)) {\n      value += `skewY(${props.skewY}deg) `;\n    }\n  }\n\n  eachElements(elementOrElements, (element) => {\n    element.style.transform = value;\n  });\n  return value;\n}\n"],
+  "mappings": "AAAA,SAAS,iBAAiB;AAE1B,SAAS,oBAAoB;AAmBtB,MAAM,kBAAkB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAMO,SAAS,UACd,mBACA,OACQ;AACR,MAAI,CAAC,kBAAmB;AAExB,MAAI,QAAQ;AAEZ,MAAI,UAAU,MAAM,CAAC,KAAK,UAAU,MAAM,CAAC,KAAK,UAAU,MAAM,CAAC,GAAG;AAClE,aAAS,eAAe,MAAM,KAAK,CAAC,OAAO,MAAM,KAAK,CAAC,OAAO,MAAM,KAAK,CAAC;AAAA,EAC5E;AAEA,MAAI,UAAU,MAAM,MAAM,GAAG;AAC3B,aAAS,UAAU,MAAM,MAAM;AAAA,EACjC,OAAO;AACL,QAAI,UAAU,MAAM,OAAO,GAAG;AAC5B,eAAS,WAAW,MAAM,OAAO;AAAA,IACnC;AAEA,QAAI,UAAU,MAAM,OAAO,GAAG;AAC5B,eAAS,WAAW,MAAM,OAAO;AAAA,IACnC;AAEA,QAAI,UAAU,MAAM,OAAO,GAAG;AAC5B,eAAS,WAAW,MAAM,OAAO;AAAA,IACnC;AAAA,EACF;AAEA,MAAI,UAAU,MAAM,KAAK,GAAG;AAC1B,aAAS,SAAS,MAAM,KAAK;AAAA,EAC/B,OAAO;AACL,QAAI,UAAU,MAAM,MAAM,GAAG;AAC3B,eAAS,UAAU,MAAM,MAAM;AAAA,IACjC;AAEA,QAAI,UAAU,MAAM,MAAM,GAAG;AAC3B,eAAS,UAAU,MAAM,MAAM;AAAA,IACjC;AAEA,QAAI,UAAU,MAAM,MAAM,GAAG;AAC3B,eAAS,UAAU,MAAM,MAAM;AAAA,IACjC;AAAA,EACF;AAEA,MAAI,UAAU,MAAM,IAAI,GAAG;AACzB,aAAS,QAAQ,MAAM,IAAI;AAAA,EAC7B,OAAO;AACL,QAAI,UAAU,MAAM,KAAK,GAAG;AAC1B,eAAS,SAAS,MAAM,KAAK;AAAA,IAC/B;AAEA,QAAI,UAAU,MAAM,KAAK,GAAG;AAC1B,eAAS,SAAS,MAAM,KAAK;AAAA,IAC/B;AAAA,EACF;AAEA,eAAa,mBAAmB,CAAC,YAAY;AAC3C,YAAQ,MAAM,YAAY;AAAA,EAC5B,CAAC;AACD,SAAO;AACT;",
   "names": []
 }

package/utils/css/transition.d.ts

@@ -14,6 +14,7 @@ export declare function setClassesOrStyles(element: HTMLElement, classesOrStyles
  * @param  {HTMLElement|HTMLElement[]|NodeListOf<HTMLElement>} elementOrElements The target element or elements.
  * @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
- * @returns {Promise<void>}                                                      A promise resolving at the end of the transition.
- */
+ * @return {Promise<void>}                                                      A promise resolving at the end of the transition.
+ * @link https://js-toolkit.studiometa.dev/utils/css/transition.html
+*/
 export declare function transition(elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>, name: string | TransitionStyles, endMode?: 'keep' | 'remove'): Promise<void>;

package/utils/css/transition.js

@@ -24,7 +24,7 @@ class Transition {
    * Get the transition class attached to the given element.
    *
    * @param  {HTMLElement} element The HTML element concerned by the transition.
-   * @returns {Transition}          The transition instance tied to the given element.
+   * @return {Transition}          The transition instance tied to the given element.
    */
   static getInstance(element) {
     let instance = cache.get(element);

package/utils/css/transition.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/utils/css/transition.ts"],
-  "sourcesContent": ["import { nextFrame } from '../nextFrame.js';\nimport * as classes from './classes.js';\nimport * as styles from './styles.js';\nimport { isArray, isString } from '../is.js';\nimport { hasWindow } from '../has.js';\n// eslint-disable-next-line import/extensions\nimport { eachElements } from './utils.js';\n\n/** WeakMap to hold the transition instances. */\nconst cache = new WeakMap();\n\nexport type ClassesOrStyles = string | string[] | Partial<CSSStyleDeclaration>;\n\nexport type TransitionStyles = {\n  from?: ClassesOrStyles;\n  active?: ClassesOrStyles;\n  to?: ClassesOrStyles;\n};\n\n/**\n * Transition class.\n */\nclass Transition {\n  /**\n   * Is a transition currently running?\n   */\n  isTransitioning = false;\n\n  /**\n   * A callback to execute when the transition ends.\n   */\n  transitionEndHandler: EventListenerOrEventListenerObject | null = null;\n\n  /**\n   * Instantiate and save the instance to the cache.\n   */\n  constructor(element: HTMLElement) {\n    cache.set(element, this);\n  }\n\n  /**\n   * Get the transition class attached to the given element.\n   *\n   * @param  {HTMLElement} element The HTML element concerned by the transition.\n   * @returns {Transition}          The transition instance tied to the given element.\n   */\n  static getInstance(element: HTMLElement): Transition {\n    let instance = cache.get(element);\n\n    if (!instance) {\n      instance = new this(element);\n    }\n\n    return instance;\n  }\n}\n\n/**\n * Update either the classes or the styles of an element with the given method.\n */\nexport function setClassesOrStyles(\n  element: HTMLElement,\n  classesOrStyles: ClassesOrStyles,\n  method: 'add' | 'remove' = 'add',\n) {\n  if (isString(classesOrStyles) || isArray(classesOrStyles)) {\n    classes[method](element, classesOrStyles);\n  } else {\n    styles[method](element, classesOrStyles);\n  }\n}\n\n/**\n * Test if the given element has a transition duration.\n */\nfunction testTransition(element: HTMLElement) {\n  if (!hasWindow()) {\n    return false;\n  }\n\n  const { transitionDuration } = window.getComputedStyle(element);\n  return !!transitionDuration && transitionDuration !== '0s';\n}\n\n/**\n * Apply the from state.\n */\nasync function start(element: HTMLElement, classesOrStyles: TransitionStyles) {\n  const trs = Transition.getInstance(element);\n  trs.isTransitioning = true;\n  setClassesOrStyles(element, classesOrStyles.from);\n  await nextFrame();\n  setClassesOrStyles(element, classesOrStyles.active);\n}\n\n/**\n * Apply the active state.\n */\nasync function next(element: HTMLElement, classesOrStyles: TransitionStyles): Promise<void> {\n  const hasTransition = testTransition(element);\n\n  /* eslint-disable-next-line */\n  return new Promise(async (resolve) => {\n    if (hasTransition) {\n      const trs = Transition.getInstance(element);\n      trs.transitionEndHandler = () => resolve();\n      element.addEventListener('transitionend', trs.transitionEndHandler, false);\n    }\n    setClassesOrStyles(element, classesOrStyles.from, 'remove');\n    setClassesOrStyles(element, classesOrStyles.to);\n    await nextFrame();\n    if (!hasTransition) {\n      resolve();\n    }\n  });\n}\n\n/**\n * Apply the final state.\n */\nfunction end(\n  element: HTMLElement,\n  classesOrStyles: TransitionStyles,\n  mode: 'keep' | 'remove' = 'remove',\n) {\n  const trs = Transition.getInstance(element);\n  element.removeEventListener('transitionend', trs.transitionEndHandler, false);\n  if (mode === 'remove') {\n    setClassesOrStyles(element, classesOrStyles.to, 'remove');\n  }\n  setClassesOrStyles(element, classesOrStyles.active, 'remove');\n  trs.isTransitioning = false;\n  trs.transitionEndHandler = null;\n}\n\n/**\n * Manage CSS transition with class.\n *\n * This is inspired by the Vue `<transition>` component\n * and the `@barba/css` package, many thanks to them!\n *\n * @param  {HTMLElement}             element The target element.\n * @param  {string|TransitionStyles} name    The name of the transition or an object with the hooks classesOrStyles.\n * @param  {string}                  endMode Whether to remove or keep the `to` classes/styles\n * @returns {Promise<void>}                   A promise resolving at the end of the transition.\n */\nasync function singleTransition(\n  element: HTMLElement,\n  name: string | TransitionStyles,\n  endMode: 'keep' | 'remove' = 'remove',\n): Promise<void> {\n  /** @type {TransitionStyles} */\n  const classesOrStyles = isString(name)\n    ? {\n        from: `${name}-from`,\n        active: `${name}-active`,\n        to: `${name}-to`,\n      }\n    : {\n        from: '',\n        active: '',\n        to: '',\n        ...name,\n      };\n\n  const trs = Transition.getInstance(element);\n  // End any previous transition running on the element.\n  if (trs.isTransitioning) {\n    end(element, classesOrStyles);\n  }\n\n  await start(element, classesOrStyles);\n  await next(element, classesOrStyles);\n  end(element, classesOrStyles, endMode);\n  return Promise.resolve();\n}\n\n/**\n * Manage CSS transition with class.\n *\n * @param  {HTMLElement|HTMLElement[]|NodeListOf<HTMLElement>} elementOrElements The target element or elements.\n * @param  {string|TransitionStyles}                           name              The name of the transition or an object with the hooks classesOrStyles.\n * @param  {string}                                            endMode           Whether to remove or keep the `to` classes/styles\n * @returns {Promise<void>}                                                      A promise resolving at the end of the transition.\n */\nexport async function transition(\n  elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>,\n  name: string | TransitionStyles,\n  endMode: 'keep' | 'remove' = 'remove',\n) {\n  await Promise.all(\n    eachElements(elementOrElements, (element) => singleTransition(element, name, endMode)),\n  );\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { nextFrame } from '../nextFrame.js';\nimport * as classes from './classes.js';\nimport * as styles from './styles.js';\nimport { isArray, isString } from '../is.js';\nimport { hasWindow } from '../has.js';\n// eslint-disable-next-line import/extensions\nimport { eachElements } from './utils.js';\n\n/** WeakMap to hold the transition instances. */\nconst cache = new WeakMap();\n\nexport type ClassesOrStyles = string | string[] | Partial<CSSStyleDeclaration>;\n\nexport type TransitionStyles = {\n  from?: ClassesOrStyles;\n  active?: ClassesOrStyles;\n  to?: ClassesOrStyles;\n};\n\n/**\n * Transition class.\n */\nclass Transition {\n  /**\n   * Is a transition currently running?\n   */\n  isTransitioning = false;\n\n  /**\n   * A callback to execute when the transition ends.\n   */\n  transitionEndHandler: EventListenerOrEventListenerObject | null = null;\n\n  /**\n   * Instantiate and save the instance to the cache.\n   */\n  constructor(element: HTMLElement) {\n    cache.set(element, this);\n  }\n\n  /**\n   * Get the transition class attached to the given element.\n   *\n   * @param  {HTMLElement} element The HTML element concerned by the transition.\n   * @return {Transition}          The transition instance tied to the given element.\n   */\n  static getInstance(element: HTMLElement): Transition {\n    let instance = cache.get(element);\n\n    if (!instance) {\n      instance = new this(element);\n    }\n\n    return instance;\n  }\n}\n\n/**\n * Update either the classes or the styles of an element with the given method.\n */\nexport function setClassesOrStyles(\n  element: HTMLElement,\n  classesOrStyles: ClassesOrStyles,\n  method: 'add' | 'remove' = 'add',\n) {\n  if (isString(classesOrStyles) || isArray(classesOrStyles)) {\n    classes[method](element, classesOrStyles);\n  } else {\n    styles[method](element, classesOrStyles);\n  }\n}\n\n/**\n * Test if the given element has a transition duration.\n */\nfunction testTransition(element: HTMLElement) {\n  if (!hasWindow()) {\n    return false;\n  }\n\n  const { transitionDuration } = window.getComputedStyle(element);\n  return !!transitionDuration && transitionDuration !== '0s';\n}\n\n/**\n * Apply the from state.\n */\nasync function start(element: HTMLElement, classesOrStyles: TransitionStyles) {\n  const trs = Transition.getInstance(element);\n  trs.isTransitioning = true;\n  setClassesOrStyles(element, classesOrStyles.from);\n  await nextFrame();\n  setClassesOrStyles(element, classesOrStyles.active);\n}\n\n/**\n * Apply the active state.\n */\nasync function next(element: HTMLElement, classesOrStyles: TransitionStyles): Promise<void> {\n  const hasTransition = testTransition(element);\n\n  /* eslint-disable-next-line */\n  return new Promise(async (resolve) => {\n    if (hasTransition) {\n      const trs = Transition.getInstance(element);\n      trs.transitionEndHandler = () => resolve();\n      element.addEventListener('transitionend', trs.transitionEndHandler, false);\n    }\n    setClassesOrStyles(element, classesOrStyles.from, 'remove');\n    setClassesOrStyles(element, classesOrStyles.to);\n    await nextFrame();\n    if (!hasTransition) {\n      resolve();\n    }\n  });\n}\n\n/**\n * Apply the final state.\n */\nfunction end(\n  element: HTMLElement,\n  classesOrStyles: TransitionStyles,\n  mode: 'keep' | 'remove' = 'remove',\n) {\n  const trs = Transition.getInstance(element);\n  element.removeEventListener('transitionend', trs.transitionEndHandler, false);\n  if (mode === 'remove') {\n    setClassesOrStyles(element, classesOrStyles.to, 'remove');\n  }\n  setClassesOrStyles(element, classesOrStyles.active, 'remove');\n  trs.isTransitioning = false;\n  trs.transitionEndHandler = null;\n}\n\n/**\n * Manage CSS transition with class.\n *\n * This is inspired by the Vue `<transition>` component\n * and the `@barba/css` package, many thanks to them!\n *\n * @param  {HTMLElement}             element The target element.\n * @param  {string|TransitionStyles} name    The name of the transition or an object with the hooks classesOrStyles.\n * @param  {string}                  endMode Whether to remove or keep the `to` classes/styles\n * @return {Promise<void>}                   A promise resolving at the end of the transition.\n */\nasync function singleTransition(\n  element: HTMLElement,\n  name: string | TransitionStyles,\n  endMode: 'keep' | 'remove' = 'remove',\n): Promise<void> {\n  /** @type {TransitionStyles} */\n  const classesOrStyles = isString(name)\n    ? {\n        from: `${name}-from`,\n        active: `${name}-active`,\n        to: `${name}-to`,\n      }\n    : {\n        from: '',\n        active: '',\n        to: '',\n        ...name,\n      };\n\n  const trs = Transition.getInstance(element);\n  // End any previous transition running on the element.\n  if (trs.isTransitioning) {\n    end(element, classesOrStyles);\n  }\n\n  await start(element, classesOrStyles);\n  await next(element, classesOrStyles);\n  end(element, classesOrStyles, endMode);\n  return Promise.resolve();\n}\n\n/**\n * Manage CSS transition with class.\n *\n * @param  {HTMLElement|HTMLElement[]|NodeListOf<HTMLElement>} elementOrElements The target element or elements.\n * @param  {string|TransitionStyles}                           name              The name of the transition or an object with the hooks classesOrStyles.\n * @param  {string}                                            endMode           Whether to remove or keep the `to` classes/styles\n * @return {Promise<void>}                                                      A promise resolving at the end of the transition.\n * @link https://js-toolkit.studiometa.dev/utils/css/transition.html\n*/\nexport async function transition(\n  elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>,\n  name: string | TransitionStyles,\n  endMode: 'keep' | 'remove' = 'remove',\n) {\n  await Promise.all(\n    eachElements(elementOrElements, (element) => singleTransition(element, name, endMode)),\n  );\n}\n"],
+  "mappings": "AAAA,SAAS,iBAAiB;AAC1B,YAAY,aAAa;AACzB,YAAY,YAAY;AACxB,SAAS,SAAS,gBAAgB;AAClC,SAAS,iBAAiB;AAE1B,SAAS,oBAAoB;AAG7B,MAAM,QAAQ,oBAAI,QAAQ;AAa1B,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA,EAIf,kBAAkB;AAAA;AAAA;AAAA;AAAA,EAKlB,uBAAkE;AAAA;AAAA;AAAA;AAAA,EAKlE,YAAY,SAAsB;AAChC,UAAM,IAAI,SAAS,IAAI;AAAA,EACzB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,OAAO,YAAY,SAAkC;AACnD,QAAI,WAAW,MAAM,IAAI,OAAO;AAEhC,QAAI,CAAC,UAAU;AACb,iBAAW,IAAI,KAAK,OAAO;AAAA,IAC7B;AAEA,WAAO;AAAA,EACT;AACF;AAKO,SAAS,mBACd,SACA,iBACA,SAA2B,OAC3B;AACA,MAAI,SAAS,eAAe,KAAK,QAAQ,eAAe,GAAG;AACzD,YAAQ,MAAM,EAAE,SAAS,eAAe;AAAA,EAC1C,OAAO;AACL,WAAO,MAAM,EAAE,SAAS,eAAe;AAAA,EACzC;AACF;AAKA,SAAS,eAAe,SAAsB;AAC5C,MAAI,CAAC,UAAU,GAAG;AAChB,WAAO;AAAA,EACT;AAEA,QAAM,EAAE,mBAAmB,IAAI,OAAO,iBAAiB,OAAO;AAC9D,SAAO,CAAC,CAAC,sBAAsB,uBAAuB;AACxD;AAKA,eAAe,MAAM,SAAsB,iBAAmC;AAC5E,QAAM,MAAM,WAAW,YAAY,OAAO;AAC1C,MAAI,kBAAkB;AACtB,qBAAmB,SAAS,gBAAgB,IAAI;AAChD,QAAM,UAAU;AAChB,qBAAmB,SAAS,gBAAgB,MAAM;AACpD;AAKA,eAAe,KAAK,SAAsB,iBAAkD;AAC1F,QAAM,gBAAgB,eAAe,OAAO;AAG5C,SAAO,IAAI,QAAQ,OAAO,YAAY;AACpC,QAAI,eAAe;AACjB,YAAM,MAAM,WAAW,YAAY,OAAO;AAC1C,UAAI,uBAAuB,MAAM,QAAQ;AACzC,cAAQ,iBAAiB,iBAAiB,IAAI,sBAAsB,KAAK;AAAA,IAC3E;AACA,uBAAmB,SAAS,gBAAgB,MAAM,QAAQ;AAC1D,uBAAmB,SAAS,gBAAgB,EAAE;AAC9C,UAAM,UAAU;AAChB,QAAI,CAAC,eAAe;AAClB,cAAQ;AAAA,IACV;AAAA,EACF,CAAC;AACH;AAKA,SAAS,IACP,SACA,iBACA,OAA0B,UAC1B;AACA,QAAM,MAAM,WAAW,YAAY,OAAO;AAC1C,UAAQ,oBAAoB,iBAAiB,IAAI,sBAAsB,KAAK;AAC5E,MAAI,SAAS,UAAU;AACrB,uBAAmB,SAAS,gBAAgB,IAAI,QAAQ;AAAA,EAC1D;AACA,qBAAmB,SAAS,gBAAgB,QAAQ,QAAQ;AAC5D,MAAI,kBAAkB;AACtB,MAAI,uBAAuB;AAC7B;AAaA,eAAe,iBACb,SACA,MACA,UAA6B,UACd;AAEf,QAAM,kBAAkB,SAAS,IAAI,IACjC;AAAA,IACE,MAAM,GAAG,IAAI;AAAA,IACb,QAAQ,GAAG,IAAI;AAAA,IACf,IAAI,GAAG,IAAI;AAAA,EACb,IACA;AAAA,IACE,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,IAAI;AAAA,IACJ,GAAG;AAAA,EACL;AAEJ,QAAM,MAAM,WAAW,YAAY,OAAO;AAE1C,MAAI,IAAI,iBAAiB;AACvB,QAAI,SAAS,eAAe;AAAA,EAC9B;AAEA,QAAM,MAAM,SAAS,eAAe;AACpC,QAAM,KAAK,SAAS,eAAe;AACnC,MAAI,SAAS,iBAAiB,OAAO;AACrC,SAAO,QAAQ,QAAQ;AACzB;AAWA,eAAsB,WACpB,mBACA,MACA,UAA6B,UAC7B;AACA,QAAM,QAAQ;AAAA,IACZ,aAAa,mBAAmB,CAAC,YAAY,iBAAiB,SAAS,MAAM,OAAO,CAAC;AAAA,EACvF;AACF;",
   "names": []
 }

package/utils/debounce.d.ts

@@ -3,8 +3,9 @@
  * will not be triggered. The function will be called after it stops
  * being called for N milliseconds.
  *
- * @param   {(...args:unknown[]) => void} fn The function to call.
- * @param   {number} [delay=300] The delay in ms to wait before calling the function.
- * @returns {(...args:unknown[]) => void} The debounced function.
- */
+ * @param  {(...args:unknown[]) => void} fn The function to call.
+ * @param  {number} [delay=300] The delay in ms to wait before calling the function.
+ * @return {(...args:unknown[]) => void} The debounced function.
+ * @link https://js-toolkit.studiometa.dev/utils/debounce.html
+*/
 export declare function debounce(fn: (...args: unknown[]) => void, delay?: number): (...args: unknown[]) => void;

package/utils/debounce.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/utils/debounce.ts"],
-  "sourcesContent": ["/**\n * Returns a function, that, as long as it continues to be invoked,\n * will not be triggered. The function will be called after it stops\n * being called for N milliseconds.\n *\n * @param   {(...args:unknown[]) => void} fn The function to call.\n * @param   {number} [delay=300] The delay in ms to wait before calling the function.\n * @returns {(...args:unknown[]) => void} The debounced function.\n */\nexport function debounce(\n  fn: (...args: unknown[]) => void,\n  delay = 300,\n): (...args: unknown[]) => void {\n  let timeout;\n  return function debounced(...args) {\n    clearTimeout(timeout);\n    timeout = setTimeout(() => {\n      fn(...args);\n    }, delay);\n  };\n}\n"],
-  "mappings": "AASO,SAAS,SACd,IACA,QAAQ,KACsB;AAC9B,MAAI;AACJ,SAAO,SAAS,aAAa,MAAM;AACjC,iBAAa,OAAO;AACpB,cAAU,WAAW,MAAM;AACzB,SAAG,GAAG,IAAI;AAAA,IACZ,GAAG,KAAK;AAAA,EACV;AACF;",
+  "sourcesContent": ["/**\n * Returns a function, that, as long as it continues to be invoked,\n * will not be triggered. The function will be called after it stops\n * being called for N milliseconds.\n *\n * @param  {(...args:unknown[]) => void} fn The function to call.\n * @param  {number} [delay=300] The delay in ms to wait before calling the function.\n * @return {(...args:unknown[]) => void} The debounced function.\n * @link https://js-toolkit.studiometa.dev/utils/debounce.html\n*/\nexport function debounce(\n  fn: (...args: unknown[]) => void,\n  delay = 300,\n): (...args: unknown[]) => void {\n  let timeout;\n  return function debounced(...args) {\n    clearTimeout(timeout);\n    timeout = setTimeout(() => {\n      fn(...args);\n    }, delay);\n  };\n}\n"],
+  "mappings": "AAUO,SAAS,SACd,IACA,QAAQ,KACsB;AAC9B,MAAI;AACJ,SAAO,SAAS,aAAa,MAAM;AACjC,iBAAa,OAAO;AACpB,cAAU,WAAW,MAAM;AACzB,SAAG,GAAG,IAAI;AAAA,IACZ,GAAG,KAAK;AAAA,EACV;AACF;",
   "names": []
 }

package/utils/dom/createElement.d.ts

@@ -2,9 +2,32 @@ interface AnyHTMLElementTagNameMap extends HTMLElementTagNameMap {
     [key: string]: HTMLElement;
 }
 type CreateElementChildren = string | Node | Array<string | Node>;
+type CreateElementAttributes = {
+    data?: Record<string, string> | string;
+    class?: string;
+    id?: string;
+    [key: string]: string | Record<string, string> | undefined;
+};
 /**
  * Functional DOM Element creation.
+ *
+ * If only 2 arguments are given and the second is an array, a string or a Node,
+ * then it will be used as children.
+ *
+ * @example
+ * ```js
+ * createElement(); // <div></div>
+ * createElement('a'); // <a></a>
+ * createElement('a', { href: '#' }); // <a href="#"></a>
+ * createElement('a', { href: '#'}, [createElement('span')]); // <a href="#"><span></span></a>
+ * createElement('a', 'link'); // <a>link</a>
+ * ```
+ *
+ * @param tag The tag name of the element to create.
+ * @param attributes The attributes to set on the created element.
+ * @param children The children to append to the created element.
+ * @link https://js-toolkit.studiometa.dev/utils/createElement.html
  */
 export declare function createElement<T extends keyof AnyHTMLElementTagNameMap = 'div'>(tag?: T, children?: CreateElementChildren): AnyHTMLElementTagNameMap[T];
-export declare function createElement<T extends keyof AnyHTMLElementTagNameMap = 'div'>(tag?: T, attributes?: Record<string, string>, children?: CreateElementChildren): AnyHTMLElementTagNameMap[T];
+export declare function createElement<T extends keyof AnyHTMLElementTagNameMap = 'div'>(tag?: T, attributes?: CreateElementAttributes, children?: CreateElementChildren): AnyHTMLElementTagNameMap[T];
 export {};

package/utils/dom/createElement.js

@@ -1,4 +1,4 @@
-import { isArray, isString } from "../is.js";
+import { isArray, isObject, isString } from "../is.js";
 import { dashCase } from "../string/changeCase.js";
 function createElement(tag, attributes = {}, children = null) {
   const el = document.createElement(tag ?? "div");
@@ -7,7 +7,13 @@ function createElement(tag, attributes = {}, children = null) {
     attributes = {};
   }
   for (const [name, value] of Object.entries(attributes)) {
-    el.setAttribute(dashCase(name), value);
+    if (isString(value)) {
+      el.setAttribute(dashCase(name), value);
+    } else if (name === "data" && isObject(value)) {
+      for (const [dataName, dataValue] of Object.entries(value)) {
+        el.setAttribute(`data-${dashCase(dataName)}`, dataValue);
+      }
+    }
   }
   if (children) {
     children = isArray(children) ? children : [children];

package/utils/dom/createElement.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/utils/dom/createElement.ts"],
-  "sourcesContent": ["import { isArray, isString } from '../is.js';\nimport { dashCase } from '../string/changeCase.js';\n\ninterface AnyHTMLElementTagNameMap extends HTMLElementTagNameMap {\n  [key: string]: HTMLElement;\n}\n\ntype CreateElementChildren = string | Node | Array<string | Node>;\n\n/**\n * Functional DOM Element creation.\n */\nexport function createElement<T extends keyof AnyHTMLElementTagNameMap = 'div'>(\n  tag?: T,\n  children?: CreateElementChildren,\n): AnyHTMLElementTagNameMap[T];\nexport function createElement<T extends keyof AnyHTMLElementTagNameMap = 'div'>(\n  tag?: T,\n  attributes?: Record<string, string>,\n  children?: CreateElementChildren,\n): AnyHTMLElementTagNameMap[T];\nexport function createElement<T extends keyof AnyHTMLElementTagNameMap = 'div'>(\n  tag?: T,\n  attributes: CreateElementChildren | Record<string, string> = {},\n  children: CreateElementChildren = null,\n): AnyHTMLElementTagNameMap[T] {\n  const el = document.createElement((tag as string) ?? 'div');\n\n  if (\n    children === null &&\n    (isArray(attributes) || isString(attributes) || attributes instanceof Node)\n  ) {\n    children = attributes;\n    attributes = {};\n  }\n\n  for (const [name, value] of Object.entries(attributes as Record<string, string>)) {\n    el.setAttribute(dashCase(name), value);\n  }\n\n  if (children) {\n    children = isArray(children) ? children : [children];\n    el.append(...children);\n  }\n\n  return el;\n}\n"],
-  "mappings": "AAAA,SAAS,SAAS,gBAAgB;AAClC,SAAS,gBAAgB;AAoBlB,SAAS,cACd,KACA,aAA6D,CAAC,GAC9D,WAAkC,MACL;AAC7B,QAAM,KAAK,SAAS,cAAe,OAAkB,KAAK;AAE1D,MACE,aAAa,SACZ,QAAQ,UAAU,KAAK,SAAS,UAAU,KAAK,sBAAsB,OACtE;AACA,eAAW;AACX,iBAAa,CAAC;AAAA,EAChB;AAEA,aAAW,CAAC,MAAM,KAAK,KAAK,OAAO,QAAQ,UAAoC,GAAG;AAChF,OAAG,aAAa,SAAS,IAAI,GAAG,KAAK;AAAA,EACvC;AAEA,MAAI,UAAU;AACZ,eAAW,QAAQ,QAAQ,IAAI,WAAW,CAAC,QAAQ;AACnD,OAAG,OAAO,GAAG,QAAQ;AAAA,EACvB;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import { isArray, isObject, isString } from '../is.js';\nimport { dashCase } from '../string/changeCase.js';\n\ninterface AnyHTMLElementTagNameMap extends HTMLElementTagNameMap {\n  [key: string]: HTMLElement;\n}\n\ntype CreateElementChildren = string | Node | Array<string | Node>;\n\ntype CreateElementAttributes = {\n  data?: Record<string, string> | string;\n  class?: string;\n  id?: string;\n  [key: string]: string | Record<string, string> | undefined;\n};\n\n/**\n * Functional DOM Element creation.\n *\n * If only 2 arguments are given and the second is an array, a string or a Node,\n * then it will be used as children.\n *\n * @example\n * ```js\n * createElement(); // <div></div>\n * createElement('a'); // <a></a>\n * createElement('a', { href: '#' }); // <a href=\"#\"></a>\n * createElement('a', { href: '#'}, [createElement('span')]); // <a href=\"#\"><span></span></a>\n * createElement('a', 'link'); // <a>link</a>\n * ```\n *\n * @param tag The tag name of the element to create.\n * @param attributes The attributes to set on the created element.\n * @param children The children to append to the created element.\n * @link https://js-toolkit.studiometa.dev/utils/createElement.html\n */\nexport function createElement<T extends keyof AnyHTMLElementTagNameMap = 'div'>(\n  tag?: T,\n  children?: CreateElementChildren,\n): AnyHTMLElementTagNameMap[T];\nexport function createElement<T extends keyof AnyHTMLElementTagNameMap = 'div'>(\n  tag?: T,\n  attributes?: CreateElementAttributes,\n  children?: CreateElementChildren,\n): AnyHTMLElementTagNameMap[T];\nexport function createElement<T extends keyof AnyHTMLElementTagNameMap = 'div'>(\n  tag?: T,\n  attributes: CreateElementChildren | CreateElementAttributes = {},\n  children: CreateElementChildren = null,\n): AnyHTMLElementTagNameMap[T] {\n  const el = document.createElement((tag as string) ?? 'div');\n\n  if (\n    children === null &&\n    (isArray(attributes) || isString(attributes) || attributes instanceof Node)\n  ) {\n    children = attributes;\n    attributes = {};\n  }\n\n  for (const [name, value] of Object.entries(attributes as CreateElementAttributes)) {\n    if (isString(value)) {\n      el.setAttribute(dashCase(name), value as string);\n    } else if (name === 'data' && isObject(value)) {\n      for (const [dataName, dataValue] of Object.entries(value)) {\n        el.setAttribute(`data-${dashCase(dataName)}`, dataValue);\n      }\n    }\n  }\n\n  if (children) {\n    children = isArray(children) ? children : [children];\n    el.append(...children);\n  }\n\n  return el;\n}\n"],
+  "mappings": "AAAA,SAAS,SAAS,UAAU,gBAAgB;AAC5C,SAAS,gBAAgB;AA4ClB,SAAS,cACd,KACA,aAA8D,CAAC,GAC/D,WAAkC,MACL;AAC7B,QAAM,KAAK,SAAS,cAAe,OAAkB,KAAK;AAE1D,MACE,aAAa,SACZ,QAAQ,UAAU,KAAK,SAAS,UAAU,KAAK,sBAAsB,OACtE;AACA,eAAW;AACX,iBAAa,CAAC;AAAA,EAChB;AAEA,aAAW,CAAC,MAAM,KAAK,KAAK,OAAO,QAAQ,UAAqC,GAAG;AACjF,QAAI,SAAS,KAAK,GAAG;AACnB,SAAG,aAAa,SAAS,IAAI,GAAG,KAAe;AAAA,IACjD,WAAW,SAAS,UAAU,SAAS,KAAK,GAAG;AAC7C,iBAAW,CAAC,UAAU,SAAS,KAAK,OAAO,QAAQ,KAAK,GAAG;AACzD,WAAG,aAAa,QAAQ,SAAS,QAAQ,CAAC,IAAI,SAAS;AAAA,MACzD;AAAA,IACF;AAAA,EACF;AAEA,MAAI,UAAU;AACZ,eAAW,QAAQ,QAAQ,IAAI,WAAW,CAAC,QAAQ;AACnD,OAAG,OAAO,GAAG,QAAQ;AAAA,EACvB;AAEA,SAAO;AACT;",
   "names": []
 }

package/utils/getComponentResolver.d.ts

@@ -2,6 +2,6 @@
  * Default component resolver
  *
  * @param {Function} fn
- * @returns {Function}
+ * @return {Function}
  */
 export declare function getComponentResolver(fn: any): (resolve: any, cb?: () => unknown) => void;