@kurocado-studio/systemhaus-motion-react 1.0.0-develop.10 → 1.0.0-develop.11

package/dist/exports.js

@@ -1 +1 @@
-import{get as A}from"lodash-es";function R(t,i,e,a){var n=t.getBoundingClientRect(),o=n.left+n.width/2,p=n.top+n.height/2,r=i-o,m=e-p,s=a.magneticModeActivationRadius,c=A(a,["maxDistance"],3e3),f=A(a,["intensity"],.1);if(globalThis.matchMedia("(prefers-reduced-motion: reduce)").matches)return{x:0,y:0};if(typeof s=="number"){var l=Math.hypot(Math.pow(r,2)+Math.pow(m,2));if(l>c)return{x:0,y:0};var P=0;return l<s&&(P=1-l/s),{x:r*P*f,y:m*P*f}}if(Math.abs(r)<c&&Math.abs(m)<c){var I=1-Math.max(Math.abs(r),Math.abs(m))/c;return{x:r*I*f,y:m*I*f}}return{x:0,y:0}}var U=.4;var w="easeInOut",y=12;var G=12,T={isStatic:!1,fadeInSpeed:G,fadeDistance:y,transition:{duration:U,ease:w},reducedMotion:"user"};import{get as C}from"lodash-es";import g,{createContext as k,useContext as B,useMemo as X}from"react";var x=(o=>(o.TOP="TOP",o.BOTTOM="BOTTOM",o.LEFT="LEFT",o.RIGHT="RIGHT",o.DEFAULT="DEFAULT",o))(x||{});import{useMotionValue as D,useSpring as E,MotionConfig as b,AnimatePresence as S,motion as h}from"framer-motion";var d={...T,fadeInDirection:"TOP",fadeInDistance:y,viewport:{once:!1,amount:.2}},F=k(d),pt=({children:t,motionOverrides:i})=>{let e=X(()=>({...T,...i,viewport:C(i,["viewport"],d.viewport),fadeInDistance:C(i,["fadeInDistance"],d.fadeInDistance),fadeInDirection:C(i,["fadeInDirection"],d.fadeInDirection)}),[i]);return g.createElement(F.Provider,{value:e},g.createElement(b,{...e},t))},u=()=>B(F);import{get as O}from"lodash-es";import{useEffect as Y,useState as $}from"react";function xt(t){let i=O(t,["damping"],100),e=O(t,["stiffness"],600),a=D(0),n=D(0),[o,p]=$(),r=E(a,{damping:i,stiffness:e}),m=E(n,{damping:i,stiffness:e});return Y(()=>{let s=c=>{if(!o)return;let{x:f,y:l}=R(o,c.clientX,c.clientY,t);a.set(f),n.set(l)};return document.addEventListener("mousemove",s),()=>document.removeEventListener("mousemove",s)},[o,t,a,n]),{ref:p,x:r,y:m}}import{get as V}from"lodash-es";import H from"react";var Et=({onEnterDirection:t,onExitDirection:i}={})=>{let{viewport:e,transition:a,fadeInDistance:n=y}=u(),o=Math.abs(n),r=H.useCallback(s=>({DEFAULT:{hidden:{opacity:0,y:0},visible:{opacity:1,y:0},exit:{opacity:0,y:0}},TOP:{hidden:{opacity:0,y:-s},visible:{opacity:1,y:0},exit:{opacity:0,y:-s}},BOTTOM:{hidden:{opacity:0,y:s},visible:{opacity:1,y:0},exit:{opacity:0,y:s}},LEFT:{hidden:{opacity:0,x:-s},visible:{opacity:1,x:0},exit:{opacity:0,x:-s}},RIGHT:{hidden:{opacity:0,x:s},visible:{opacity:1,x:0},exit:{opacity:0,x:s}}}),[])(o),m=V(r,[i??"BOTTOM","exit"],r.BOTTOM.exit);return H.useMemo(()=>({initial:"hidden",animate:"visible",exit:"exit",variants:{...V(r,[t??"TOP"],r.TOP),exit:m},transition:a,viewport:e}),[r,m,t,a,e])};import{cloneDeep as q,merge as W}from"lodash-es";import J from"react";function At(...t){return J.useMemo(()=>{let i=t.map(e=>q(e));return W({},...i)},t)}import{get as M}from"lodash-es";import _ from"react";function Ft(t={}){let{transition:e}=u(),n=_.useCallback(()=>({default:{hidden:{opacity:0,scale:M(t,["initialScale"],1.1)},visible:{opacity:1,scale:1},exit:{opacity:0,scale:M(t,["exitScale"],1.1)}}}),[])(),o=M(n,["default","exit"],n.default.exit);return _.useMemo(()=>({initial:"hidden",animate:"visible",exit:"exit",variants:{...n.default,exit:o},transition:{duration:M(e,["duration"],1.2),...e}}),[n,o,e])}import{get as L}from"lodash-es";import N from"react";function Nt({onEnterDirection:t="RIGHT",onExitDirection:i="RIGHT",distance:e="100%"}={}){let{transition:a}=u(),o=N.useCallback(r=>({DEFAULT:{hidden:{opacity:0},visible:{opacity:1},exit:{opacity:0}},TOP:{hidden:{opacity:0,y:`-${r}`},visible:{opacity:1,y:0},exit:{opacity:0,y:`-${r}`}},BOTTOM:{hidden:{opacity:0,y:r},visible:{opacity:1,y:0},exit:{opacity:0,y:r}},LEFT:{hidden:{opacity:0,x:`-${r}`},visible:{opacity:1,x:0},exit:{opacity:0,x:`-${r}`}},RIGHT:{hidden:{opacity:0,x:r},visible:{opacity:1,x:0},exit:{opacity:0,x:r}}}),[])(e),p=L(o,[i,"exit"],o.RIGHT.exit);return N.useMemo(()=>({initial:"hidden",animate:"visible",exit:"exit",variants:{...L(o,[t],o.RIGHT),exit:p},transition:{...a}}),[o,p,t,a])}import{get as j}from"lodash-es";import z from"react";function Bt(t){let{as:i,...e}=t,a=j(h,[i??"div"],h.div);return z.createElement(a,{...e})}import v from"react";function qt({children:t,isVisible:i,mode:e,initial:a}){return v.createElement(S,{mode:e,initial:a},i&&v.Children.toArray(t).map((n,o)=>v.isValidElement(n)?v.cloneElement(n,{key:n.key??`motion-child-${o}`}):n))}import{cloneDeep as K,merge as Q}from"lodash-es";function jt(...t){let i=t.map(e=>K(e));return Q({},...i)}export{qt as AnimateMotionPresence,x as DirectionEnum,pt as MotionProvider,Bt as PolymorphicMotionElement,jt as mergeMotionProperties,d as systemHausMotionConfiguration,xt as useCursorFollow,At as useDeepMergeMotionProperties,Et as useFadeIn,Ft as useScale,Nt as useSlideOut,u as useSystemHausMotionProvider};
+import{get as z}from"lodash-es";function X(e,i,r,a){var n=e.getBoundingClientRect(),t=n.left+n.width/2,l=n.top+n.height/2,o=i-t,c=r-l,s=a.magneticModeActivationRadius,m=z(a,["maxDistance"],3e3),u=z(a,["intensity"],.1);if(globalThis.matchMedia("(prefers-reduced-motion: reduce)").matches)return{x:0,y:0};if(typeof s=="number"){var y=Math.hypot(Math.pow(o,2)+Math.pow(c,2));if(y>m)return{x:0,y:0};var P=0;return y<s&&(P=1-y/s),{x:o*P*u,y:c*P*u}}if(Math.abs(o)<m&&Math.abs(c)<m){var b=1-Math.max(Math.abs(o),Math.abs(c))/m;return{x:o*b*u,y:c*b*u}}return{x:0,y:0}}var ue=.4;var le="easeInOut",E=12;var me=12,A={isStatic:!1,fadeInSpeed:me,fadeDistance:E,transition:{duration:ue,ease:le},reducedMotion:"user"};import{get as V}from"lodash-es";import Y,{createContext as fe,useContext as pe,useMemo as de}from"react";var I=(t=>(t.TOP="TOP",t.BOTTOM="BOTTOM",t.LEFT="LEFT",t.RIGHT="RIGHT",t.DEFAULT="DEFAULT",t))(I||{});import{useMotionValue as C,useSpring as H,MotionConfig as j,AnimatePresence as q,motion as F}from"framer-motion";var S={...A,fadeInDirection:"TOP",fadeInDistance:E,viewport:{once:!1,amount:.2}},B=fe(S),Ve=({children:e,motionOverrides:i})=>{let r=de(()=>({...A,...i,viewport:V(i,["viewport"],S.viewport),fadeInDistance:V(i,["fadeInDistance"],S.fadeInDistance),fadeInDirection:V(i,["fadeInDirection"],S.fadeInDirection)}),[i]);return Y.createElement(B.Provider,{value:r},Y.createElement(j,{...r},e))},v=()=>pe(B);import{get as K}from"lodash-es";import{useEffect as he,useState as ve}from"react";function Xe(e){let i=K(e,["damping"],100),r=K(e,["stiffness"],600),a=C(0),n=C(0),[t,l]=ve(),o=H(a,{damping:i,stiffness:r}),c=H(n,{damping:i,stiffness:r});return he(()=>{let s=m=>{if(!t)return;let{x:u,y}=X(t,m.clientX,m.clientY,e);a.set(u),n.set(y)};return document.addEventListener("mousemove",s),()=>document.removeEventListener("mousemove",s)},[t,e,a,n]),{ref:l,x:o,y:c}}import{get as $}from"lodash-es";import W from"react";var We=({onEnterDirection:e,onExitDirection:i}={})=>{let{viewport:r,transition:a,fadeInDistance:n=E}=v(),t=Math.abs(n),o=W.useCallback(s=>({DEFAULT:{hidden:{opacity:0,y:0},visible:{opacity:1,y:0},exit:{opacity:0,y:0}},TOP:{hidden:{opacity:0,y:-s},visible:{opacity:1,y:0},exit:{opacity:0,y:-s}},BOTTOM:{hidden:{opacity:0,y:s},visible:{opacity:1,y:0},exit:{opacity:0,y:s}},LEFT:{hidden:{opacity:0,x:-s},visible:{opacity:1,x:0},exit:{opacity:0,x:-s}},RIGHT:{hidden:{opacity:0,x:s},visible:{opacity:1,x:0},exit:{opacity:0,x:s}}}),[])(t),c=$(o,[i??"BOTTOM","exit"],o.BOTTOM.exit);return W.useMemo(()=>({initial:"hidden",animate:"visible",exit:"exit",variants:{...$(o,[e??"TOP"],o.TOP),exit:c},transition:a,viewport:r}),[o,c,e,a,r])};import{cloneDeep as ye,merge as ge}from"lodash-es";import xe from"react";function et(...e){return xe.useMemo(()=>{let i=e.map(r=>ye(r));return ge({},...i)},e)}import{useEffect as J,useRef as Me,useState as x}from"react";var Pe={hidden:{opacity:0,scale:.8},visible:{opacity:1,scale:1},exit:{opacity:0,scale:.8}};function nt({images:e,frequency:i=15,visibleFor:r=1.5,animation:a}){let n=Me(null),[t,l]=x({x:0,y:0}),[o,c]=x(!1),[s,m]=x({x:0,y:0}),[u,y]=x(0),[P,b]=x([]),[O,te]=x(!1),[N,re]=x([]),{transition:ie}=v(),k=200,oe=k-1,G=k-(i-1)*oe/49;J(()=>{let g=!0,p=[];return(async()=>{let d=[];await Promise.all(e.map(M=>new Promise((f,T)=>{let h=new Image,L=()=>{d.push({width:h.width,height:h.height}),U(),f()},R=ce=>{U(),T(ce)},U=()=>{h.removeEventListener("load",L),h.removeEventListener("error",R)};h.addEventListener("load",L),h.addEventListener("error",R),p.push({img:h,onLoad:L,onError:R}),h.src=M}))),g&&(re(d),te(!0))})().then(),()=>{g=!1;for(let{img:d,onLoad:M,onError:f}of p)d.removeEventListener("load",M),d.removeEventListener("error",f)}},[e]);let ne=g=>{let p=g.currentTarget.getBoundingClientRect();l({x:g.clientX-p.left,y:g.clientY-p.top})},ae=()=>c(!0),se=()=>c(!1);return J(()=>{if(!o||e.length===0||!O||Math.hypot(t.x-s.x,t.y-s.y)<G)return;let p=N[u]||{width:100,height:100},D=p.width,d=p.height,M={imageTrailKey:Math.random().toString(),style:{width:D,height:d,position:"absolute",backgroundImage:`url(${e[u]})`,backgroundSize:"auto",backgroundPosition:"center",pointerEvents:"none",left:t.x-D/2,top:t.y-d/2},initial:"hidden",animate:"visible",exit:"exit",variants:Pe,transition:ie};b(f=>[...f,M]),y(f=>(f+1)%e.length),m(t),setTimeout(()=>{b(f=>f.map(T=>T.imageTrailKey===M.imageTrailKey?{...T,animate:"exit"}:T))},r*1e3)},[t,o,s,e,O,N,G,u,r,a]),{componentRef:n,componentProps:{onMouseMove:ne,onMouseEnter:ae,onMouseLeave:se},activeImages:P,imagesPreloaded:O}}import{get as w}from"lodash-es";import Q from"react";function lt(e={}){let{transition:r}=v(),n=Q.useCallback(()=>({default:{hidden:{opacity:0,scale:w(e,["initialScale"],1.1)},visible:{opacity:1,scale:1},exit:{opacity:0,scale:w(e,["exitScale"],1.1)}}}),[])(),t=w(n,["default","exit"],n.default.exit);return Q.useMemo(()=>({initial:"hidden",animate:"visible",exit:"exit",variants:{...n.default,exit:t},transition:{duration:w(r,["duration"],1.2),...r}}),[n,t,r])}import{get as Z}from"lodash-es";import ee from"react";function vt({onEnterDirection:e="RIGHT",onExitDirection:i="RIGHT",distance:r="100%"}={}){let{transition:a}=v(),t=ee.useCallback(o=>({DEFAULT:{hidden:{opacity:0},visible:{opacity:1},exit:{opacity:0}},TOP:{hidden:{opacity:0,y:`-${o}`},visible:{opacity:1,y:0},exit:{opacity:0,y:`-${o}`}},BOTTOM:{hidden:{opacity:0,y:o},visible:{opacity:1,y:0},exit:{opacity:0,y:o}},LEFT:{hidden:{opacity:0,x:`-${o}`},visible:{opacity:1,x:0},exit:{opacity:0,x:`-${o}`}},RIGHT:{hidden:{opacity:0,x:o},visible:{opacity:1,x:0},exit:{opacity:0,x:o}}}),[])(r),l=Z(t,[i,"exit"],t.RIGHT.exit);return ee.useMemo(()=>({initial:"hidden",animate:"visible",exit:"exit",variants:{...Z(t,[e],t.RIGHT),exit:l},transition:{...a}}),[t,l,e,a])}import{get as be}from"lodash-es";import Te from"react";function Pt(e){let{as:i,...r}=e,a=be(F,[i??"div"],F.div);return Te.createElement(a,{...r})}import _ from"react";function It({children:e,isVisible:i,mode:r,initial:a}){return _.createElement(q,{mode:r,initial:a},i&&_.Children.toArray(e).map((n,t)=>_.isValidElement(n)?_.cloneElement(n,{key:n.key??`motion-child-${t}`}):n))}import{cloneDeep as Ee,merge as Ie}from"lodash-es";function _t(...e){let i=e.map(r=>Ee(r));return Ie({},...i)}export{It as AnimateMotionPresence,I as DirectionEnum,Ve as MotionProvider,Pt as PolymorphicMotionElement,_t as mergeMotionProperties,S as systemHausMotionConfiguration,Xe as useCursorFollow,et as useDeepMergeMotionProperties,We as useFadeIn,nt as useImageTrail,lt as useScale,vt as useSlideOut,v as useSystemHausMotionProvider};

