@kurocado-studio/systemhaus-motion-react 1.0.0-develop.7 → 1.0.0-develop.9

package/dist/exports.js

@@ -1 +1 @@
-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),f=A(a,["intensity"],.1);if(globalThis.matchMedia("(prefers-reduced-motion: reduce)").matches)return{x:0,y:0};if(typeof n=="number"){var c=Math.hypot(Math.pow(s,2)+Math.pow(m,2));if(c>p)return{x:0,y:0};var v=0;return c<n&&(v=1-c/n),{x:s*v*f,y:m*v*f}}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*f,y:m*C*f}}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:f,y:c}=I(i,p.clientX,p.clientY,t);a.set(f),r.set(c)};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};
+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 S,AnimatePresence as b,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(S,{...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(b,{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};

package/dist/index.d.ts

@@ -70,6 +70,8 @@ export declare function useCursorFollow(settings: CalculateCursorOffsetControlle
     y: Motion.MotionValue<number>;
 };
 
+export declare function useDeepMergeMotionProperties(...motionProperties: MotionProps[]): MotionProps;
+
 export declare const useFadeIn: ({ onEnterDirection, onExitDirection, }?: UseFadeInProperties) => PolymorphicMotionProperties;
 
 export declare interface UseFadeInProperties {
@@ -77,6 +79,25 @@ export declare interface UseFadeInProperties {
     onExitDirection?: DirectionEnum;
 }
 
+/**
+ * Scale motion hook — animates an element scaling in/out.
+ * Default scale range: visible = 1, hidden = 1.2 (slightly zoomed in).
+ */
+export declare function useScale(payload?: {
+    initialScale?: number;
+    exitScale?: number;
+}): PolymorphicMotionProperties;
+
+/**
+ * Slide-out motion hook — animates an element in/out based on direction.
+ * Default distance: "100%" (full travel).
+ */
+export declare function useSlideOut({ onEnterDirection, onExitDirection, distance, }?: {
+    onEnterDirection?: DirectionEnum;
+    onExitDirection?: DirectionEnum;
+    distance?: string | number;
+}): PolymorphicMotionProperties;
+
 export declare const useSystemHausMotionProvider: () => SystemHausMotionProvider;
 
 export { }

package/package.json

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