@kurocado-studio/systemhaus-motion-react 1.0.0-develop.3 → 1.0.0-develop.4

package/dist/exports.js

@@ -1 +1 @@
-import{get as A}from"lodash-es";function I(o,t,r,n){var i=o.getBoundingClientRect(),e=i.left+i.width/2,s=i.top+i.height/2,a=t-e,p=r-s,m=n.magneticModeActivationRadius,c=A(n,["maxDistance"],3e3),f=A(n,["intensity"],.1);if(globalThis.matchMedia("(prefers-reduced-motion: reduce)").matches)return{x:0,y:0};if(typeof m=="number"){var u=Math.hypot(Math.pow(a,2)+Math.pow(p,2));if(u>c)return{x:0,y:0};var v=0;return u<m&&(v=1-u/m),{x:a*v*f,y:p*v*f}}if(Math.abs(a)<c&&Math.abs(p)<c){var C=1-Math.max(Math.abs(a),Math.abs(p))/c;return{x:a*C*f,y:p*C*f}}return{x:0,y:0}}var H=.4;var N="easeInOut",d=12;var U=12,M={isStatic:!1,fadeInSpeed:U,fadeDistance:d,transition:{duration:H,ease:N},reducedMotion:"user"};import{get as D}from"lodash-es";import O,{createContext as w,useContext as V,useMemo as B}from"react";var l=(e=>(e.TOP="TOP",e.BOTTOM="BOTTOM",e.LEFT="LEFT",e.RIGHT="RIGHT",e.DEFAULT="DEFAULT",e))(l||{});import{useMotionValue as x,useSpring as T,MotionConfig as h,AnimatePresence as F,motion as P}from"framer-motion";var y={...M,fadeInDirection:"TOP",fadeInDistance:d,viewport:{once:!1,amount:.2}},S=w(y),oe=({children:o,motionOverrides:t})=>{let r=B(()=>({...M,...t,viewport:D(t,["viewport"],y.viewport),fadeInDistance:D(t,["fadeInDistance"],y.fadeInDistance),fadeInDirection:D(t,["fadeInDirection"],y.fadeInDirection)}),[t]);return O.createElement(S.Provider,{value:r},O.createElement(h,{...r},o))},_=()=>V(S);import{get as g}from"lodash-es";import{useEffect as G,useState as X}from"react";function pe(o){let t=g(o,["damping"],100),r=g(o,["stiffness"],600),n=x(0),i=x(0),[e,s]=X(),a=T(n,{damping:t,stiffness:r}),p=T(i,{damping:t,stiffness:r});return G(()=>{let m=c=>{if(!e)return;let{x:f,y:u}=I(e,c.clientX,c.clientY,o);n.set(f),i.set(u)};return document.addEventListener("mousemove",m),()=>document.removeEventListener("mousemove",m)},[e,o,n,i]),{ref:s,x:a,y:p}}import{get as E}from"lodash-es";var R=({onEnterDirection:o,onExitDirection:t}={})=>{let{viewport:r,transition:n,...i}=_(),e=Math.abs(E(i,["fadeInDistance"],d)),s={DEFAULT:{hidden:{opacity:0,y:0},visible:{opacity:1,y:0},exit:{opacity:0,y:0}},TOP:{hidden:{opacity:0,y:-e},visible:{opacity:1,y:0},exit:{opacity:0,y:-e}},BOTTOM:{hidden:{opacity:0,y:e},visible:{opacity:1,y:0},exit:{opacity:0,y:e}},LEFT:{hidden:{opacity:0,x:-e},visible:{opacity:1,x:0},exit:{opacity:0,x:-e}},RIGHT:{hidden:{opacity:0,x:e},visible:{opacity:1,x:0},exit:{opacity:0,x:e}}},a=E(s,[t??"BOTTOM","exit"],s.BOTTOM.exit);return{initial:"hidden",animate:"visible",exit:"exit",variants:{...E(s,[o??"TOP"],s.TOP),exit:a},transition:n,viewport:r}};import{get as q}from"lodash-es";import b from"react";import{cloneDeep as Y,merge as k}from"lodash-es";function L(...o){let t=o.map(r=>Y(r));return k({},...t)}function Ee(o){let{as:t,isVisible:r,onExitDirection:n,onEnterDirection:i,...e}=o,s=R({onEnterDirection:i,onExitDirection:n}),a=typeof r=="boolean"?r:!0,p=e;(n||i)&&(p=L(e,s));let m=q(P,[t??"div"],P.div);return b.createElement(F,null,a&&b.createElement(m,{...p}))}export{l as DirectionEnum,oe as MotionProvider,Ee as PolymorphicMotionElement,L as mergeMotionProperties,y as systemHausMotionConfiguration,pe as useCursorFollow,R as useFadeIn,_ as useSystemHausMotionProvider};
+import{get as C}from"lodash-es";function I(t,e,o,a){var s=t.getBoundingClientRect(),r=s.left+s.width/2,m=s.top+s.height/2,i=e-r,p=o-m,n=a.magneticModeActivationRadius,f=C(a,["maxDistance"],3e3),c=C(a,["intensity"],.1);if(globalThis.matchMedia("(prefers-reduced-motion: reduce)").matches)return{x:0,y:0};if(typeof n=="number"){var u=Math.hypot(Math.pow(i,2)+Math.pow(p,2));if(u>f)return{x:0,y:0};var M=0;return u<n&&(M=1-u/n),{x:i*M*c,y:p*M*c}}if(Math.abs(i)<f&&Math.abs(p)<f){var E=1-Math.max(Math.abs(i),Math.abs(p))/f;return{x:i*E*c,y:p*E*c}}return{x:0,y:0}}var b=.4;var H="easeInOut",d=12;var N=12,v={isStatic:!1,fadeInSpeed:N,fadeDistance:d,transition:{duration:b,ease:H},reducedMotion:"user"};import{get as D}from"lodash-es";import h,{createContext as U,useContext as w,useMemo as V}from"react";var l=(r=>(r.TOP="TOP",r.BOTTOM="BOTTOM",r.LEFT="LEFT",r.RIGHT="RIGHT",r.DEFAULT="DEFAULT",r))(l||{});import{useMotionValue as x,useSpring as T,MotionConfig as A,AnimatePresence as Q,motion as P}from"framer-motion";var y={...v,fadeInDirection:"TOP",fadeInDistance:d,viewport:{once:!1,amount:.2}},F=U(y),re=({children:t,motionOverrides:e})=>{let o=V(()=>({...v,...e,viewport:D(e,["viewport"],y.viewport),fadeInDistance:D(e,["fadeInDistance"],y.fadeInDistance),fadeInDirection:D(e,["fadeInDirection"],y.fadeInDirection)}),[e]);return h.createElement(F.Provider,{value:o},h.createElement(A,{...o},t))},O=()=>w(F);import{get as S}from"lodash-es";import{useEffect as B,useState as G}from"react";function me(t){let e=S(t,["damping"],100),o=S(t,["stiffness"],600),a=x(0),s=x(0),[r,m]=G(),i=T(a,{damping:e,stiffness:o}),p=T(s,{damping:e,stiffness:o});return B(()=>{let n=f=>{if(!r)return;let{x:c,y:u}=I(r,f.clientX,f.clientY,t);a.set(c),s.set(u)};return document.addEventListener("mousemove",n),()=>document.removeEventListener("mousemove",n)},[r,t,a,s]),{ref:m,x:i,y:p}}import{get as g}from"lodash-es";import R from"react";var _=({onEnterDirection:t,onExitDirection:e}={})=>{let{viewport:o,transition:a,fadeInDistance:s=d}=O(),r=Math.abs(s),i=R.useCallback(n=>({DEFAULT:{hidden:{opacity:0,y:0},visible:{opacity:1,y:0},exit:{opacity:0,y:0}},TOP:{hidden:{opacity:0,y:-n},visible:{opacity:1,y:0},exit:{opacity:0,y:-n}},BOTTOM:{hidden:{opacity:0,y:n},visible:{opacity:1,y:0},exit:{opacity:0,y:n}},LEFT:{hidden:{opacity:0,x:-n},visible:{opacity:1,x:0},exit:{opacity:0,x:-n}},RIGHT:{hidden:{opacity:0,x:n},visible:{opacity:1,x:0},exit:{opacity:0,x:n}}}),[])(r),p=g(i,[e??"BOTTOM","exit"],i.BOTTOM.exit);return R.useMemo(()=>({initial:"hidden",animate:"visible",exit:"exit",variants:{...g(i,[t??"TOP"],i.TOP),exit:p},transition:a,viewport:o}),[i,p,t,a,o])};import{get as k}from"lodash-es";import q from"react";import{cloneDeep as X,merge as Y}from"lodash-es";function L(...t){let e=t.map(o=>X(o));return Y({},...e)}function Ie(t){let{as:e,onExitDirection:o,onEnterDirection:a,...s}=t,r=_({onEnterDirection:a,onExitDirection:o}),m=s;(o||a)&&(m=L(s,r));let i=k(P,[e??"div"],P.div);return q.createElement(i,{...m})}export{l as DirectionEnum,re as MotionProvider,Ie as PolymorphicMotionElement,L as mergeMotionProperties,y as systemHausMotionConfiguration,me as useCursorFollow,_ as useFadeIn,O as useSystemHausMotionProvider};

package/dist/index.d.ts

@@ -5,6 +5,13 @@ import * as React_2 from 'react';
 import React__default from 'react';
 import { ViewportOptions } from 'framer-motion';
 
+export declare interface AnimateMotionPresenceProperties {
+    isVisible?: boolean;
+    initial?: boolean;
+    children?: React__default.ReactNode;
+    mode?: 'wait' | 'sync' | 'popLayout';
+}
+
 declare type CalculateCursorOffsetController = CursorFollowSettings;
 
 declare interface CursorFollowSettings {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kurocado-studio/systemhaus-motion-react",
-  "version": "1.0.0-develop.3",
+  "version": "1.0.0-develop.4",
   "private": false,
   "publishConfig": {
     "access": "public"