@ssgoi/core 2.0.0 → 2.1.0

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

@@ -1 +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"}
+{"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;QAChB,QAAQ,EAAE,QAAQ,CAAC,eAAe,CAAC,CAAC;QACpC,SAAS,EAAE,IAAI,GAAG,KAAK,CAAC;KACzB,GAAG,IAAI,CAAC;CACV;AAED,MAAM,WAAW,cAAc,CAAC,eAAe,GAAG,MAAM;IACtD,MAAM,CAAC,EAAE,gBAAgB,CAAC,eAAe,CAAC,CAAC;IAC3C,KAAK,EAAE;QACL,QAAQ,EAAE,eAAe,CAAC;QAC1B,QAAQ,EAAE,eAAe,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;KAC5E,CAAC;IACF,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,CACL,OAAO,EAAE,iBAAiB,CAAC,eAAe,CAAC,KACxC,OAAO,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,CAAC;IAC9C,MAAM,EAAE,CACN,OAAO,EAAE,iBAAiB,CAAC,eAAe,CAAC,KACxC,OAAO,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,CAAC;CAC/C;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,eAAO,MAAM,qBAAqB,GAAI,eAAe,GAAG,MAAM,EAC5D,SAAS,eAAe,CAAC,eAAe,CAAC,KACxC,kBAAkB,CAAC,eAAe,CA0HpC,CAAC"}

package/dist/transition.d.ts

@@ -1,20 +1,60 @@
 import { StrategyContext, TRANSITION_STRATEGY, TransitionStrategy } from './transition-strategy';
-import { Transition, TransitionCallback } from './types';
-/**
- * Key type for transitions - can be string or symbol
- */
-type TransitionKey = string | symbol;
+import { TransitionCallback, TransitionOptions, TransitionKey } from './types';
+export declare function generateAutoKey(): TransitionKey;
 /**
  * Framework-agnostic transition function that can be used as a ref
- * Usage: <div ref={transition({ key: 'fade', in, out })} />
+ *
+ * @description
+ * Creates a transition that can be attached to DOM elements via ref.
+ * Manages entrance and exit animations with a complete lifecycle system.
+ *
+ * **IN Animation Lifecycle (Element Entering):**
+ * 1. `prepare` - Setup element's initial state (e.g., opacity: 0)
+ * 2. `wait` - Optional async delay before animation starts
+ * 3. `onStart` - Called when animation begins
+ * 4. `tick` - Called on each animation frame with progress value (0 → 1)
+ * 5. `onEnd` - Called when animation completes
+ *
+ * **OUT Animation Lifecycle (Element Exiting):**
+ * 1. `prepare` - Setup element's initial state for exit
+ * 2. `wait` - Optional async delay before animation starts
+ * 3. `onStart` - Called when animation begins
+ * 4. `tick` - Called on each animation frame with progress value (1 → 0)
+ * 5. `onEnd` - Called when animation completes and element is removed
+ *
+ * The `key` parameter is crucial for transition management - it uniquely identifies
+ * each transition instance, allowing the system to track, cleanup, and prevent
+ * conflicts between multiple transitions on the same element.
+ *
+ * @param {object} options - Configuration object
+ * @param {TransitionKey} options.key - Unique identifier for this transition instance.
+ *                                      Can be string or symbol. Used to manage and cleanup
+ *                                      transitions internally.
+ * @param {Function} options.in - Configuration for entrance animation.
+ *                                Returns TransitionConfig with lifecycle hooks.
+ * @param {Function} options.out - Configuration for exit animation.
+ *                                 Returns TransitionConfig with lifecycle hooks.
  *
  * @template TAnimationValue - The type of value being animated (number | object)
+ *
+ * @returns {TransitionCallback} A callback function to be used as a ref
+ *
+ * @example
+ * ```tsx
+ * // Simple fade transition
+ * <div ref={transition({
+ *   key: 'hero-fade',
+ *   in: (element) => ({
+ *     prepare: (el) => el.style.opacity = '0',
+ *     tick: (progress) => el.style.opacity = progress.toString(),
+ *   }),
+ *   out: (element) => ({
+ *     tick: (progress) => el.style.opacity = progress.toString(),
+ *   })
+ * })} />
+ * ```
  */
