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

package/dist/exports.js

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

@@ -79,6 +79,15 @@ 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).

package/package.json

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