package/dist/index.d.ts

@@ -32,6 +32,16 @@ declare interface CursorFollowSettings {
     magneticModeActivationRadius?: number;
 }
 
+declare interface CursorImageTrailOptions {
+    images: string[];
+    frequency?: number;
+    visibleFor?: number;
+    animation?: {
+        in?: MotionProps;
+        out?: MotionProps;
+    };
+}
+
 export declare enum DirectionEnum {
     TOP = "TOP",
     BOTTOM = "BOTTOM",
@@ -50,11 +60,16 @@ export { MotionProps }
 
 export declare const MotionProvider: React__default.FC<SystemHausMotionProviderProperties>;
 
+declare type PolymorphicActiveMotionProperties<T extends keyof React__default.JSX.IntrinsicElements = 'img'> = PolymorphicMotionProperties<T> & {
+    imageTrailKey?: string;
+};
+
 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 & {
     as?: T;
     isVisible?: boolean;
+    style?: React__default.CSSProperties & Record<string, unknown>;
 };
 
 declare type ProvidedConfig = {
@@ -94,6 +109,17 @@ export declare interface UseFadeInProperties {
     onExitDirection?: DirectionEnum;
 }
 
+export declare function useImageTrail({ images, frequency, visibleFor, animation, }: CursorImageTrailOptions): {
+    componentRef: React__default.RefObject<HTMLDivElement | null>;
+    componentProps: {
+        onMouseMove: (event: React__default.MouseEvent<HTMLDivElement>) => void;
+        onMouseEnter: () => void;
+        onMouseLeave: () => void;
+    };
+    activeImages: PolymorphicActiveMotionProperties<"img">[];
+    imagesPreloaded: boolean;
+};
+
 export { useMotionValue }
 
 /**

package/package.json

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