@infinityfx/lively 4.0.0-beta.14 → 4.0.0-beta.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,2 +1,2 @@
1
- import{StyleCache as t}from"./cache.js";import{lengthToOffset as e}from"./utils.js";class s{constructor(e,s,i){this.playing=0,this.active=[],this.queue=[],this.paused=!1,this.scale=[1,1],this.correctedBorderRadius="",this.element=e,this.deform=s,this.cache=new t(e,i)}push(t){t.onfinish=this.next.bind(this),this.playing&&"none"===t.composite?(this.queue.push(t),t.animation.pause()):(this.active.push(t),"none"===t.composite&&this.playing++,this.paused&&t.animation.pause())}next(){this.cache.update(),--this.playing>0||(this.active=this.queue.length?this.queue.splice(0,1):[],this.playing=this.active.length,this.pause(!1))}clear(t){this.active.forEach((e=>{e.onfinish=null;try{t?e.commit||"combine"===e.composite||e.animation.cancel():e.animation.finish()}catch(t){e.animation.cancel()}})),t||(this.active=[],this.queue=[],this.playing=0),this.deform||(this.element.style.borderRadius="",this.correctedBorderRadius=this.cache.data.borderRadius=this.cache.computed.borderRadius,this.scale=[1,1])}pause(t){for(const e of this.active)e.animation[t?"pause":"play"]();this.paused=t}step(t){for(const e of this.active)e.step(t);this.correct()}transition(t,e){this.clear(!0);const s=this.cache.difference(null==t?void 0:t.cache.data,e);this.cache.update(),null==t||t.clear(),null==t||t.cache.update(),s.forEach((t=>t.play(this,{commit:!1})))}apply(t,s){const i="strokeLength"===t;this.element.style[i?"strokeDashoffset":t]=i?e(s):s}decomposeScale(){const[t,e]=this.cache.computed.scale.split(" ");let s=Math.max(parseFloat(t)||1,1e-5);/%$/.test(t)&&(s/=100);let i=e?Math.max(parseFloat(e)||1,1e-5):s;return/%$/.test(e)&&(i/=100),[s,i]}computeBorderRadius(){const t=this.cache.computed,e=t.borderRadius.split(/\s*\/\s*/);e.length<2&&(e[1]=e[0]);const s=t.borderRadius!==this.correctedBorderRadius?[1,1]:this.scale;this.scale=this.decomposeScale(),this.element.style.borderRadius=e.map(((t,e)=>t.split(" ").map((t=>{var i;return parseFloat(t)*s[e]/this.scale[e]+((null===(i=t.match(/[^\d\.]+$/))||void 0===i?void 0:i[0])||"px")})).join(" "))).join("/"),this.correctedBorderRadius=t.borderRadius}correct(){if(this.paused||this.deform||!this.active.length)return;this.computeBorderRadius();const[t,e]=this.decomposeScale();for(let s=0;s<this.element.children.length;s++){const i=this.element.children[s],a=i.offsetLeft,c=i.offsetTop,o=i.offsetWidth,h=i.offsetHeight,[r,n]=getComputedStyle(i).translate.split(" ").map(parseFloat);i.style.transform=`translate(${-r||0}px, ${-n||0}px) scale(${1/t}, ${1/e}) translate(${a*(1-t)+o/2*(1-t)+(r||0)}px, ${c*(1-e)+h/2*(1-e)+(n||0)}px)`}}}export{s as default};
1
+ import{StyleCache as t}from"./cache.js";import{lengthToOffset as e}from"./utils.js";class s{constructor(e,s,i){this.playing=0,this.active=[],this.queue=[],this.paused=!1,this.scale=[1,1],this.correctedBorderRadius="",this.element=e,this.deform=s,this.cache=new t(e,i)}push(t){t.onfinish=this.next.bind(this),this.playing&&"none"===t.composite?(this.queue.push(t),t.animation.pause()):(this.active.push(t),"none"===t.composite&&this.playing++,this.paused&&t.animation.pause())}next(){this.cache.update(),--this.playing>0||(this.active=this.queue.length?this.queue.splice(0,1):[],this.playing=this.active.length,this.pause(!1))}clear(t){this.active.forEach((e=>{e.onfinish=null;try{t?e.commit||"combine"===e.composite||e.animation.cancel():e.animation.finish()}catch(t){e.animation.cancel()}})),t||(this.active=[],this.queue=[],this.playing=0),this.deform||(this.element.style.borderRadius="",this.correctedBorderRadius=this.cache.data.borderRadius=this.cache.computed.borderRadius,this.scale=[1,1])}pause(t){for(const e of this.active)e.animation[t?"pause":"play"]();this.paused=t}step(t){for(const e of this.active)e.step(t);!this.paused&&this.active.length&&this.correct()}transition(t,e){this.clear(!0);const s=this.cache.difference(null==t?void 0:t.cache.data,e);this.cache.update(),null==t||t.clear(),null==t||t.cache.update(),s.forEach((t=>t.play(this,{commit:!1})))}apply(t,s){const i="strokeLength"===t;this.element.style[i?"strokeDashoffset":t]=i?e(s):s}decomposeScale(){const[t,e]=this.cache.computed.scale.split(" ");let s=Math.max(parseFloat(t)||1,1e-5);/%$/.test(t)&&(s/=100);let i=e?Math.max(parseFloat(e)||1,1e-5):s;return/%$/.test(e)&&(i/=100),[s,i]}computeBorderRadius(){const t=this.cache.computed,e=t.borderRadius.split(/\s*\/\s*/);e.length<2&&(e[1]=e[0]);const s=t.borderRadius!==this.correctedBorderRadius?[1,1]:this.scale;this.scale=this.decomposeScale(),this.element.style.borderRadius=e.map(((t,e)=>t.split(" ").map((t=>{var i;return parseFloat(t)*s[e]/this.scale[e]+((null===(i=t.match(/[^\d\.]+$/))||void 0===i?void 0:i[0])||"px")})).join(" "))).join("/"),this.correctedBorderRadius=t.borderRadius}correct(){if(this.deform)return;this.computeBorderRadius();const[t,e]=this.decomposeScale();for(let s=0;s<this.element.children.length;s++){const i=this.element.children[s],a=i.offsetLeft,c=i.offsetTop,o=i.offsetWidth,h=i.offsetHeight,[r,n]=getComputedStyle(i).translate.split(" ").map(parseFloat);i.style.transform=`translate(${-r||0}px, ${-n||0}px) scale(${1/t}, ${1/e}) translate(${a*(1-t)+o/2*(1-t)+(r||0)}px, ${c*(1-e)+h/2*(1-e)+(n||0)}px)`}}}export{s as default};
2
2
  //# sourceMappingURL=track.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"track.js","sources":["../../src/core/track.ts"],"sourcesContent":[null],"names":["Track","constructor","element","deform","cachable","this","playing","active","queue","paused","scale","correctedBorderRadius","cache","StyleCache","push","action","onfinish","next","bind","composite","animation","pause","update","length","splice","clear","partial","forEach","commit","cancel","finish","ex","style","borderRadius","data","computed","value","step","index","correct","transition","previous","options","clips","difference","clip","play","apply","prop","val","isStroke","lengthToOffset","decomposeScale","xString","yString","split","x","Math","max","parseFloat","test","y","computeBorderRadius","radii","previousScale","map","axis","i","radius","_a","match","join","children","child","l","offsetLeft","t","offsetTop","w","offsetWidth","h","offsetHeight","tx","ty","getComputedStyle","translate","transform"],"mappings":"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"}
