@ssgoi/core 0.0.3 → 2.0.0

package/dist/transition-strategy.d.ts

@@ -0,0 +1,60 @@
+import { TransitionConfig } from './types';
+import { Animator } from './animator';
+export declare const TRANSITION_STRATEGY: unique symbol;
+export interface StrategyContext<TAnimationValue = number> {
+    currentAnimation: {
+        animator: Animator<TAnimationValue>;
+        direction: "in" | "out";
+    } | null;
+}
+export interface AnimationSetup<TAnimationValue = number> {
+    config?: TransitionConfig<TAnimationValue>;
+    state: {
+        position: TAnimationValue;
+        velocity: TAnimationValue extends number ? number : Record<string, number>;
+    };
+    from: TAnimationValue;
+    to: TAnimationValue;
+    direction: "forward" | "backward";
+}
+export interface TransitionConfigs<TAnimationValue = number> {
+    in?: Promise<TransitionConfig<TAnimationValue>>;
+    out?: Promise<TransitionConfig<TAnimationValue>>;
+}
+export interface TransitionStrategy<TAnimationValue = number> {
+    runIn: (configs: TransitionConfigs<TAnimationValue>) => Promise<AnimationSetup<TAnimationValue>>;
+    runOut: (configs: TransitionConfigs<TAnimationValue>) => Promise<AnimationSetup<TAnimationValue>>;
+}
+/**
+ * Creates a transition callback that can be used with framework-specific implementations
+ * This is the core logic that frameworks can wrap with their own APIs
+ *
+ * UX Animation Behavior - 4 Main Scenarios:
+ *
+ * 1. No animation running + IN trigger:
+ *    - Start entrance animation (0 → 1)
+ *    - Return cleanup function for exit
+ *
+ * 2. No animation running + OUT trigger:
+ *    - Clone element, start exit animation (1 → 0)
+ *    - Remove clone when complete
+ *
+ * 3. IN animation running + OUT trigger:
+ *    - Stop current IN animation (DOM is disappearing)
+ *    - Clone element for exit animation
+ *    - Create REVERSED IN animation (not OUT animation) with current state
+ *    - This gives natural backward motion instead of jumping to OUT definition
+ *
+ * 4. OUT animation running + IN trigger:
+ *    - Stop current OUT animation (cleanup any cloned elements)
+ *    - Create REVERSED OUT animation (not IN animation) with current state
+ *    - This gives natural backward motion instead of jumping to IN definition
+ *    - Switch to entrance mode
+ *
+ * Closure Structure:
+ * - Outer function: Returns entrance callback
+ * - Inner function (entrance callback): Returns cleanup callback (exit)
+ * - Cleanup callback: Handles exit transitions
+ */
+export declare const createDefaultStrategy: <TAnimationValue = number>(context: StrategyContext<TAnimationValue>) => TransitionStrategy<TAnimationValue>;
+//# sourceMappingURL=transition-strategy.d.ts.map

package/dist/transition-strategy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"transition-strategy.d.ts","sourceRoot":"","sources":["../src/lib/transition-strategy.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAE3C,eAAO,MAAM,mBAAmB,eAAoC,CAAC;AAErE,MAAM,WAAW,eAAe,CAAC,eAAe,GAAG,MAAM;IAEvD,gBAAgB,EAAE;QAAE,QAAQ,EAAE,QAAQ,CAAC,eAAe,CAAC,CAAC;QAAC,SAAS,EAAE,IAAI,GAAG,KAAK,CAAA;KAAE,GAAG,IAAI,CAAC;CAC3F;AAED,MAAM,WAAW,cAAc,CAAC,eAAe,GAAG,MAAM;IACtD,MAAM,CAAC,EAAE,gBAAgB,CAAC,eAAe,CAAC,CAAC;IAC3C,KAAK,EAAE;QAAE,QAAQ,EAAE,eAAe,CAAC;QAAC,QAAQ,EAAE,eAAe,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;KAAE,CAAC;IACjH,IAAI,EAAE,eAAe,CAAC;IACtB,EAAE,EAAE,eAAe,CAAC;IACpB,SAAS,EAAE,SAAS,GAAG,UAAU,CAAC;CACnC;AAED,MAAM,WAAW,iBAAiB,CAAC,eAAe,GAAG,MAAM;IACzD,EAAE,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,CAAC;IAChD,GAAG,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,CAAC;CAClD;AAED,MAAM,WAAW,kBAAkB,CAAC,eAAe,GAAG,MAAM;IAC1D,KAAK,EAAE,CAAC,OAAO,EAAE,iBAAiB,CAAC,eAAe,CAAC,KAAK,OAAO,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,CAAC;IACjG,MAAM,EAAE,CAAC,OAAO,EAAE,iBAAiB,CAAC,eAAe,CAAC,KAAK,OAAO,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,CAAC;CACnG;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,eAAO,MAAM,qBAAqB,GAAI,eAAe,GAAG,MAAM,EAC5D,SAAS,eAAe,CAAC,eAAe,CAAC,KACxC,kBAAkB,CAAC,eAAe,CAmGpC,CAAC"}

