framer-motion
Version:
A simple and powerful JavaScript animation library
3 lines (2 loc) • 11.9 kB
JavaScript
import{jsxs as t,jsx as n}from"react/jsx-runtime";import{createContext as e,useContext as r,useMemo as o,Fragment as i,createElement as a,useRef as s,useInsertionEffect as c,useCallback as l,useLayoutEffect as u,useEffect as f,forwardRef as d}from"react";const p=(t=>n=>"string"==typeof n&&n.startsWith(t))("--"),m={test:t=>"number"==typeof t,parse:parseFloat,transform:t=>t},g={...m,transform:t=>((t,n,e)=>e>n?n:e<t?t:e)(0,1,t)},y={...m,default:1},h=t=>({test:n=>"string"==typeof n&&n.endsWith(t)&&1===n.split(" ").length,parse:parseFloat,transform:n=>`${n}${t}`}),v=h("deg"),w=h("%"),b=h("px"),S=(()=>({...w,parse:t=>w.parse(t)/100,transform:t=>w.transform(100*t)}))(),k={...m,transform:Math.round},x={rotate:v,pathRotation:v,rotateX:v,rotateY:v,rotateZ:v,scale:y,scaleX:y,scaleY:y,scaleZ:y,skew:v,skewX:v,skewY:v,distance:b,translateX:b,translateY:b,translateZ:b,x:b,y:b,z:b,perspective:b,transformPerspective:b,opacity:g,originX:S,originY:S,originZ:b},E={borderWidth:b,borderTopWidth:b,borderRightWidth:b,borderBottomWidth:b,borderLeftWidth:b,borderRadius:b,borderTopLeftRadius:b,borderTopRightRadius:b,borderBottomRightRadius:b,borderBottomLeftRadius:b,width:b,maxWidth:b,height:b,maxHeight:b,top:b,right:b,bottom:b,left:b,inset:b,insetBlock:b,insetBlockStart:b,insetBlockEnd:b,insetInline:b,insetInlineStart:b,insetInlineEnd:b,padding:b,paddingTop:b,paddingRight:b,paddingBottom:b,paddingLeft:b,paddingBlock:b,paddingBlockStart:b,paddingBlockEnd:b,paddingInline:b,paddingInlineStart:b,paddingInlineEnd:b,margin:b,marginTop:b,marginRight:b,marginBottom:b,marginLeft:b,marginBlock:b,marginBlockStart:b,marginBlockEnd:b,marginInline:b,marginInlineStart:b,marginInlineEnd:b,fontSize:b,backgroundPositionX:b,backgroundPositionY:b,...x,zIndex:k,fillOpacity:g,strokeOpacity:g,numOctaves:k},B=["transformPerspective","x","y","z","translateX","translateY","translateZ","scale","scaleX","scaleY","scaleZ","rotate","rotateX","rotateY","rotateZ","skew","skewX","skewY"],P=(()=>new Set([...B,"pathRotation"]))(),M=(t,n)=>n&&"number"==typeof t?n.transform(t):t,I={x:"translateX",y:"translateY",z:"translateZ",transformPerspective:"perspective"},T=B.length,W={},A=(t,n,e=M(n,x[t]))=>(W[t]||(W[t]=(I[t]||t)+"("))+e+")",O=(t,n)=>("number"==typeof n?n:parseFloat(n))===(t.startsWith("scale")?1:0);function R(t,n,e,r){const o=n=>"function"==typeof n?n(t.custom,{},{}):n;return"string"==typeof(n=o(n))&&(n=t.variants&&t.variants[n]),o(n)}const C=t=>Boolean(t&&t.getVelocity);function L(t,n,e){const{style:r,vars:o,transformOrigin:i}=t;let a=!1,s=!1;for(const t in n){const e=n[t];if(P.has(t))a=!0;else if(p(t))o[t]=e;else{const n=M(e,E[t]);t.startsWith("origin")?(s=!0,i[t]=n):r[t]=n}}if(n.transform||(a||e?r.transform=function(t,n,e){let r="";for(let o=0;o<T;o++){const i=B[o],a=t[i];if(void 0===a)continue;const s=e&&(n[i]=M(a,E[i]));O(i,a)||(r+=A(i,a,s||void 0)+" ")}const o=t.pathRotation;return o&&(r+=A("rotate",o)),r=r.trim(),e?e(n,r):r||"none"}(n,t.transform,e):r.transform&&(r.transform="none")),s){const{originX:t="50%",originY:n="50%",originZ:e=0}=i;r.transformOrigin=`${t} ${n} ${e}`}}const V={offset:"stroke-dashoffset",array:"stroke-dasharray"},X={offset:"strokeDashoffset",array:"strokeDasharray"};const Y=["transform","opacity","clipPath","filter","offsetDistance","offsetPath","offsetRotate","offsetAnchor"];function j(t,{attrX:n,attrY:e,attrScale:r,pathLength:o,pathSpacing:i=1,pathOffset:a=0,...s},c,l,u){if(L(t,s,l),c)return void(t.style.viewBox&&(t.attrs.viewBox=t.style.viewBox));t.attrs=t.style,t.style={};const{attrs:f,style:d}=t;for(const t of Y)void 0!==f[t]&&(d[t]=f[t],delete f[t]);(d.transform||f.transformOrigin)&&(d.transformOrigin=f.transformOrigin??"50% 50%",delete f.transformOrigin),d.transform&&(d.transformBox=u?.transformBox??"fill-box",delete f.transformBox),void 0!==n&&(f.x=n),void 0!==e&&(f.y=e),void 0!==r&&(f.scale=r),void 0!==o&&function(t,n,e=1,r=0,o=!0){t.pathLength=1;const i=o?V:X;t[i.offset]=""+-r,t[i.array]=`${n} ${e}`}(f,o,i,a,!1)}const D={};function H(t){return C(t)?t.get():t}function Z(t){return null!==t&&"object"==typeof t&&"function"==typeof t.start}function F(t){return"string"==typeof t||Array.isArray(t)}const $=["animate","whileInView","whileFocus","whileHover","whileTap","whileDrag","whilePinch","exit"],z=["initial"].concat($);function N(t){if(Z(t.animate))return!0;for(let n=0;n<z.length;n++)if(F(t[z[n]]))return!0;return!1}let U={};function _(t,{layout:n,layoutId:e}){return P.has(t)||t.startsWith("origin")||(n||void 0!==e)&&(!!D[t]||"opacity"===t)}function q(t,n,e){const r=t.style,o=n?.style,i={};if(!r)return i;for(const n in r)(C(r[n])||o&&C(o[n])||_(n,t)||void 0!==e?.getValue(n)?.liveStyle)&&(i[n]=r[n]);return i}const G=e({}),J=e({strict:!1}),K=e({transformPagePoint:t=>t,isStatic:!1,reducedMotion:"never"}),Q=e({});function tt(t){const{initial:n,animate:e}=function(t,n){if(N(t)){const{initial:n,animate:e}=t;return{initial:!1===n||F(n)?n:void 0,animate:F(e)?e:void 0}}return!1!==t.inherit?n:{}}(t,r(Q));return o(()=>({initial:n,animate:e}),[nt(n),nt(e)])}function nt(t){return Array.isArray(t)?t.join(" "):t}const et=()=>({style:{},transform:{},transformOrigin:{},vars:{}});function rt(t,n,e){for(const r in n)C(n[r])||_(r,e)||(t[r]=n[r])}function ot(t,n){const e={};return rt(e,t.style||{},t),Object.assign(e,function({transformTemplate:t},n){return o(()=>{const e={style:{},transform:{},transformOrigin:{},vars:{}};return L(e,n,t),Object.assign({},e.vars,e.style)},[n])}(t,n)),e}function it(t,n){const e={},r=ot(t,n);return t.drag&&!1!==t.dragListener&&(e.draggable=!1,r.userSelect=r.WebkitUserSelect=r.WebkitTouchCallout="none",r.touchAction=!0===t.drag?"none":"pan-"+("x"===t.drag?"y":"x")),void 0===t.tabIndex&&(t.onTap||t.onTapStart||t.whileTap)&&(e.tabIndex=0),e.style=r,e}const at=()=>({style:{},transform:{},transformOrigin:{},vars:{},attrs:{}});function st(t,n,e,r){const i=o(()=>{const e={style:{},transform:{},transformOrigin:{},vars:{},attrs:{}};var o;return j(e,n,"string"==typeof(o=r)&&"svg"===o.toLowerCase(),t.transformTemplate,t.style),{...e.attrs,style:{...e.style}}},[n]);if(t.style){const n={};return rt(n,t.style,t),{...i,style:{...n,...i.style}}}return i}const ct=new Set(["animate","exit","variants","initial","style","values","transition","transformTemplate","custom","inherit","onBeforeLayoutMeasure","onAnimationStart","onAnimationComplete","onUpdate","onDragStart","onDrag","onDragEnd","onMeasureDragConstraints","onDirectionLock","onDragTransitionEnd","_dragX","_dragY","onHoverStart","onHoverEnd","onViewportEnter","onViewportLeave","globalTapTarget","tap","propagate","ignoreStrict","viewport","pinch"]);function lt(t){return t.startsWith("while")||t.startsWith("drag")&&"draggable"!==t||t.startsWith("layout")||t.startsWith("onTap")||t.startsWith("onPan")||t.startsWith("onLayout")||ct.has(t)}function ut(t,n){return t.startsWith("on")?!lt(t):n?.(t)??!lt(t)}const ft=["animate","circle","defs","desc","ellipse","g","image","line","filter","marker","mask","metadata","path","pattern","polygon","polyline","rect","stop","switch","symbol","svg","text","tspan","use","view"];function dt(t){return"string"==typeof t&&!t.includes("-")&&!!(ft.indexOf(t)>-1||/[A-Z]/u.test(t))}function pt(t,n,e,{latestValues:r},s,c=!1,l,u){const f=(l??dt(t)?st:it)(n,r,s,t),d=function(t,n,e,r){const o={};for(const i in t)"values"===i&&"object"==typeof t.values||C(t[i])||("fx"!==i?(ut(i,r)||!0===e&<(i)||!n&&!lt(i)||t.draggable&&i.startsWith("onDrag"))&&(o[i]=t[i]):t.fx&&(o.fx=""));return o}(n,"string"==typeof t,c,u),p=t!==i?{...d,...f,ref:e}:{},{children:m}=n,g=o(()=>C(m)?m.get():m,[m]);return a(t,{...p,children:g})}const mt=e(null);function gt(t){const n=s(null);return null===n.current&&(n.current=t()),n.current}function yt(t,n,e,r){const o={},i=r(t,{});for(const t in i)o[t]=H(i[t]);let{initial:a,animate:s}=t;const c=N(t),l=function(t){return Boolean(N(t)||t.variants)}(t);n&&l&&!c&&!1!==t.inherit&&(void 0===a&&(a=n.initial),void 0===s&&(s=n.animate));let u=!!e&&!1===e.initial;u=u||!1===a;const f=u?s:a;if(f&&"boolean"!=typeof f&&!Z(f)){const n=Array.isArray(f)?f:[f];for(let e=0;e<n.length;e++){const r=R(t,n[e]);if(r){const{transitionEnd:t,transition:n,...e}=r;for(const t in e){let n=e[t];if(Array.isArray(n)){n=n[u?n.length-1:0]}null!==n&&(o[t]=n)}for(const n in t)o[n]=t[n]}}}return o}const ht=t=>(n,e)=>{const o=r(Q),i=r(mt),a=()=>function({scrapeMotionValuesFromProps:t,createRenderState:n},e,r,o){return{latestValues:yt(e,r,o,t),renderState:n()}}(t,n,o,i);return e?a():gt(a)},vt=ht({scrapeMotionValuesFromProps:q,createRenderState:et}),wt=ht({scrapeMotionValuesFromProps:function(t,n,e){const r=q(t,n,e);for(const e in t)if("children"!==e&&(C(t[e])||C(n[e]))){r[-1!==B.indexOf(e)?"attr"+e.charAt(0).toUpperCase()+e.substring(1):e]=t[e]}return r},createRenderState:at}),bt={animation:["variants",...$],exit:["exit"],drag:["drag","dragControls"],focus:["whileFocus"],hover:["whileHover","onHoverStart","onHoverEnd"],tap:["whileTap","onTap","onTapStart","onTapCancel"],pan:["onPan","onPanStart","onPanSessionStart","onPanEnd"],inView:["whileInView","onViewportEnter","onViewportLeave"],layout:["layout","layoutId"]};let St=!1;function kt(){if(St)return;const t={};for(const n in bt)t[n]={isEnabled:t=>bt[n].some(n=>!!t[n])};U=t,St=!0}function xt(){return kt(),U}const Et=Symbol.for("motionComponentSymbol");function Bt(t,n,e){const r=s(e);c(()=>{r.current=e});const o=s(null);return l(e=>{e&&t.onMount?.(e),n&&(e?n.mount(e):n.unmount());const i=r.current;if("function"==typeof i)if(e){const t=i(e);"function"==typeof t&&(o.current=t)}else o.current?(o.current(),o.current=null):i(e);else i&&(i.current=e)},[n])}const Pt=e({}),Mt="undefined"!=typeof window?u:f;function It(e,{forwardMotionProps:o=!1,type:i}={},a,l){const u=i?"svg"===i:dt(e),p=u?wt:vt;function m(i,a){let d;const m=function({layoutId:t}){const n=r(G).id;return n&&void 0!==t?n+"-"+t:t}(i);gt(()=>!1)&&(i={...i,initial:!1});const g={...r(K),...i,layoutId:m},{isStatic:y,isValidProp:h}=g,v=tt(i),w=p(i,y);if(!y&&"undefined"!=typeof window){r(J).strict;const t=function(t){const n=xt(),{drag:e,layout:r}=n;if(!e&&!r)return{};const o={...e,...r};return{MeasureLayout:o.MeasureLayout,isEnabled:e?.isEnabled(t)||r?.isEnabled(t),ProjectionNode:o.ProjectionNode}}(g);v.visualElement=function(t,n,e,o,i,a){const{visualElement:l}=r(Q),u=r(J),d=r(mt),p=r(K),m=p.reducedMotion,g=p.skipAnimations,y=s(null),h=s(!1);o=o||u.renderer,!y.current&&o&&(y.current=o(t,{visualState:n,parent:l,props:e,presenceContext:d,blockInitialAnimation:!!d&&!1===d.initial,reducedMotionConfig:m,skipAnimations:g,isSVG:a}),h.current&&y.current&&(y.current.manuallyAnimateOnMount=!0));const v=y.current,w=r(Pt);!v||v.projection||!i||"html"!==v.type&&"svg"!==v.type||i.create(v,e,w),c(()=>{v&&v.props!==e&&v.update(e,d)});const b=e["data-framer-appear-id"],S=s(Boolean(b)&&"undefined"!=typeof window&&!window.MotionHandoffIsComplete?.(b)&&window.MotionHasOptimisedAnimation?.(b));return Mt(()=>{h.current&&v&&(v.animationState?.animateChanges(),v.enteringChildren=void 0)},[]),Mt(()=>{h.current=!0,v&&(window.MotionIsMounted=!0,v.updateFeatures(),v.scheduleRenderMicrotask(),S.current&&v.animationState&&v.animationState.animateChanges())}),f(()=>{v&&(!S.current&&v.animationState&&v.animationState.animateChanges(),S.current&&(queueMicrotask(()=>{window.MotionHandoffMarkAsComplete?.(b)}),S.current=!1),v.enteringChildren=void 0)}),v}(e,w,g,l,t.ProjectionNode,u),(t.isEnabled||v.visualElement?.projection?.options.layoutId)&&(d=t.MeasureLayout)}return t(Q.Provider,{value:v,children:[d&&v.visualElement?n(d,{visualElement:v.visualElement,...g}):null,pt(e,i,Bt(w,v.visualElement,a),w,y,o,u,h)]})}m.displayName=`motion.${"string"==typeof e?e:`create(${e.displayName??e.name??""})`}`;const g=d(m);return g[Et]=e,g}function Tt(t,n){return It(t,n)}const Wt=Tt("div");export{Wt as MotionDiv};
//# sourceMappingURL=size-rollup-m.js.map