1
+ {"version":3,"file":"track.js","sources":["../../src/core/track.ts"],"sourcesContent":[null],"names":["Track","constructor","element","deform","cachable","this","playing","active","queue","paused","scale","correctedBorderRadius","cache","StyleCache","push","action","onfinish","next","bind","composite","animation","pause","update","length","splice","clear","partial","forEach","commit","cancel","finish","ex","style","borderRadius","data","computed","value","step","index","correct","transition","previous","options","clips","difference","clip","play","apply","prop","val","isStroke","lengthToOffset","decomposeScale","xString","yString","split","x","Math","max","parseFloat","test","y","computeBorderRadius","radii","previousScale","map","axis","i","radius","_a","match","join","children","child","l","offsetLeft","t","offsetTop","w","offsetWidth","h","offsetHeight","tx","ty","getComputedStyle","translate","transform"],"mappings":"oFAOc,MAAOA,EAYjB,WAAAC,CAAYC,EAAmCC,EAAiBC,GARhEC,KAAOC,QAAW,EAClBD,KAAME,OAAa,GACnBF,KAAKG,MAAa,GAElBH,KAAMI,QAAY,EAClBJ,KAAAK,MAA0B,CAAC,EAAG,GAC9BL,KAAqBM,sBAAW,GAG5BN,KAAKH,QAAUA,EACfG,KAAKF,OAASA,EACdE,KAAKO,MAAQ,IAAIC,EAAWX,EAASE,EACxC,CAED,IAAAU,CAAKC,GACDA,EAAOC,SAAWX,KAAKY,KAAKC,KAAKb,MAE7BA,KAAKC,SAAgC,SAArBS,EAAOI,WACvBd,KAAKG,MAAMM,KAAKC,GAChBA,EAAOK,UAAUC,UAEjBhB,KAAKE,OAAOO,KAAKC,GACQ,SAArBA,EAAOI,WAAsBd,KAAKC,UAClCD,KAAKI,QAAQM,EAAOK,UAAUC,QAEzC,CAED,IAAAJ,GACIZ,KAAKO,MAAMU,WAELjB,KAAKC,QAAU,IAErBD,KAAKE,OAASF,KAAKG,MAAMe,OAASlB,KAAKG,MAAMgB,OAAO,EAAG,GAAK,GAC5DnB,KAAKC,QAAUD,KAAKE,OAAOgB,OAC3BlB,KAAKgB,OAAM,GACd,CAED,KAAAI,CAAMC,GACFrB,KAAKE,OAAOoB,SAAQZ,IAChBA,EAAOC,SAAW,KAElB,IACSU,EAGIX,EAAOa,QAA+B,YAArBb,EAAOI,WACzBJ,EAAOK,UAAUS,SAHrBd,EAAOK,UAAUU,QAKxB,CAAC,MAAOC,GACLhB,EAAOK,UAAUS,QACpB,KAGAH,IACDrB,KAAKE,OAAS,GACdF,KAAKG,MAAQ,GACbH,KAAKC,QAAU,GAGdD,KAAKF,SACNE,KAAKH,QAAQ8B,MAAMC,aAAe,GAClC5B,KAAKM,sBAAwBN,KAAKO,MAAMsB,KAAKD,aAAe5B,KAAKO,MAAMuB,SAASF,aAChF5B,KAAKK,MAAQ,CAAC,EAAG,GAExB,CAED,KAAAW,CAAMe,GACF,IAAK,MAAMrB,KAAUV,KAAKE,OAAQQ,EAAOK,UAAUgB,EAAQ,QAAU,UAErE/B,KAAKI,OAAS2B,CACjB,CAED,IAAAC,CAAKC,GACD,IAAK,MAAMvB,KAAUV,KAAKE,OAAQQ,EAAOsB,KAAKC,IAEzCjC,KAAKI,QAAUJ,KAAKE,OAAOgB,QAAQlB,KAAKkC,SAChD,CAED,UAAAC,CAAWC,EAA6BC,GACpCrC,KAAKoB,OAAM,GAEX,MAAMkB,EAAQtC,KAAKO,MAAMgC,WAAWH,aAAA,EAAAA,EAAU7B,MAAMsB,KAAMQ,GAC1DrC,KAAKO,MAAMU,SACXmB,SAAAA,EAAUhB,QACVgB,SAAAA,EAAU7B,MAAMU,SAEhBqB,EAAMhB,SAAQkB,GAAQA,EAAKC,KAAKzC,KAAM,CAAEuB,QAAQ,KACnD,CAED,KAAAmB,CAAMC,EAAcC,GAChB,MAAMC,EAAoB,iBAATF,EACjB3C,KAAKH,QAAQ8B,MAAMkB,EAAW,mBAAqBF,GAAiBE,EAAWC,EAAeF,GAAOA,CACxG,CAED,cAAAG,GACI,MAAOC,EAASC,GAAWjD,KAAKO,MAAMuB,SAASzB,MAAM6C,MAAM,KAE3D,IAAIC,EAAIC,KAAKC,IAAIC,WAAWN,IAAY,EAAG,MACvC,KAAKO,KAAKP,KAAUG,GAAK,KAE7B,IAAIK,EAAIP,EAAUG,KAAKC,IAAIC,WAAWL,IAAY,EAAG,MAAUE,EAG/D,MAFI,KAAKI,KAAKN,KAAUO,GAAK,KAEtB,CAACL,EAAGK,EACd,CAED,mBAAAC,GACI,MAAM3B,EAAW9B,KAAKO,MAAMuB,SAEtB4B,EAAQ5B,EAASF,aAAasB,MAAM,YACtCQ,EAAMxC,OAAS,IAAGwC,EAAM,GAAKA,EAAM,IAEvC,MAAMC,EAAgB7B,EAASF,eAAiB5B,KAAKM,sBAAwB,CAAC,EAAG,GAAKN,KAAKK,MAC3FL,KAAKK,MAAQL,KAAK+C,iBAElB/C,KAAKH,QAAQ8B,MAAMC,aAAe8B,EAAME,KAAI,CAACC,EAAMC,IACxCD,EAAKX,MAAM,KAAKU,KAAIG,UACvB,OAAOT,WAAWS,GAAUJ,EAAcG,GAAK9D,KAAKK,MAAMyD,KAA+B,QAAzBE,EAAAD,EAAOE,MAAM,oBAAY,IAAAD,OAAA,EAAAA,EAAG,KAAM,KAAK,IACxGE,KAAK,OACTA,KAAK,KAERlE,KAAKM,sBAAwBwB,EAASF,YACzC,CAED,OAAAM,GACI,GAAIlC,KAAKF,OAAQ,OAEjBE,KAAKyD,sBAEL,MAAON,EAAGK,GAAKxD,KAAK+C,iBAEpB,IAAK,IAAIe,EAAI,EAAGA,EAAI9D,KAAKH,QAAQsE,SAASjD,OAAQ4C,IAAK,CACnD,MAAMM,EAAQpE,KAAKH,QAAQsE,SAASL,GAC9BO,EAAID,EAAME,WACZC,EAAIH,EAAMI,UACVC,EAAIL,EAAMM,YACVC,EAAIP,EAAMQ,cAEPC,EAAIC,GAAMC,iBAAiBX,GAAOY,UAAU9B,MAAM,KAAKU,IAAIN,YAElEc,EAAMzC,MAAMsD,UAAY,cAAcJ,GAAM,SAASC,GAAM,cAAc,EAAI3B,MAAM,EAAIK,gBAAgBa,GAAK,EAAIlB,GAAKsB,EAAI,GAAK,EAAItB,IAAM0B,GAAM,SAASN,GAAK,EAAIf,GAAKmB,EAAI,GAAK,EAAInB,IAAMsB,GAAM,OACjM,CACJ"}
@@ -1,3 +1,3 @@
1
1
  "use client";