-export declare function transition<TAnimationValue = number>(options: {
-    key: TransitionKey;
-    in?: Transition<undefined, TAnimationValue>["in"];
-    out?: Transition<undefined, TAnimationValue>["out"];
+export declare function transition<TAnimationValue = number>(options: TransitionOptions<undefined, TAnimationValue> & {
     [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,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"}
+{"version":3,"file":"transition.d.ts","sourceRoot":"","sources":["../src/lib/transition.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AACjG,OAAO,KAAK,EAAc,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AACjF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AA+D7C,wBAAgB,eAAe,IAAI,aAAa,CAY/C;AAcD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,wBAAgB,UAAU,CAAC,eAAe,GAAG,MAAM,EACjD,OAAO,EAAE,iBAAiB,CAAC,SAAS,EAAE,eAAe,CAAC,GAAG;IACvD,CAAC,mBAAmB,CAAC,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,CAAC,eAAe,CAAC,KAAK,kBAAkB,CAAC,eAAe,CAAC,CAAC;CAC5G,GACA,kBAAkB,CAmBpB"}

package/dist/transitions/blur.d.ts

@@ -1,3 +1,4 @@
+import { TransitionKey } from '../types';
 interface BlurOptions {
     amount?: number | string;
     opacity?: number;
@@ -7,8 +8,10 @@ interface BlurOptions {
         stiffness?: number;
         damping?: number;
     };
+    key?: TransitionKey;
 }
 export declare const blur: (options?: BlurOptions) => {
+    key?: TransitionKey | undefined;
     in: (element: HTMLElement) => {
         spring: {
             stiffness?: number;

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,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"}
+{"version":3,"file":"blur.d.ts","sourceRoot":"","sources":["../../src/lib/transitions/blur.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE9C,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;IACF,GAAG,CAAC,EAAE,aAAa,CAAC;CACrB;AAED,eAAO,MAAM,IAAI,GAAI,UAAS,WAAgB;;kBAe5B,WAAW;;wBArBb,MAAM;sBACR,MAAM;;yBAsBG,MAAM;;mBAmBV,WAAW;;wBA1Cd,MAAM;sBACR,MAAM;;yBA2CG,MAAM;;CAqB5B,CAAC"}

package/dist/transitions/bounce.d.ts

@@ -1,3 +1,4 @@
+import { TransitionKey } from '../types';
 interface BounceOptions {
     height?: number;
     intensity?: number;
@@ -8,8 +9,10 @@ interface BounceOptions {
         stiffness?: number;
         damping?: number;
     };
+    key?: TransitionKey;
 }
 export declare const bounce: (options?: BounceOptions) => {
+    key?: TransitionKey | undefined;
     in: (element: HTMLElement) => {
         spring: {
             stiffness?: 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,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"}
+{"version":3,"file":"bounce.d.ts","sourceRoot":"","sources":["../../src/lib/transitions/bounce.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE9C,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;IACF,GAAG,CAAC,EAAE,aAAa,CAAC;CACrB;AAED,eAAO,MAAM,MAAM,GAAI,UAAS,aAAkB;;kBAYhC,WAAW;;wBAlBb,MAAM;sBACR,MAAM;;yBAmBG,MAAM;;mBA0BV,WAAW;;wBA9Cd,MAAM;sBACR,MAAM;;yBA+CG,MAAM;;CA4B5B,CAAC"}

package/dist/transitions/fade.d.ts

@@ -1,3 +1,4 @@
+import { TransitionKey } from '../types';
 interface FadeOptions {
     from?: number;
     to?: number;
@@ -5,8 +6,10 @@ interface FadeOptions {
         stiffness?: number;
         damping?: number;
     };
+    key?: TransitionKey;
 }
 export declare const fade: (options?: FadeOptions) => {
+    key?: TransitionKey | undefined;
     in: (element: HTMLElement) => {
         spring: {
             stiffness?: number;

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

@@ -1 +1 @@
-{"version":3,"file":"fade.d.ts","sourceRoot":"","sources":["../../src/lib/transitions/fade.ts"],"names":[],"mappings":"AAAA,UAAU,WAAW;IACnB,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,IAAI,GAAI,UAAS,WAAgB;kBAQ5B,WAAW;;wBAbb,MAAM;sBACR,MAAM;;yBAcG,MAAM;;mBAKV,WAAW;;wBApBd,MAAM;sBACR,MAAM;;yBAqBG,MAAM;;CAM5B,CAAC"}
+{"version":3,"file":"fade.d.ts","sourceRoot":"","sources":["../../src/lib/transitions/fade.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE9C,UAAU,WAAW;IACnB,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;IACF,GAAG,CAAC,EAAE,aAAa,CAAC;CACrB;AAED,eAAO,MAAM,IAAI,GAAI,UAAS,WAAgB;;kBAS5B,WAAW;;wBAfb,MAAM;sBACR,MAAM;;yBAgBG,MAAM;;mBAKV,WAAW;;wBAtBd,MAAM;sBACR,MAAM;;yBAuBG,MAAM;;CAO5B,CAAC"}

package/dist/transitions/fly.d.ts

@@ -1,3 +1,4 @@
+import { TransitionKey } from '../types';
 interface FlyOptions {
     x?: number | string;
     y?: number | string;
@@ -6,8 +7,10 @@ interface FlyOptions {
         stiffness?: number;
         damping?: number;
     };
+    key?: TransitionKey;
 }
 export declare const fly: (options?: FlyOptions) => {
+    key?: TransitionKey | undefined;
     in: (element: HTMLElement) => {
         spring: {
             stiffness?: number;

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

@@ -1 +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"}
+{"version":3,"file":"fly.d.ts","sourceRoot":"","sources":["../../src/lib/transitions/fly.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE9C,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;IACF,GAAG,CAAC,EAAE,aAAa,CAAC;CACrB;AAED,eAAO,MAAM,GAAG,GAAI,UAAS,UAAe;;kBAkB1B,WAAW;;wBAxBb,MAAM;sBACR,MAAM;;yBAyBG,MAAM;;mBAQV,WAAW;;wBAlCd,MAAM;sBACR,MAAM;;yBAmCG,MAAM;;CAU5B,CAAC"}

package/dist/transitions/index.cjs

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

package/dist/transitions/index.js

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

package/dist/transitions/none.d.ts

@@ -1,10 +1,13 @@
+import { TransitionKey } from '../types';
 interface NoneOptions {
     spring?: {
         stiffness?: number;
         damping?: number;
     };
+    key?: TransitionKey;
 }
 export declare const none: (options?: NoneOptions) => {
+    key?: TransitionKey | undefined;
     in: (_element: HTMLElement) => {
         spring: {
             stiffness?: number;

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

@@ -1 +1 @@
-{"version":3,"file":"none.d.ts","sourceRoot":"","sources":["../../src/lib/transitions/none.ts"],"names":[],"mappings":"AAAA,UAAU,WAAW;IACnB,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;mBAM3B,WAAW;;wBAXd,MAAM;sBACR,MAAM;;0BAYI,MAAM;;oBAIV,WAAW;;wBAjBf,MAAM;sBACR,MAAM;;0BAkBI,MAAM;;CAK7B,CAAC"}
+{"version":3,"file":"none.d.ts","sourceRoot":"","sources":["../../src/lib/transitions/none.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE9C,UAAU,WAAW;IACnB,MAAM,CAAC,EAAE;QACP,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,GAAG,CAAC,EAAE,aAAa,CAAC;CACrB;AAED,eAAO,MAAM,IAAI,GAAI,UAAS,WAAgB;;mBAO3B,WAAW;;wBAbd,MAAM;sBACR,MAAM;;0BAcI,MAAM;;oBAIV,WAAW;;wBAnBf,MAAM;sBACR,MAAM;;0BAoBI,MAAM;;CAM7B,CAAC"}

package/dist/transitions/rotate.d.ts

@@ -1,3 +1,4 @@
+import { TransitionKey } from '../types';
 interface RotateOptions {
     degrees?: number;
     clockwise?: boolean;
@@ -10,8 +11,10 @@ interface RotateOptions {
         stiffness?: number;
         damping?: number;
     };
+    key?: TransitionKey;
 }
 export declare const rotate: (options?: RotateOptions) => {
+    key?: TransitionKey | undefined;
     in: (element: HTMLElement) => {
         spring: {
             stiffness?: 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,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"}
+{"version":3,"file":"rotate.d.ts","sourceRoot":"","sources":["../../src/lib/transitions/rotate.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE9C,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;IACF,GAAG,CAAC,EAAE,aAAa,CAAC;CACrB;AAED,eAAO,MAAM,MAAM,GAAI,UAAS,aAAkB;;kBA+BhC,WAAW;;wBArCb,MAAM;sBACR,MAAM;;yBAsCG,MAAM;;mBAeV,WAAW;;wBAtDd,MAAM;sBACR,MAAM;;yBAuDG,MAAM;;CAiB5B,CAAC"}

package/dist/transitions/scale.d.ts

@@ -1,3 +1,4 @@
+import { TransitionKey } from '../types';
 interface ScaleOptions {
     start?: number;
     opacity?: number;
@@ -6,8 +7,10 @@ interface ScaleOptions {
         stiffness?: number;
         damping?: number;
     };
+    key?: TransitionKey;
 }
 export declare const scale: (options?: ScaleOptions) => {
+    key?: TransitionKey | undefined;
     in: (element: HTMLElement) => {
         spring: {
             stiffness?: 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,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"}
+{"version":3,"file":"scale.d.ts","sourceRoot":"","sources":["../../src/lib/transitions/scale.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE9C,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;IACF,GAAG,CAAC,EAAE,aAAa,CAAC;CACrB;AAED,eAAO,MAAM,KAAK,GAAI,UAAS,YAAiB;;kBAsB9B,WAAW;;wBA5Bb,MAAM;sBACR,MAAM;;yBA6BG,MAAM;;mBAMV,WAAW;;wBApCd,MAAM;sBACR,MAAM;;yBAqCG,MAAM;;CAQ5B,CAAC"}