@studiometa/ui 0.2.12 → 0.2.14

package/atoms/AnchorScrollTo/AnchorScrollTo.cjs

@@ -21,10 +21,10 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 
-// packages/ui/atoms/AnchorScrollTo/AnchorScrollTo.js
+// packages/ui/atoms/AnchorScrollTo/AnchorScrollTo.ts
 var AnchorScrollTo_exports = {};
 __export(AnchorScrollTo_exports, {
-  default: () => AnchorScrollTo
+  AnchorScrollTo: () => AnchorScrollTo
 });
 module.exports = __toCommonJS(AnchorScrollTo_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
@@ -37,7 +37,7 @@ var AnchorScrollTo = class extends import_js_toolkit.Base {
     try {
       (0, import_utils.scrollTo)(this.targetSelector);
       event.preventDefault();
-    } catch (err) {
+    } catch {
     }
   }
 };

package/atoms/AnchorScrollTo/AnchorScrollTo.d.ts

@@ -1,19 +1,16 @@
-/**
- * @typedef {AnchorScrollTo & {
- *   $el: HTMLAnchorElement
- * }} AnchorScrollToInterface
- */
+import { Base } from '@studiometa/js-toolkit';
+import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';
+export interface AnchorScrollToProps extends BaseProps {
+    $el: HTMLAnchorElement;
+}
 /**
  * AncorScrollTo class.
  */