2
- import{jsx as e}from"react/jsx-runtime";import{useRef as n,useState as r,useLayoutEffect as t,Children as o,isValidElement as c,cloneElement as i}from"react";import u from"../animatable.js";import{Groups as d}from"./morph.js";function s(e,n,r=[]){const t="nodes"in e?e.nodes:e;for(let e=0;e<t.length;e++){const o=[...r,e];let c=n(t[e],o);if(c||(c=s(t[e].nodes,n,o)),c)return c}}function l(e,n){return s(e,((e,r)=>{if(e.key===n)return r}))||null}function a(e,n){let r=e[n[0]];for(let e=1;e<n.length&&r;e++)r=r.nodes[n[e]];return r}function m(e,n,r,t){var o;const c=n[n.length-1],i=n.length>1?null===(o=a(e,n.slice(0,-1)))||void 0===o?void 0:o.nodes:e;i&&(t?i.splice(c,r,t):i.splice(c,r))}function f({tree:e,nodes:n,mounting:r,partialIndex:t=[],keys:u=new Set}){return o.forEach(n,((n,o)=>{const d=c(n),s=d&&(Array.isArray(n.props.children)||c(n.props.children)),m=d&&n.type.isLively&&"id"in n.props,p=[...t,o],h=s&&!m?i(n,void 0,[]):n,y=m?n.props.id:"$l."+p.join("");if(m){const n=l(e,y);if(null===n)r.set(y,{node:h,index:p});else{const r=a(e,n);r&&(r.node=h)}}else{const n=a(e,p);n&&n.key.startsWith("$l.")?n.node=h:r.set(y,{node:h,index:p})}s&&!m&&f({tree:e,nodes:n.props.children,mounting:r,partialIndex:p,keys:u}),u.add(y)})),u}function p(e){return e.map((e=>c(e.node)?e.nodes.length?i(e.node,{key:e.key},p(e.nodes)):i(e.node,{key:e.key}):e.node))}function h({children:o,transition:c,initialMount:i=!0}){var a;const h=n(!i),y=n(null),[g,v]=r({}),k=n([]),x=n(new Map),w=n(void 0),j=n(0),E=n(new Set),z=f({tree:k.current,nodes:o,mounting:x.current});if(x.current.forEach(((e,n)=>{z.has(n)||x.current.delete(n)})),s(k.current,(e=>{z.has(e.key)||E.current.add(e.key)})),E.current.size&&y.current){for(const e of y.current.children){const n=null===(a=e.current)||void 0===a?void 0:a.id,r=E.current.has(n);if(e.current&&(r&&z.has(n)&&(e.current.timeline.mounted=!0,E.current.delete(n)),r&&e.current.timeline.mounted)){const n=Date.now()+1e3*e.current.trigger("unmount",{immediate:!0});if(j.current=Math.max(j.current,n),e.current.group){const n=d[e.current.group].get(e.current.timeline);n&&(n.state="unmounted")}e.current.timeline.mounted=!1}}const e=j.current-Date.now();clearTimeout(w.current);const n=(e=!0)=>{E.current.forEach((e=>{const n=l(k.current,e);n&&m(k.current,n,1)})),E.current.clear(),e&&v({})};e>0?w.current=setTimeout(n,e):n(!1)}return!E.current.size&&x.current.size&&(x.current.forEach((({node:e,index:n},r)=>{m(k.current,n,0,{key:r,node:e,nodes:[]})})),x.current.clear()),t((()=>{var e;if(y.current){for(const n of y.current.children)h.current&&n.current&&(n.current.timeline.mounted=!0),(null===(e=n.current)||void 0===e?void 0:e.id)&&n.current.timeline.mounted&&n.current.adaptive&&null!==l(k.current,n.current.id)&&n.current.timeline.transition(void 0,c);h.current=!1}})),e(u,{ref:y,passthrough:!0,cachable:[],children:p(k.current)})}export{h as default};
2
+ import{jsx as e}from"react/jsx-runtime";import{useRef as r,useState as n,useLayoutEffect as t,Children as o,isValidElement as i,cloneElement as c}from"react";import u from"../animatable.js";import{Groups as s}from"./morph.js";function d(e,r,n=[]){const t="nodes"in e?e.nodes:e;for(let e=0;e<t.length;e++){const o=[...n,e];let i=r(t[e],o);if(i||(i=d(t[e].nodes,r,o)),i)return i}}function l(e,r){return d(e,((e,n)=>{if(e.key===r)return n}))||null}function a(e,r){let n=e[r[0]];for(let e=1;e<r.length&&n;e++)n=n.nodes[r[e]];return n}function m(e,r,n,t){var o;const i=r[r.length-1],c=r.length>1?null===(o=a(e,r.slice(0,-1)))||void 0===o?void 0:o.nodes:e;c&&(t?c.splice(i,n,t):c.splice(i,n))}function f({tree:e,nodes:r,mounting:n,partialIndex:t=[],keys:u=new Set}){return o.forEach(r,((r,o)=>{const s=i(r),d=s&&(Array.isArray(r.props.children)||i(r.props.children)),m=s&&r.type.isLively&&"id"in r.props,p=[...t,o],h=d&&!m?c(r,void 0,[]):r,g=m?r.props.id:"$l."+p.join("");if(m){const r=l(e,g);if(null===r)n.set(g,{node:h,index:p});else{const n=a(e,r);n&&(n.node=h)}}else{const r=a(e,p);r&&r.key.startsWith("$l.")?r.node=h:n.set(g,{node:h,index:p})}d&&f({tree:e,nodes:r.props.children,mounting:n,partialIndex:p,keys:u}),u.add(g)})),u}function p(e){const r=e.map((e=>i(e.node)?e.nodes.length?c(e.node,{key:e.key},p(e.nodes)):c(e.node,{key:e.key}):e.node));return r.length>1?r:r[0]}function h({children:o,transition:i,initialMount:c=!0}){var a;const h=r(!c),g=r(null),[y,v]=n({}),k=r([]),x=r(new Map),w=r(void 0),j=r(0),E=r(new Set),z=f({tree:k.current,nodes:o,mounting:x.current});if(x.current.forEach(((e,r)=>{z.has(r)||x.current.delete(r)})),d(k.current,(e=>{z.has(e.key)||E.current.add(e.key)})),E.current.size&&g.current){for(const e of g.current.children){const r=null===(a=e.current)||void 0===a?void 0:a.id,n=E.current.has(r);if(e.current)if(n&&z.has(r))E.current.delete(r),e.current.trigger("mount",{immediate:!0}),e.current.timeline.mounted=!0;else if(n&&e.current.timeline.mounted){const r=Date.now()+1e3*e.current.trigger("unmount",{immediate:!0});if(j.current=Math.max(j.current,r),e.current.group){const r=s[e.current.group].get(e.current.timeline);r&&(r.state="unmounted")}e.current.timeline.mounted=!1}}const e=j.current-Date.now();clearTimeout(w.current);const r=(e=!0)=>{E.current.forEach((e=>{const r=l(k.current,e);r&&m(k.current,r,1)})),E.current.clear(),e&&v({})};e>0?w.current=setTimeout(r,e):r(!1)}return!E.current.size&&x.current.size&&(x.current.forEach((({node:e,index:r},n)=>{m(k.current,r,0,{key:n,node:e,nodes:[]})})),x.current.clear()),t((()=>{var e;if(!g.current)return;let r,n=g.current.children.slice();for(;r=n.pop();)h.current&&r.current&&(r.current.timeline.mounted=!0),(null===(e=r.current)||void 0===e?void 0:e.id)&&r.current.timeline.mounted&&r.current.adaptive&&null!==l(k.current,r.current.id)&&(r.current.timeline.transition(void 0,i),n.push(...r.current.children));h.current=!1})),e(u,{ref:g,passthrough:!0,cachable:[],children:p(k.current)})}export{h as default};
3
3
  //# sourceMappingURL=layout-group.js.map
