@studiometa/ui 0.2.8 → 0.2.11

package/atoms/Cursor/Cursor.cjs

@@ -51,7 +51,7 @@ var Cursor = class extends import_js_toolkit.Base {
     }
     this.pointerX = x;
     this.pointerY = y;
-    let scale = 1;
+    let { scale } = this.$options;
     if (!event) {
       this.pointerScale = scale;
       return;
@@ -96,6 +96,10 @@ __publicField(Cursor, "config", {
       type: String,
       default: "[data-cursor-shrink], [data-cursor-shrink] *"
     },
+    scale: {
+      type: Number,
+      default: 1
+    },
     growTo: {
       type: Number,
       default: 2

package/atoms/Cursor/Cursor.d.ts

@@ -6,6 +6,7 @@
  * @typedef {Object} CursorOptions
  * @property {string} growSelectors
  * @property {string} shrinkSelectors
+ * @property {number} scale
  * @property {number} growTo
  * @property {number} shrinkTo
  * @property {number} translateDampFactor
@@ -37,6 +38,10 @@ export default class Cursor extends Base {
                 type: StringConstructor;
                 default: string;
             };
+            scale: {
+                type: NumberConstructor;
+                default: number;
+            };
             growTo: {
                 type: NumberConstructor;
                 default: number;
@@ -125,6 +130,7 @@ export type BaseOptions = import('@studiometa/js-toolkit/Base').BaseOptions;
 export type CursorOptions = {
     growSelectors: string;
     shrinkSelectors: string;
+    scale: number;
     growTo: number;
     shrinkTo: number;
     translateDampFactor: number;

package/atoms/Cursor/Cursor.js

@@ -1 +1 @@
-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] *"},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 e=1;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};
+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};

package/atoms/Figure/Figure.cjs

@@ -28,7 +28,11 @@ __export(Figure_exports, {
 });
 module.exports = __toCommonJS(Figure_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
-var Figure = class extends (0, import_js_toolkit.withMountWhenInView)(import_js_toolkit.Base, { threshold: [0, 1] }) {
+var import_primitives = require("../../primitives/index.cjs");
+var Figure = class extends (0, import_js_toolkit.withMountWhenInView)(import_primitives.Transition, { threshold: [0, 1] }) {
+  get target() {
+    return this.$refs.img;
+  }
   get src() {
     return this.$refs.img.src;
   }
@@ -36,21 +40,31 @@ var Figure = class extends (0, import_js_toolkit.withMountWhenInView)(import_js_
     this.$refs.img.src = value;
   }
   mounted() {
-    if (!this.$refs.img) {
+    const { img } = this.$refs;
+    if (!img) {
       throw new Error("[Figure] The `img` ref is required.");
     }
-    if (!(this.$refs.img instanceof HTMLImageElement)) {
+    if (!(img instanceof HTMLImageElement)) {
       throw new Error("[Figure] The `img` ref must be an `<img>` element.");
     }
-    if (this.$options.lazy && this.$refs.img.hasAttribute("data-src") && this.$refs.img.getAttribute("data-src") !== this.src) {
-      this.src = this.$refs.img.getAttribute("data-src");
+    const src = img.getAttribute("data-src");
+    if (this.$options.lazy && src && src !== this.src) {
+      let tempImg = new Image();
+      tempImg.onload = () => {
+        this.enter();
+        this.src = src;
+        tempImg = null;
+      };
+      tempImg.src = src;
     }
   }
 };
 __publicField(Figure, "config", {
+  ...import_primitives.Transition.config,
   name: "Figure",
   refs: ["img"],
   options: {
+    ...import_primitives.Transition.config.options,
     lazy: Boolean
   }
 });

package/atoms/Figure/Figure.d.ts

@@ -1,28 +1,49 @@
+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 {Object} FigureRefs
- * @property {HTMLImageElement} img
- */
-/**
- * @typedef {Object} FigureInterface
- * @property {FigureRefs} $refs
+ * @typedef {Figure & {
+ *   $refs: {
+ *     img: HTMLImageElement
+ *   },
+ *   $options: {
+ *     lazy: boolean
+ *   }
+ * }} FigureInterface
  */
 /**
  * Figure class.
  *
  * Manager lazyloading image sources.
  */
-export default class Figure extends Base {
+export default class Figure extends Figure_base {
+    /**
+     * 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;
     };
+    /**
+     * Get the transition target.
+     *
+     * @this {FigureInterface}
+     * @returns {HTMLImageElement}
+     */
+    get target(): HTMLImageElement;
     /**
      * Set the image source.
      *
-     * @this {Figure & FigureInterface}
+     * @this {FigureInterface}
      * @param   {string} value
      * @returns {void}
      */
@@ -30,20 +51,22 @@ export default class Figure extends Base {
     /**
      * Get the image source.
      *
-     * @this {Figure & FigureInterface}
+     * @this {FigureInterface}
      * @returns {string}
      */
     get src(): string;
     /**
      * Load on mount.
-     * @this {Figure & FigureInterface}
+     * @this {FigureInterface}
      */
-    mounted(this: Figure & FigureInterface): void;
+    mounted(this: FigureInterface): void;
 }
-export type FigureRefs = {
-    img: HTMLImageElement;
-};
-export type FigureInterface = {
-    $refs: FigureRefs;
+export type FigureInterface = Figure & {
+    $refs: {
+        img: HTMLImageElement;
+    };
+    $options: {
+        lazy: boolean;
+    };
 };
-import { Base } from "@studiometa/js-toolkit";
+export {};

package/atoms/Figure/Figure.js

@@ -1 +1 @@
-import{Base as t,withMountWhenInView as r}from"@studiometa/js-toolkit";class i extends r(t,{threshold:[0,1]}){static config={name:"Figure",refs:["img"],options:{lazy:Boolean}};get src(){return this.$refs.img.src}set src(e){this.$refs.img.src=e}mounted(){if(!this.$refs.img)throw new Error("[Figure] The `img` ref is required.");if(!(this.$refs.img instanceof HTMLImageElement))throw new Error("[Figure] The `img` ref must be an `<img>` element.");this.$options.lazy&&this.$refs.img.hasAttribute("data-src")&&this.$refs.img.getAttribute("data-src")!==this.src&&(this.src=this.$refs.img.getAttribute("data-src"))}}export{i as default};
+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};

package/atoms/Figure/FigureTwicPics.cjs

@@ -41,7 +41,7 @@ var FigureTwicPics = class extends import_Figure.default {
     return url.host;
   }
   set src(value) {
-    const url = new URL(value);
+    const url = new URL(value, window.location.origin);
     url.host = this.domain;
     const width = normalizeSize(this, "offsetWidth");
     const height = normalizeSize(this, "offsetHeight");

package/atoms/Figure/FigureTwicPics.d.ts

@@ -22,6 +22,10 @@ export default class FigureTwicPics extends Figure {
             lazy: BooleanConstructor;
         };
         refs: string[];
+        debug?: boolean;
+        log?: boolean;
+        emits?: string[];
+        components?: import("@studiometa/js-toolkit/Base/index.js").BaseConfigComponents;
     };
     /**
      * Get the TwicPics domain.
@@ -43,6 +47,7 @@ export type FigureTwicPicsInterface = FigureTwicPics & FigureInterface & {
     $options: {
         transform: string;
         step: number;
+        mode: string;
     };
 };
 import Figure from "./Figure.js";

package/atoms/Figure/FigureTwicPics.js

@@ -1 +1 @@
-import i from"./Figure.js";function o(e,s){const{step:t}=e.$options;return Math.ceil(e.$refs.img[s]/t)*t}class c extends i{static config={...i.config,name:"FigureTwicPics",options:{...i.config.options,transform:String,step:{type:Number,default:50},mode:{type:String,default:"cover"}}};get domain(){return new URL(this.$refs.img.dataset.src).host}set src(s){const t=new URL(s);t.host=this.domain;const r=o(this,"offsetWidth"),n=o(this,"offsetHeight");t.searchParams.set("twic",["v1",this.$options.transform,`${this.$options.mode}=${r}x${n}`].filter(Boolean).join("/")),t.search=decodeURIComponent(t.search),super.src=t.toString()}resized(){this.src=this.$refs.img.dataset.src}}export{c as default};
+import e from"./Figure.js";function o(i,s){const{step:t}=i.$options;return Math.ceil(i.$refs.img[s]/t)*t}class c extends e{static config={...e.config,name:"FigureTwicPics",options:{...e.config.options,transform:String,step:{type:Number,default:50},mode:{type:String,default:"cover"}}};get domain(){return new URL(this.$refs.img.dataset.src).host}set src(s){const t=new URL(s,window.location.origin);t.host=this.domain;const r=o(this,"offsetWidth"),n=o(this,"offsetHeight");t.searchParams.set("twic",["v1",this.$options.transform,`${this.$options.mode}=${r}x${n}`].filter(Boolean).join("/")),t.search=decodeURIComponent(t.search),super.src=t.toString()}resized(){this.src=this.$refs.img.dataset.src}}export{c as default};

package/atoms/LargeText/LargeText.cjs

@@ -30,11 +30,11 @@ module.exports = __toCommonJS(LargeText_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
 var import_utils = require("@studiometa/js-toolkit/utils");
 var LargeText = class extends (0, import_js_toolkit.withMountWhenInView)(import_js_toolkit.Base, { rootMargin: "50%" }) {
-  translateX = 0;
+  x = 0;
   deltaY = 0;
   transform = {
     skewX: 0,
-    translateX: 0
+    x: 0
   };
   width = 0;
   mounted() {
@@ -47,17 +47,17 @@ var LargeText = class extends (0, import_js_toolkit.withMountWhenInView)(import_
     this.deltaY = props.delta.y;
   }
   ticked() {
-    this.translateX -= (Math.abs(this.deltaY) + 1) * this.$options.sensitivity;
-    this.transform.translateX = (0, import_utils.damp)(this.translateX, this.transform.translateX, 0.25);
+    this.x -= (Math.abs(this.deltaY) + 1) * this.$options.sensitivity;
+    this.transform.x = (0, import_utils.damp)(this.x, this.transform.x, 0.25);
     if (this.$options.skew) {
-      this.transform.skewX = (0, import_utils.damp)((0, import_utils.clamp)(this.deltaY / 20 * -1, -0.5, 0.5) * this.$options.skewSensitivity, this.transform.skewX, 0.25);
+      this.transform.skewX = (0, import_utils.damp)((0, import_utils.clamp)(this.deltaY * -1, -50, 50) * this.$options.skewSensitivity, this.transform.skewX, 0.25);
     }
-    if (this.translateX <= this.width * -1) {
-      this.translateX = 0;
-      this.transform.translateX += this.width;
-    } else if (this.$options.sensitivity < 0 && this.translateX >= this.width) {
-      this.translateX = 0;
-      this.transform.translateX -= this.width;
+    if (this.x <= this.width * -1) {
+      this.x = 0;
+      this.transform.x += this.width;
+    } else if (this.$options.sensitivity < 0 && this.x >= this.width) {
+      this.x = 0;
+      this.transform.x -= this.width;
     }
     return () => {
       (0, import_utils.transform)(this.$refs.target, this.transform);

package/atoms/LargeText/LargeText.d.ts

@@ -34,7 +34,7 @@ export default class LargeText extends Base {
      * Translate X.
      * @type {number}
      */
-    translateX: number;
+    x: number;
     /**
      * Scroll delta Y.
      * @type {number}
@@ -45,7 +45,7 @@ export default class LargeText extends Base {
      */
     transform: {
         skewX: number;
-        translateX: number;
+        x: number;
     };
     /**
      * Target width.

package/atoms/LargeText/LargeText.js

@@ -1 +1 @@
-import{Base as i,withMountWhenInView as e}from"@studiometa/js-toolkit";import{damp as t,clamp as a,transform as r}from"@studiometa/js-toolkit/utils";class n extends e(i,{rootMargin:"50%"}){static config={name:"LargeText",refs:["target"],options:{skew:Boolean,sensitivity:{type:Number,default:1},skewSensitivity:{type:Number,default:1}}};translateX=0;deltaY=0;transform={skewX:0,translateX:0};width=0;mounted(){this.width=this.$refs.target.clientWidth}resized(){this.width=this.$refs.target.clientWidth}scrolled(s){this.deltaY=s.delta.y}ticked(){return this.translateX-=(Math.abs(this.deltaY)+1)*this.$options.sensitivity,this.transform.translateX=t(this.translateX,this.transform.translateX,.25),this.$options.skew&&(this.transform.skewX=t(a(this.deltaY/20*-1,-.5,.5)*this.$options.skewSensitivity,this.transform.skewX,.25)),this.translateX<=this.width*-1?(this.translateX=0,this.transform.translateX+=this.width):this.$options.sensitivity<0&&this.translateX>=this.width&&(this.translateX=0,this.transform.translateX-=this.width),()=>{r(this.$refs.target,this.transform)}}}export{n as default};
+import{Base as s,withMountWhenInView as e}from"@studiometa/js-toolkit";import{damp as t,clamp as h,transform as r}from"@studiometa/js-toolkit/utils";class a extends e(s,{rootMargin:"50%"}){static config={name:"LargeText",refs:["target"],options:{skew:Boolean,sensitivity:{type:Number,default:1},skewSensitivity:{type:Number,default:1}}};x=0;deltaY=0;transform={skewX:0,x:0};width=0;mounted(){this.width=this.$refs.target.clientWidth}resized(){this.width=this.$refs.target.clientWidth}scrolled(i){this.deltaY=i.delta.y}ticked(){return this.x-=(Math.abs(this.deltaY)+1)*this.$options.sensitivity,this.transform.x=t(this.x,this.transform.x,.25),this.$options.skew&&(this.transform.skewX=t(h(this.deltaY*-1,-50,50)*this.$options.skewSensitivity,this.transform.skewX,.25)),this.x<=this.width*-1?(this.x=0,this.transform.x+=this.width):this.$options.sensitivity<0&&this.x>=this.width&&(this.x=0,this.transform.x-=this.width),()=>{r(this.$refs.target,this.transform)}}}export{a as default};

package/atoms/LargeText/LargeText.twig

@@ -18,7 +18,7 @@
   merge_html_attributes(
     attr ?? null,
     { data_component: 'LargeText' },
-    { class: 'overflow-x-hidden pointer-events-none' }
+    { class: 'overflow-x-hidden pointer-events-none', style: { contain: 'content' } }
   )
 %}
 

package/atoms/ScrollReveal/ScrollReveal.cjs

@@ -0,0 +1,72 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+// packages/ui/atoms/ScrollReveal/ScrollReveal.js
+var ScrollReveal_exports = {};
+__export(ScrollReveal_exports, {
+  default: () => ScrollReveal
+});
+module.exports = __toCommonJS(ScrollReveal_exports);
+var import_js_toolkit = require("@studiometa/js-toolkit");
+var import_primitives = require("../../primitives/index.cjs");
+var _ScrollReveal = class extends (0, import_js_toolkit.withMountWhenInView)(import_primitives.Transition) {
+  get target() {
+    return this.$refs.target ?? this.$el;
+  }
+  mounted() {
+    if (!this.$options.repeat) {
+      this.enter();
+      this.$terminate();
+      return;
+    }
+    const scroll = (0, import_js_toolkit.useScroll)();
+    if (!scroll.has("ScrollRevealRepeat")) {
+      scroll.add("ScrollRevealRepeat", (props) => {
+        _ScrollReveal.scrollDirectionY = props.direction.y;
+      });
+    }
+    if (_ScrollReveal.scrollDirectionY !== "UP") {
+      this.enter();
+    }
+  }
+};
+var ScrollReveal = _ScrollReveal;
+__publicField(ScrollReveal, "config", {
+  ...import_primitives.Transition.config,
+  name: "ScrollReveal",
+  refs: ["target"],
+  options: {
+    ...import_primitives.Transition.config.options,
+    enterKeep: {
+      type: Boolean,
+      default: true
+    },
+    repeat: Boolean,
+    intersectionObserver: {
+      type: Object,
+      default: () => ({ threshold: [0, 1] })
+    }
+  }
+});
+__publicField(ScrollReveal, "scrollDirectionY", "NONE");
+if (module.exports.default) module.exports = module.exports.default;

package/atoms/ScrollReveal/ScrollReveal.d.ts

@@ -0,0 +1,77 @@
+declare const ScrollReveal_base: typeof import("@studiometa/js-toolkit").Base & (new (...a: any[]) => {
+    readonly target: HTMLElement | HTMLElement[];
+    enter(target?: HTMLElement | HTMLElement[]): Promise<void | void[]>; /**
+     * Trigger the `enter` transition on mount.
+     *
+     * @this {ScrollRevealInterface}
+     * @returns {void}
+     */
+    leave(target?: HTMLElement | HTMLElement[]): Promise<void | void[]>;
+});
+/**
+ * @typedef {ScrollReveal & {
+ *   $refs: {
+ *     target?: HTMLElement,
+ *   },
+ *   $options: {
+ *     repeat: boolean;
+ *   }
+ * }} ScrollRevealInterface
+ */
+/**
+ * ScrollReveal class.
+ */
+export default class ScrollReveal extends ScrollReveal_base {
+    /**
+     * Config.
+     */
+    static config: {
+        name: string;
+        refs: string[];
+        options: {
+            enterKeep: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            repeat: BooleanConstructor;
+            intersectionObserver: {
+                type: ObjectConstructor;
+                default: () => {
+                    threshold: number[];
+                };
+            };
+        };
+        debug?: boolean;
+        log?: boolean;
+        emits?: string[];
+        components?: import("@studiometa/js-toolkit/Base/index.js").BaseConfigComponents;
+    };
+    /**
+     * Vertical scroll direction.
+     * @type {'UP'|'DOWN'|'NONE'}
+     */
+    static scrollDirectionY: 'UP' | 'DOWN' | 'NONE';
+    /**
+     * Get the transition target.
+     *
+     * @this {ScrollRevealInterface}
+     * @returns {HTMLElement}
+     */
+    get target(): HTMLElement;
+    /**
+     * Trigger the `enter` transition on mount.
+     *
+     * @this {ScrollRevealInterface}
+     * @returns {void}
+     */
+    mounted(this: ScrollRevealInterface): void;
+}
+export type ScrollRevealInterface = ScrollReveal & {
+    $refs: {
+        target?: HTMLElement;
+    };
+    $options: {
+        repeat: boolean;
+    };
+};
+export {};

package/atoms/ScrollReveal/ScrollReveal.js

@@ -0,0 +1 @@
+import{withMountWhenInView as i,useScroll as n}from"@studiometa/js-toolkit";import{Transition as t}from"../../primitives/index.js";class e extends i(t){static config={...t.config,name:"ScrollReveal",refs:["target"],options:{...t.config.options,enterKeep:{type:Boolean,default:!0},repeat:Boolean,intersectionObserver:{type:Object,default:()=>({threshold:[0,1]})}}};static scrollDirectionY="NONE";get target(){return this.$refs.target??this.$el}mounted(){if(!this.$options.repeat){this.enter(),this.$terminate();return}const r=n();r.has("ScrollRevealRepeat")||r.add("ScrollRevealRepeat",o=>{e.scrollDirectionY=o.direction.y}),e.scrollDirectionY!=="UP"&&this.enter()}}export{e as default};

package/atoms/ScrollReveal/index.cjs

@@ -0,0 +1,29 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/ui/atoms/ScrollReveal/index.js
+var ScrollReveal_exports = {};
+__export(ScrollReveal_exports, {
+  ScrollReveal: () => import_ScrollReveal.default
+});
+module.exports = __toCommonJS(ScrollReveal_exports);
+var import_ScrollReveal = __toESM(require("./ScrollReveal.cjs"), 1);
+if (module.exports.default) module.exports = module.exports.default;

package/atoms/ScrollReveal/index.d.ts

@@ -0,0 +1 @@
+export { default as ScrollReveal } from "./ScrollReveal.js";

package/atoms/ScrollReveal/index.js

@@ -0,0 +1 @@
+import{default as a}from"./ScrollReveal.js";export{a as ScrollReveal};

package/atoms/index.cjs

@@ -32,6 +32,7 @@ module.exports = __toCommonJS(atoms_exports);
 __reExport(atoms_exports, require("./Figure/index.cjs"), module.exports);
 __reExport(atoms_exports, require("./Prefetch/index.cjs"), module.exports);
 __reExport(atoms_exports, require("./ScrollAnimation/index.cjs"), module.exports);
+__reExport(atoms_exports, require("./ScrollReveal/index.cjs"), module.exports);
 var import_AnchorScrollTo = __toESM(require("./AnchorScrollTo/AnchorScrollTo.cjs"), 1);
 var import_Cursor = __toESM(require("./Cursor/Cursor.cjs"), 1);
 var import_LargeText = __toESM(require("./LargeText/LargeText.cjs"), 1);

package/atoms/index.d.ts

@@ -1,6 +1,7 @@
 export * from "./Figure/index.js";
 export * from "./Prefetch/index.js";
 export * from "./ScrollAnimation/index.js";
+export * from "./ScrollReveal/index.js";
 export { default as AnchorScrollTo } from "./AnchorScrollTo/AnchorScrollTo.js";
 export { default as Cursor } from "./Cursor/Cursor.js";
 export { default as LargeText } from "./LargeText/LargeText.js";

package/atoms/index.js

@@ -1 +1 @@
-export*from"./Figure/index.js";export*from"./Prefetch/index.js";export*from"./ScrollAnimation/index.js";import{default as a}from"./AnchorScrollTo/AnchorScrollTo.js";import{default as l}from"./Cursor/Cursor.js";import{default as p}from"./LargeText/LargeText.js";import{default as d}from"./LazyInclude/LazyInclude.js";export{a as AnchorScrollTo,l as Cursor,p as LargeText,d as LazyInclude};
+export*from"./Figure/index.js";export*from"./Prefetch/index.js";export*from"./ScrollAnimation/index.js";export*from"./ScrollReveal/index.js";import{default as x}from"./AnchorScrollTo/AnchorScrollTo.js";import{default as p}from"./Cursor/Cursor.js";import{default as u}from"./LargeText/LargeText.js";import{default as s}from"./LazyInclude/LazyInclude.js";export{x as AnchorScrollTo,p as Cursor,u as LargeText,s as LazyInclude};

package/decorators/index.cjs

@@ -0,0 +1,29 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/ui/decorators/index.js
+var decorators_exports = {};
+__export(decorators_exports, {
+  withTransition: () => import_withTransition.default
+});
+module.exports = __toCommonJS(decorators_exports);
+var import_withTransition = __toESM(require("./withTransition.cjs"), 1);
+if (module.exports.default) module.exports = module.exports.default;

package/decorators/index.d.ts

@@ -0,0 +1 @@
+export { default as withTransition } from "./withTransition.js";

package/decorators/index.js

@@ -0,0 +1 @@
+import{default as i}from"./withTransition.js";export{i as withTransition};

package/decorators/withTransition.cjs

@@ -0,0 +1,66 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/ui/decorators/withTransition.js
+var withTransition_exports = {};
+__export(withTransition_exports, {
+  default: () => withTransition
+});
+module.exports = __toCommonJS(withTransition_exports);
+var import_utils = require("@studiometa/js-toolkit/utils");
+function delegateTransition(element, name, endMode) {
+  return (0, import_utils.isArray)(element) ? Promise.all(element.map((el) => (0, import_utils.transition)(el, name, endMode))) : (0, import_utils.transition)(element, name, endMode);
+}
+function withTransition(BaseClass) {
+  class Transition extends BaseClass {
+    static config = {
+      name: "Transition",
+      options: {
+        enterFrom: String,
+        enterActive: String,
+        enterTo: String,
+        enterKeep: Boolean,
+        leaveFrom: String,
+        leaveActive: String,
+        leaveTo: String,
+        leaveKeep: Boolean
+      }
+    };
+    get target() {
+      return this.$el;
+    }
+    enter(target) {
+      const { enterFrom, enterActive, enterTo, enterKeep, leaveTo } = this.$options;
+      return delegateTransition(target ?? this.target, {
+        from: (leaveTo + " " + enterFrom).trim(),
+        active: enterActive,
+        to: enterTo
+      }, enterKeep && "keep");
+    }
+    leave(target) {
+      const { leaveFrom, leaveActive, leaveTo, leaveKeep, enterTo } = this.$options;
+      return delegateTransition(target ?? this.target, {
+        from: (enterTo + " " + leaveFrom).trim(),
+        active: leaveActive,
+        to: leaveTo
+      }, leaveKeep && "keep");
+    }
+  }
+  return Transition;
+}
+if (module.exports.default) module.exports = module.exports.default;