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

package/dist/exports.js

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

package/dist/index.d.ts

@@ -19,7 +19,8 @@ export declare enum DirectionEnum {
     TOP = "TOP",
     BOTTOM = "BOTTOM",
     LEFT = "LEFT",
-    RIGHT = "RIGHT"
+    RIGHT = "RIGHT",
+    DEFAULT = "DEFAULT"
 }
 
 export declare function mergeMotionProperties(...motionProperties: MotionProps_2[]): MotionProps_2;

package/package.json

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