@infinityfx/lively 3.5.2 → 4.0.0-alpha.0

package/dist/animatable.js

@@ -1,3 +1,3 @@
 "use client";
-import{__assign as n,__rest as r}from"tslib";import{jsx as e}from"react/jsx-runtime";import{createContext as t,forwardRef as i,useRef as a,useContext as o,useState as u,useCallback as d,useImperativeHandle as l,useEffect as c,Children as m,isValidElement as s,cloneElement as v}from"react";import f from"./core/clip.js";import p from"./core/timeline.js";import{merge as h,pick as g,combineRefs as y}from"./core/utils.js";var b=t(null);var x=i((function(t,i){var x=a(null),w=a([]),j=o(b),E=t.inherit&&j?h({},t,g(j,["group","animations","triggers","animate","initial","stagger","staggerLimit","deform","disabled","paused"])):t,L=E.id,A=void 0===L?"":L,k=E.inherit,z=E.triggers,C=void 0===z?[]:z,M=E.disabled,D=E.adaptive,F=void 0!==D&&D,N=E.manual,O=void 0!==N&&N,P=E.paused,T=void 0!==t.order?t.order:(k&&(null==j?void 0:j.index)||0)+1,V=a([]),q=u((function(){var n={animate:f.from(E.animate,E.initial)};for(var r in E.animations)n[r]=f.from(E.animations[r],E.initial);return n}))[0],B=a(new p(n(n({},E),{mountClips:C.reduce((function(n,r){var e=r.name;return"mount"===r.on&&n.push(q[e||"animate"]),n}),[])}))),G=d((function(n,r,e){var i;void 0===r&&(r={}),void 0===e&&(e=1);var a=q[n];if(M||T>1&&e<2)return 0;h(r,{reverse:null==a?void 0:a.reverse});for(var o=0,u=r.delay||0,d=a?B.current.time(a):0,l=0,c=w.current;l<c.length;l++){var m=c[l];(null===(i=m.current)||void 0===i?void 0:i.inherit)&&(o=Math.max(m.current.play(n,h({delay:u+d},r),e+1),o))}var s=(r.reverse?o:u)*(T/e);return a&&B.current.add(a,h({delay:s},r)),t.onAnimationEnd&&setTimeout(t.onAnimationEnd.bind({},n),1e3*(d+s)),d+s}),[M,T]);function H(n,e){void 0===e&&(e={});for(var t=0,i=0,a=C;i<a.length;i++){var o=a[i],u=o.name,d=o.on,l=r(o,["name","on"]);d===n&&(t=Math.max(G(u||"animate",h(l,e)),t))}return t}return l(y(x,i),(function(){return{play:G,trigger:H,timeline:B.current,children:w.current,inherit:k,adaptive:F,manual:O,id:A}}),[C]),c((function(){return B.current[P||M?"pause":"play"]()}),[P,M]),c((function(){for(var n=0;n<C.length;n++){var e=C[n],t=e.name,i=e.on,a=r(e,["name","on"]);if("string"!=typeof i){var o="boolean"==typeof i?i:i.called,u=V.current[n];void 0!==u&&o&&o!==u&&G(t||"animate",a),V.current[n]=o}}}),[C]),c((function(){B.current.connect(E.animate);var n=function(){return B.current.cache()};return window.addEventListener("resize",n),null==j||j.add(x),document.fonts.ready.then((function(){O||B.current.mounted||H("mount"),B.current.mounted=!0})),function(){window.removeEventListener("resize",n),null==j||j.remove(x)}}),[]),e(b.Provider,{value:n(n({},t.passthrough?j:n({index:T},E)),{add:function(n){t.passthrough&&(null==j||j.add(n)),w.current.includes(n)||w.current.push(n)},remove:function(n){t.passthrough&&(null==j||j.remove(n));var r=w.current.indexOf(n)||-1;r>=0&&w.current.splice(r,1)}}),children:m.map(t.children,(function(n){return!s(n)||n.type instanceof Function?n:v(n,{ref:y((function(n){return B.current.insert(n)}),n.ref),pathLength:1,style:h({backfaceVisibility:"hidden",willChange:"transform"},n.props.style,q.animate.initial,{strokeDasharray:1}),"data-lively-offset-boundary":!(!["x","y"].some((function(n){var r;return null===(r=t.cachable)||void 0===r?void 0:r.includes(n)}))&&void 0!==t.cachable)||void 0})}))})}));x.displayName="Animatable";export{b as AnimatableContext,x as default};
+import{__assign as n,__rest as r}from"tslib";import{jsx as e}from"react/jsx-runtime";import{createContext as t,useRef as i,use as a,useMemo as o,useCallback as u,useImperativeHandle as d,useEffect as c,Children as l,isValidElement as m,cloneElement as s}from"react";import v from"./core/clip.js";import f from"./core/timeline.js";import{merge as p,pick as h,combineRefs as g}from"./core/utils.js";var y=t(null);function b(t){var b=i(null),x=i([]),w=a(y),j=t.inherit&&w?p({},t,h(w,["group","animations","triggers","animate","initial","stagger","staggerLimit","deform","disabled","paused"])):t,E=j.id,L=void 0===E?"":E,k=j.inherit,z=j.triggers,A=void 0===z?[]:z,C=j.disabled,M=j.adaptive,D=void 0!==M&&M,F=j.manual,O=void 0!==F&&F,T=j.paused,V=void 0!==t.order?t.order:(k&&(null==w?void 0:w.index)||0)+1,q=i([]),B=o((function(){var n={animate:v.from(j.animate,j.initial)};for(var r in j.animations)n[r]=v.from(j.animations[r],j.initial);return n}),[]),G=i(new f(n(n({},j),{mountClips:A.reduce((function(n,r){var e=r.name;return"mount"===r.on&&n.push(B[e||"animate"]),n}),[])}))),H=u((function(n,r,e){var i;void 0===r&&(r={}),void 0===e&&(e=1);var a=B[n];if(C||V>1&&e<2)return 0;p(r,{reverse:null==a?void 0:a.reverse});for(var o=0,u=r.delay||0,d=a?G.current.time(a):0,c=0,l=x.current;c<l.length;c++){var m=l[c];(null===(i=m.current)||void 0===i?void 0:i.inherit)&&(o=Math.max(m.current.play(n,p({delay:u+d},r),e+1),o))}var s=(r.reverse?o:u)*(V/e);return a&&G.current.add(a,p({delay:s},r)),t.onAnimationEnd&&setTimeout(t.onAnimationEnd.bind({},n),1e3*(d+s)),d+s}),[C,V]);function I(n,e){void 0===e&&(e={});for(var t=0,i=0,a=A;i<a.length;i++){var o=a[i],u=o.name,d=o.on,c=r(o,["name","on"]);d===n&&(t=Math.max(H(u||"animate",p(c,e)),t))}return t}return d(g(b,t.ref),(function(){return{play:H,trigger:I,timeline:G.current,children:x.current,inherit:k,adaptive:D,manual:O,id:L}}),[A]),c((function(){return G.current[T||C?"pause":"play"]()}),[T,C]),c((function(){for(var n=0;n<A.length;n++){var e=A[n],t=e.name,i=e.on,a=r(e,["name","on"]);if("string"!=typeof i){var o="boolean"==typeof i?i:i.called,u=q.current[n];void 0!==u&&o&&o!==u&&H(t||"animate",a),q.current[n]=o}}}),[A]),c((function(){G.current.connect(j.animate);var n=function(){return G.current.cache()};return window.addEventListener("resize",n),null==w||w.add(b),document.fonts.ready.then((function(){O||G.current.mounted||I("mount"),G.current.mounted=!0})),function(){window.removeEventListener("resize",n),null==w||w.remove(b)}}),[]),e(y,{value:n(n({},t.passthrough?w:n({index:V},j)),{add:function(n){t.passthrough&&(null==w||w.add(n)),x.current.includes(n)||x.current.push(n)},remove:function(n){t.passthrough&&(null==w||w.remove(n));var r=x.current.indexOf(n)||-1;r>=0&&x.current.splice(r,1)}}),children:l.map(t.children,(function(n){return!m(n)||n.type instanceof Function?n:s(n,{ref:g((function(n){return G.current.insert(n)}),n.ref),pathLength:1,style:p({backfaceVisibility:"hidden",willChange:"transform"},n.props.style,B.animate.initial,{strokeDasharray:1}),"data-lively-offset-boundary":!(!["x","y"].some((function(n){var r;return null===(r=t.cachable)||void 0===r?void 0:r.includes(n)}))&&void 0!==t.cachable)||void 0})}))})}export{y as AnimatableContext,b as default};
 //# sourceMappingURL=animatable.js.map