@@ -24,8 +24,23 @@ type SharedProps<T extends string = any> = {
24
24
  } & PlayOptions)[];
25
25
  animate?: ClipProperties | Clip;
26
26
  initial?: AnimatableInitials;
27
+ /**
28
+ * How much to stagger child elements' animations by in seconds.
29
+ *
30
+ * @default 0.1
31
+ */
27
32
  stagger?: number;
33
+ /**
34
+ * Integer number, after which child elements no longer stagger their animation, but play all at once.
35
+ *
36
+ * @default 10
37
+ */
28
38
  staggerLimit?: number;
39
+ /**
40
+ * Whether scale animations will cause artifacting to `border-radius` and/or child elements.
41
+ *
42
+ * @default true
43
+ */
29
44
  deform?: boolean;
30
45
  disabled?: boolean;
31
46
  paused?: boolean;
@@ -33,12 +48,43 @@ type SharedProps<T extends string = any> = {
33
48
  export type AnimatableProps<T extends string = any> = {
34
49
  ref?: React.Ref<AnimatableType>;
35
50
  children: React.ReactNode;
51
+ /**
52
+ * A unique identifier within a [`LayoutGroup`](https://lively.infinityfx.dev/docs/components/layout-group) parent.
53
+ */
36
54
  id?: string;
55
+ /**
56
+ * Where in the order of a cascade animation this component should play it's animations.
57
+ */
37
58
  order?: number;
59
+ /**
60
+ * Whether to participate in cascade animations and inherit animation properties from a parent.
61
+ *
62
+ * @default false
63
+ */
38
64
  inherit?: boolean;
65
+ /**
66
+ * Whether to **not** participate in cascading animations.
67
+ *
68
+ * @default false
69
+ */
39
70
  passthrough?: boolean;
71
+ /**
72
+ * Whether to animate layout changes when this component is a child of a [`LayoutGroup`](https://lively.infinityfx.dev/docs/components/layout-group).
73
+ *
74
+ * @default false
75
+ */
40
76
  adaptive?: boolean;
77
+ /**
78
+ * Which properties to keep track of for layout change animations.
79
+ *
80
+ * @default ['x', 'y', 'sx', 'sy', 'rotate', 'color', 'backgroundColor', 'borderRadius', 'opacity']
81
+ */
41
82
  cachable?: CachableKey[];
83
+ /**
84
+ * Whether to disable automatic mount/unmount triggering.
85
+ *
86
+ * @default false
87
+ */
42
88
  manual?: boolean;
43
89
  onAnimationEnd?: (animation: T | 'animate') => void;
44
90
  } & SharedProps<T>;
@@ -48,6 +94,11 @@ type AnimatableContext = {
48
94
  remove: (child: React.RefObject<AnimatableType | null>) => void;
49
95
  } & SharedProps;
50
96
  export declare const AnimatableContext: import("react").Context<AnimatableContext | null>;
97
+ /**
98
+ * Wrap around a react component to animate it.
99
+ *
100
+ * @see {@link https://lively.infinityfx.dev/docs/components/animatable}
101
+ */
51
102
  declare function Animatable<T extends string>(props: AnimatableProps<T>): import("react/jsx-runtime").JSX.Element;
52
103
  declare namespace Animatable {
53
104
  var isLively: boolean;
@@ -2,8 +2,16 @@ import { AnimatableProps } from "./animatable";
2
2
  import Clip, { ClipProperties } from "./core/clip";
3
3
  type AnimateProps = {
4
4
  animations?: (ClipProperties | Clip)[];
5
+ /**
6
+ * The number of levels to cascade down animations.
7
+ */
5
8
  levels?: number;
6
9
  } & Omit<AnimatableProps, 'animations' | 'animate' | 'order'>;
10
+ /**
11
+ * Automated cascade animations.
12
+ *
13
+ * @see {@link https://lively.infinityfx.dev/docs/components/animate}
14
+ */
7
15
  declare function Animate({ children, animations, levels, ...props }: AnimateProps): import("react/jsx-runtime").JSX.Element;
8
16
  declare namespace Animate {
9
17
  var isLively: boolean;
@@ -1,6 +1,16 @@
1
1
  import type { TransitionOptions } from "../core/track";
2
+ /**
3
+ * Animate layout changes or unmounts.
4
+ *
5
+ * @see {@link https://lively.infinityfx.dev/docs/components/layout-group}
6
+ */
2
7
  export default function LayoutGroup({ children, transition, initialMount }: {
3
8
  children: React.ReactNode;
4
9
  transition?: Omit<TransitionOptions, 'reverse'>;
10
+ /**
11
+ * Whether to play mount mount animations on first render
12
+ *
13
+ * @default true
14
+ */
5
15
  initialMount?: boolean;
6
16
  }): import("react/jsx-runtime").JSX.Element;
@@ -6,7 +6,15 @@ export declare const Groups: {
6
6
  state: 'mounted' | 'unmounted' | 'collected';
7
7
  }>;
8
8
  };
9
+ /**
10
+ * Peform layout morphs between components when one mounts and unmount.
11
+ *
12
+ * @see {@link https://lively.infinityfx.dev/docs/components/morph}
13
+ */
9
14
  declare function Morph({ children, group, transition, ...props }: {
15
+ /**
16
+ * Global identifier, components with the same group will morph between eachother.
17
+ */
10
18
  group: string;
11
19
  transition?: Omit<TransitionOptions, 'reverse'>;
12
20
  } & AnimatableProps): import("react/jsx-runtime").JSX.Element;
@@ -1,4 +1,9 @@
1
1
  import { AnimatableProps } from "../animatable";
2
+ /**
3
+ * Wrap around text to animate it.
4
+ *
5
+ * @see {@link https://lively.infinityfx.dev/docs/components/typable}
6
+ */
2
7
  declare function Typable({ children, stagger, staggerLimit, ...props }: AnimatableProps): import("react/jsx-runtime").JSX.Element;
3
8
  declare namespace Typable {
4
9
  var isLively: boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@infinityfx/lively",
3
- "version": "4.0.0-beta.14",
3
+ "version": "4.0.0-beta.16",
4
4
  "type": "module",
5
5
  "description": "Feature complete, lightweight react animation library.",
6
6
  "main": "dist/index.js",
@@ -65,8 +65,8 @@
65
65
  "@rollup/plugin-typescript": "^11.1.6",
66
66
  "@types/react": "npm:types-react@^19.0.0-rc.1",
67
67
  "@types/react-dom": "npm:types-react-dom@^19.0.0-rc.1",
68
- "react": "^19.0.0-rc-ab2135c7-20240724",
69
- "react-dom": "^19.0.0-rc-ab2135c7-20240724",
68
+ "react": "^19.0.0-rc-1631855f-20241023",
69
+ "react-dom": "^19.0.0-rc-1631855f-20241023",
70
70
  "rollup": "^4.18.0",
71
71
  "rollup-plugin-delete": "^2.0.0",
72
72
  "rollup-plugin-preserve-directives": "^0.4.0",