package/dist/transition.d.ts

@@ -1,3 +1,4 @@
+import { StrategyContext, TRANSITION_STRATEGY, TransitionStrategy } from './transition-strategy';
 import { Transition, TransitionCallback } from './types';
 /**
  * Key type for transitions - can be string or symbol
@@ -6,11 +7,14 @@ type TransitionKey = string | symbol;
 /**
  * Framework-agnostic transition function that can be used as a ref
  * Usage: <div ref={transition({ key: 'fade', in, out })} />
+ *
+ * @template TAnimationValue - The type of value being animated (number | object)
  */
-export declare function transition(options: {
+export declare function transition<TAnimationValue = number>(options: {
     key: TransitionKey;
-    in?: Transition["in"];
-    out?: Transition["out"];
+    in?: Transition<undefined, TAnimationValue>["in"];
+    out?: Transition<undefined, TAnimationValue>["out"];
+    [TRANSITION_STRATEGY]?: (context: StrategyContext<TAnimationValue>) => TransitionStrategy<TAnimationValue>;
 }): TransitionCallback;
 export {};
 //# sourceMappingURL=transition.d.ts.map

package/dist/transition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"transition.d.ts","sourceRoot":"","sources":["../src/lib/transition.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE9D;;GAEG;AACH,KAAK,aAAa,GAAG,MAAM,GAAG,MAAM,CAAC;AAuDrC;;;GAGG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE;IAClC,GAAG,EAAE,aAAa,CAAC;IACnB,EAAE,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IACtB,GAAG,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;CACzB,GAAG,kBAAkB,CAMrB"}
+{"version":3,"file":"transition.d.ts","sourceRoot":"","sources":["../src/lib/transition.ts"],"names":[],"mappings":"AACA,OAAO,EACL,eAAe,EACf,mBAAmB,EACnB,kBAAkB,EACnB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE9D;;GAEG;AACH,KAAK,aAAa,GAAG,MAAM,GAAG,MAAM,CAAC;AAyDrC;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,eAAe,GAAG,MAAM,EAAE,OAAO,EAAE;IAC5D,GAAG,EAAE,aAAa,CAAC;IACnB,EAAE,CAAC,EAAE,UAAU,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC,IAAI,CAAC,CAAC;IAClD,GAAG,CAAC,EAAE,UAAU,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC,KAAK,CAAC,CAAC;IACpD,CAAC,mBAAmB,CAAC,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,CAAC,eAAe,CAAC,KAAK,kBAAkB,CAAC,eAAe,CAAC,CAAC;CAC5G,GAAG,kBAAkB,CAMrB"}

package/dist/transitions/blur.d.ts

@@ -1,5 +1,6 @@
 interface BlurOptions {
-    amount?: number;
+    amount?: number | string;
+    opacity?: number;
     scale?: boolean;
     fade?: boolean;
     spring?: {

package/dist/transitions/blur.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"blur.d.ts","sourceRoot":"","sources":["../../src/lib/transitions/blur.ts"],"names":[],"mappings":"AAAA,UAAU,WAAW;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE;QACP,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;CACH;AAED,eAAO,MAAM,IAAI,GAAI,UAAS,WAAgB;kBAS5B,WAAW;;wBAdb,MAAM;sBACR,MAAM;;yBAeG,MAAM;;mBAeV,WAAW;;wBA/Bd,MAAM;sBACR,MAAM;;yBAgCG,MAAM;;CAgB5B,CAAC"}
+{"version":3,"file":"blur.d.ts","sourceRoot":"","sources":["../../src/lib/transitions/blur.ts"],"names":[],"mappings":"AAAA,UAAU,WAAW;IACnB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE;QACP,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;CACH;AAED,eAAO,MAAM,IAAI,GAAI,UAAS,WAAgB;kBAc5B,WAAW;;wBAnBb,MAAM;sBACR,MAAM;;yBAoBG,MAAM;;mBAmBV,WAAW;;wBAxCd,MAAM;sBACR,MAAM;;yBAyCG,MAAM;;CAoB5B,CAAC"}

package/dist/transitions/bounce.d.ts

@@ -1,7 +1,9 @@
 interface BounceOptions {
     height?: number;
+    intensity?: number;
     scale?: boolean;
     fade?: boolean;
+    direction?: 'up' | 'down';
     spring?: {
         stiffness?: number;
         damping?: number;

package/dist/transitions/bounce.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bounce.d.ts","sourceRoot":"","sources":["../../src/lib/transitions/bounce.ts"],"names":[],"mappings":"AAAA,UAAU,aAAa;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE;QACP,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;CACH;AAED,eAAO,MAAM,MAAM,GAAI,UAAS,aAAkB;kBAShC,WAAW;;wBAdb,MAAM;sBACR,MAAM;;yBAeG,MAAM;;mBAkBV,WAAW;;wBAlCd,MAAM;sBACR,MAAM;;yBAmCG,MAAM;;CAmB5B,CAAC"}
+{"version":3,"file":"bounce.d.ts","sourceRoot":"","sources":["../../src/lib/transitions/bounce.ts"],"names":[],"mappings":"AAAA,UAAU,aAAa;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IAC1B,MAAM,CAAC,EAAE;QACP,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;CACH;AAED,eAAO,MAAM,MAAM,GAAI,UAAS,aAAkB;kBAWhC,WAAW;;wBAhBb,MAAM;sBACR,MAAM;;yBAiBG,MAAM;;mBA0BV,WAAW;;wBA5Cd,MAAM;sBACR,MAAM;;yBA6CG,MAAM;;CA2B5B,CAAC"}

package/dist/transitions/fly.d.ts

@@ -0,0 +1,27 @@
+interface FlyOptions {
+    x?: number | string;
+    y?: number | string;
+    opacity?: number;
+    spring?: {
+        stiffness?: number;
+        damping?: number;
+    };
+}
+export declare const fly: (options?: FlyOptions) => {
+    in: (element: HTMLElement) => {
+        spring: {
+            stiffness?: number;
+            damping?: number;
+        };
+        tick: (progress: number) => void;
+    };
+    out: (element: HTMLElement) => {
+        spring: {
+            stiffness?: number;
+            damping?: number;
+        };
+        tick: (progress: number) => void;
+    };
+};
+export {};
+//# sourceMappingURL=fly.d.ts.map

package/dist/transitions/fly.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fly.d.ts","sourceRoot":"","sources":["../../src/lib/transitions/fly.ts"],"names":[],"mappings":"AAAA,UAAU,UAAU;IAClB,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE;QACP,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;CACH;AAED,eAAO,MAAM,GAAG,GAAI,UAAS,UAAe;kBAiB1B,WAAW;;wBAtBb,MAAM;sBACR,MAAM;;yBAuBG,MAAM;;mBAQV,WAAW;;wBAhCd,MAAM;sBACR,MAAM;;yBAiCG,MAAM;;CAS5B,CAAC"}

package/dist/transitions/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=(r={})=>{const{from:i=0,to:c=1,spring:a={stiffness:300,damping:30}}=r;return{in:o=>({spring:a,tick:s=>{const t=i+(c-i)*s;o.style.opacity=t.toString()}}),out:o=>({spring:a,tick:s=>{const t=i+(c-i)*s;o.style.opacity=t.toString()}})}},u=(r={})=>{const{from:i=0,to:c=1,spring:a={stiffness:300,damping:30}}=r;return{in:o=>({spring:a,tick:s=>{const t=i+(c-i)*s;o.style.transform=`scale(${t})`}}),out:o=>({spring:a,tick:s=>{const t=i+(c-i)*s;o.style.transform=`scale(${t})`}})}},y=(r={})=>{const{direction:i="left",distance:c=100,fade:a=!0,spring:o={stiffness:400,damping:35}}=r,s=t=>{const n=(1-t)*c;switch(i){case"left":return`translateX(${-n}px)`;case"right":return`translateX(${n}px)`;case"up":return`translateY(${-n}px)`;case"down":return`translateY(${n}px)`}};return{in:t=>({spring:o,tick:n=>{t.style.transform=s(n),a&&(t.style.opacity=n.toString())}}),out:t=>({spring:o,tick:n=>{t.style.transform=s(n),a&&(t.style.opacity=n.toString())}})}},p=(r={})=>{const{degrees:i=360,clockwise:c=!0,scale:a=!1,fade:o=!1,spring:s={stiffness:500,damping:25}}=r,t=c?i:-i;return{in:n=>({spring:s,tick:e=>{const f=[`rotate(${e*t}deg)`];a&&f.push(`scale(${e})`),n.style.transform=f.join(" "),o&&(n.style.opacity=e.toString())}}),out:n=>({spring:s,tick:e=>{const f=[`rotate(${e*t}deg)`];a&&f.push(`scale(${e})`),n.style.transform=f.join(" "),o&&(n.style.opacity=e.toString())}})}},d=(r={})=>{const{height:i=20,scale:c=!0,fade:a=!1,spring:o={stiffness:800,damping:15}}=r;return{in:s=>({spring:o,tick:t=>{const n=[],e=Math.sin(t*Math.PI)*i*(1-t);n.push(`translateY(${-e}px)`),c&&n.push(`scale(${.8+t*.2})`),s.style.transform=n.join(" "),a&&(s.style.opacity=t.toString())}}),out:s=>({spring:o,tick:t=>{const n=[],e=Math.sin(t*Math.PI)*i*(1-t);n.push(`translateY(${-e}px)`),c&&n.push(`scale(${.8+t*.2})`),s.style.transform=n.join(" "),a&&(s.style.opacity=t.toString())}})}},g=(r={})=>{const{amount:i=10,scale:c=!1,fade:a=!0,spring:o={stiffness:300,damping:30}}=r;return{in:s=>({spring:o,tick:t=>{const e=[`blur(${(1-t)*i}px)`];s.style.filter=e.join(" "),c&&(s.style.transform=`scale(${.8+t*.2})`),a&&(s.style.opacity=t.toString())}}),out:s=>({spring:o,tick:t=>{const e=[`blur(${(1-t)*i}px)`];s.style.filter=e.join(" "),c&&(s.style.transform=`scale(${.8+t*.2})`),a&&(s.style.opacity=t.toString())}})}},m=(r={})=>{const{spring:i={stiffness:1e3,damping:100}}=r;return{in:c=>({spring:i,tick:a=>{}}),out:c=>({spring:i,tick:a=>{}})}};exports.blur=g;exports.bounce=d;exports.fade=l;exports.none=m;exports.rotate=p;exports.scale=u;exports.slide=y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const $=(p={})=>{const{from:n=0,to:s=1,spring:r={stiffness:300,damping:30}}=p;return{in:u=>({spring:r,tick:l=>{const c=n+(s-n)*l;u.style.opacity=c.toString()}}),out:u=>({spring:r,tick:l=>{const c=n+(s-n)*l;u.style.opacity=c.toString()}})}},b=(p={})=>{const{start:n=0,opacity:s=0,axis:r="both",spring:u={stiffness:300,damping:30}}=p,l=c=>{switch(r){case"x":return`scaleX(${c})`;case"y":return`scaleY(${c})`;case"both":default:return`scale(${c})`}};return{in:c=>({spring:u,tick:t=>{const e=n+(1-n)*t;c.style.transform=l(e),c.style.opacity=(s+(1-s)*t).toString()}}),out:c=>({spring:u,tick:t=>{const e=n+(1-n)*t;c.style.transform=l(e),c.style.opacity=(s+(1-s)*t).toString()}})}},m=(p={})=>{const{direction:n,distance:s=100,opacity:r=0,fade:u=!0,axis:l,spring:c={stiffness:400,damping:35}}=p,e=n||(l==="x"?"left":l==="y"?"up":"left"),o=a=>typeof a=="number"?`${a}px`:a,f=a=>{const i=1-a,y=typeof s=="number"?i*s:`calc(${o(s)} * ${i})`;switch(e){case"left":return typeof s=="number"?`translateX(${-y}px)`:`translateX(calc(-1 * ${y}))`;case"right":return typeof s=="number"?`translateX(${y}px)`:`translateX(${y})`;case"up":return typeof s=="number"?`translateY(${-y}px)`:`translateY(calc(-1 * ${y}))`;case"down":return typeof s=="number"?`translateY(${y}px)`:`translateY(${y})`}};return{in:a=>({spring:c,tick:i=>{a.style.transform=f(i),u&&(a.style.opacity=(r+(1-r)*i).toString())}}),out:a=>({spring:c,tick:i=>{a.style.transform=f(i),u&&(a.style.opacity=(r+(1-r)*i).toString())}})}},d=(p={})=>{const{degrees:n=360,clockwise:s=!0,scale:r=!1,fade:u=!0,origin:l="center",axis:c="2d",perspective:t=800,spring:e={stiffness:500,damping:25}}=p,o=s?n:-n,f=a=>{const i=(1-a)*o;switch(c){case"x":return`perspective(${t}px) rotateX(${i}deg)`;case"y":return`perspective(${t}px) rotateY(${i}deg)`;case"z":return`rotateZ(${i}deg)`;case"2d":default:return`rotate(${i}deg)`}};return{in:a=>({spring:e,tick:i=>{const y=[f(i)];r&&y.push(`scale(${i})`),a.style.transform=y.join(" "),a.style.transformOrigin=l,u&&(a.style.opacity=i.toString())}}),out:a=>({spring:e,tick:i=>{const y=[f(i)];r&&y.push(`scale(${i})`),a.style.transform=y.join(" "),a.style.transformOrigin=l,u&&(a.style.opacity=i.toString())}})}},g=(p={})=>{const{height:n=20,intensity:s=1,scale:r=!0,fade:u=!0,direction:l="up",spring:c={stiffness:800,damping:15}}=p;return{in:t=>({spring:c,tick:e=>{const o=[],f=Math.sin(e*Math.PI*(1+s)),a=1-e,i=f*n*a;if(l==="up"?o.push(`translateY(${-Math.abs(i)}px)`):o.push(`translateY(${Math.abs(i)}px)`),r){const y=.8+e*.2+f*.05*a;o.push(`scale(${y})`)}t.style.transform=o.join(" "),u&&(t.style.opacity=e.toString())}}),out:t=>({spring:c,tick:e=>{const o=[],f=Math.sin(e*Math.PI*(1+s)),a=1-e,i=f*n*a;if(l==="up"?o.push(`translateY(${-Math.abs(i)}px)`):o.push(`translateY(${Math.abs(i)}px)`),r){const y=.8+e*.2+f*.05*a;o.push(`scale(${y})`)}t.style.transform=o.join(" "),u&&(t.style.opacity=e.toString())}})}},x=(p={})=>{const{amount:n=10,opacity:s=0,scale:r=!1,fade:u=!0,spring:l={stiffness:300,damping:30}}=p,c=t=>typeof t=="number"?`${t}px`:t;return{in:t=>({spring:l,tick:e=>{const o=1-e,f=typeof n=="number"?o*n:`calc(${c(n)} * ${o})`;t.style.filter=typeof n=="number"?`blur(${f}px)`:`blur(${f})`,r&&(t.style.transform=`scale(${.8+e*.2})`),u&&(t.style.opacity=(s+(1-s)*e).toString())}}),out:t=>({spring:l,tick:e=>{const o=1-e,f=typeof n=="number"?o*n:`calc(${c(n)} * ${o})`;t.style.filter=typeof n=="number"?`blur(${f}px)`:`blur(${f})`,r&&(t.style.transform=`scale(${.8+e*.2})`),u&&(t.style.opacity=(s+(1-s)*e).toString())}})}},h=(p={})=>{const{x:n=0,y:s=-100,opacity:r=0,spring:u={stiffness:400,damping:35}}=p,l=t=>typeof t=="number"?`${t}px`:t,c=t=>typeof t=="number"?`${t}px`:t;return{in:t=>({spring:u,tick:e=>{const o=typeof n=="number"?(1-e)*n:`calc(${l(n)} * ${1-e})`,f=typeof s=="number"?(1-e)*s:`calc(${c(s)} * ${1-e})`;t.style.transform=`translate(${typeof n=="number"?o+"px":o}, ${typeof s=="number"?f+"px":f})`,t.style.opacity=(r+(1-r)*e).toString()}}),out:t=>({spring:u,tick:e=>{const o=typeof n=="number"?(1-e)*n:`calc(${l(n)} * ${1-e})`,f=typeof s=="number"?(1-e)*s:`calc(${c(s)} * ${1-e})`;t.style.transform=`translate(${typeof n=="number"?o+"px":o}, ${typeof s=="number"?f+"px":f})`,t.style.opacity=(r+(1-r)*e).toString()}})}},k=(p={})=>{const{spring:n={stiffness:1e3,damping:100}}=p;return{in:s=>({spring:n,tick:r=>{}}),out:s=>({spring:n,tick:r=>{}})}};exports.blur=x;exports.bounce=g;exports.fade=$;exports.fly=h;exports.none=k;exports.rotate=d;exports.scale=b;exports.slide=m;

package/dist/transitions/index.d.ts

@@ -4,5 +4,6 @@ export * from './slide';
 export * from './rotate';
 export * from './bounce';
 export * from './blur';
+export * from './fly';
 export * from './none';
 //# sourceMappingURL=index.d.ts.map

package/dist/transitions/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/transitions/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/transitions/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC"}

package/dist/transitions/index.js

@@ -1,173 +1,237 @@
-const l = (r = {}) => {
+const $ = (p = {}) => {
   const {
-    from: i = 0,
-    to: c = 1,
-    spring: a = { stiffness: 300, damping: 30 }
-  } = r;
+    from: n = 0,
+    to: e = 1,
+    spring: r = { stiffness: 300, damping: 30 }
+  } = p;
   return {
-    in: (o) => ({
-      spring: a,
-      tick: (s) => {
-        const t = i + (c - i) * s;
-        o.style.opacity = t.toString();
+    in: (u) => ({
+      spring: r,
+      tick: (l) => {
+        const c = n + (e - n) * l;
+        u.style.opacity = c.toString();
       }
     }),
-    out: (o) => ({
-      spring: a,
-      tick: (s) => {
-        const t = i + (c - i) * s;
-        o.style.opacity = t.toString();
+    out: (u) => ({
+      spring: r,
+      tick: (l) => {
+        const c = n + (e - n) * l;
+        u.style.opacity = c.toString();
       }
     })
   };
-}, u = (r = {}) => {
+}, m = (p = {}) => {
   const {
-    from: i = 0,
-    to: c = 1,
-    spring: a = { stiffness: 300, damping: 30 }
-  } = r;
+    start: n = 0,
+    opacity: e = 0,
+    axis: r = "both",
+    spring: u = { stiffness: 300, damping: 30 }
+  } = p, l = (c) => {
+    switch (r) {
+      case "x":
+        return `scaleX(${c})`;
+      case "y":
+        return `scaleY(${c})`;
+      case "both":
+      default:
+        return `scale(${c})`;
+    }
+  };
   return {
-    in: (o) => ({
-      spring: a,
-      tick: (s) => {
-        const t = i + (c - i) * s;
-        o.style.transform = `scale(${t})`;
+    in: (c) => ({
+      spring: u,
+      tick: (t) => {
+        const s = n + (1 - n) * t;
+        c.style.transform = l(s), c.style.opacity = (e + (1 - e) * t).toString();
       }
     }),
-    out: (o) => ({
-      spring: a,
-      tick: (s) => {
-        const t = i + (c - i) * s;
-        o.style.transform = `scale(${t})`;
+    out: (c) => ({
+      spring: u,
+      tick: (t) => {
+        const s = n + (1 - n) * t;
+        c.style.transform = l(s), c.style.opacity = (e + (1 - e) * t).toString();
       }
     })
   };
-}, y = (r = {}) => {
+}, b = (p = {}) => {
   const {
-    direction: i = "left",
-    distance: c = 100,
-    fade: a = !0,
-    spring: o = { stiffness: 400, damping: 35 }
-  } = r, s = (t) => {
-    const n = (1 - t) * c;
-    switch (i) {
+    direction: n,
+    distance: e = 100,
+    opacity: r = 0,
+    fade: u = !0,
+    axis: l,
+    spring: c = { stiffness: 400, damping: 35 }
+  } = p, s = n || (l === "x" ? "left" : l === "y" ? "up" : "left"), o = (a) => typeof a == "number" ? `${a}px` : a, f = (a) => {
+    const i = 1 - a, y = typeof e == "number" ? i * e : `calc(${o(e)} * ${i})`;
+    switch (s) {
       case "left":
-        return `translateX(${-n}px)`;
+        return typeof e == "number" ? `translateX(${-y}px)` : `translateX(calc(-1 * ${y}))`;
       case "right":
-        return `translateX(${n}px)`;
+        return typeof e == "number" ? `translateX(${y}px)` : `translateX(${y})`;
       case "up":
-        return `translateY(${-n}px)`;
+        return typeof e == "number" ? `translateY(${-y}px)` : `translateY(calc(-1 * ${y}))`;
       case "down":
-        return `translateY(${n}px)`;
+        return typeof e == "number" ? `translateY(${y}px)` : `translateY(${y})`;
     }
   };
   return {
-    in: (t) => ({
-      spring: o,
-      tick: (n) => {
-        t.style.transform = s(n), a && (t.style.opacity = n.toString());
+    in: (a) => ({
+      spring: c,
+      tick: (i) => {
+        a.style.transform = f(i), u && (a.style.opacity = (r + (1 - r) * i).toString());
       }
     }),
-    out: (t) => ({
-      spring: o,
-      tick: (n) => {
-        t.style.transform = s(n), a && (t.style.opacity = n.toString());
+    out: (a) => ({
+      spring: c,
+      tick: (i) => {
+        a.style.transform = f(i), u && (a.style.opacity = (r + (1 - r) * i).toString());
       }
     })
   };
-}, p = (r = {}) => {
+}, x = (p = {}) => {
   const {
-    degrees: i = 360,
-    clockwise: c = !0,
-    scale: a = !1,
-    fade: o = !1,
+    degrees: n = 360,
+    clockwise: e = !0,
+    scale: r = !1,
+    fade: u = !0,
+    origin: l = "center",
+    axis: c = "2d",
+    perspective: t = 800,
     spring: s = { stiffness: 500, damping: 25 }
-  } = r, t = c ? i : -i;
+  } = p, o = e ? n : -n, f = (a) => {
+    const i = (1 - a) * o;
+    switch (c) {
+      case "x":
+        return `perspective(${t}px) rotateX(${i}deg)`;
+      case "y":
+        return `perspective(${t}px) rotateY(${i}deg)`;
+      case "z":
+        return `rotateZ(${i}deg)`;
+      case "2d":
+      default:
+        return `rotate(${i}deg)`;
+    }
+  };
   return {
-    in: (n) => ({
+    in: (a) => ({
       spring: s,
-      tick: (e) => {
-        const f = [`rotate(${e * t}deg)`];
-        a && f.push(`scale(${e})`), n.style.transform = f.join(" "), o && (n.style.opacity = e.toString());
+      tick: (i) => {
+        const y = [f(i)];
+        r && y.push(`scale(${i})`), a.style.transform = y.join(" "), a.style.transformOrigin = l, u && (a.style.opacity = i.toString());
       }
     }),
-    out: (n) => ({
+    out: (a) => ({
       spring: s,
-      tick: (e) => {
-        const f = [`rotate(${e * t}deg)`];
-        a && f.push(`scale(${e})`), n.style.transform = f.join(" "), o && (n.style.opacity = e.toString());
+      tick: (i) => {
+        const y = [f(i)];
+        r && y.push(`scale(${i})`), a.style.transform = y.join(" "), a.style.transformOrigin = l, u && (a.style.opacity = i.toString());
       }
     })
   };
-}, d = (r = {}) => {
+}, d = (p = {}) => {
   const {
-    height: i = 20,
-    scale: c = !0,
-    fade: a = !1,
-    spring: o = { stiffness: 800, damping: 15 }
-  } = r;
+    height: n = 20,
+    intensity: e = 1,
+    scale: r = !0,
+    fade: u = !0,
+    direction: l = "up",
+    spring: c = { stiffness: 800, damping: 15 }
+  } = p;
   return {
-    in: (s) => ({
-      spring: o,
-      tick: (t) => {
-        const n = [], e = Math.sin(t * Math.PI) * i * (1 - t);
-        n.push(`translateY(${-e}px)`), c && n.push(`scale(${0.8 + t * 0.2})`), s.style.transform = n.join(" "), a && (s.style.opacity = t.toString());
+    in: (t) => ({
+      spring: c,
+      tick: (s) => {
+        const o = [], f = Math.sin(s * Math.PI * (1 + e)), a = 1 - s, i = f * n * a;
+        if (l === "up" ? o.push(`translateY(${-Math.abs(i)}px)`) : o.push(`translateY(${Math.abs(i)}px)`), r) {
+          const y = 0.8 + s * 0.2 + f * 0.05 * a;
+          o.push(`scale(${y})`);
+        }
+        t.style.transform = o.join(" "), u && (t.style.opacity = s.toString());
       }
     }),
-    out: (s) => ({
-      spring: o,
-      tick: (t) => {
-        const n = [], e = Math.sin(t * Math.PI) * i * (1 - t);
-        n.push(`translateY(${-e}px)`), c && n.push(`scale(${0.8 + t * 0.2})`), s.style.transform = n.join(" "), a && (s.style.opacity = t.toString());
+    out: (t) => ({
+      spring: c,
+      tick: (s) => {
+        const o = [], f = Math.sin(s * Math.PI * (1 + e)), a = 1 - s, i = f * n * a;
+        if (l === "up" ? o.push(`translateY(${-Math.abs(i)}px)`) : o.push(`translateY(${Math.abs(i)}px)`), r) {
+          const y = 0.8 + s * 0.2 + f * 0.05 * a;
+          o.push(`scale(${y})`);
+        }
+        t.style.transform = o.join(" "), u && (t.style.opacity = s.toString());
       }
     })
   };
-}, $ = (r = {}) => {
+}, g = (p = {}) => {
   const {
-    amount: i = 10,
-    scale: c = !1,
-    fade: a = !0,
-    spring: o = { stiffness: 300, damping: 30 }
-  } = r;
+    amount: n = 10,
+    opacity: e = 0,
+    scale: r = !1,
+    fade: u = !0,
+    spring: l = { stiffness: 300, damping: 30 }
+  } = p, c = (t) => typeof t == "number" ? `${t}px` : t;
   return {
-    in: (s) => ({
-      spring: o,
-      tick: (t) => {
-        const e = [`blur(${(1 - t) * i}px)`];
-        s.style.filter = e.join(" "), c && (s.style.transform = `scale(${0.8 + t * 0.2})`), a && (s.style.opacity = t.toString());
+    in: (t) => ({
+      spring: l,
+      tick: (s) => {
+        const o = 1 - s, f = typeof n == "number" ? o * n : `calc(${c(n)} * ${o})`;
+        t.style.filter = typeof n == "number" ? `blur(${f}px)` : `blur(${f})`, r && (t.style.transform = `scale(${0.8 + s * 0.2})`), u && (t.style.opacity = (e + (1 - e) * s).toString());
       }
     }),
-    out: (s) => ({
-      spring: o,
-      tick: (t) => {
-        const e = [`blur(${(1 - t) * i}px)`];
-        s.style.filter = e.join(" "), c && (s.style.transform = `scale(${0.8 + t * 0.2})`), a && (s.style.opacity = t.toString());
+    out: (t) => ({
+      spring: l,
+      tick: (s) => {
+        const o = 1 - s, f = typeof n == "number" ? o * n : `calc(${c(n)} * ${o})`;
+        t.style.filter = typeof n == "number" ? `blur(${f}px)` : `blur(${f})`, r && (t.style.transform = `scale(${0.8 + s * 0.2})`), u && (t.style.opacity = (e + (1 - e) * s).toString());
       }
     })
   };
-}, m = (r = {}) => {
+}, h = (p = {}) => {
   const {
-    spring: i = { stiffness: 1e3, damping: 100 }
-  } = r;
+    x: n = 0,
+    y: e = -100,
+    opacity: r = 0,
+    spring: u = { stiffness: 400, damping: 35 }
+  } = p, l = (t) => typeof t == "number" ? `${t}px` : t, c = (t) => typeof t == "number" ? `${t}px` : t;
   return {
-    in: (c) => ({
-      spring: i,
-      tick: (a) => {
+    in: (t) => ({
+      spring: u,
+      tick: (s) => {
+        const o = typeof n == "number" ? (1 - s) * n : `calc(${l(n)} * ${1 - s})`, f = typeof e == "number" ? (1 - s) * e : `calc(${c(e)} * ${1 - s})`;
+        t.style.transform = `translate(${typeof n == "number" ? o + "px" : o}, ${typeof e == "number" ? f + "px" : f})`, t.style.opacity = (r + (1 - r) * s).toString();
       }
     }),
-    out: (c) => ({
-      spring: i,
-      tick: (a) => {
+    out: (t) => ({
+      spring: u,
+      tick: (s) => {
+        const o = typeof n == "number" ? (1 - s) * n : `calc(${l(n)} * ${1 - s})`, f = typeof e == "number" ? (1 - s) * e : `calc(${c(e)} * ${1 - s})`;
+        t.style.transform = `translate(${typeof n == "number" ? o + "px" : o}, ${typeof e == "number" ? f + "px" : f})`, t.style.opacity = (r + (1 - r) * s).toString();
+      }
+    })
+  };
+}, k = (p = {}) => {
+  const {
+    spring: n = { stiffness: 1e3, damping: 100 }
+  } = p;
+  return {
+    in: (e) => ({
+      spring: n,
+      tick: (r) => {
+      }
+    }),
+    out: (e) => ({
+      spring: n,
+      tick: (r) => {
       }
     })
   };
 };
 export {
-  $ as blur,
+  g as blur,
   d as bounce,
-  l as fade,
-  m as none,
-  p as rotate,
-  u as scale,
-  y as slide
+  $ as fade,
+  h as fly,
+  k as none,
+  x as rotate,
+  m as scale,
+  b as slide
 };

package/dist/transitions/rotate.d.ts

@@ -3,6 +3,9 @@ interface RotateOptions {
     clockwise?: boolean;
     scale?: boolean;
     fade?: boolean;
+    origin?: string;
+    axis?: '2d' | 'x' | 'y' | 'z';
+    perspective?: number;
     spring?: {
         stiffness?: number;
         damping?: number;

package/dist/transitions/rotate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rotate.d.ts","sourceRoot":"","sources":["../../src/lib/transitions/rotate.ts"],"names":[],"mappings":"AAAA,UAAU,aAAa;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE;QACP,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;CACH;AAED,eAAO,MAAM,MAAM,GAAI,UAAS,aAAkB;kBAYhC,WAAW;;wBAjBb,MAAM;sBACR,MAAM;;yBAkBG,MAAM;;mBAcV,WAAW;;wBAjCd,MAAM;sBACR,MAAM;;yBAkCG,MAAM;;CAe5B,CAAC"}
+{"version":3,"file":"rotate.d.ts","sourceRoot":"","sources":["../../src/lib/transitions/rotate.ts"],"names":[],"mappings":"AAAA,UAAU,aAAa;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE;QACP,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;CACH;AAED,eAAO,MAAM,MAAM,GAAI,UAAS,aAAkB;kBA8BhC,WAAW;;wBAnCb,MAAM;sBACR,MAAM;;yBAoCG,MAAM;;mBAeV,WAAW;;wBApDd,MAAM;sBACR,MAAM;;yBAqDG,MAAM;;CAgB5B,CAAC"}

package/dist/transitions/scale.d.ts

@@ -1,7 +1,7 @@
 interface ScaleOptions {
-    duration?: number;
-    from?: number;
-    to?: number;
+    start?: number;
+    opacity?: number;
+    axis?: 'x' | 'y' | 'both';
     spring?: {
         stiffness?: number;
         damping?: number;

package/dist/transitions/scale.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scale.d.ts","sourceRoot":"","sources":["../../src/lib/transitions/scale.ts"],"names":[],"mappings":"AAAA,UAAU,YAAY;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE;QACP,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;CACH;AAED,eAAO,MAAM,KAAK,GAAI,UAAS,YAAiB;kBAQ9B,WAAW;;wBAbb,MAAM;sBACR,MAAM;;yBAcG,MAAM;;mBAKV,WAAW;;wBApBd,MAAM;sBACR,MAAM;;yBAqBG,MAAM;;CAM5B,CAAC"}
+{"version":3,"file":"scale.d.ts","sourceRoot":"","sources":["../../src/lib/transitions/scale.ts"],"names":[],"mappings":"AAAA,UAAU,YAAY;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,MAAM,CAAC;IAC1B,MAAM,CAAC,EAAE;QACP,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;CACH;AAED,eAAO,MAAM,KAAK,GAAI,UAAS,YAAiB;kBAqB9B,WAAW;;wBA1Bb,MAAM;sBACR,MAAM;;yBA2BG,MAAM;;mBAMV,WAAW;;wBAlCd,MAAM;sBACR,MAAM;;yBAmCG,MAAM;;CAO5B,CAAC"}

package/dist/transitions/slide.d.ts

@@ -1,7 +1,9 @@
 interface SlideOptions {
     direction?: 'left' | 'right' | 'up' | 'down';
-    distance?: number;
+    distance?: number | string;
+    opacity?: number;
     fade?: boolean;
+    axis?: 'x' | 'y';
     spring?: {
         stiffness?: number;
         damping?: number;

package/dist/transitions/slide.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slide.d.ts","sourceRoot":"","sources":["../../src/lib/transitions/slide.ts"],"names":[],"mappings":"AAAA,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,MAAM,CAAC;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE;QACP,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;CACH;AAED,eAAO,MAAM,KAAK,GAAI,UAAS,YAAiB;kBAuB9B,WAAW;;wBA5Bb,MAAM;sBACR,MAAM;;yBA6BG,MAAM;;mBAOV,WAAW;;wBArCd,MAAM;sBACR,MAAM;;yBAsCG,MAAM;;CAQ5B,CAAC"}
+{"version":3,"file":"slide.d.ts","sourceRoot":"","sources":["../../src/lib/transitions/slide.ts"],"names":[],"mappings":"AAAA,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,MAAM,CAAC;IAC7C,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB,MAAM,CAAC,EAAE;QACP,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;CACH;AAED,eAAO,MAAM,KAAK,GAAI,UAAS,YAAiB;kBAmD9B,WAAW;;wBAxDb,MAAM;sBACR,MAAM;;yBAyDG,MAAM;;mBAOV,WAAW;;wBAjEd,MAAM;sBACR,MAAM;;yBAkEG,MAAM;;CAQ5B,CAAC"}