package/dist/animate.js

@@ -1,3 +1,3 @@
 "use client";
-import{__rest as i,__assign as r}from"tslib";import{jsx as n,Fragment as o}from"react/jsx-runtime";import{forwardRef as t,Children as e,isValidElement as a,cloneElement as m}from"react";import s from"./animatable.js";import l from"./animations/move.js";import p from"./animations/pop.js";var f=t((function(t,f){var c=t.children,d=t.animations,u=void 0===d?[l,p]:d,v=t.levels,h=void 0===v?2:v,j=i(t,["children","animations","levels"]);return n(o,{children:function i(o,t){void 0===t&&(t=h);for(var l,p=h-t;!(l=u[p])&&p>=0;)p--;return t<1||e.count(o)<1?o:n(s,r({},j,{ref:f,animate:l,inherit:t<h||j.inherit,children:e.map(o,(function(r){return a(r)?m(r,{},i(r.props.children,t-1)):r}))}))}(c)})}));f.displayName="Animate";export{f as default};
+import{__rest as i,__assign as r}from"tslib";import{jsx as n,Fragment as o}from"react/jsx-runtime";import{Children as t,isValidElement as e,cloneElement as m}from"react";import a from"./animatable.js";import s from"./animations/move.js";import l from"./animations/pop.js";function p(p){var c=p.children,f=p.animations,d=void 0===f?[s,l]:f,u=p.levels,v=void 0===u?2:u,h=i(p,["children","animations","levels"]);return n(o,{children:function i(o,s){void 0===s&&(s=v);for(var l,p=v-s;!(l=d[p])&&p>=0;)p--;return s<1||t.count(o)<1?o:n(a,r({},h,{animate:l,inherit:s<v||h.inherit,children:t.map(o,(function(r){return e(r)?m(r,{},i(r.props.children,s-1)):r}))}))}(c)})}export{p as default};
 //# sourceMappingURL=animate.js.map

