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

package/dist/exports.js

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

package/dist/index.d.ts

@@ -5,6 +5,8 @@ import * as React_2 from 'react';
 import React__default from 'react';
 import { ViewportOptions } from 'framer-motion';
 
+export declare function AnimateMotionPresence({ children, isVisible, mode, initial, }: React__default.PropsWithChildren<AnimateMotionPresenceProperties>): React__default.ReactNode;
+
 export declare interface AnimateMotionPresenceProperties {
     isVisible?: boolean;
     initial?: boolean;
@@ -36,7 +38,7 @@ export declare const MotionProvider: React__default.FC<SystemHausMotionProviderP
 
 export declare function PolymorphicMotionElement<T extends keyof React__default.JSX.IntrinsicElements = 'div'>(properties: React__default.PropsWithChildren<PolymorphicMotionProperties<T>>): React__default.ReactNode;
 
-export declare type PolymorphicMotionProperties<T extends keyof React__default.JSX.IntrinsicElements = 'div'> = Omit<React__default.JSX.IntrinsicElements[T], keyof MotionProps | 'ref'> & MotionProps & UseFadeInProperties & {
+export declare type PolymorphicMotionProperties<T extends keyof React__default.JSX.IntrinsicElements = 'div'> = Omit<React__default.JSX.IntrinsicElements[T], keyof MotionProps | 'ref'> & MotionProps & {
     as?: T;
     isVisible?: boolean;
 };

package/package.json

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