@studiometa/js-toolkit 2.6.4 → 2.7.0

package/utils/css/styles.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../packages/js-toolkit/utils/css/styles.js"],
-  "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 *\n * @param {HTMLElement|HTMLElement[]|NodeListOf<HTMLElement>}                  elementOrElements The element to update.\n * @param {Partial<CSSStyleDeclaration>} styles  An object of styles properties and values.\n * @param {string}                       method  The method to use: add or remove.\n */\nfunction setStyles(elementOrElements, styles, method = 'add') {\n  if (!elementOrElements || !styles || !isObject(styles)) {\n    return;\n  }\n\n  eachElements(elementOrElements, (el) => {\n    Object.entries(styles).forEach(([prop, value]) => {\n      el.style[prop] = method === 'add' ? value : '';\n    });\n  });\n}\n\n/**\n * Add styles to an element.\n *\n * @param {HTMLElement|HTMLElement[]|NodeListOf<HTMLElement>}                  elementOrElements The element to update.\n * @param {Partial<CSSStyleDeclaration>} styles  A string of class names.\n * @returns {void}\n */\nexport function add(elementOrElements, styles) {\n  setStyles(elementOrElements, styles);\n}\n\n/**\n * Remove class names from an element.\n *\n * @param  {HTMLElement|HTMLElement[]|NodeListOf<HTMLElement>}                  elementOrElements The element to update.\n * @param  {Partial<CSSStyleDeclaration>} styles  A string of class names.\n * @returns {void}\n */\nexport function remove(elementOrElements, styles) {\n  setStyles(elementOrElements, styles, 'remove');\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAyB;AAEzB,mBAA6B;AAS7B,SAAS,UAAU,mBAAmB,QAAQ,SAAS,OAAO;AAC5D,MAAI,CAAC,qBAAqB,CAAC,UAAU,KAAC,oBAAS,MAAM,GAAG;AACtD;AAAA,EACF;AAEA,iCAAa,mBAAmB,CAAC,OAAO;AACtC,WAAO,QAAQ,MAAM,EAAE,QAAQ,CAAC,CAAC,MAAM,KAAK,MAAM;AAChD,SAAG,MAAM,QAAQ,WAAW,QAAQ,QAAQ;AAAA,IAC9C,CAAC;AAAA,EACH,CAAC;AACH;AASO,SAAS,IAAI,mBAAmB,QAAQ;AAC7C,YAAU,mBAAmB,MAAM;AACrC;AASO,SAAS,OAAO,mBAAmB,QAAQ;AAChD,YAAU,mBAAmB,QAAQ,QAAQ;AAC/C;",
+  "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    Object.entries(styles).forEach(([prop, value]) => {\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAyB;AAEzB,mBAA6B;AAK7B,SAAS,UACP,mBACA,QACA,SAA2B,OAC3B;AACA,MAAI,CAAC,qBAAqB,CAAC,UAAU,KAAC,oBAAS,MAAM,GAAG;AACtD;AAAA,EACF;AAEA,iCAAa,mBAAmB,CAAC,OAAO;AACtC,WAAO,QAAQ,MAAM,EAAE,QAAQ,CAAC,CAAC,MAAM,KAAK,MAAM;AAChD,SAAG,MAAM,QAAQ,WAAW,QAAQ,QAAQ;AAAA,IAC9C,CAAC;AAAA,EACH,CAAC;AACH;AAKO,SAAS,IACd,mBACA,QACA;AACA,YAAU,mBAAmB,MAAM;AACrC;AAKO,SAAS,OACd,mBACA,QACA;AACA,YAAU,mBAAmB,QAAQ,QAAQ;AAC/C;",
   "names": []
 }

package/utils/css/styles.d.ts

@@ -1,16 +1,8 @@
 /**
  * Add styles to an element.
- *
- * @param {HTMLElement|HTMLElement[]|NodeListOf<HTMLElement>}                  elementOrElements The element to update.
- * @param {Partial<CSSStyleDeclaration>} styles  A string of class names.
- * @returns {void}
  */
-export function add(elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>, styles: Partial<CSSStyleDeclaration>): void;
+export declare function add(elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>, styles: Partial<CSSStyleDeclaration>): void;
 /**
  * Remove class names from an element.
- *
- * @param  {HTMLElement|HTMLElement[]|NodeListOf<HTMLElement>}                  elementOrElements The element to update.
- * @param  {Partial<CSSStyleDeclaration>} styles  A string of class names.
- * @returns {void}
  */
-export function remove(elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>, styles: Partial<CSSStyleDeclaration>): void;
+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.js"],
-  "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 *\n * @param {HTMLElement|HTMLElement[]|NodeListOf<HTMLElement>}                  elementOrElements The element to update.\n * @param {Partial<CSSStyleDeclaration>} styles  An object of styles properties and values.\n * @param {string}                       method  The method to use: add or remove.\n */\nfunction setStyles(elementOrElements, styles, method = 'add') {\n  if (!elementOrElements || !styles || !isObject(styles)) {\n    return;\n  }\n\n  eachElements(elementOrElements, (el) => {\n    Object.entries(styles).forEach(([prop, value]) => {\n      el.style[prop] = method === 'add' ? value : '';\n    });\n  });\n}\n\n/**\n * Add styles to an element.\n *\n * @param {HTMLElement|HTMLElement[]|NodeListOf<HTMLElement>}                  elementOrElements The element to update.\n * @param {Partial<CSSStyleDeclaration>} styles  A string of class names.\n * @returns {void}\n */\nexport function add(elementOrElements, styles) {\n  setStyles(elementOrElements, styles);\n}\n\n/**\n * Remove class names from an element.\n *\n * @param  {HTMLElement|HTMLElement[]|NodeListOf<HTMLElement>}                  elementOrElements The element to update.\n * @param  {Partial<CSSStyleDeclaration>} styles  A string of class names.\n * @returns {void}\n */\nexport function remove(elementOrElements, styles) {\n  setStyles(elementOrElements, styles, 'remove');\n}\n"],
-  "mappings": "AAAA,SAAS,gBAAgB;AAEzB,SAAS,oBAAoB;AAS7B,SAAS,UAAU,mBAAmB,QAAQ,SAAS,OAAO;AAC5D,MAAI,CAAC,qBAAqB,CAAC,UAAU,CAAC,SAAS,MAAM,GAAG;AACtD;AAAA,EACF;AAEA,eAAa,mBAAmB,CAAC,OAAO;AACtC,WAAO,QAAQ,MAAM,EAAE,QAAQ,CAAC,CAAC,MAAM,KAAK,MAAM;AAChD,SAAG,MAAM,QAAQ,WAAW,QAAQ,QAAQ;AAAA,IAC9C,CAAC;AAAA,EACH,CAAC;AACH;AASO,SAAS,IAAI,mBAAmB,QAAQ;AAC7C,YAAU,mBAAmB,MAAM;AACrC;AASO,SAAS,OAAO,mBAAmB,QAAQ;AAChD,YAAU,mBAAmB,QAAQ,QAAQ;AAC/C;",
+  "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    Object.entries(styles).forEach(([prop, value]) => {\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,WAAO,QAAQ,MAAM,EAAE,QAAQ,CAAC,CAAC,MAAM,KAAK,MAAM;AAChD,SAAG,MAAM,QAAQ,WAAW,QAAQ,QAAQ;AAAA,IAC9C,CAAC;AAAA,EACH,CAAC;AACH;AAKO,SAAS,IACd,mBACA,QACA;AACA,YAAU,mBAAmB,MAAM;AACrC;AAKO,SAAS,OACd,mBACA,QACA;AACA,YAAU,mBAAmB,QAAQ,QAAQ;AAC/C;",
   "names": []
 }