package/dist/hooks/use-audio.js

@@ -1,3 +1,3 @@
 "use client";
-import{useRef as e,useEffect as n}from"react";import r from"./use-link.js";var t;function o(o){var a,i=void 0===o?{}:o,u=i.bands,c=void 0===u?8:u,d=i.minFrequency,s=void 0===d?100:d,l=i.maxFrequency,v=void 0===l?2e3:l,m=i.smoothing,f=void 0===m?.7:m,y=e(new Float32Array(1024)),p=e(),A=e(),F=e(null),h=r(new Array(8).fill(0));function E(){if(p.current){p.current.getFloatFrequencyData(y.current);for(var e=h(),n=Math.floor(s/24e3*1024),r=Math.floor(v/24e3*1024),t=0;t<c;t++){var o=n+(r-n)/c*t,i=Math.floor(o),u=Math.ceil(o),d=o-i,l=y.current[i]*(1-d)+y.current[u]*d;e[t]=Math.max(0,(100+l)/70)}h.set(e,0),a=requestAnimationFrame(E)}}function L(){"suspended"===t.state&&t.resume(),a=requestAnimationFrame(E)}function M(){cancelAnimationFrame(a),h.set(new Array(c).fill(0),.3)}return n((function(){var e=F.current;if(e)return t||(t=new AudioContext),p.current||(p.current=new AnalyserNode(t,{fftSize:2048,smoothingTimeConstant:f})),A.current||(A.current=t.createMediaElementSource(e)),p.current.connect(t.destination),A.current.connect(p.current),e.addEventListener("play",L),e.addEventListener("pause",M),e.addEventListener("ended",M),function(){var n,r;null===(n=p.current)||void 0===n||n.disconnect(),null===(r=A.current)||void 0===r||r.disconnect(),e.removeEventListener("play",L),e.removeEventListener("pause",M),e.removeEventListener("ended",M)}}),[]),[F,h]}export{o as default};
+import{useRef as e,useEffect as n}from"react";import r from"./use-link.js";var t;function o(o){var i,a=void 0===o?{}:o,u=a.bands,c=void 0===u?8:u,d=a.minFrequency,s=void 0===d?100:d,v=a.maxFrequency,l=void 0===v?2e3:v,m=a.smoothing,f=void 0===m?.7:m,y=e(new Float32Array(1024)),p=e(void 0),A=e(void 0),F=e(null),h=r(new Array(8).fill(0));function E(){if(p.current){p.current.getFloatFrequencyData(y.current);for(var e=h(),n=Math.floor(s/24e3*1024),r=Math.floor(l/24e3*1024),t=0;t<c;t++){var o=n+(r-n)/c*t,a=Math.floor(o),u=Math.ceil(o),d=o-a,v=y.current[a]*(1-d)+y.current[u]*d;e[t]=Math.max(0,(100+v)/70)}h.set(e,0),i=requestAnimationFrame(E)}}function L(){"suspended"===t.state&&t.resume(),i=requestAnimationFrame(E)}function M(){cancelAnimationFrame(i),h.set(new Array(c).fill(0),.3)}return n((function(){var e=F.current;if(e)return t||(t=new AudioContext),p.current||(p.current=new AnalyserNode(t,{fftSize:2048,smoothingTimeConstant:f})),A.current||(A.current=t.createMediaElementSource(e)),p.current.connect(t.destination),A.current.connect(p.current),e.addEventListener("play",L),e.addEventListener("pause",M),e.addEventListener("ended",M),function(){var n,r;null===(n=p.current)||void 0===n||n.disconnect(),null===(r=A.current)||void 0===r||r.disconnect(),e.removeEventListener("play",L),e.removeEventListener("pause",M),e.removeEventListener("ended",M)}}),[]),[F,h]}export{o as default};
 //# sourceMappingURL=use-audio.js.map