-export default class AnchorScrollTo extends Base {
-    static config: {
-        name: string;
-    };
+export declare class AnchorScrollTo<T extends BaseProps = BaseProps> extends Base<AnchorScrollToProps & T> {
+    static config: BaseConfig;
     /**
      * Get the target selector.
      *
-     * @this    {AnchorScrollToInterface}
      * @returns {string}
      */
     get targetSelector(): string;
@@ -23,9 +20,5 @@ export default class AnchorScrollTo extends Base {
      * @param   {MouseEvent} event
      * @returns {void}
      */
-    onClick(event: MouseEvent): void;
+    onClick(event: any): void;
 }
-export type AnchorScrollToInterface = AnchorScrollTo & {
-    $el: HTMLAnchorElement;
-};
-import { Base } from "@studiometa/js-toolkit";

package/atoms/AnchorScrollTo/AnchorScrollTo.js

@@ -1 +1,26 @@
-import{Base as r}from"@studiometa/js-toolkit";import{scrollTo as e}from"@studiometa/js-toolkit/utils";class o extends r{static config={name:"AnchorScrollTo"};get targetSelector(){return this.$el.hash}onClick(t){try{e(this.targetSelector),t.preventDefault()}catch{}}}export{o as default};
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { Base } from "@studiometa/js-toolkit";
+import { scrollTo } from "@studiometa/js-toolkit/utils";
+class AnchorScrollTo extends Base {
+  get targetSelector() {
+    return this.$el.hash;
+  }
+  onClick(event) {
+    try {
+      scrollTo(this.targetSelector);
+      event.preventDefault();
+    } catch {
+    }
+  }
+}
+__publicField(AnchorScrollTo, "config", {
+  name: "AnchorScrollTo"
+});
+export {
+  AnchorScrollTo
+};

package/atoms/AnchorScrollTo/index.cjs

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

package/atoms/AnchorScrollTo/index.d.ts

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

package/atoms/AnchorScrollTo/index.js

@@ -0,0 +1 @@
+export * from "./AnchorScrollTo.js";

package/atoms/Cursor/Cursor.cjs

@@ -21,21 +21,24 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 
-// packages/ui/atoms/Cursor/Cursor.js
+// packages/ui/atoms/Cursor/Cursor.ts
 var Cursor_exports = {};
 __export(Cursor_exports, {
-  default: () => Cursor
+  Cursor: () => Cursor
 });
 module.exports = __toCommonJS(Cursor_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
 var import_utils = require("@studiometa/js-toolkit/utils");
 var Cursor = class extends import_js_toolkit.Base {
-  x = 0;
-  y = 0;
-  scale = 0;
-  pointerX = 0;
-  pointerY = 0;
-  pointerScale = 0;
+  constructor() {
+    super(...arguments);
+    __publicField(this, "x", 0);
+    __publicField(this, "y", 0);
+    __publicField(this, "scale", 0);
+    __publicField(this, "pointerX", 0);
+    __publicField(this, "pointerY", 0);
+    __publicField(this, "pointerScale", 0);
+  }
   mounted() {
     this.x = 0;
     this.y = 0;
@@ -69,7 +72,11 @@ var Cursor = class extends import_js_toolkit.Base {
   ticked() {
     this.x = (0, import_utils.damp)(this.pointerX, this.x, this.$options.translateDampFactor);
     this.y = (0, import_utils.damp)(this.pointerY, this.y, this.$options.translateDampFactor);
-    this.scale = (0, import_utils.damp)(this.pointerScale, this.scale, this.pointerScale < this.scale ? this.$options.shrinkDampFactor : this.$options.growDampFactor);
+    this.scale = (0, import_utils.damp)(
+      this.pointerScale,
+      this.scale,
+      this.pointerScale < this.scale ? this.$options.shrinkDampFactor : this.$options.growDampFactor
+    );
     this.render({ x: this.x, y: this.y, scale: this.scale });
     if (this.x === this.pointerX && this.y === this.pointerY && this.scale === this.pointerScale) {
       this.$services.disable("ticked");

package/atoms/Cursor/Cursor.d.ts

@@ -1,123 +1,42 @@
+import { Base } from '@studiometa/js-toolkit';
+import type { BaseConfig, PointerServiceProps, BaseProps } from '@studiometa/js-toolkit';
+export interface CursorProps extends BaseProps {
+    $options: {
+        growSelectors: string;
+        shrinkSelectors: string;
+        scale: number;
+        growTo: number;
+        shrinkTo: number;
+        translateDampFactor: number;
+        growDampFactor: number;
+        shrinkDampFactor: number;
+    };
+}
 /**
- * @typedef {import('@studiometa/js-toolkit/services/pointer').PointerServiceProps} PointerServiceProps
- * @typedef {import('@studiometa/js-toolkit/Base').BaseOptions} BaseOptions
- */
-/**
- * @typedef {Object} CursorOptions
- * @property {string} growSelectors
- * @property {string} shrinkSelectors
- * @property {number} scale
- * @property {number} growTo
- * @property {number} shrinkTo
- * @property {number} translateDampFactor
- * @property {number} growDampFactor
- * @property {number} shrinkDampFactor
- */
-/**
- * @typedef {Object} CursorPrivateInterface
- * @property {BaseOptions & CursorOptions} $options
- */
-/**
- * @typedef {Cursor & CursorPrivateInterface} CursorInterface
- */
-/**
- * Custom cursor component.
+ * Cursor class.
  */
-export default class Cursor extends Base {
-    /**
-     * Class config.
-     */
-    static config: {
-        name: string;
-        options: {
-            growSelectors: {
-                type: StringConstructor;
-                default: string;
-            };
-            shrinkSelectors: {
-                type: StringConstructor;
-                default: string;
-            };
-            scale: {
-                type: NumberConstructor;
-                default: number;
-            };
-            growTo: {
-                type: NumberConstructor;
-                default: number;
-            };
-            shrinkTo: {
-                type: NumberConstructor;
-                default: number;
-            };
-            translateDampFactor: {
-                type: NumberConstructor;
-                default: number;
-            };
-            growDampFactor: {
-                type: NumberConstructor;
-                default: number;
-            };
-            shrinkDampFactor: {
-                type: NumberConstructor;
-                default: number;
-            };
-        };
-    };
-    /**
-     * @type {number}
-     */
+export declare class Cursor<T extends BaseProps = BaseProps> extends Base<CursorProps & T> {
+    static config: BaseConfig;
     x: number;
-    /**
-     * @type {number}
-     */
     y: number;
-    /**
-     * @type {number}
-     */
     scale: number;
-    /**
-     * @type {number}
-     */
     pointerX: number;
-    /**
-     * @type {number}
-     */
     pointerY: number;
-    /**
-     * @type {number}
-     */
     pointerScale: number;
     /**
      * Mounted hook.
-     * @return {void}
      */
     mounted(): void;
     /**
      * Moved hook.
-     *
-     * @this {CursorInterface}
-     *
-     * @param {PointerServiceProps} options
-     * @return {void}
      */
-    moved(this: CursorInterface, { event, x, y, isDown }: PointerServiceProps): void;
+    moved({ event, x, y, isDown }: PointerServiceProps): void;
     /**
      * RequestAnimationFrame hook.
-     *
-     * @this {CursorInterface}
-     *
-     * @return {void}
      */
-    ticked(this: CursorInterface): void;
+    ticked(): void;
     /**
      * Render the cursor.
-     *
-     * @param  {Object} options
-     * @param  {number} options.x
-     * @param  {number} options.y
-     * @param  {number} options.scale
-     * @return {void}
      */
     render({ x, y, scale }: {
         x: number;
@@ -125,20 +44,3 @@ export default class Cursor extends Base {
         scale: number;
     }): void;
 }
-export type PointerServiceProps = import('@studiometa/js-toolkit/services/pointer').PointerServiceProps;
-export type BaseOptions = import('@studiometa/js-toolkit/Base').BaseOptions;
-export type CursorOptions = {
-    growSelectors: string;
-    shrinkSelectors: string;
-    scale: number;
-    growTo: number;
-    shrinkTo: number;
-    translateDampFactor: number;
-    growDampFactor: number;
-    shrinkDampFactor: number;
-};
-export type CursorPrivateInterface = {
-    $options: BaseOptions & CursorOptions;
-};
-export type CursorInterface = Cursor & CursorPrivateInterface;
-import { Base } from "@studiometa/js-toolkit";

package/atoms/Cursor/Cursor.js

@@ -1 +1,111 @@
-import{Base as n}from"@studiometa/js-toolkit";import{damp as a,matrix as c}from"@studiometa/js-toolkit/utils";class l extends n{static config={name:"Cursor",options:{growSelectors:{type:String,default:"a, a *, button, button *, [data-cursor-grow], [data-cursor-grow] *"},shrinkSelectors:{type:String,default:"[data-cursor-shrink], [data-cursor-shrink] *"},scale:{type:Number,default:1},growTo:{type:Number,default:2},shrinkTo:{type:Number,default:.5},translateDampFactor:{type:Number,default:.25},growDampFactor:{type:Number,default:.25},shrinkDampFactor:{type:Number,default:.25}}};x=0;y=0;scale=0;pointerX=0;pointerY=0;pointerScale=0;mounted(){this.x=0,this.y=0,this.scale=0,this.pointerX=0,this.pointerY=0,this.pointerScale=0,this.render({x:this.x,y:this.y,scale:this.scale})}moved({event:t,x:i,y:s,isDown:r}){this.$services.has("ticked")||this.$services.enable("ticked"),this.pointerX=i,this.pointerY=s;let{scale:e}=this.$options;if(!t){this.pointerScale=e;return}const o=t.target instanceof Element&&t.target.matches(this.$options.growSelectors)||!1,h=r||t.target instanceof Element&&t.target.matches(this.$options.shrinkSelectors)||!1;o&&(e=this.$options.growTo),h&&(e=this.$options.shrinkTo),this.pointerScale=e}ticked(){this.x=a(this.pointerX,this.x,this.$options.translateDampFactor),this.y=a(this.pointerY,this.y,this.$options.translateDampFactor),this.scale=a(this.pointerScale,this.scale,this.pointerScale<this.scale?this.$options.shrinkDampFactor:this.$options.growDampFactor),this.render({x:this.x,y:this.y,scale:this.scale}),this.x===this.pointerX&&this.y===this.pointerY&&this.scale===this.pointerScale&&this.$services.disable("ticked")}render({x:t,y:i,scale:s}){const r=c({translateX:t,translateY:i,scaleX:s,scaleY:s});this.$el.style.transform=`translateZ(0) ${r}`}}export{l as default};
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { Base } from "@studiometa/js-toolkit";
+import { damp, matrix } from "@studiometa/js-toolkit/utils";
+class Cursor extends Base {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "x", 0);
+    __publicField(this, "y", 0);
+    __publicField(this, "scale", 0);
+    __publicField(this, "pointerX", 0);
+    __publicField(this, "pointerY", 0);
+    __publicField(this, "pointerScale", 0);
+  }
+  mounted() {
+    this.x = 0;
+    this.y = 0;
+    this.scale = 0;
+    this.pointerX = 0;
+    this.pointerY = 0;
+    this.pointerScale = 0;
+    this.render({ x: this.x, y: this.y, scale: this.scale });
+  }
+  moved({ event, x, y, isDown }) {
+    if (!this.$services.has("ticked")) {
+      this.$services.enable("ticked");
+    }
+    this.pointerX = x;
+    this.pointerY = y;
+    let { scale } = this.$options;
+    if (!event) {
+      this.pointerScale = scale;
+      return;
+    }
+    const shouldGrow = event.target instanceof Element && event.target.matches(this.$options.growSelectors) || false;
+    const shouldReduce = isDown || event.target instanceof Element && event.target.matches(this.$options.shrinkSelectors) || false;
+    if (shouldGrow) {
+      scale = this.$options.growTo;
+    }
+    if (shouldReduce) {
+      scale = this.$options.shrinkTo;
+    }
+    this.pointerScale = scale;
+  }
+  ticked() {
+    this.x = damp(this.pointerX, this.x, this.$options.translateDampFactor);
+    this.y = damp(this.pointerY, this.y, this.$options.translateDampFactor);
+    this.scale = damp(
+      this.pointerScale,
+      this.scale,
+      this.pointerScale < this.scale ? this.$options.shrinkDampFactor : this.$options.growDampFactor
+    );
+    this.render({ x: this.x, y: this.y, scale: this.scale });
+    if (this.x === this.pointerX && this.y === this.pointerY && this.scale === this.pointerScale) {
+      this.$services.disable("ticked");
+    }
+  }
+  render({ x, y, scale }) {
+    const transform = matrix({
+      translateX: x,
+      translateY: y,
+      scaleX: scale,
+      scaleY: scale
+    });
+    this.$el.style.transform = `translateZ(0) ${transform}`;
+  }
+}
+__publicField(Cursor, "config", {
+  name: "Cursor",
+  options: {
+    growSelectors: {
+      type: String,
+      default: "a, a *, button, button *, [data-cursor-grow], [data-cursor-grow] *"
+    },
+    shrinkSelectors: {
+      type: String,
+      default: "[data-cursor-shrink], [data-cursor-shrink] *"
+    },
+    scale: {
+      type: Number,
+      default: 1
+    },
+    growTo: {
+      type: Number,
+      default: 2
+    },
+    shrinkTo: {
+      type: Number,
+      default: 0.5
+    },
+    translateDampFactor: {
+      type: Number,
+      default: 0.25
+    },
+    growDampFactor: {
+      type: Number,
+      default: 0.25
+    },
+    shrinkDampFactor: {
+      type: Number,
+      default: 0.25
+    }
+  }
+});
+export {
+  Cursor
+};

package/atoms/Cursor/index.cjs

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

package/atoms/Cursor/index.d.ts

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

package/atoms/Cursor/index.js

@@ -0,0 +1 @@
+export * from "./Cursor.js";

package/atoms/Figure/Figure.cjs

@@ -21,15 +21,17 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 
-// packages/ui/atoms/Figure/Figure.js
+// packages/ui/atoms/Figure/Figure.ts
 var Figure_exports = {};
 __export(Figure_exports, {
-  default: () => Figure
+  Figure: () => Figure
 });
 module.exports = __toCommonJS(Figure_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
 var import_primitives = require("../../primitives/index.cjs");
-var Figure = class extends (0, import_js_toolkit.withMountWhenInView)(import_primitives.Transition, { threshold: [0, 1] }) {
+var Figure = class extends (0, import_js_toolkit.withMountWhenInView)(import_primitives.Transition, {
+  threshold: [0, 1]
+}) {
   get target() {
     return this.$refs.img;
   }
@@ -47,14 +49,18 @@ var Figure = class extends (0, import_js_toolkit.withMountWhenInView)(import_pri
     if (!(img instanceof HTMLImageElement)) {
       throw new Error("[Figure] The `img` ref must be an `<img>` element.");
     }
-    const src = img.getAttribute("data-src");
+    const { src } = img.dataset;
     if (this.$options.lazy && src && src !== this.src) {
       let tempImg = new Image();
-      tempImg.onload = () => {
-        this.enter();
-        this.src = src;
-        tempImg = null;
-      };
+      tempImg.addEventListener(
+        "load",
+        async () => {
+          this.src = src;
+          tempImg = null;
+          this.enter();
+        },
+        { once: true }
+      );
       tempImg.src = src;
     }
   }

package/atoms/Figure/Figure.d.ts

@@ -1,72 +1,37 @@
-declare const Figure_base: typeof import("@studiometa/js-toolkit").Base & (new (...a: any[]) => {
-    readonly target: HTMLElement | HTMLElement[];
-    enter(target?: HTMLElement | HTMLElement[]): Promise<void | void[]>;
-    leave(target?: HTMLElement | HTMLElement[]): Promise<void | void[]>;
-});
-/**
- * @typedef {Figure & {
- *   $refs: {
- *     img: HTMLImageElement
- *   },
- *   $options: {
- *     lazy: boolean
- *   }
- * }} FigureInterface
- */
+import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';
+import { Transition } from '../../primitives/index.js';
+export interface FigureProps extends BaseProps {
+    $refs: {
+        img: HTMLImageElement;
+    };
+    $options: {
+        lazy: boolean;
+    };
+}
+declare const Figure_base: import("@studiometa/js-toolkit").BaseDecorator<import("@studiometa/js-toolkit").WithMountWhenInViewInterface, Transition<BaseProps>, import("@studiometa/js-toolkit").WithMountWhenInViewProps>;
 /**
  * Figure class.
- *
- * Manager lazyloading image sources.
  */
-export default class Figure extends Figure_base {
+export declare class Figure<T extends BaseProps = BaseProps> extends Figure_base<T & FigureProps> {
     /**
      * Config.
      */
-    static config: {
-        name: string;
-        refs: string[];
-        options: {
-            lazy: BooleanConstructor;
-        };
-        debug?: boolean;
-        log?: boolean;
-        emits?: string[];
-        components?: import("@studiometa/js-toolkit/Base/index.js").BaseConfigComponents;
-    };
+    static config: BaseConfig;
     /**
      * Get the transition target.
-     *
-     * @this {FigureInterface}
-     * @returns {HTMLImageElement}
      */
     get target(): HTMLImageElement;
-    /**
-     * Set the image source.
-     *
-     * @this {FigureInterface}
-     * @param   {string} value
-     * @returns {void}
-     */
-    set src(arg: string);
     /**
      * Get the image source.
-     *
-     * @this {FigureInterface}
-     * @returns {string}
      */
     get src(): string;
+    /**
+     * Set the image source.
+     */
+    set src(value: string);
     /**
      * Load on mount.
-     * @this {FigureInterface}
      */
-    mounted(this: FigureInterface): void;
+    mounted(): void;
 }
-export type FigureInterface = Figure & {
-    $refs: {
-        img: HTMLImageElement;
-    };
-    $options: {
-        lazy: boolean;
-    };
-};
 export {};

package/atoms/Figure/Figure.js

@@ -1 +1,56 @@
-import{withMountWhenInView as s}from"@studiometa/js-toolkit";import{Transition as i}from"../../primitives/index.js";class n extends s(i,{threshold:[0,1]}){static config={...i.config,name:"Figure",refs:["img"],options:{...i.config.options,lazy:Boolean}};get target(){return this.$refs.img}get src(){return this.$refs.img.src}set src(e){this.$refs.img.src=e}mounted(){const{img:e}=this.$refs;if(!e)throw new Error("[Figure] The `img` ref is required.");if(!(e instanceof HTMLImageElement))throw new Error("[Figure] The `img` ref must be an `<img>` element.");const t=e.getAttribute("data-src");if(this.$options.lazy&&t&&t!==this.src){let r=new Image;r.onload=()=>{this.enter(),this.src=t,r=null},r.src=t}}}export{n as default};
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { withMountWhenInView } from "@studiometa/js-toolkit";
+import { Transition } from "../../primitives/index.js";
+class Figure extends withMountWhenInView(Transition, {
+  threshold: [0, 1]
+}) {
+  get target() {
+    return this.$refs.img;
+  }
+  get src() {
+    return this.$refs.img.src;
+  }
+  set src(value) {
+    this.$refs.img.src = value;
+  }
+  mounted() {
+    const { img } = this.$refs;
+    if (!img) {
+      throw new Error("[Figure] The `img` ref is required.");
+    }
+    if (!(img instanceof HTMLImageElement)) {
+      throw new Error("[Figure] The `img` ref must be an `<img>` element.");
+    }
+    const { src } = img.dataset;
+    if (this.$options.lazy && src && src !== this.src) {
+      let tempImg = new Image();
+      tempImg.addEventListener(
+        "load",
+        async () => {
+          this.src = src;
+          tempImg = null;
+          this.enter();
+        },
+        { once: true }
+      );
+      tempImg.src = src;
+    }
+  }
+}
+__publicField(Figure, "config", {
+  ...Transition.config,
+  name: "Figure",
+  refs: ["img"],
+  options: {
+    ...Transition.config.options,
+    lazy: Boolean
+  }
+});
+export {
+  Figure
+};