package/utils/css/transform.cjs

@@ -16,7 +16,7 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/js-toolkit/utils/css/transform.js
+// packages/js-toolkit/utils/css/transform.ts
 var transform_exports = {};
 __export(transform_exports, {
   TRANSFORM_PROPS: () => TRANSFORM_PROPS,

package/utils/css/transform.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../packages/js-toolkit/utils/css/transform.js"],
-  "sourcesContent": ["import { isDefined } from '../is.js';\n// eslint-disable-next-line import/extensions\nimport { eachElements } from './utils.js';\n\n/**\n * @typedef {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 * }>} TransformProps\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 *\n * @param   {HTMLElement|HTMLElement[]|NodeListOf<HTMLElement>} elementOrElements\n * @param   {TransformProps} props\n * @returns {string}\n */\nexport default function transform(elementOrElements, props) {\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAA0B;AAE1B,mBAA6B;AAqBtB,IAAM,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;AASe,SAAR,UAA2B,mBAAmB,OAAO;AAC1D,MAAI,QAAQ;AAEZ,UAAI,qBAAU,MAAM,CAAC,SAAK,qBAAU,MAAM,CAAC,SAAK,qBAAU,MAAM,CAAC,GAAG;AAClE,aAAS,eAAe,MAAM,KAAK,QAAQ,MAAM,KAAK,QAAQ,MAAM,KAAK;AAAA,EAC3E;AAEA,UAAI,qBAAU,MAAM,MAAM,GAAG;AAC3B,aAAS,UAAU,MAAM;AAAA,EAC3B,OAAO;AACL,YAAI,qBAAU,MAAM,OAAO,GAAG;AAC5B,eAAS,WAAW,MAAM;AAAA,IAC5B;AAEA,YAAI,qBAAU,MAAM,OAAO,GAAG;AAC5B,eAAS,WAAW,MAAM;AAAA,IAC5B;AAEA,YAAI,qBAAU,MAAM,OAAO,GAAG;AAC5B,eAAS,WAAW,MAAM;AAAA,IAC5B;AAAA,EACF;AAEA,UAAI,qBAAU,MAAM,KAAK,GAAG;AAC1B,aAAS,SAAS,MAAM;AAAA,EAC1B,OAAO;AACL,YAAI,qBAAU,MAAM,MAAM,GAAG;AAC3B,eAAS,UAAU,MAAM;AAAA,IAC3B;AAEA,YAAI,qBAAU,MAAM,MAAM,GAAG;AAC3B,eAAS,UAAU,MAAM;AAAA,IAC3B;AAEA,YAAI,qBAAU,MAAM,MAAM,GAAG;AAC3B,eAAS,UAAU,MAAM;AAAA,IAC3B;AAAA,EACF;AAEA,UAAI,qBAAU,MAAM,IAAI,GAAG;AACzB,aAAS,QAAQ,MAAM;AAAA,EACzB,OAAO;AACL,YAAI,qBAAU,MAAM,KAAK,GAAG;AAC1B,eAAS,SAAS,MAAM;AAAA,IAC1B;AAEA,YAAI,qBAAU,MAAM,KAAK,GAAG;AAC1B,eAAS,SAAS,MAAM;AAAA,IAC1B;AAAA,EACF;AAEA,iCAAa,mBAAmB,CAAC,YAAY;AAC3C,YAAQ,MAAM,YAAY;AAAA,EAC5B,CAAC;AACD,SAAO;AACT;",
+  "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 default function transform(\n  elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>,\n  props: TransformProps,\n): string {\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAA0B;AAE1B,mBAA6B;AAmBtB,IAAM,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;AAKe,SAAR,UACL,mBACA,OACQ;AACR,MAAI,QAAQ;AAEZ,UAAI,qBAAU,MAAM,CAAC,SAAK,qBAAU,MAAM,CAAC,SAAK,qBAAU,MAAM,CAAC,GAAG;AAClE,aAAS,eAAe,MAAM,KAAK,QAAQ,MAAM,KAAK,QAAQ,MAAM,KAAK;AAAA,EAC3E;AAEA,UAAI,qBAAU,MAAM,MAAM,GAAG;AAC3B,aAAS,UAAU,MAAM;AAAA,EAC3B,OAAO;AACL,YAAI,qBAAU,MAAM,OAAO,GAAG;AAC5B,eAAS,WAAW,MAAM;AAAA,IAC5B;AAEA,YAAI,qBAAU,MAAM,OAAO,GAAG;AAC5B,eAAS,WAAW,MAAM;AAAA,IAC5B;AAEA,YAAI,qBAAU,MAAM,OAAO,GAAG;AAC5B,eAAS,WAAW,MAAM;AAAA,IAC5B;AAAA,EACF;AAEA,UAAI,qBAAU,MAAM,KAAK,GAAG;AAC1B,aAAS,SAAS,MAAM;AAAA,EAC1B,OAAO;AACL,YAAI,qBAAU,MAAM,MAAM,GAAG;AAC3B,eAAS,UAAU,MAAM;AAAA,IAC3B;AAEA,YAAI,qBAAU,MAAM,MAAM,GAAG;AAC3B,eAAS,UAAU,MAAM;AAAA,IAC3B;AAEA,YAAI,qBAAU,MAAM,MAAM,GAAG;AAC3B,eAAS,UAAU,MAAM;AAAA,IAC3B;AAAA,EACF;AAEA,UAAI,qBAAU,MAAM,IAAI,GAAG;AACzB,aAAS,QAAQ,MAAM;AAAA,EACzB,OAAO;AACL,YAAI,qBAAU,MAAM,KAAK,GAAG;AAC1B,eAAS,SAAS,MAAM;AAAA,IAC1B;AAEA,YAAI,qBAAU,MAAM,KAAK,GAAG;AAC1B,eAAS,SAAS,MAAM;AAAA,IAC1B;AAAA,EACF;AAEA,iCAAa,mBAAmB,CAAC,YAAY;AAC3C,YAAQ,MAAM,YAAY;AAAA,EAC5B,CAAC;AACD,SAAO;AACT;",
   "names": []
 }

package/utils/css/transform.d.ts

@@ -1,31 +1,4 @@
-/**
- * Generate a CSS transform.
- *
- * @param   {HTMLElement|HTMLElement[]|NodeListOf<HTMLElement>} elementOrElements
- * @param   {TransformProps} props
- * @returns {string}
- */
-export default function transform(elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>, props: TransformProps): string;
-/**
- * @typedef {Partial<{
- *  x: number;
- *  y: number;
- *  z: number;
- *  rotate: number;
- *  rotateX: number;
- *  rotateY: number;
- *  rotateZ: number;
- *  scale: number;
- *  scaleX: number;
- *  scaleY: number;
- *  scaleZ: number;
- *  skew: number;
- *  skewX: number;
- *  skewY: number;
- * }>} TransformProps
- */
-export const TRANSFORM_PROPS: string[];
-export type TransformProps = Partial<{
+export declare type TransformProps = Partial<{
     x: number;
     y: number;
     z: number;
@@ -41,3 +14,8 @@ export type TransformProps = Partial<{
     skewX: number;
     skewY: number;
 }>;
+export declare const TRANSFORM_PROPS: string[];
+/**
+ * Generate a CSS transform.
+ */
+export default 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.js"],
-  "sourcesContent": ["import { isDefined } from '../is.js';\n// eslint-disable-next-line import/extensions\nimport { eachElements } from './utils.js';\n\n/**\n * @typedef {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 * }>} TransformProps\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 *\n * @param   {HTMLElement|HTMLElement[]|NodeListOf<HTMLElement>} elementOrElements\n * @param   {TransformProps} props\n * @returns {string}\n */\nexport default function transform(elementOrElements, props) {\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;AAqBtB,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;AASe,SAAR,UAA2B,mBAAmB,OAAO;AAC1D,MAAI,QAAQ;AAEZ,MAAI,UAAU,MAAM,CAAC,KAAK,UAAU,MAAM,CAAC,KAAK,UAAU,MAAM,CAAC,GAAG;AAClE,aAAS,eAAe,MAAM,KAAK,QAAQ,MAAM,KAAK,QAAQ,MAAM,KAAK;AAAA,EAC3E;AAEA,MAAI,UAAU,MAAM,MAAM,GAAG;AAC3B,aAAS,UAAU,MAAM;AAAA,EAC3B,OAAO;AACL,QAAI,UAAU,MAAM,OAAO,GAAG;AAC5B,eAAS,WAAW,MAAM;AAAA,IAC5B;AAEA,QAAI,UAAU,MAAM,OAAO,GAAG;AAC5B,eAAS,WAAW,MAAM;AAAA,IAC5B;AAEA,QAAI,UAAU,MAAM,OAAO,GAAG;AAC5B,eAAS,WAAW,MAAM;AAAA,IAC5B;AAAA,EACF;AAEA,MAAI,UAAU,MAAM,KAAK,GAAG;AAC1B,aAAS,SAAS,MAAM;AAAA,EAC1B,OAAO;AACL,QAAI,UAAU,MAAM,MAAM,GAAG;AAC3B,eAAS,UAAU,MAAM;AAAA,IAC3B;AAEA,QAAI,UAAU,MAAM,MAAM,GAAG;AAC3B,eAAS,UAAU,MAAM;AAAA,IAC3B;AAEA,QAAI,UAAU,MAAM,MAAM,GAAG;AAC3B,eAAS,UAAU,MAAM;AAAA,IAC3B;AAAA,EACF;AAEA,MAAI,UAAU,MAAM,IAAI,GAAG;AACzB,aAAS,QAAQ,MAAM;AAAA,EACzB,OAAO;AACL,QAAI,UAAU,MAAM,KAAK,GAAG;AAC1B,eAAS,SAAS,MAAM;AAAA,IAC1B;AAEA,QAAI,UAAU,MAAM,KAAK,GAAG;AAC1B,eAAS,SAAS,MAAM;AAAA,IAC1B;AAAA,EACF;AAEA,eAAa,mBAAmB,CAAC,YAAY;AAC3C,YAAQ,MAAM,YAAY;AAAA,EAC5B,CAAC;AACD,SAAO;AACT;",
+  "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 default function transform(\n  elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>,\n  props: TransformProps,\n): string {\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;AAKe,SAAR,UACL,mBACA,OACQ;AACR,MAAI,QAAQ;AAEZ,MAAI,UAAU,MAAM,CAAC,KAAK,UAAU,MAAM,CAAC,KAAK,UAAU,MAAM,CAAC,GAAG;AAClE,aAAS,eAAe,MAAM,KAAK,QAAQ,MAAM,KAAK,QAAQ,MAAM,KAAK;AAAA,EAC3E;AAEA,MAAI,UAAU,MAAM,MAAM,GAAG;AAC3B,aAAS,UAAU,MAAM;AAAA,EAC3B,OAAO;AACL,QAAI,UAAU,MAAM,OAAO,GAAG;AAC5B,eAAS,WAAW,MAAM;AAAA,IAC5B;AAEA,QAAI,UAAU,MAAM,OAAO,GAAG;AAC5B,eAAS,WAAW,MAAM;AAAA,IAC5B;AAEA,QAAI,UAAU,MAAM,OAAO,GAAG;AAC5B,eAAS,WAAW,MAAM;AAAA,IAC5B;AAAA,EACF;AAEA,MAAI,UAAU,MAAM,KAAK,GAAG;AAC1B,aAAS,SAAS,MAAM;AAAA,EAC1B,OAAO;AACL,QAAI,UAAU,MAAM,MAAM,GAAG;AAC3B,eAAS,UAAU,MAAM;AAAA,IAC3B;AAEA,QAAI,UAAU,MAAM,MAAM,GAAG;AAC3B,eAAS,UAAU,MAAM;AAAA,IAC3B;AAEA,QAAI,UAAU,MAAM,MAAM,GAAG;AAC3B,eAAS,UAAU,MAAM;AAAA,IAC3B;AAAA,EACF;AAEA,MAAI,UAAU,MAAM,IAAI,GAAG;AACzB,aAAS,QAAQ,MAAM;AAAA,EACzB,OAAO;AACL,QAAI,UAAU,MAAM,KAAK,GAAG;AAC1B,eAAS,SAAS,MAAM;AAAA,IAC1B;AAEA,QAAI,UAAU,MAAM,KAAK,GAAG;AAC1B,eAAS,SAAS,MAAM;AAAA,IAC1B;AAAA,EACF;AAEA,eAAa,mBAAmB,CAAC,YAAY;AAC3C,YAAQ,MAAM,YAAY;AAAA,EAC5B,CAAC;AACD,SAAO;AACT;",
   "names": []
 }

package/utils/css/transition.cjs

@@ -22,7 +22,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/js-toolkit/utils/css/transition.js
+// packages/js-toolkit/utils/css/transition.ts
 var transition_exports = {};
 __export(transition_exports, {
   default: () => transition,
@@ -76,7 +76,7 @@ async function next(element, classesOrStyles) {
   return new Promise(async (resolve) => {
     if (hasTransition) {
       const trs = Transition.getInstance(element);
-      trs.transitionEndHandler = resolve;
+      trs.transitionEndHandler = () => resolve();
       element.addEventListener("transitionend", trs.transitionEndHandler, false);
     }
     setClassesOrStyles(element, classesOrStyles.from, "remove");

package/utils/css/transition.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../packages/js-toolkit/utils/css/transition.js"],
-  "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\n/**\n * @typedef {string|string[]|Partial<CSSStyleDeclaration>} ClassesOrStyles\n * @typedef {{ from?: ClassesOrStyles, active?: ClassesOrStyles, to?: ClassesOrStyles }} TransitionStyles\n */\n\n/**\n * Transition class.\n */\nclass Transition {\n  /**\n   * Is a transition currently running?\n   * @type {boolean}\n   */\n  isTransitioning = false;\n\n  /**\n   * A callback to execute when the transition ends.\n   * @type {EventListenerOrEventListenerObject|null}\n   */\n  transitionEndHandler = null;\n\n  /**\n   * Instantiate and save the instance to the cache.\n   * @param {HTMLElement} element The HTML element.\n   */\n  constructor(element) {\n    cache.set(element, this);\n  }\n\n  /**\n   * Get the transition class attached to the given element.\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) {\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 *\n * @param {HTMLElement}     element         The element to update.\n * @param {ClassesOrStyles} classesOrStyles The classes or styles to apply.\n * @param {'add'|'remove'}  method          The method to use, one of `add` or `remove`.\n */\nexport function setClassesOrStyles(element, classesOrStyles, method = 'add') {\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 *\n * @param  {HTMLElement} element The element to test.\n * @returns {boolean}             The result of the test.\n */\nfunction testTransition(element) {\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 *\n * @param  {HTMLElement}      element         The target element.\n * @param  {TransitionStyles} classesOrStyles The classes or styles definition.\n * @returns {Promise<void>}\n */\nasync function start(element, classesOrStyles) {\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 *\n * @param  {HTMLElement}      element         The target element.\n * @param  {TransitionStyles} classesOrStyles The classes or styles definition.\n * @returns {Promise}\n */\nasync function next(element, classesOrStyles) {\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 *\n * @param {HTMLElement}   element         The target element.\n * @param {string | Object} classesOrStyles The classes or styles definition.\n * @param {string}        mode            Whether to remove or keep the `to`  classes/styles.\n * @returns {void}\n */\nfunction end(element, classesOrStyles, mode = 'remove') {\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 heavily 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(element, name, endMode = 'remove') {\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 default async function transition(elementOrElements, name, endMode = 'remove') {\n  await Promise.all(\n    eachElements(elementOrElements, (element) => singleTransition(element, name, endMode)),\n  );\n}\n"],
-  "mappings": "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",
+  "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   * @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 default 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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",
   "names": []
 }

package/utils/css/transition.d.ts

@@ -1,23 +1,19 @@
+export declare type ClassesOrStyles = string | string[] | Partial<CSSStyleDeclaration>;
+export declare type TransitionStyles = {
+    from?: ClassesOrStyles;
+    active?: ClassesOrStyles;
+    to?: ClassesOrStyles;
+};
 /**
  * Update either the classes or the styles of an element with the given method.
- *
- * @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: ClassesOrStyles, method?: 'add' | 'remove'): void;
+export declare function setClassesOrStyles(element: HTMLElement, classesOrStyles: ClassesOrStyles, method?: 'add' | 'remove'): void;
 /**
  * Manage CSS transition with class.
  *
  * @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.
+ * @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.
  */
-export default function transition(elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>, name: string | TransitionStyles, endMode?: string): Promise<void>;
-export type ClassesOrStyles = string | string[] | Partial<CSSStyleDeclaration>;
-export type TransitionStyles = {
-    from?: ClassesOrStyles;
-    active?: ClassesOrStyles;
-    to?: ClassesOrStyles;
-};
+export default function transition(elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>, name: string | TransitionStyles, endMode?: 'keep' | 'remove'): Promise<void>;

package/utils/css/transition.js

@@ -45,7 +45,7 @@ async function next(element, classesOrStyles) {
   return new Promise(async (resolve) => {
     if (hasTransition) {
       const trs = Transition.getInstance(element);
-      trs.transitionEndHandler = resolve;
+      trs.transitionEndHandler = () => resolve();
       element.addEventListener("transitionend", trs.transitionEndHandler, false);
     }
     setClassesOrStyles(element, classesOrStyles.from, "remove");

package/utils/css/transition.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../packages/js-toolkit/utils/css/transition.js"],
-  "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\n/**\n * @typedef {string|string[]|Partial<CSSStyleDeclaration>} ClassesOrStyles\n * @typedef {{ from?: ClassesOrStyles, active?: ClassesOrStyles, to?: ClassesOrStyles }} TransitionStyles\n */\n\n/**\n * Transition class.\n */\nclass Transition {\n  /**\n   * Is a transition currently running?\n   * @type {boolean}\n   */\n  isTransitioning = false;\n\n  /**\n   * A callback to execute when the transition ends.\n   * @type {EventListenerOrEventListenerObject|null}\n   */\n  transitionEndHandler = null;\n\n  /**\n   * Instantiate and save the instance to the cache.\n   * @param {HTMLElement} element The HTML element.\n   */\n  constructor(element) {\n    cache.set(element, this);\n  }\n\n  /**\n   * Get the transition class attached to the given element.\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) {\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 *\n * @param {HTMLElement}     element         The element to update.\n * @param {ClassesOrStyles} classesOrStyles The classes or styles to apply.\n * @param {'add'|'remove'}  method          The method to use, one of `add` or `remove`.\n */\nexport function setClassesOrStyles(element, classesOrStyles, method = 'add') {\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 *\n * @param  {HTMLElement} element The element to test.\n * @returns {boolean}             The result of the test.\n */\nfunction testTransition(element) {\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 *\n * @param  {HTMLElement}      element         The target element.\n * @param  {TransitionStyles} classesOrStyles The classes or styles definition.\n * @returns {Promise<void>}\n */\nasync function start(element, classesOrStyles) {\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 *\n * @param  {HTMLElement}      element         The target element.\n * @param  {TransitionStyles} classesOrStyles The classes or styles definition.\n * @returns {Promise}\n */\nasync function next(element, classesOrStyles) {\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 *\n * @param {HTMLElement}   element         The target element.\n * @param {string | Object} classesOrStyles The classes or styles definition.\n * @param {string}        mode            Whether to remove or keep the `to`  classes/styles.\n * @returns {void}\n */\nfunction end(element, classesOrStyles, mode = 'remove') {\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 heavily 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(element, name, endMode = 'remove') {\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 default async function transition(elementOrElements, name, endMode = 'remove') {\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;AAU1B,MAAM,WAAW;AAAA,EAKf,kBAAkB;AAAA,EAMlB,uBAAuB;AAAA,EAMvB,YAAY,SAAS;AACnB,UAAM,IAAI,SAAS,IAAI;AAAA,EACzB;AAAA,EAOA,OAAO,YAAY,SAAS;AAC1B,QAAI,WAAW,MAAM,IAAI,OAAO;AAEhC,QAAI,CAAC,UAAU;AACb,iBAAW,IAAI,KAAK,OAAO;AAAA,IAC7B;AAEA,WAAO;AAAA,EACT;AACF;AASO,SAAS,mBAAmB,SAAS,iBAAiB,SAAS,OAAO;AAC3E,MAAI,SAAS,eAAe,KAAK,QAAQ,eAAe,GAAG;AACzD,YAAQ,QAAQ,SAAS,eAAe;AAAA,EAC1C,OAAO;AACL,WAAO,QAAQ,SAAS,eAAe;AAAA,EACzC;AACF;AAQA,SAAS,eAAe,SAAS;AAC/B,MAAI,CAAC,UAAU,GAAG;AAChB,WAAO;AAAA,EACT;AAEA,QAAM,EAAE,mBAAmB,IAAI,OAAO,iBAAiB,OAAO;AAC9D,SAAO,CAAC,CAAC,sBAAsB,uBAAuB;AACxD;AASA,eAAe,MAAM,SAAS,iBAAiB;AAC7C,QAAM,MAAM,WAAW,YAAY,OAAO;AAC1C,MAAI,kBAAkB;AACtB,qBAAmB,SAAS,gBAAgB,IAAI;AAChD,QAAM,UAAU;AAChB,qBAAmB,SAAS,gBAAgB,MAAM;AACpD;AASA,eAAe,KAAK,SAAS,iBAAiB;AAC5C,QAAM,gBAAgB,eAAe,OAAO;AAG5C,SAAO,IAAI,QAAQ,OAAO,YAAY;AACpC,QAAI,eAAe;AACjB,YAAM,MAAM,WAAW,YAAY,OAAO;AAC1C,UAAI,uBAAuB;AAC3B,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;AAUA,SAAS,IAAI,SAAS,iBAAiB,OAAO,UAAU;AACtD,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,iBAAiB,SAAS,MAAM,UAAU,UAAU;AAEjE,QAAM,kBAAkB,SAAS,IAAI,IACjC;AAAA,IACE,MAAM,GAAG;AAAA,IACT,QAAQ,GAAG;AAAA,IACX,IAAI,GAAG;AAAA,EACT,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;AAUA,eAAO,WAAkC,mBAAmB,MAAM,UAAU,UAAU;AACpF,QAAM,QAAQ;AAAA,IACZ,aAAa,mBAAmB,CAAC,YAAY,iBAAiB,SAAS,MAAM,OAAO,CAAC;AAAA,EACvF;AACF;",
+  "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   * @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 default 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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",
   "names": []
 }

package/utils/debounce.cjs

@@ -16,7 +16,7 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/js-toolkit/utils/debounce.js
+// packages/js-toolkit/utils/debounce.ts
 var debounce_exports = {};
 __export(debounce_exports, {
   default: () => debounce

package/utils/debounce.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../packages/js-toolkit/utils/debounce.js"],
-  "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:any[]) => void} fn The function to call.\n * @param   {number} [delay=300] The delay in ms to wait before calling the function.\n * @returns {(...args:any[]) => void} The debounced function.\n */\nexport default function debounce(fn, delay = 300) {\n  let timeout;\n  return function debounced(...args) {\n    clearTimeout(timeout);\n    timeout = setTimeout(() => {\n      fn(...args);\n    }, delay);\n  };\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AASe,SAAR,SAA0B,IAAI,QAAQ,KAAK;AAChD,MAAI;AACJ,SAAO,SAAS,aAAa,MAAM;AACjC,iBAAa,OAAO;AACpB,cAAU,WAAW,MAAM;AACzB,SAAG,GAAG,IAAI;AAAA,IACZ,GAAG,KAAK;AAAA,EACV;AACF;",
+  "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 default 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": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AASe,SAAR,SACL,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/debounce.d.ts

@@ -3,8 +3,8 @@
  * will not be triggered. The function will be called after it stops
  * being called for N milliseconds.
  *
- * @param   {(...args:any[]) => void} fn The function to call.
+ * @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:any[]) => void} The debounced function.
+ * @returns {(...args:unknown[]) => void} The debounced function.
  */
-export default function debounce(fn: (...args: any[]) => void, delay?: number): (...args: any[]) => void;
+export default 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.js"],
-  "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:any[]) => void} fn The function to call.\n * @param   {number} [delay=300] The delay in ms to wait before calling the function.\n * @returns {(...args:any[]) => void} The debounced function.\n */\nexport default function debounce(fn, delay = 300) {\n  let timeout;\n  return function debounced(...args) {\n    clearTimeout(timeout);\n    timeout = setTimeout(() => {\n      fn(...args);\n    }, delay);\n  };\n}\n"],
-  "mappings": "AASe,SAAR,SAA0B,IAAI,QAAQ,KAAK;AAChD,MAAI;AACJ,SAAO,SAAS,aAAa,MAAM;AACjC,iBAAa,OAAO;AACpB,cAAU,WAAW,MAAM;AACzB,SAAG,GAAG,IAAI;AAAA,IACZ,GAAG,KAAK;AAAA,EACV;AACF;",
+  "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 default 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": "AASe,SAAR,SACL,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/focusTrap.cjs

@@ -22,7 +22,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/js-toolkit/utils/focusTrap.js
+// packages/js-toolkit/utils/focusTrap.ts
 var focusTrap_exports = {};
 __export(focusTrap_exports, {
   default: () => useFocusTrap,
@@ -57,7 +57,9 @@ function trap(element, event) {
   if (!focusedBefore) {
     focusedBefore = document.activeElement;
   }
-  const focusableChildren = Array.from(element.querySelectorAll(FOCUSABLE_ELEMENTS.join(", ")));
+  const focusableChildren = Array.from(
+    element.querySelectorAll(FOCUSABLE_ELEMENTS.join(", "))
+  );
   const focusedItemIndex = document.activeElement instanceof HTMLElement ? focusableChildren.indexOf(document.activeElement) : -1;
   if (!focusableChildren.length) {
     return;

package/utils/focusTrap.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../packages/js-toolkit/utils/focusTrap.js"],
-  "sourcesContent": ["import keyCodes from './keyCodes.js';\nimport { isFunction } from './is.js';\n\nconst FOCUSABLE_ELEMENTS = [\n  'a[href]:not([tabindex^=\"-\"]):not([inert])',\n  'area[href]:not([tabindex^=\"-\"]):not([inert])',\n  'input:not([disabled]):not([inert])',\n  'select:not([disabled]):not([inert])',\n  'textarea:not([disabled]):not([inert])',\n  'button:not([disabled]):not([inert])',\n  'iframe:not([tabindex^=\"-\"]):not([inert])',\n  'audio:not([tabindex^=\"-\"]):not([inert])',\n  'video:not([tabindex^=\"-\"]):not([inert])',\n  '[contenteditable]:not([tabindex^=\"-\"]):not([inert])',\n  '[tabindex]:not([tabindex^=\"-\"]):not([inert])',\n];\n\nlet focusedBefore;\n\n/**\n * Save the current active element.\n */\nexport function saveActiveElement() {\n  focusedBefore = document.activeElement;\n}\n\n/**\n * Trap tab navigation inside the given element.\n * @param {HTMLElement} element The element in which to trap the tabulations.\n * @param {KeyboardEvent} event The keydown or keyup event.\n */\nexport function trap(element, event) {\n  if (event.keyCode !== keyCodes.TAB) {\n    return;\n  }\n\n  // Save the previous focused element\n  if (!focusedBefore) {\n    focusedBefore = document.activeElement;\n  }\n\n  /** @type {Array<HTMLElement>} */\n  const focusableChildren = Array.from(element.querySelectorAll(FOCUSABLE_ELEMENTS.join(', ')));\n  const focusedItemIndex =\n    document.activeElement instanceof HTMLElement\n      ? focusableChildren.indexOf(document.activeElement)\n      : -1;\n\n  if (!focusableChildren.length) {\n    return;\n  }\n\n  if (focusedItemIndex < 0) {\n    focusableChildren[0].focus();\n    event.preventDefault();\n  }\n\n  // If the SHIFT key is being pressed while tabbing (moving backwards) and\n  // the currently focused item is the first one, move the focus to the last\n  // focusable item from the dialog element\n  if (event.shiftKey && focusedItemIndex === 0) {\n    focusableChildren.at(-1).focus();\n    event.preventDefault();\n  }\n\n  // If the SHIFT key is not being pressed (moving forwards) and the currently\n  // focused item is the last one, move the focus to the first focusable item\n  // from the dialog element\n  else if (!event.shiftKey && focusedItemIndex === focusableChildren.length - 1) {\n    focusableChildren[0].focus();\n    event.preventDefault();\n  }\n}\n\n/**\n * Untrap the tab navigation.\n */\nexport function untrap() {\n  if (focusedBefore && isFunction(focusedBefore.focus)) {\n    focusedBefore.focus();\n    focusedBefore = null;\n  }\n}\n\n/**\n * Use a trap/untrap tabs logic.\n * @returns {{ trap: trap, untrap: untrap, saveActiveElement: saveActiveElement }}\n */\nexport default function useFocusTrap() {\n  return { trap, untrap, saveActiveElement };\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAAqB;AACrB,gBAA2B;AAE3B,IAAM,qBAAqB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,IAAI;AAKG,SAAS,oBAAoB;AAClC,kBAAgB,SAAS;AAC3B;AAOO,SAAS,KAAK,SAAS,OAAO;AACnC,MAAI,MAAM,YAAY,gBAAAA,QAAS,KAAK;AAClC;AAAA,EACF;AAGA,MAAI,CAAC,eAAe;AAClB,oBAAgB,SAAS;AAAA,EAC3B;AAGA,QAAM,oBAAoB,MAAM,KAAK,QAAQ,iBAAiB,mBAAmB,KAAK,IAAI,CAAC,CAAC;AAC5F,QAAM,mBACJ,SAAS,yBAAyB,cAC9B,kBAAkB,QAAQ,SAAS,aAAa,IAChD;AAEN,MAAI,CAAC,kBAAkB,QAAQ;AAC7B;AAAA,EACF;AAEA,MAAI,mBAAmB,GAAG;AACxB,sBAAkB,GAAG,MAAM;AAC3B,UAAM,eAAe;AAAA,EACvB;AAKA,MAAI,MAAM,YAAY,qBAAqB,GAAG;AAC5C,sBAAkB,GAAG,EAAE,EAAE,MAAM;AAC/B,UAAM,eAAe;AAAA,EACvB,WAKS,CAAC,MAAM,YAAY,qBAAqB,kBAAkB,SAAS,GAAG;AAC7E,sBAAkB,GAAG,MAAM;AAC3B,UAAM,eAAe;AAAA,EACvB;AACF;AAKO,SAAS,SAAS;AACvB,MAAI,qBAAiB,sBAAW,cAAc,KAAK,GAAG;AACpD,kBAAc,MAAM;AACpB,oBAAgB;AAAA,EAClB;AACF;AAMe,SAAR,eAAgC;AACrC,SAAO,EAAE,MAAM,QAAQ,kBAAkB;AAC3C;",
+  "sources": ["../../packages/js-toolkit/utils/focusTrap.ts"],
+  "sourcesContent": ["import keyCodes from './keyCodes.js';\nimport { isFunction } from './is.js';\n\nconst FOCUSABLE_ELEMENTS = [\n  'a[href]:not([tabindex^=\"-\"]):not([inert])',\n  'area[href]:not([tabindex^=\"-\"]):not([inert])',\n  'input:not([disabled]):not([inert])',\n  'select:not([disabled]):not([inert])',\n  'textarea:not([disabled]):not([inert])',\n  'button:not([disabled]):not([inert])',\n  'iframe:not([tabindex^=\"-\"]):not([inert])',\n  'audio:not([tabindex^=\"-\"]):not([inert])',\n  'video:not([tabindex^=\"-\"]):not([inert])',\n  '[contenteditable]:not([tabindex^=\"-\"]):not([inert])',\n  '[tabindex]:not([tabindex^=\"-\"]):not([inert])',\n];\n\nlet focusedBefore;\n\n/**\n * Save the current active element.\n */\nexport function saveActiveElement() {\n  focusedBefore = document.activeElement;\n}\n\n/**\n * Trap tab navigation inside the given element.\n * @param {HTMLElement} element The element in which to trap the tabulations.\n * @param {KeyboardEvent} event The keydown or keyup event.\n */\nexport function trap(element: HTMLElement, event: KeyboardEvent) {\n  if (event.keyCode !== keyCodes.TAB) {\n    return;\n  }\n\n  // Save the previous focused element\n  if (!focusedBefore) {\n    focusedBefore = document.activeElement;\n  }\n\n  const focusableChildren: HTMLElement[] = Array.from(\n    element.querySelectorAll(FOCUSABLE_ELEMENTS.join(', ')),\n  );\n  const focusedItemIndex =\n    document.activeElement instanceof HTMLElement\n      ? focusableChildren.indexOf(document.activeElement)\n      : -1;\n\n  if (!focusableChildren.length) {\n    return;\n  }\n\n  if (focusedItemIndex < 0) {\n    focusableChildren[0].focus();\n    event.preventDefault();\n  }\n\n  // If the SHIFT key is being pressed while tabbing (moving backwards) and\n  // the currently focused item is the first one, move the focus to the last\n  // focusable item from the dialog element\n  if (event.shiftKey && focusedItemIndex === 0) {\n    focusableChildren.at(-1).focus();\n    event.preventDefault();\n  }\n\n  // If the SHIFT key is not being pressed (moving forwards) and the currently\n  // focused item is the last one, move the focus to the first focusable item\n  // from the dialog element\n  else if (!event.shiftKey && focusedItemIndex === focusableChildren.length - 1) {\n    focusableChildren[0].focus();\n    event.preventDefault();\n  }\n}\n\n/**\n * Untrap the tab navigation.\n */\nexport function untrap() {\n  if (focusedBefore && isFunction(focusedBefore.focus)) {\n    focusedBefore.focus();\n    focusedBefore = null;\n  }\n}\n\n/**\n * Use a trap/untrap tabs logic.\n */\nexport default function useFocusTrap() {\n  return { trap, untrap, saveActiveElement };\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAAqB;AACrB,gBAA2B;AAE3B,IAAM,qBAAqB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,IAAI;AAKG,SAAS,oBAAoB;AAClC,kBAAgB,SAAS;AAC3B;AAOO,SAAS,KAAK,SAAsB,OAAsB;AAC/D,MAAI,MAAM,YAAY,gBAAAA,QAAS,KAAK;AAClC;AAAA,EACF;AAGA,MAAI,CAAC,eAAe;AAClB,oBAAgB,SAAS;AAAA,EAC3B;AAEA,QAAM,oBAAmC,MAAM;AAAA,IAC7C,QAAQ,iBAAiB,mBAAmB,KAAK,IAAI,CAAC;AAAA,EACxD;AACA,QAAM,mBACJ,SAAS,yBAAyB,cAC9B,kBAAkB,QAAQ,SAAS,aAAa,IAChD;AAEN,MAAI,CAAC,kBAAkB,QAAQ;AAC7B;AAAA,EACF;AAEA,MAAI,mBAAmB,GAAG;AACxB,sBAAkB,GAAG,MAAM;AAC3B,UAAM,eAAe;AAAA,EACvB;AAKA,MAAI,MAAM,YAAY,qBAAqB,GAAG;AAC5C,sBAAkB,GAAG,EAAE,EAAE,MAAM;AAC/B,UAAM,eAAe;AAAA,EACvB,WAKS,CAAC,MAAM,YAAY,qBAAqB,kBAAkB,SAAS,GAAG;AAC7E,sBAAkB,GAAG,MAAM;AAC3B,UAAM,eAAe;AAAA,EACvB;AACF;AAKO,SAAS,SAAS;AACvB,MAAI,qBAAiB,sBAAW,cAAc,KAAK,GAAG;AACpD,kBAAc,MAAM;AACpB,oBAAgB;AAAA,EAClB;AACF;AAKe,SAAR,eAAgC;AACrC,SAAO,EAAE,MAAM,QAAQ,kBAAkB;AAC3C;",
   "names": ["keyCodes"]
 }

package/utils/focusTrap.d.ts

@@ -1,20 +1,19 @@
 /**
  * Save the current active element.
  */
-export function saveActiveElement(): void;
+export declare function saveActiveElement(): void;
 /**
  * Trap tab navigation inside the given element.
  * @param {HTMLElement} element The element in which to trap the tabulations.
  * @param {KeyboardEvent} event The keydown or keyup event.
  */
-export function trap(element: HTMLElement, event: KeyboardEvent): void;
+export declare function trap(element: HTMLElement, event: KeyboardEvent): void;
 /**
  * Untrap the tab navigation.
  */
-export function untrap(): void;
+export declare function untrap(): void;
 /**
  * Use a trap/untrap tabs logic.
- * @returns {{ trap: trap, untrap: untrap, saveActiveElement: saveActiveElement }}
  */
 export default function useFocusTrap(): {
     trap: typeof trap;

package/utils/focusTrap.js

@@ -24,7 +24,9 @@ function trap(element, event) {
   if (!focusedBefore) {
     focusedBefore = document.activeElement;
   }
-  const focusableChildren = Array.from(element.querySelectorAll(FOCUSABLE_ELEMENTS.join(", ")));
+  const focusableChildren = Array.from(
+    element.querySelectorAll(FOCUSABLE_ELEMENTS.join(", "))
+  );
   const focusedItemIndex = document.activeElement instanceof HTMLElement ? focusableChildren.indexOf(document.activeElement) : -1;
   if (!focusableChildren.length) {
     return;

package/utils/focusTrap.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../packages/js-toolkit/utils/focusTrap.js"],
-  "sourcesContent": ["import keyCodes from './keyCodes.js';\nimport { isFunction } from './is.js';\n\nconst FOCUSABLE_ELEMENTS = [\n  'a[href]:not([tabindex^=\"-\"]):not([inert])',\n  'area[href]:not([tabindex^=\"-\"]):not([inert])',\n  'input:not([disabled]):not([inert])',\n  'select:not([disabled]):not([inert])',\n  'textarea:not([disabled]):not([inert])',\n  'button:not([disabled]):not([inert])',\n  'iframe:not([tabindex^=\"-\"]):not([inert])',\n  'audio:not([tabindex^=\"-\"]):not([inert])',\n  'video:not([tabindex^=\"-\"]):not([inert])',\n  '[contenteditable]:not([tabindex^=\"-\"]):not([inert])',\n  '[tabindex]:not([tabindex^=\"-\"]):not([inert])',\n];\n\nlet focusedBefore;\n\n/**\n * Save the current active element.\n */\nexport function saveActiveElement() {\n  focusedBefore = document.activeElement;\n}\n\n/**\n * Trap tab navigation inside the given element.\n * @param {HTMLElement} element The element in which to trap the tabulations.\n * @param {KeyboardEvent} event The keydown or keyup event.\n */\nexport function trap(element, event) {\n  if (event.keyCode !== keyCodes.TAB) {\n    return;\n  }\n\n  // Save the previous focused element\n  if (!focusedBefore) {\n    focusedBefore = document.activeElement;\n  }\n\n  /** @type {Array<HTMLElement>} */\n  const focusableChildren = Array.from(element.querySelectorAll(FOCUSABLE_ELEMENTS.join(', ')));\n  const focusedItemIndex =\n    document.activeElement instanceof HTMLElement\n      ? focusableChildren.indexOf(document.activeElement)\n      : -1;\n\n  if (!focusableChildren.length) {\n    return;\n  }\n\n  if (focusedItemIndex < 0) {\n    focusableChildren[0].focus();\n    event.preventDefault();\n  }\n\n  // If the SHIFT key is being pressed while tabbing (moving backwards) and\n  // the currently focused item is the first one, move the focus to the last\n  // focusable item from the dialog element\n  if (event.shiftKey && focusedItemIndex === 0) {\n    focusableChildren.at(-1).focus();\n    event.preventDefault();\n  }\n\n  // If the SHIFT key is not being pressed (moving forwards) and the currently\n  // focused item is the last one, move the focus to the first focusable item\n  // from the dialog element\n  else if (!event.shiftKey && focusedItemIndex === focusableChildren.length - 1) {\n    focusableChildren[0].focus();\n    event.preventDefault();\n  }\n}\n\n/**\n * Untrap the tab navigation.\n */\nexport function untrap() {\n  if (focusedBefore && isFunction(focusedBefore.focus)) {\n    focusedBefore.focus();\n    focusedBefore = null;\n  }\n}\n\n/**\n * Use a trap/untrap tabs logic.\n * @returns {{ trap: trap, untrap: untrap, saveActiveElement: saveActiveElement }}\n */\nexport default function useFocusTrap() {\n  return { trap, untrap, saveActiveElement };\n}\n"],
-  "mappings": "AAAA,OAAO,cAAc;AACrB,SAAS,kBAAkB;AAE3B,MAAM,qBAAqB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,IAAI;AAKG,SAAS,oBAAoB;AAClC,kBAAgB,SAAS;AAC3B;AAOO,SAAS,KAAK,SAAS,OAAO;AACnC,MAAI,MAAM,YAAY,SAAS,KAAK;AAClC;AAAA,EACF;AAGA,MAAI,CAAC,eAAe;AAClB,oBAAgB,SAAS;AAAA,EAC3B;AAGA,QAAM,oBAAoB,MAAM,KAAK,QAAQ,iBAAiB,mBAAmB,KAAK,IAAI,CAAC,CAAC;AAC5F,QAAM,mBACJ,SAAS,yBAAyB,cAC9B,kBAAkB,QAAQ,SAAS,aAAa,IAChD;AAEN,MAAI,CAAC,kBAAkB,QAAQ;AAC7B;AAAA,EACF;AAEA,MAAI,mBAAmB,GAAG;AACxB,sBAAkB,GAAG,MAAM;AAC3B,UAAM,eAAe;AAAA,EACvB;AAKA,MAAI,MAAM,YAAY,qBAAqB,GAAG;AAC5C,sBAAkB,GAAG,EAAE,EAAE,MAAM;AAC/B,UAAM,eAAe;AAAA,EACvB,WAKS,CAAC,MAAM,YAAY,qBAAqB,kBAAkB,SAAS,GAAG;AAC7E,sBAAkB,GAAG,MAAM;AAC3B,UAAM,eAAe;AAAA,EACvB;AACF;AAKO,SAAS,SAAS;AACvB,MAAI,iBAAiB,WAAW,cAAc,KAAK,GAAG;AACpD,kBAAc,MAAM;AACpB,oBAAgB;AAAA,EAClB;AACF;AAMe,SAAR,eAAgC;AACrC,SAAO,EAAE,MAAM,QAAQ,kBAAkB;AAC3C;",
+  "sources": ["../../packages/js-toolkit/utils/focusTrap.ts"],
+  "sourcesContent": ["import keyCodes from './keyCodes.js';\nimport { isFunction } from './is.js';\n\nconst FOCUSABLE_ELEMENTS = [\n  'a[href]:not([tabindex^=\"-\"]):not([inert])',\n  'area[href]:not([tabindex^=\"-\"]):not([inert])',\n  'input:not([disabled]):not([inert])',\n  'select:not([disabled]):not([inert])',\n  'textarea:not([disabled]):not([inert])',\n  'button:not([disabled]):not([inert])',\n  'iframe:not([tabindex^=\"-\"]):not([inert])',\n  'audio:not([tabindex^=\"-\"]):not([inert])',\n  'video:not([tabindex^=\"-\"]):not([inert])',\n  '[contenteditable]:not([tabindex^=\"-\"]):not([inert])',\n  '[tabindex]:not([tabindex^=\"-\"]):not([inert])',\n];\n\nlet focusedBefore;\n\n/**\n * Save the current active element.\n */\nexport function saveActiveElement() {\n  focusedBefore = document.activeElement;\n}\n\n/**\n * Trap tab navigation inside the given element.\n * @param {HTMLElement} element The element in which to trap the tabulations.\n * @param {KeyboardEvent} event The keydown or keyup event.\n */\nexport function trap(element: HTMLElement, event: KeyboardEvent) {\n  if (event.keyCode !== keyCodes.TAB) {\n    return;\n  }\n\n  // Save the previous focused element\n  if (!focusedBefore) {\n    focusedBefore = document.activeElement;\n  }\n\n  const focusableChildren: HTMLElement[] = Array.from(\n    element.querySelectorAll(FOCUSABLE_ELEMENTS.join(', ')),\n  );\n  const focusedItemIndex =\n    document.activeElement instanceof HTMLElement\n      ? focusableChildren.indexOf(document.activeElement)\n      : -1;\n\n  if (!focusableChildren.length) {\n    return;\n  }\n\n  if (focusedItemIndex < 0) {\n    focusableChildren[0].focus();\n    event.preventDefault();\n  }\n\n  // If the SHIFT key is being pressed while tabbing (moving backwards) and\n  // the currently focused item is the first one, move the focus to the last\n  // focusable item from the dialog element\n  if (event.shiftKey && focusedItemIndex === 0) {\n    focusableChildren.at(-1).focus();\n    event.preventDefault();\n  }\n\n  // If the SHIFT key is not being pressed (moving forwards) and the currently\n  // focused item is the last one, move the focus to the first focusable item\n  // from the dialog element\n  else if (!event.shiftKey && focusedItemIndex === focusableChildren.length - 1) {\n    focusableChildren[0].focus();\n    event.preventDefault();\n  }\n}\n\n/**\n * Untrap the tab navigation.\n */\nexport function untrap() {\n  if (focusedBefore && isFunction(focusedBefore.focus)) {\n    focusedBefore.focus();\n    focusedBefore = null;\n  }\n}\n\n/**\n * Use a trap/untrap tabs logic.\n */\nexport default function useFocusTrap() {\n  return { trap, untrap, saveActiveElement };\n}\n"],
+  "mappings": "AAAA,OAAO,cAAc;AACrB,SAAS,kBAAkB;AAE3B,MAAM,qBAAqB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,IAAI;AAKG,SAAS,oBAAoB;AAClC,kBAAgB,SAAS;AAC3B;AAOO,SAAS,KAAK,SAAsB,OAAsB;AAC/D,MAAI,MAAM,YAAY,SAAS,KAAK;AAClC;AAAA,EACF;AAGA,MAAI,CAAC,eAAe;AAClB,oBAAgB,SAAS;AAAA,EAC3B;AAEA,QAAM,oBAAmC,MAAM;AAAA,IAC7C,QAAQ,iBAAiB,mBAAmB,KAAK,IAAI,CAAC;AAAA,EACxD;AACA,QAAM,mBACJ,SAAS,yBAAyB,cAC9B,kBAAkB,QAAQ,SAAS,aAAa,IAChD;AAEN,MAAI,CAAC,kBAAkB,QAAQ;AAC7B;AAAA,EACF;AAEA,MAAI,mBAAmB,GAAG;AACxB,sBAAkB,GAAG,MAAM;AAC3B,UAAM,eAAe;AAAA,EACvB;AAKA,MAAI,MAAM,YAAY,qBAAqB,GAAG;AAC5C,sBAAkB,GAAG,EAAE,EAAE,MAAM;AAC/B,UAAM,eAAe;AAAA,EACvB,WAKS,CAAC,MAAM,YAAY,qBAAqB,kBAAkB,SAAS,GAAG;AAC7E,sBAAkB,GAAG,MAAM;AAC3B,UAAM,eAAe;AAAA,EACvB;AACF;AAKO,SAAS,SAAS;AACvB,MAAI,iBAAiB,WAAW,cAAc,KAAK,GAAG;AACpD,kBAAc,MAAM;AACpB,oBAAgB;AAAA,EAClB;AACF;AAKe,SAAR,eAAgC;AACrC,SAAO,EAAE,MAAM,QAAQ,kBAAkB;AAC3C;",
   "names": []
 }

package/utils/has.cjs

@@ -16,7 +16,7 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/js-toolkit/utils/has.js
+// packages/js-toolkit/utils/has.ts
 var has_exports = {};
 __export(has_exports, {
   hasWindow: () => hasWindow

package/utils/has.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../packages/js-toolkit/utils/has.js"],
-  "sourcesContent": ["/**\n * Test if the current context as a global `window` object available.\n *\n * @returns {boolean}\n */\nexport function hasWindow() {\n  return typeof window !== 'undefined';\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKO,SAAS,YAAY;AAC1B,SAAO,OAAO,WAAW;AAC3B;",
+  "sources": ["../../packages/js-toolkit/utils/has.ts"],
+  "sourcesContent": ["/**\n * Test if the current context as a global `window` object available.\n */\nexport function hasWindow() {\n  return typeof window !== 'undefined';\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGO,SAAS,YAAY;AAC1B,SAAO,OAAO,WAAW;AAC3B;",
   "names": []
 }

package/utils/has.d.ts

@@ -1,6 +1,4 @@
 /**
  * Test if the current context as a global `window` object available.
- *
- * @returns {boolean}
  */
-export function hasWindow(): boolean;
+export declare function hasWindow(): boolean;

package/utils/has.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../packages/js-toolkit/utils/has.js"],
-  "sourcesContent": ["/**\n * Test if the current context as a global `window` object available.\n *\n * @returns {boolean}\n */\nexport function hasWindow() {\n  return typeof window !== 'undefined';\n}\n"],
-  "mappings": "AAKO,SAAS,YAAY;AAC1B,SAAO,OAAO,WAAW;AAC3B;",
+  "sources": ["../../packages/js-toolkit/utils/has.ts"],
+  "sourcesContent": ["/**\n * Test if the current context as a global `window` object available.\n */\nexport function hasWindow() {\n  return typeof window !== 'undefined';\n}\n"],
+  "mappings": "AAGO,SAAS,YAAY;AAC1B,SAAO,OAAO,WAAW;AAC3B;",
   "names": []
 }

package/utils/history.cjs

@@ -16,7 +16,7 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/js-toolkit/utils/history.js
+// packages/js-toolkit/utils/history.ts
 var history_exports = {};
 __export(history_exports, {
   objectToURLSearchParams: () => objectToURLSearchParams,