package/dist/layout/layout-group.js

@@ -1,3 +1,3 @@
 "use client";
-import{jsx as r}from"react/jsx-runtime";import{useRef as n,useState as t,useEffect as e,Children as i,isValidElement as u}from"react";import o from"../animatable.js";function a(r,n){return void 0===n&&(n={}),i.forEach(r,(function(r){var t;if(u(r)){var e=null===(t=r.type)||void 0===t?void 0:t.displayName;"Animatable"!==e&&"Animate"!==e||!("id"in r.props)||(n[r.props.id]=!0),a(r.props.children,n)}})),n}function c(r,n){var t=typeof r,e=typeof n;if(t!==e)return!1;if(u(r))return!(!u(n)||r.key!==n.key)&&c(r.props,n.props);if(Array.isArray(r)){if(!Array.isArray(n)||r.length!==n.length)return!1;for(var i=0;i<r.length;i++)if(!c(r[i],n[i]))return!1;return!0}if("object"===t&&null!==r&&null!==n){var o=Object.keys(r),a=Object.keys(n);if(o.length!==a.length)return!1;if(!o.length)return r.toString()===n.toString();for(i=0;i<o.length;i++)if(!(o[i]in n)||!c(r[o[i]],n[a[i]]))return!1;return!0}return"function"===t&&t===e||r===n}function f(r,n){try{return c(r,n)}catch(r){return!1}}function l(i){var u=i.children,c=i.transition,l=n(null),h=n(a(u)),p=t(u),d=p[0],m=p[1];return e((function(){if(l.current&&!f(d,u)){for(var r=0,n=a(u),t=0,e=l.current.children;t<e.length;t++){var i=e[t];i.current&&!i.current.manual&&i.current.id in h.current&&!(i.current.id in n)&&(r=Math.max(i.current.trigger("unmount"),r))}h.current=n,setTimeout((function(){return m(u)}),1e3*r)}}),[u]),e((function(){var r;if(l.current)for(var n=0,t=l.current.children;n<t.length;n++){var e=t[n];(null===(r=e.current)||void 0===r?void 0:r.timeline.mounted)&&e.current.adaptive&&e.current.timeline.transition(void 0,c)}}),[d]),r(o,{ref:l,cachable:[],passthrough:!0,children:d})}export{l as default};
+import{jsx as r}from"react/jsx-runtime";import{useRef as n,useState as t,useEffect as e,Children as i,isValidElement as u}from"react";import o from"../animatable.js";import a from"../hooks/use-mount-effect.js";function c(r,n){return void 0===n&&(n={}),i.forEach(r,(function(r){var t;if(u(r)){var e=null===(t=r.type)||void 0===t?void 0:t.displayName;"Animatable"!==e&&"Animate"!==e||!("id"in r.props)||(n[r.props.id]=!0),c(r.props.children,n)}})),n}function f(r,n){var t=typeof r,e=typeof n;if(t!==e)return!1;if(u(r))return!(!u(n)||r.key!==n.key)&&f(r.props,n.props);if(Array.isArray(r)){if(!Array.isArray(n)||r.length!==n.length)return!1;for(var i=0;i<r.length;i++)if(!f(r[i],n[i]))return!1;return!0}if("object"===t&&null!==r&&null!==n){var o=Object.keys(r),a=Object.keys(n);if(o.length!==a.length)return!1;if(!o.length)return r.toString()===n.toString();for(i=0;i<o.length;i++)if(!(o[i]in n)||!f(r[o[i]],n[a[i]]))return!1;return!0}return"function"===t&&t===e||r===n}function l(r,n){try{return f(r,n)}catch(r){return!1}}function h(i){var u=i.children,f=i.transition,h=n(null),m=n(c(u)),p=t(u),s=p[0],d=p[1];return e((function(){if(h.current&&!l(s,u)){for(var r=0,n=c(u),t=0,e=h.current.children;t<e.length;t++){var i=e[t];i.current&&!i.current.manual&&i.current.id in m.current&&!(i.current.id in n)&&(r=Math.max(i.current.trigger("unmount"),r))}m.current=n,setTimeout((function(){return d(u)}),1e3*r)}}),[u]),a((function(){var r;if(h.current)for(var n=0,t=h.current.children;n<t.length;n++){var e=t[n];(null===(r=e.current)||void 0===r?void 0:r.timeline.mounted)&&e.current.adaptive&&e.current.timeline.transition(void 0,f)}}),[s]),r(o,{ref:h,cachable:[],passthrough:!0,children:s})}export{h as default};
 //# sourceMappingURL=layout-group.js.map

package/dist/layout/morph.js

@@ -1,3 +1,3 @@
 "use client";
-import{__rest as t,__assign as r}from"tslib";import{jsx as i}from"react/jsx-runtime";import{forwardRef as e,useContext as n,useRef as o,useState as u,useEffect as a}from"react";import m,{AnimatableContext as c}from"../animatable.js";import{combineRefs as l}from"../core/utils.js";import s from"../hooks/use-mount-effect.js";var f={},d=e((function(e,d){var v=e.children,p=e.transition,g=void 0===p?{}:p,h=e.show,b=void 0===h||h,j=e.group,w=t(e,["children","transition","show","group"]),x=n(c),T=o(null),_=u(b),k=_[0],y=_[1],E=u(b),M=E[0],N=E[1];return j=(null==x?void 0:x.group)?"".concat(x.group,"__").concat(j):j,s((function(){if(T.current){var t,r=T.current.timeline;f[j].targets.forEach((function(i){i.mounted&&i!==r&&(t=i)})),b&&!r.mounted&&(f[j].visible=!0,t?r.transition(t,g):T.current.trigger("mount")),N(b)}}),[b]),a((function(){var t;if(T.current){var r=T.current.timeline;if(!b&&r.mounted){if(!f[j].visible){var i=null===(t=T.current)||void 0===t?void 0:t.trigger("unmount");setTimeout((function(){return y(!1)}),1e3*i)}f[j].targets.delete(r)}(b||f[j].visible)&&y(b),setTimeout((function(){return f[j].visible=!1})),r.mounted=b}}),[M]),b||k!==b?i(m,r({},w,{manual:!0,group:j,ref:l((function(t){j in f||(f[j]={targets:new Set,visible:!1}),t&&(f[j].targets.add(t.timeline),T.current=t)}),d),children:v})):null}));d.displayName="Morph";export{d as default};
+import{__rest as t,__assign as r}from"tslib";import{jsx as e}from"react/jsx-runtime";import{use as i,useRef as n,useState as o,useEffect as u}from"react";import m,{AnimatableContext as a}from"../animatable.js";import{combineRefs as c}from"../core/utils.js";import l from"../hooks/use-mount-effect.js";var s={};function f(f){var d=f.children,v=f.transition,g=void 0===v?{}:v,p=f.show,b=void 0===p||p,h=f.group,j=t(f,["children","transition","show","group"]),w=i(a),x=n(null),T=o(b),_=T[0],k=T[1],E=o(b),S=E[0],q=E[1];return h=(null==w?void 0:w.group)?"".concat(w.group,"__").concat(h):h,l((function(){if(x.current){var t,r=x.current.timeline;s[h].targets.forEach((function(e){e.mounted&&e!==r&&(t=e)})),b&&!r.mounted&&(s[h].visible=!0,t?r.transition(t,g):x.current.trigger("mount")),q(b)}}),[b]),u((function(){var t;if(x.current){var r=x.current.timeline;if(!b&&r.mounted){if(!s[h].visible){var e=null===(t=x.current)||void 0===t?void 0:t.trigger("unmount");setTimeout((function(){return k(!1)}),1e3*e)}s[h].targets.delete(r)}(b||s[h].visible)&&k(b),setTimeout((function(){return s[h].visible=!1})),r.mounted=b}}),[S]),b||_!==b?e(m,r({},j,{manual:!0,group:h,ref:c((function(t){h in s||(s[h]={targets:new Set,visible:!1}),t&&(s[h].targets.add(t.timeline),x.current=t)}),j.ref),children:d})):null}export{f as default};
 //# sourceMappingURL=morph.js.map

package/dist/layout/typable.js

@@ -1,3 +1,3 @@
 "use client";
-import{__rest as r,__assign as t}from"tslib";import{jsx as e}from"react/jsx-runtime";import{forwardRef as i,Children as a}from"react";import n from"../animatable.js";var m=i((function(i,m){var o=i.children,p=i.stagger,s=void 0===p?1:p,g=i.staggerLimit,f=void 0===g?Number.MAX_VALUE:g,l=r(i,["children","stagger","staggerLimit"]);return e(n,t({},l,{ref:m,stagger:-1*s,staggerLimit:f,children:a.map(o,(function(r){return"string"!=typeof r&&"number"!=typeof r?r:r.toString().split("").map((function(r){return e("span",{style:{whiteSpace:" "===r?"pre-wrap":void 0},children:r})}))}))}))}));m.displayName="Typable";export{m as default};
+import{__rest as r,__assign as t}from"tslib";import{jsx as e}from"react/jsx-runtime";import{Children as i}from"react";import a from"../animatable.js";function n(n){var o=n.children,m=n.stagger,g=void 0===m?1:m,p=n.staggerLimit,s=void 0===p?Number.MAX_VALUE:p,c=r(n,["children","stagger","staggerLimit"]);return e(a,t({},c,{stagger:-1*g,staggerLimit:s,children:i.map(o,(function(r){return"string"!=typeof r&&"number"!=typeof r?r:r.toString().split("").map((function(r){return e("span",{style:{whiteSpace:" "===r?"pre-wrap":void 0},children:r})}))}))}))}export{n as default};
 //# sourceMappingURL=typable.js.map

package/dist/types/animatable.d.ts

@@ -8,7 +8,7 @@ export type AnimatableType<T extends string = any> = {
     play: (animation: T | 'animate', options?: PlayOptions, layer?: number) => number;
     trigger: (trigger: StaticTrigger, options?: PlayOptions) => number;
     timeline: Timeline;
-    children: React.MutableRefObject<AnimatableType | null>[];
+    children: React.RefObject<AnimatableType | null>[];
     inherit: boolean | undefined;
     adaptive: boolean;
     manual: boolean;
@@ -32,6 +32,7 @@ type SharedProps<T extends string = any> = {
     paused?: boolean;
 };
 export type AnimatableProps<T extends string = any> = {
+    ref: React.Ref<AnimatableType>;
     children: React.ReactNode;
     id?: string;
     order?: number;
@@ -44,24 +45,9 @@ export type AnimatableProps<T extends string = any> = {
 } & SharedProps<T>;
 type AnimatableContext = {
     index?: number;
-    add: (child: React.RefObject<AnimatableType>) => void;
-    remove: (child: React.RefObject<AnimatableType>) => void;
+    add: (child: React.RefObject<AnimatableType | null>) => void;
+    remove: (child: React.RefObject<AnimatableType | null>) => void;
 } & SharedProps;
 export declare const AnimatableContext: import("react").Context<AnimatableContext | null>;
-declare function AnimatableBase<T extends string>(props: AnimatableProps<T>, ref: React.ForwardedRef<AnimatableType>): import("react/jsx-runtime").JSX.Element;
-declare const Animatable: (<T extends string>(props: {
-    children: React.ReactNode;
-    id?: string | undefined;
-    order?: number | undefined;
-    inherit?: boolean | undefined;
-    passthrough?: boolean | undefined;
-    adaptive?: boolean | undefined;
-    cachable?: CachableKey[] | undefined;
-    manual?: boolean | undefined;
-    onAnimationEnd?: ((animation: "animate" | T) => void) | undefined;
-} & SharedProps<T> & {
-    ref?: import("react").ForwardedRef<AnimatableType<any>> | undefined;
-}) => ReturnType<typeof AnimatableBase>) & {
-    displayName: string;
-};
-export default Animatable;
+export default function Animatable<T extends string>(props: AnimatableProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/animate.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
-import { AnimatableProps, AnimatableType } from "./animatable";
+import { AnimatableProps } from "./animatable";
 import Clip, { ClipProperties } from "./core/clip";
-declare const Animate: import("react").ForwardRefExoticComponent<{
+type AnimateProps = {
     children: React.ReactNode;
-    animations?: (ClipProperties | Clip)[] | undefined;
-    levels?: number | undefined;
-} & Omit<AnimatableProps, "order" | "animate" | "animations"> & import("react").RefAttributes<AnimatableType>>;
-export default Animate;
+    animations?: (ClipProperties | Clip)[];
+    levels?: number;
+} & Omit<AnimatableProps, 'animations' | 'animate' | 'order'>;
+export default function Animate({ children, animations, levels, ...props }: AnimateProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/layout/morph.d.ts

@@ -1,35 +1,10 @@
-/// <reference types="react" />
-import { AnimatableType } from "../animatable";
+import { AnimatableProps } from "../animatable";
 import { TransitionOptions } from "../core/track";
-declare const Morph: import("react").ForwardRefExoticComponent<{
+type MorphProps = {
     group: string;
-    transition?: Omit<TransitionOptions, "reverse"> | undefined;
-    show?: boolean | undefined;
-} & {
-    children: import("react").ReactNode;
-    id?: string | undefined;
-    order?: number | undefined;
-    inherit?: boolean | undefined;
-    passthrough?: boolean | undefined;
-    adaptive?: boolean | undefined;
-    cachable?: import("../core/cache").CachableKey[] | undefined;
-    manual?: boolean | undefined;
-    onAnimationEnd?: ((animation: any) => void) | undefined;
-} & {
-    group?: string | undefined;
-    animations?: {
-        [x: string]: import("../core/clip").ClipProperties | import("../animations").Clip;
-    } | undefined;
-    triggers?: ({
-        name?: any;
-        on: boolean | import("../hooks/use-trigger").Trigger | ("mount" | "unmount");
-    } & import("../core/timeline").PlayOptions)[] | undefined;
-    animate?: import("../core/clip").ClipProperties | import("../animations").Clip | undefined;
-    initial?: import("../core/clip").AnimatableInitials | undefined;
-    stagger?: number | undefined;
-    staggerLimit?: number | undefined;
-    deform?: boolean | undefined;
-    disabled?: boolean | undefined;
-    paused?: boolean | undefined;
-} & import("react").RefAttributes<AnimatableType>>;
-export default Morph;
+    transition?: Omit<TransitionOptions, 'reverse'>;
+    show?: boolean;
+} & AnimatableProps;
+export default function Morph({ children, transition, // should be able to be inherited
+show, group, ...props }: MorphProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/types/layout/typable.d.ts

@@ -1,30 +1,2 @@
-/// <reference types="react" />
-import { AnimatableType } from "../animatable";
-declare const Typable: import("react").ForwardRefExoticComponent<{
-    children: import("react").ReactNode;
-    id?: string | undefined;
-    order?: number | undefined;
-    inherit?: boolean | undefined;
-    passthrough?: boolean | undefined;
-    adaptive?: boolean | undefined;
-    cachable?: import("../core/cache").CachableKey[] | undefined;
-    manual?: boolean | undefined;
-    onAnimationEnd?: ((animation: any) => void) | undefined;
-} & {
-    group?: string | undefined;
-    animations?: {
-        [x: string]: import("../core/clip").ClipProperties | import("../animations").Clip;
-    } | undefined;
-    triggers?: ({
-        name?: any;
-        on: boolean | import("../hooks/use-trigger").Trigger | ("mount" | "unmount");
-    } & import("../core/timeline").PlayOptions)[] | undefined;
-    animate?: import("../core/clip").ClipProperties | import("../animations").Clip | undefined;
-    initial?: import("../core/clip").AnimatableInitials | undefined;
-    stagger?: number | undefined;
-    staggerLimit?: number | undefined;
-    deform?: boolean | undefined;
-    disabled?: boolean | undefined;
-    paused?: boolean | undefined;
-} & import("react").RefAttributes<AnimatableType>>;
-export default Typable;
+import { AnimatableProps } from "../animatable";
+export default function Typable({ children, stagger, staggerLimit, ...props }: AnimatableProps): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@infinityfx/lively",
-	"version": "3.5.2",
+	"version": "4.0.0-alpha.0",
 	"type": "module",
 	"description": "Feature complete, lightweight react animation library.",
 	"main": "dist/index.js",
@@ -50,21 +50,22 @@
 		"tslib": "^2.6.2"
 	},
 	"peerDependencies": {
-		"react": ">=16.0.0",
-		"react-dom": ">=16.0.0"
+		"react": ">=19.0.0",
+		"react-dom": ">=19.0.0"
 	},
 	"devDependencies": {
 		"@rollup/plugin-commonjs": "^25.0.7",
 		"@rollup/plugin-node-resolve": "^15.2.3",
 		"@rollup/plugin-terser": "^0.4.4",
 		"@rollup/plugin-typescript": "^11.1.6",
-		"@types/react": "^18.2.31",
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0",
-		"rollup": "^4.10.0",
-		"rollup-plugin-preserve-directives": "^0.4.0",
+		"@types/react": "npm:types-react@^19.0.0-beta.1",
+		"@types/react-dom": "npm:types-react-dom@^19.0.0-beta.1",
+		"react": "^19.0.0-beta-73bcdfbae5-20240502",
+		"react-dom": "^19.0.0-beta-73bcdfbae5-20240502",
+		"rollup": "^4.17.2",
 		"rollup-plugin-delete": "^2.0.0",
-		"typescript": "^5.3.3"
+		"rollup-plugin-preserve-directives": "^0.4.0",
+		"typescript": "^5.4.5"
 	},
 	"sideEffects": false
 }