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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1 +1,83 @@
1
- Kurocado Studio Design System components
1
+ # React + TypeScript + Vite
2
+
3
+ This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4
+
5
+ Currently, two official plugins are available:
6
+
7
+ - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react)
8
+ uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in
9
+ [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
10
+ - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc)
11
+ uses [SWC](https://swc.rs/) for Fast Refresh
12
+
13
+ ## React Compiler
14
+
15
+ The React Compiler is not enabled on this template because of its impact on dev & build
16
+ performances. To add it, see
17
+ [this documentation](https://react.dev/learn/react-compiler/installation).
18
+
19
+ ## Expanding the ESLint configuration
20
+
21
+ If you are developing a production application, we recommend updating the configuration to enable
22
+ type-aware lint rules:
23
+
24
+ ```js
25
+ export default defineConfig([
26
+ globalIgnores(['dist']),
27
+ {
28
+ files: ['**/*.{ts,tsx}'],
29
+ extends: [
30
+ // Other configs...
31
+
32
+ // Remove tseslint.configs.recommended and replace with this
33
+ tseslint.configs.recommendedTypeChecked,
34
+ // Alternatively, use this for stricter rules
35
+ tseslint.configs.strictTypeChecked,
36
+ // Optionally, add this for stylistic rules
37
+ tseslint.configs.stylisticTypeChecked,
38
+
39
+ // Other configs...
40
+ ],
41
+ languageOptions: {
42
+ parserOptions: {
43
+ project: ['./tsconfig.node.json', './tsconfig.app.json'],
44
+ tsconfigRootDir: import.meta.dirname,
45
+ },
46
+ // other options...
47
+ },
48
+ },
49
+ ]);
50
+ ```
51
+
52
+ You can also install
53
+ [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x)
54
+ and
55
+ [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom)
56
+ for React-specific lint rules:
57
+
58
+ ```js
59
+ // eslint.config.js
60
+ import reactDom from 'eslint-plugin-react-dom';
61
+ import reactX from 'eslint-plugin-react-x';
62
+
63
+ export default defineConfig([
64
+ globalIgnores(['dist']),
65
+ {
66
+ files: ['**/*.{ts,tsx}'],
67
+ extends: [
68
+ // Other configs...
69
+ // Enable lint rules for React
70
+ reactX.configs['recommended-typescript'],
71
+ // Enable lint rules for React DOM
72
+ reactDom.configs.recommended,
73
+ ],
74
+ languageOptions: {
75
+ parserOptions: {
76
+ project: ['./tsconfig.node.json', './tsconfig.app.json'],
77
+ tsconfigRootDir: import.meta.dirname,
78
+ },
79
+ // other options...
80
+ },
81
+ },
82
+ ]);
83
+ ```
package/dist/exports.js CHANGED
@@ -1 +1,2 @@
1
- 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};
1
+ import D from"react";import{stagger as _,useMotionValue as O,useSpring as w,MotionConfig as G,AnimatePresence as U,motion as K}from"framer-motion";function Oe({children:e,isVisible:t,mode:o,initial:a}){return D.createElement(U,{mode:o,initial:a},t&&D.Children.toArray(e).map((r,i)=>D.isValidElement(r)?D.cloneElement(r,{key:r.key??`motion-child-${i}`}):r))}import ue from"react";function Ne(e){let{as:t,...o}=e,a=K[t??"div"];return ue.createElement(a,{...o})}import{calculateCursorOffset as ye}from"@kurocado-studio/systemhaus-motion";import{get as $}from"lodash-es";import{useEffect as fe,useRef as Me}from"react";function $e(e,t){let o=$(e,["damping"],100),a=$(e,["stiffness"],600),r=O(0),i=O(0),p=Me(null),n=t??p,d=w(r,{damping:o,stiffness:a}),s=w(i,{damping:o,stiffness:a});return fe(()=>{let E=x=>{let b=n.current;if(!b)return;let{x:C,y:S}=ye(b,x.clientX,x.clientY,e);r.set(C),i.set(S)};return document.addEventListener("mousemove",E),()=>document.removeEventListener("mousemove",E)},[e,n,r,i]),{ref:n,x:d,y:s}}import{DEFAULT_FADE_DISTANCE as ve,DirectionEnum as c}from"@kurocado-studio/systemhaus-motion";import{get as Y}from"lodash-es";import J from"react";import{DEFAULT_FADE_DISTANCE as de,DirectionEnum as Pe,motionContextDefaultConfig as B}from"@kurocado-studio/systemhaus-motion";import{get as A}from"lodash-es";import z,{createContext as ge,useContext as xe,useMemo as he}from"react";var T={...B,fadeInDirection:Pe.TOP,fadeInDistance:de,viewport:{once:!1,amount:.2}},q=ge(T),je=({children:e,motionOverrides:t})=>{let o=he(()=>({...B,...t,viewport:A(t,["viewport"],T.viewport),fadeInDistance:A(t,["fadeInDistance"],T.fadeInDistance),fadeInDirection:A(t,["fadeInDirection"],T.fadeInDirection)}),[t]);return z.createElement(q.Provider,{value:o},z.createElement(G,{...o},e))},M=()=>xe(q);var to=({onEnterDirection:e,onExitDirection:t}={})=>{let{viewport:o,transition:a,fadeInDistance:r=ve}=M(),i=Math.abs(r),n=J.useCallback(s=>({[c.DEFAULT]:{hidden:{opacity:0,y:0},visible:{opacity:1,y:0},exit:{opacity:0,y:0}},[c.TOP]:{hidden:{opacity:0,y:-s},visible:{opacity:1,y:0},exit:{opacity:0,y:-s}},[c.BOTTOM]:{hidden:{opacity:0,y:s},visible:{opacity:1,y:0},exit:{opacity:0,y:s}},[c.LEFT]:{hidden:{opacity:0,x:-s},visible:{opacity:1,x:0},exit:{opacity:0,x:-s}},[c.RIGHT]:{hidden:{opacity:0,x:s},visible:{opacity:1,x:0},exit:{opacity:0,x:s}}}),[])(i),d=Y(n,[t??c.BOTTOM,"exit"],n[c.BOTTOM].exit);return J.useMemo(()=>({initial:"hidden",animate:"visible",exit:"exit",variants:{...Y(n,[e??c.TOP],n[c.TOP]),exit:d},transition:a,viewport:o}),[n,d,e,a,o])};import{useEffect as j,useRef as Te,useState as g}from"react";var Ee={hidden:{opacity:0,scale:.8},visible:{opacity:1,scale:1},exit:{opacity:0,scale:.8}};function so({images:e,frequency:t=15,visibleFor:o=1.5,animation:a}){let r=Te(null),[i,p]=g({x:0,y:0}),[n,d]=g(!1),[s,E]=g({x:0,y:0}),[x,b]=g(0),[C,S]=g([]),[I,re]=g(!1),[k,ne]=g([]),{transition:ae}=M(),F=200,se=F-1,N=F-(t-1)*se/49;j(()=>{let P=!0,u=[];return(async()=>{let y=[];await Promise.all(e.map(h=>new Promise((m,v)=>{let f=new Image,L=()=>{y.push({width:f.width,height:f.height}),X(),m()},V=le=>{X(),v(le)},X=()=>{f.removeEventListener("load",L),f.removeEventListener("error",V)};f.addEventListener("load",L),f.addEventListener("error",V),u.push({img:f,onLoad:L,onError:V}),f.src=h}))),P&&(ne(y),re(!0))})().then(),()=>{P=!1;for(let{img:y,onLoad:h,onError:m}of u)y.removeEventListener("load",h),y.removeEventListener("error",m)}},[e]);let pe=P=>{let u=P.currentTarget.getBoundingClientRect();p({x:P.clientX-u.left,y:P.clientY-u.top})},me=()=>d(!0),ce=()=>d(!1);return j(()=>{if(!n||e.length===0||!I||Math.hypot(i.x-s.x,i.y-s.y)<N)return;let u=k[x]||{width:100,height:100},H=u.width,y=u.height,h={imageTrailKey:Math.random().toString(),style:{width:H,height:y,position:"absolute",backgroundImage:`url(${e[x]})`,backgroundSize:"auto",backgroundPosition:"center",pointerEvents:"none",left:i.x-H/2,top:i.y-y/2},initial:"hidden",animate:"visible",exit:"exit",variants:Ee,transition:ae};S(m=>[...m,h]),b(m=>(m+1)%e.length),E(i),setTimeout(()=>{S(m=>m.map(v=>v.imageTrailKey===h.imageTrailKey?{...v,animate:"exit"}:v))},o*1e3)},[i,n,s,e,I,k,N,x,o,a]),{componentRef:r,componentProps:{onMouseMove:pe,onMouseEnter:me,onMouseLeave:ce},activeImages:C,imagesPreloaded:I}}import{cloneDeep as W,merge as Q}from"lodash-es";import Z from"react";function lo(...e){return Z.useMemo(()=>{let t=e.map(o=>W(o));return Q({},...t)},e)}function ee(){return{handleDeepMergeMotionProperties:Z.useCallback((...t)=>{let o=t.map(a=>W(a));return Q({},...o)},[])}}import{set as be}from"lodash-es";import Se from"react";var go=()=>{let{handleDeepMergeMotionProperties:e}=ee();return{composeStagger:Se.useCallback(({payload:o,staggerPayload:a})=>{let r={...o},i=_(...a),p=o.custom==null?a[0]??0:i;return be(r,["transition","delay"],p),e(o,r)},[e])}};import{get as R}from"lodash-es";import oe from"react";function Eo(e={}){let{transition:o}=M(),r=oe.useCallback(()=>({default:{hidden:{opacity:0,scale:R(e,["initialScale"],1.1)},visible:{opacity:1,scale:1},exit:{opacity:0,scale:R(e,["exitScale"],1.1)}}}),[])(),i=R(r,["default","exit"],r.default.exit);return oe.useMemo(()=>({initial:"hidden",animate:"visible",exit:"exit",variants:{...r.default,exit:i},transition:{duration:R(o,["duration"],1.2),...o}}),[r,i,o])}import{DirectionEnum as l}from"@kurocado-studio/systemhaus-motion";import{get as te}from"lodash-es";import ie from"react";function Io({onEnterDirection:e=l.RIGHT,onExitDirection:t=l.RIGHT,distance:o="100%"}={}){let{transition:a}=M(),i=ie.useCallback(n=>({[l.DEFAULT]:{hidden:{opacity:0},visible:{opacity:1},exit:{opacity:0}},[l.TOP]:{hidden:{opacity:0,y:`-${n}`},visible:{opacity:1,y:0},exit:{opacity:0,y:`-${n}`}},[l.BOTTOM]:{hidden:{opacity:0,y:n},visible:{opacity:1,y:0},exit:{opacity:0,y:n}},[l.LEFT]:{hidden:{opacity:0,x:`-${n}`},visible:{opacity:1,x:0},exit:{opacity:0,x:`-${n}`}},[l.RIGHT]:{hidden:{opacity:0,x:n},visible:{opacity:1,x:0},exit:{opacity:0,x:n}}}),[])(o),p=te(i,[t,"exit"],i[l.RIGHT].exit);return ie.useMemo(()=>({initial:"hidden",animate:"visible",exit:"exit",variants:{...te(i,[e],i[l.RIGHT]),exit:p},transition:{...a}}),[i,p,e,a])}import{cloneDeep as De,merge as Re}from"lodash-es";function Vo(...e){let t=e.map(o=>De(o));return Re({},...t)}export*from"framer-motion";import{DirectionEnum as Yo}from"@kurocado-studio/systemhaus-motion";export{Oe as AnimateMotionPresence,Yo as DirectionEnum,je as MotionProvider,Ne as PolymorphicMotionElement,Vo as mergeMotionProperties,T as systemHausMotionConfiguration,go as useComposeStagger,$e as useCursorFollow,lo as useDeepMergeMotionProperties,to as useFadeIn,so as useImageTrail,ee as useMergeMotionProperties,Eo as useScale,Io as useSlideOut,M as useSystemHausMotionProvider};
2
+ //# sourceMappingURL=exports.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/AnimateMotionPresence.tsx","../src/lib/motion.ts","../src/components/PolymorphicMotionElement.tsx","../src/hooks/useCursorFollow.ts","../src/hooks/useFadeIn.ts","../src/provider/MotionProvider.tsx","../src/hooks/useImageTrail.ts","../src/hooks/useMergeMotionProperties.ts","../src/hooks/useComposeStagger.ts","../src/hooks/useScale.ts","../src/hooks/useSlideOut.ts","../src/utils/mergeMotionProperties.ts","../src/exports.ts"],"sourcesContent":["import React from 'react';\n\nimport { AnimatePresence } from '../lib/motion';\nimport { AnimateMotionPresenceProperties } from '../types';\n\nexport function AnimateMotionPresence({\n children,\n isVisible,\n mode,\n initial,\n}: React.PropsWithChildren<AnimateMotionPresenceProperties>): React.ReactNode {\n return (\n <AnimatePresence mode={mode} initial={initial}>\n {isVisible &&\n React.Children.toArray(children).map((child, index) => {\n if (!React.isValidElement(child)) return child;\n return React.cloneElement(child, {\n key: child.key ?? `motion-child-${index}`,\n });\n })}\n </AnimatePresence>\n );\n}\n","import type * as Library from 'framer-motion';\n\nexport type * as MotionLibrary from 'framer-motion';\n\nexport type MotionProperties = Library.MotionProps;\nexport type MotionStaggerOptions = Library.StaggerOptions;\nexport type MotionVariant = Library.Variant;\nexport type MotionVariants = Library.Variants;\nexport type MotionViewportOptions = Library.ViewportOptions;\nexport {\n stagger,\n useMotionValue,\n useSpring,\n MotionConfig,\n AnimatePresence,\n motion,\n} from 'framer-motion';\n","import React, { JSX } from 'react';\n\nimport { motion } from '../lib/motion';\nimport { type PolymorphicMotionProperties } from '../types';\n\nexport function PolymorphicMotionElement<\n T extends keyof JSX.IntrinsicElements = 'div',\n K extends Record<string, unknown> = Record<string, unknown>,\n>(properties: PolymorphicMotionProperties<T> & K): React.ReactNode {\n const { as, ...rest } = properties;\n\n const Component: React.ElementType =\n motion[(as as keyof typeof motion) ?? 'div'];\n\n return <Component {...rest} />;\n}\n","'use client';\n\nimport {\n type CalculateCursorOffsetController,\n calculateCursorOffset,\n} from '@kurocado-studio/systemhaus-motion';\nimport { get } from 'lodash-es';\nimport { type RefObject, useEffect, useRef } from 'react';\n\nimport { useMotionValue, useSpring } from '../lib/motion';\n\nexport function useCursorFollow(\n settings: CalculateCursorOffsetController,\n elementReference?: RefObject<HTMLDivElement | null>,\n) {\n const damping = get(settings, ['damping'], 100);\n const stiffness = get(settings, ['stiffness'], 600);\n\n const x = useMotionValue(0);\n const y = useMotionValue(0);\n const localReference = useRef<HTMLDivElement | null>(null);\n const targetReference = elementReference ?? localReference;\n\n const springX = useSpring(x, {\n damping,\n stiffness,\n });\n\n const springY = useSpring(y, {\n damping,\n stiffness,\n });\n\n useEffect(() => {\n const handleMouseMove = (mouseEvent: MouseEvent) => {\n const element = targetReference.current;\n if (!element) return;\n const { x: newX, y: newY } = calculateCursorOffset(\n element,\n mouseEvent.clientX,\n mouseEvent.clientY,\n settings,\n );\n x.set(newX);\n y.set(newY);\n };\n document.addEventListener('mousemove', handleMouseMove);\n return () => document.removeEventListener('mousemove', handleMouseMove);\n }, [settings, targetReference, x, y]);\n\n return { ref: targetReference, x: springX, y: springY };\n}\n","'use client';\n\nimport {\n DEFAULT_FADE_DISTANCE,\n DirectionEnum,\n type UseFadeInProperties,\n} from '@kurocado-studio/systemhaus-motion';\nimport { get } from 'lodash-es';\nimport React from 'react';\n\nimport type { MotionVariant, MotionVariants } from '../lib/motion';\nimport { useSystemHausMotionProvider } from '../provider/MotionProvider';\nimport {\n PolymorphicMotionElementMap,\n PolymorphicMotionProperties,\n} from '../types';\n\nexport const useFadeIn = <T extends PolymorphicMotionElementMap = 'div'>({\n onEnterDirection,\n onExitDirection,\n}: UseFadeInProperties = {}): PolymorphicMotionProperties<T> => {\n const {\n viewport,\n transition,\n fadeInDistance = DEFAULT_FADE_DISTANCE,\n } = useSystemHausMotionProvider();\n\n const fadeDistance = Math.abs(fadeInDistance);\n\n const getVariantMap = React.useCallback(\n (distance: number): Record<DirectionEnum, Required<MotionVariants>> => ({\n [DirectionEnum.DEFAULT]: {\n hidden: { opacity: 0, y: 0 },\n visible: { opacity: 1, y: 0 },\n exit: { opacity: 0, y: 0 },\n },\n [DirectionEnum.TOP]: {\n hidden: { opacity: 0, y: -distance },\n visible: { opacity: 1, y: 0 },\n exit: { opacity: 0, y: -distance },\n },\n [DirectionEnum.BOTTOM]: {\n hidden: { opacity: 0, y: distance },\n visible: { opacity: 1, y: 0 },\n exit: { opacity: 0, y: distance },\n },\n [DirectionEnum.LEFT]: {\n hidden: { opacity: 0, x: -distance },\n visible: { opacity: 1, x: 0 },\n exit: { opacity: 0, x: -distance },\n },\n [DirectionEnum.RIGHT]: {\n hidden: { opacity: 0, x: distance },\n visible: { opacity: 1, x: 0 },\n exit: { opacity: 0, x: distance },\n },\n }),\n [],\n );\n\n const variantMap = getVariantMap(fadeDistance);\n\n const exitVariant = get(\n variantMap,\n [onExitDirection ?? DirectionEnum.BOTTOM, 'exit'],\n variantMap[DirectionEnum.BOTTOM]['exit'],\n );\n\n return React.useMemo(\n () => ({\n initial: 'hidden',\n animate: 'visible',\n exit: 'exit',\n variants: {\n ...get(\n variantMap,\n [onEnterDirection ?? DirectionEnum.TOP],\n variantMap[DirectionEnum.TOP],\n ),\n exit: exitVariant as MotionVariant,\n },\n transition,\n viewport,\n }),\n [variantMap, exitVariant, onEnterDirection, transition, viewport],\n // TODO: type this better\n ) as unknown as PolymorphicMotionProperties<T>;\n};\n","'use client';\n\nimport {\n DEFAULT_FADE_DISTANCE,\n DirectionEnum,\n motionContextDefaultConfig,\n} from '@kurocado-studio/systemhaus-motion';\nimport { get } from 'lodash-es';\nimport React, { createContext, useContext, useMemo } from 'react';\n\nimport { MotionConfig } from '../lib/motion';\nimport { SystemHausMotionProvider } from '../types';\n\nexport const systemHausMotionConfiguration: SystemHausMotionProvider = {\n ...motionContextDefaultConfig,\n fadeInDirection: DirectionEnum.TOP,\n fadeInDistance: DEFAULT_FADE_DISTANCE,\n viewport: {\n once: false,\n amount: 0.2,\n },\n};\n\nconst MotionContext = createContext<SystemHausMotionProvider>(\n systemHausMotionConfiguration,\n);\n\ninterface SystemHausMotionProviderProperties {\n children?: React.ReactNode;\n motionOverrides?: Partial<SystemHausMotionProvider>;\n}\n\nexport const MotionProvider: React.FC<SystemHausMotionProviderProperties> = ({\n children,\n motionOverrides,\n}) => {\n const motionContextConfig: SystemHausMotionProvider = useMemo(\n () => ({\n ...motionContextDefaultConfig,\n ...motionOverrides,\n viewport: get(\n motionOverrides,\n ['viewport'],\n systemHausMotionConfiguration.viewport,\n ),\n fadeInDistance: get(\n motionOverrides,\n ['fadeInDistance'],\n systemHausMotionConfiguration.fadeInDistance,\n ),\n fadeInDirection: get(\n motionOverrides,\n ['fadeInDirection'],\n systemHausMotionConfiguration.fadeInDirection,\n ),\n }),\n [motionOverrides],\n );\n\n return (\n <MotionContext.Provider value={motionContextConfig}>\n <MotionConfig {...motionContextConfig}>{children}</MotionConfig>\n </MotionContext.Provider>\n );\n};\n\nexport const useSystemHausMotionProvider = () => {\n return useContext(MotionContext);\n};\n","import React, { useEffect, useRef, useState } from 'react';\n\nimport type { MotionProperties, MotionVariants } from '../lib/motion';\nimport { useSystemHausMotionProvider } from '../provider/MotionProvider';\nimport { PolymorphicMotionProperties } from '../types';\n\ninterface CursorImageTrailOptions {\n images: string[];\n frequency?: number;\n visibleFor?: number;\n animation?: {\n in?: MotionProperties;\n out?: MotionProperties;\n };\n}\n\ntype PolymorphicActiveMotionProperties<\n T extends keyof React.JSX.IntrinsicElements = 'img',\n> = PolymorphicMotionProperties<T> & {\n imageTrailKey?: string;\n};\n\nconst imageVariants: MotionVariants = {\n hidden: { opacity: 0, scale: 0.8 },\n visible: { opacity: 1, scale: 1 },\n exit: { opacity: 0, scale: 0.8 },\n};\n\nexport function useImageTrail({\n images,\n frequency = 15,\n visibleFor = 1.5,\n animation,\n}: CursorImageTrailOptions) {\n const componentReference = useRef<HTMLDivElement | null>(null);\n const [mousePos, setMousePos] = useState({ x: 0, y: 0 });\n const [isHovering, setIsHovering] = useState(false);\n const [lastTriggerPos, setLastTriggerPos] = useState({ x: 0, y: 0 });\n const [currentImageIndex, setCurrentImageIndex] = useState(0);\n const [activeImages, setActiveImages] = useState<\n PolymorphicActiveMotionProperties[]\n >([]);\n const [imagesPreloaded, setImagesPreloaded] = useState(false);\n const [imageSizes, setImageSizes] = useState<\n { width: number; height: number }[]\n >([]);\n\n const { transition } = useSystemHausMotionProvider();\n\n const MAX_THRESHOLD = 200;\n const MIN_THRESHOLD = 1;\n const THRESHOLD_RANGE = MAX_THRESHOLD - MIN_THRESHOLD;\n\n const threshold = MAX_THRESHOLD - ((frequency - 1) * THRESHOLD_RANGE) / 49;\n\n useEffect(() => {\n let isMounted = true;\n const listeners: {\n img: HTMLImageElement;\n onLoad: () => void;\n onError: (error: Event) => void;\n }[] = [];\n\n const preload = async () => {\n const sizes: { width: number; height: number }[] = [];\n\n await Promise.all(\n images.map(\n (source) =>\n new Promise<void>((resolve, reject) => {\n const img = new Image();\n\n const onLoad = () => {\n sizes.push({ width: img.width, height: img.height });\n cleanup();\n resolve();\n };\n\n const onError = (error: Event) => {\n cleanup();\n reject(error);\n };\n\n const cleanup = () => {\n img.removeEventListener('load', onLoad);\n img.removeEventListener('error', onError);\n };\n\n img.addEventListener('load', onLoad);\n img.addEventListener('error', onError);\n\n listeners.push({ img, onLoad, onError });\n img.src = source;\n }),\n ),\n );\n\n if (isMounted) {\n setImageSizes(sizes);\n setImagesPreloaded(true);\n }\n };\n\n preload().then();\n\n return () => {\n isMounted = false;\n for (const { img, onLoad, onError } of listeners) {\n img.removeEventListener('load', onLoad);\n img.removeEventListener('error', onError);\n }\n };\n }, [images]);\n\n const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n const rect = event.currentTarget.getBoundingClientRect();\n setMousePos({ x: event.clientX - rect.left, y: event.clientY - rect.top });\n };\n const handleMouseEnter = () => setIsHovering(true);\n const handleMouseLeave = () => setIsHovering(false);\n\n useEffect(() => {\n if (!isHovering || images.length === 0 || !imagesPreloaded) return;\n\n const distance = Math.hypot(\n mousePos.x - lastTriggerPos.x,\n mousePos.y - lastTriggerPos.y,\n );\n if (distance < threshold) return;\n\n const naturalSize = imageSizes[currentImageIndex] || {\n width: 100,\n height: 100,\n };\n\n const imgWidth = naturalSize.width;\n const imgHeight = naturalSize.height;\n\n const newImage: PolymorphicActiveMotionProperties<'img'> = {\n imageTrailKey: Math.random().toString(),\n style: {\n width: imgWidth,\n height: imgHeight,\n position: 'absolute',\n backgroundImage: `url(${images[currentImageIndex]})`,\n backgroundSize: 'auto',\n backgroundPosition: 'center',\n pointerEvents: 'none',\n left: mousePos.x - imgWidth / 2,\n top: mousePos.y - imgHeight / 2,\n },\n initial: 'hidden',\n animate: 'visible',\n exit: 'exit',\n variants: imageVariants,\n transition,\n };\n\n setActiveImages((previous) => [...previous, newImage]);\n setCurrentImageIndex((previous) => (previous + 1) % images.length);\n setLastTriggerPos(mousePos);\n\n setTimeout(() => {\n setActiveImages((previous) =>\n previous.map((img) =>\n img.imageTrailKey === newImage.imageTrailKey\n ? { ...img, animate: 'exit' }\n : img,\n ),\n );\n }, visibleFor * 1000);\n }, [\n mousePos,\n isHovering,\n lastTriggerPos,\n images,\n imagesPreloaded,\n imageSizes,\n threshold,\n currentImageIndex,\n visibleFor,\n animation,\n ]);\n\n return {\n componentRef: componentReference,\n componentProps: {\n onMouseMove: handleMouseMove,\n onMouseEnter: handleMouseEnter,\n onMouseLeave: handleMouseLeave,\n },\n activeImages,\n imagesPreloaded,\n };\n}\n","'use client';\n\nimport { cloneDeep, merge } from 'lodash-es';\nimport React from 'react';\n\nimport type { MotionProperties } from '../lib/motion';\nimport {\n PolymorphicMotionElementMap,\n PolymorphicMotionProperties,\n} from '../types';\n\nexport function useDeepMergeMotionProperties(\n ...motionProperties: MotionProperties[]\n): MotionProperties {\n return React.useMemo(() => {\n const safeCopies = motionProperties.map((mappedObject) =>\n cloneDeep(mappedObject),\n );\n return merge({}, ...safeCopies);\n }, motionProperties);\n}\n\nexport type DeepMergeMotionProperties = <T extends PolymorphicMotionElementMap>(\n ...motionProperties: PolymorphicMotionProperties<T>[]\n) => PolymorphicMotionProperties<T>;\n\nexport function useMergeMotionProperties() {\n const handleDeepMergeMotionProperties: DeepMergeMotionProperties =\n React.useCallback((...payload) => {\n const safeCopies = payload.map((mappedObject) => cloneDeep(mappedObject));\n return merge({}, ...safeCopies);\n }, []);\n\n return { handleDeepMergeMotionProperties };\n}\n","'use client';\n\nimport { set } from 'lodash-es';\nimport React from 'react';\n\nimport { stagger } from '../lib/motion';\nimport {\n PolymorphicMotionElementMap,\n PolymorphicMotionProperties,\n} from '../types';\nimport { useMergeMotionProperties } from './useMergeMotionProperties';\n\nexport type ComposeStagger = <\n T extends PolymorphicMotionElementMap = 'div',\n>(payload: {\n payload: PolymorphicMotionProperties<T>;\n staggerPayload: Parameters<typeof stagger>;\n}) => PolymorphicMotionProperties<T>;\n\nexport type UseComposeStagger = () => {\n composeStagger: ComposeStagger;\n};\nexport const useComposeStagger = () => {\n const { handleDeepMergeMotionProperties } = useMergeMotionProperties();\n\n const composeStagger: <\n T extends PolymorphicMotionElementMap = 'div',\n >(payload: {\n payload: PolymorphicMotionProperties<T>;\n staggerPayload: Parameters<typeof stagger>;\n }) => PolymorphicMotionProperties<T> = React.useCallback(\n ({ payload, staggerPayload }) => {\n const updatedPayload = { ...payload };\n const staggerDelay = stagger(...staggerPayload);\n const delay =\n payload.custom == undefined ? (staggerPayload[0] ?? 0) : staggerDelay;\n\n set(updatedPayload, ['transition', 'delay'], delay);\n\n return handleDeepMergeMotionProperties(payload, updatedPayload);\n },\n [handleDeepMergeMotionProperties],\n );\n\n return { composeStagger };\n};\n","'use client';\n\nimport { get } from 'lodash-es';\nimport React from 'react';\n\nimport type { MotionVariant, MotionVariants } from '../lib/motion';\nimport { useSystemHausMotionProvider } from '../provider/MotionProvider';\nimport { PolymorphicMotionProperties } from '../types';\n\n/**\n * Scale motion hook — animates an element scaling in/out.\n * Default scale range: visible = 1, hidden = 1.2 (slightly zoomed in).\n */\nexport function useScale(\n payload: {\n initialScale?: number;\n exitScale?: number;\n } = {},\n): PolymorphicMotionProperties {\n const fallbackInitialScale = 1.1;\n\n const { transition } = useSystemHausMotionProvider();\n\n const getVariantMap = React.useCallback(\n (): Record<'default', Required<MotionVariants>> => ({\n default: {\n hidden: {\n opacity: 0,\n scale: get(payload, ['initialScale'], fallbackInitialScale),\n },\n visible: { opacity: 1, scale: 1 },\n exit: {\n opacity: 0,\n scale: get(payload, ['exitScale'], fallbackInitialScale),\n },\n },\n }),\n [],\n );\n\n const variantMap = getVariantMap();\n\n const exitVariant = get(\n variantMap,\n ['default', 'exit'],\n variantMap['default']['exit'],\n );\n\n return React.useMemo(\n () => ({\n initial: 'hidden',\n animate: 'visible',\n exit: 'exit',\n variants: {\n ...variantMap['default'],\n exit: exitVariant as MotionVariant,\n },\n transition: {\n duration: get(transition, ['duration'], 1.2),\n ...transition,\n },\n }),\n [variantMap, exitVariant, transition],\n );\n}\n","'use client';\n\nimport { DirectionEnum } from '@kurocado-studio/systemhaus-motion';\nimport { get } from 'lodash-es';\nimport React from 'react';\n\nimport type { MotionVariant, MotionVariants } from '../lib/motion';\nimport { useSystemHausMotionProvider } from '../provider/MotionProvider';\nimport { PolymorphicMotionProperties } from '../types';\n\n/**\n * Slide-out motion hook — animates an element in/out based on direction.\n * Default distance: \"100%\" (full travel).\n */\nexport function useSlideOut({\n onEnterDirection = DirectionEnum.RIGHT,\n onExitDirection = DirectionEnum.RIGHT,\n distance = '100%',\n}: {\n onEnterDirection?: DirectionEnum;\n onExitDirection?: DirectionEnum;\n distance?: string | number;\n} = {}): PolymorphicMotionProperties {\n const { transition } = useSystemHausMotionProvider();\n\n const getVariantMap = React.useCallback(\n (\n distance: string | number,\n ): Record<DirectionEnum, Required<MotionVariants>> => ({\n [DirectionEnum.DEFAULT]: {\n hidden: { opacity: 0 },\n visible: { opacity: 1 },\n exit: { opacity: 0 },\n },\n [DirectionEnum.TOP]: {\n hidden: { opacity: 0, y: `-${distance}` },\n visible: { opacity: 1, y: 0 },\n exit: { opacity: 0, y: `-${distance}` },\n },\n [DirectionEnum.BOTTOM]: {\n hidden: { opacity: 0, y: distance },\n visible: { opacity: 1, y: 0 },\n exit: { opacity: 0, y: distance },\n },\n [DirectionEnum.LEFT]: {\n hidden: { opacity: 0, x: `-${distance}` },\n visible: { opacity: 1, x: 0 },\n exit: { opacity: 0, x: `-${distance}` },\n },\n [DirectionEnum.RIGHT]: {\n hidden: { opacity: 0, x: distance },\n visible: { opacity: 1, x: 0 },\n exit: { opacity: 0, x: distance },\n },\n }),\n [],\n );\n\n const variantMap = getVariantMap(distance);\n\n const exitVariant = get(\n variantMap,\n [onExitDirection, 'exit'],\n variantMap[DirectionEnum.RIGHT]['exit'],\n );\n\n return React.useMemo(\n () => ({\n initial: 'hidden',\n animate: 'visible',\n exit: 'exit',\n variants: {\n ...get(variantMap, [onEnterDirection], variantMap[DirectionEnum.RIGHT]),\n exit: exitVariant as MotionVariant,\n },\n transition: {\n ...transition,\n },\n }),\n [variantMap, exitVariant, onEnterDirection, transition],\n );\n}\n","import { cloneDeep, merge } from 'lodash-es';\n\nimport type { MotionProperties } from '../lib/motion';\n\nexport function mergeMotionProperties(\n ...motionProperties: MotionProperties[]\n): MotionProperties {\n const safeCopies = motionProperties.map((mappedObject) =>\n cloneDeep(mappedObject),\n );\n return merge({}, ...safeCopies);\n}\n","export type * from './lib/motion';\nexport type * from './types';\nexport type { PolymorphicMotionProperties } from './types';\n\nexport * from './components/AnimateMotionPresence';\nexport * from './components/PolymorphicMotionElement';\nexport * from './hooks/useCursorFollow';\nexport * from './hooks/useFadeIn';\nexport * from './hooks/useImageTrail';\nexport * from './hooks/useMergeMotionProperties';\nexport * from './hooks/useComposeStagger';\nexport * from './hooks/useScale';\nexport * from './hooks/useSlideOut';\nexport * from './provider/MotionProvider';\nexport * from './utils/mergeMotionProperties';\nexport * from 'framer-motion';\nexport { DirectionEnum } from '@kurocado-studio/systemhaus-motion';\nexport { systemHausMotionConfiguration } from './provider/MotionProvider';\n"],"mappings":"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","names":["React","stagger","useMotionValue","useSpring","MotionConfig","AnimatePresence","motion","AnimateMotionPresence","children","isVisible","mode","initial","React","AnimatePresence","child","index","React","PolymorphicMotionElement","properties","as","rest","Component","motion","React","calculateCursorOffset","get","useEffect","useRef","useCursorFollow","settings","elementReference","damping","get","stiffness","x","useMotionValue","y","localReference","useRef","targetReference","springX","useSpring","springY","useEffect","handleMouseMove","mouseEvent","element","newX","newY","calculateCursorOffset","DEFAULT_FADE_DISTANCE","DirectionEnum","get","React","DEFAULT_FADE_DISTANCE","DirectionEnum","motionContextDefaultConfig","get","React","createContext","useContext","useMemo","systemHausMotionConfiguration","motionContextDefaultConfig","DirectionEnum","DEFAULT_FADE_DISTANCE","MotionContext","createContext","MotionProvider","children","motionOverrides","motionContextConfig","useMemo","get","React","MotionConfig","useSystemHausMotionProvider","useContext","useFadeIn","onEnterDirection","onExitDirection","viewport","transition","fadeInDistance","DEFAULT_FADE_DISTANCE","useSystemHausMotionProvider","fadeDistance","variantMap","React","distance","DirectionEnum","exitVariant","get","useEffect","useRef","useState","imageVariants","useImageTrail","images","frequency","visibleFor","animation","componentReference","useRef","mousePos","setMousePos","useState","isHovering","setIsHovering","lastTriggerPos","setLastTriggerPos","currentImageIndex","setCurrentImageIndex","activeImages","setActiveImages","imagesPreloaded","setImagesPreloaded","imageSizes","setImageSizes","transition","useSystemHausMotionProvider","MAX_THRESHOLD","THRESHOLD_RANGE","threshold","useEffect","isMounted","listeners","sizes","source","resolve","reject","img","onLoad","cleanup","onError","error","handleMouseMove","event","rect","handleMouseEnter","handleMouseLeave","naturalSize","imgWidth","imgHeight","newImage","previous","cloneDeep","merge","React","useDeepMergeMotionProperties","motionProperties","safeCopies","mappedObject","useMergeMotionProperties","payload","set","React","useComposeStagger","handleDeepMergeMotionProperties","useMergeMotionProperties","React","payload","staggerPayload","updatedPayload","staggerDelay","stagger","delay","set","get","React","useScale","payload","transition","useSystemHausMotionProvider","variantMap","React","get","exitVariant","DirectionEnum","get","React","useSlideOut","onEnterDirection","DirectionEnum","onExitDirection","distance","transition","useSystemHausMotionProvider","variantMap","React","exitVariant","get","cloneDeep","merge","mergeMotionProperties","motionProperties","safeCopies","mappedObject","DirectionEnum"]}
package/dist/index.d.ts CHANGED
@@ -1,118 +1,133 @@
1
1
  import { AnimatePresence } from 'framer-motion';
2
- import * as Motion from 'framer-motion';
2
+ import { CalculateCursorOffsetController } from '@kurocado-studio/systemhaus-motion';
3
+ import { ComponentPropsWithoutRef } from 'react';
4
+ import { DirectionEnum } from '@kurocado-studio/systemhaus-motion';
5
+ import { ElementType } from 'react';
6
+ import { JSX } from 'react';
3
7
  import { motion } from 'framer-motion';
8
+ import * as motion_dom from 'motion-dom';
4
9
  import { MotionConfig } from 'framer-motion';
5
- import { MotionProps } from 'framer-motion';
6
- import * as React_2 from 'react';
7
- import React__default from 'react';
10
+ import * as MotionLibrary from 'framer-motion';
11
+ import { default as React_2 } from 'react';
12
+ import { RefObject } from 'react';
13
+ import { stagger } from 'framer-motion';
14
+ import { SystemHausMotionProviderConfig } from '@kurocado-studio/systemhaus-motion';
15
+ import { UseFadeInProperties } from '@kurocado-studio/systemhaus-motion';
8
16
  import { useMotionValue } from 'framer-motion';
9
17
  import { useSpring } from 'framer-motion';
10
- import { Variant } from 'framer-motion';
11
- import { Variants } from 'framer-motion';
12
- import { ViewportOptions } from 'framer-motion';
13
18
 
14
- export declare function AnimateMotionPresence({ children, isVisible, mode, initial, }: React__default.PropsWithChildren<AnimateMotionPresenceProperties>): React__default.ReactNode;
19
+ export declare function AnimateMotionPresence({ children, isVisible, mode, initial, }: React_2.PropsWithChildren<AnimateMotionPresenceProperties>): React_2.ReactNode;
15
20
 
16
21
  export declare interface AnimateMotionPresenceProperties {
17
22
  isVisible?: boolean;
18
23
  initial?: boolean;
19
- children?: React__default.ReactNode;
24
+ children?: React_2.ReactNode;
20
25
  mode?: 'wait' | 'sync' | 'popLayout';
21
26
  }
22
27
 
23
28
  export { AnimatePresence }
24
29
 
25
- declare type CalculateCursorOffsetController = CursorFollowSettings;
26
-
27
- declare interface CursorFollowSettings {
28
- damping?: number;
29
- stiffness?: number;
30
- maxDistance?: number;
31
- intensity?: number;
32
- magneticModeActivationRadius?: number;
33
- }
30
+ export declare type ComposeStagger = <T extends PolymorphicMotionElementMap = 'div'>(payload: {
31
+ payload: PolymorphicMotionProperties<T>;
32
+ staggerPayload: Parameters<typeof stagger>;
33
+ }) => PolymorphicMotionProperties<T>;
34
34
 
35
35
  declare interface CursorImageTrailOptions {
36
36
  images: string[];
37
37
  frequency?: number;
38
38
  visibleFor?: number;
39
39
  animation?: {
40
- in?: MotionProps;
41
- out?: MotionProps;
40
+ in?: MotionProperties;
41
+ out?: MotionProperties;
42
42
  };
43
43
  }
44
44
 
45
- export declare enum DirectionEnum {
46
- TOP = "TOP",
47
- BOTTOM = "BOTTOM",
48
- LEFT = "LEFT",
49
- RIGHT = "RIGHT",
50
- DEFAULT = "DEFAULT"
51
- }
45
+ export declare type DeepMergeMotionProperties = <T extends PolymorphicMotionElementMap>(...motionProperties: PolymorphicMotionProperties<T>[]) => PolymorphicMotionProperties<T>;
46
+
47
+ export { DirectionEnum }
52
48
 
53
- export declare function mergeMotionProperties(...motionProperties: MotionProps[]): MotionProps;
49
+ export declare function mergeMotionProperties(...motionProperties: MotionProperties[]): MotionProperties;
54
50
 
55
51
  export { motion }
56
52
 
57
53
  export { MotionConfig }
58
54
 
59
- export { MotionProps }
55
+ export { MotionLibrary }
56
+
57
+ export declare type MotionOverridableProperties<T extends ElementType> = OverrideProperties<ComponentPropsWithoutRef<T>, Omit<MotionProperties, 'style'> & {
58
+ style?: MotionProperties['style'] | React_2.HTMLAttributes<T>['style'];
59
+ }>;
60
+
61
+ export declare type MotionProperties = MotionLibrary.MotionProps;
62
+
63
+ export declare const MotionProvider: React_2.FC<SystemHausMotionProviderProperties>;
60
64
 
61
- export declare const MotionProvider: React__default.FC<SystemHausMotionProviderProperties>;
65
+ export declare type MotionStaggerOptions = MotionLibrary.StaggerOptions;
62
66
 
63
- declare type PolymorphicActiveMotionProperties<T extends keyof React__default.JSX.IntrinsicElements = 'img'> = PolymorphicMotionProperties<T> & {
67
+ export declare type MotionVariant = MotionLibrary.Variant;
68
+
69
+ export declare type MotionVariants = MotionLibrary.Variants;
70
+
71
+ export declare type MotionViewportOptions = MotionLibrary.ViewportOptions;
72
+
73
+ declare type OverrideProperties<Base, Override> = Omit<Base, keyof Override> & Override;
74
+
75
+ declare type PolymorphicActiveMotionProperties<T extends keyof React_2.JSX.IntrinsicElements = 'img'> = PolymorphicMotionProperties<T> & {
64
76
  imageTrailKey?: string;
65
77
  };
66
78
 
67
- export declare function PolymorphicMotionElement<T extends keyof React__default.JSX.IntrinsicElements = 'div'>(properties: React__default.PropsWithChildren<PolymorphicMotionProperties<T>>): React__default.ReactNode;
79
+ export declare function PolymorphicMotionElement<T extends keyof JSX.IntrinsicElements = 'div', K extends Record<string, unknown> = Record<string, unknown>>(properties: PolymorphicMotionProperties<T> & K): React_2.ReactNode;
80
+
81
+ export declare type PolymorphicMotionElementMap = keyof React_2.JSX.IntrinsicElements | keyof HTMLElementTagNameMap | ElementType;
68
82
 
69
- export declare type PolymorphicMotionProperties<T extends keyof React__default.JSX.IntrinsicElements = 'div'> = Omit<React__default.JSX.IntrinsicElements[T], keyof MotionProps | 'ref'> & MotionProps & {
83
+ export declare type PolymorphicMotionProperties<T extends ElementType = 'div'> = MotionOverridableProperties<T> & {
70
84
  as?: T;
71
- isVisible?: boolean;
72
- style?: React__default.CSSProperties & Record<string, unknown>;
85
+ transition?: MotionProperties['transition'];
86
+ initial?: MotionVariant | string;
87
+ animate?: MotionVariant | string;
88
+ exit?: MotionVariant | string;
73
89
  };
74
90
 
75
- declare type ProvidedConfig = {
76
- fadeInSpeed: number;
77
- fadeDistance: number;
78
- };
91
+ export { stagger }
79
92
 
80
93
  export declare const systemHausMotionConfiguration: SystemHausMotionProvider;
81
94
 
82
95
  export declare interface SystemHausMotionProvider extends SystemHausMotionProviderConfig {
83
96
  fadeInDistance: number;
84
97
  fadeInDirection: DirectionEnum;
85
- viewport: ViewportOptions;
98
+ viewport: MotionViewportOptions;
86
99
  }
87
100
 
88
- declare type SystemHausMotionProviderConfig = ProvidedConfig & {
89
- [K in keyof Motion.MotionConfigProps as Motion.MotionConfigProps[K] extends (...unknowns: unknown[]) => unknown ? never : K]: Motion.MotionConfigProps[K];
90
- };
91
-
92
101
  declare interface SystemHausMotionProviderProperties {
93
- children?: React__default.ReactNode;
102
+ children?: React_2.ReactNode;
94
103
  motionOverrides?: Partial<SystemHausMotionProvider>;
95
104
  }
96
105
 
97
- export declare function useCursorFollow(settings: CalculateCursorOffsetController): {
98
- ref: React_2.Dispatch<React_2.SetStateAction<HTMLDivElement | undefined>>;
99
- x: Motion.MotionValue<number>;
100
- y: Motion.MotionValue<number>;
106
+ export declare type UseComposeStagger = () => {
107
+ composeStagger: ComposeStagger;
101
108
  };
102
109
 
103
- export declare function useDeepMergeMotionProperties(...motionProperties: MotionProps[]): MotionProps;
110
+ export declare const useComposeStagger: () => {
111
+ composeStagger: <T extends PolymorphicMotionElementMap = "div">(payload: {
112
+ payload: PolymorphicMotionProperties<T>;
113
+ staggerPayload: Parameters<typeof stagger>;
114
+ }) => PolymorphicMotionProperties<T>;
115
+ };
104
116
 
105
- export declare const useFadeIn: ({ onEnterDirection, onExitDirection, }?: UseFadeInProperties) => PolymorphicMotionProperties;
117
+ export declare function useCursorFollow(settings: CalculateCursorOffsetController, elementReference?: RefObject<HTMLDivElement | null>): {
118
+ ref: RefObject<HTMLDivElement | null>;
119
+ x: motion_dom.MotionValue<number>;
120
+ y: motion_dom.MotionValue<number>;
121
+ };
106
122
 
107
- export declare interface UseFadeInProperties {
108
- onEnterDirection?: DirectionEnum;
109
- onExitDirection?: DirectionEnum;
110
- }
123
+ export declare function useDeepMergeMotionProperties(...motionProperties: MotionProperties[]): MotionProperties;
124
+
125
+ export declare const useFadeIn: <T extends PolymorphicMotionElementMap = "div">({ onEnterDirection, onExitDirection, }?: UseFadeInProperties) => PolymorphicMotionProperties<T>;
111
126
 
112
127
  export declare function useImageTrail({ images, frequency, visibleFor, animation, }: CursorImageTrailOptions): {
113
- componentRef: React__default.RefObject<HTMLDivElement | null>;
128
+ componentRef: React_2.RefObject<HTMLDivElement | null>;
114
129
  componentProps: {
115
- onMouseMove: (event: React__default.MouseEvent<HTMLDivElement>) => void;
130
+ onMouseMove: (event: React_2.MouseEvent<HTMLDivElement>) => void;
116
131
  onMouseEnter: () => void;
117
132
  onMouseLeave: () => void;
118
133
  };
@@ -120,6 +135,10 @@ export declare function useImageTrail({ images, frequency, visibleFor, animation
120
135
  imagesPreloaded: boolean;
121
136
  };
122
137
 
138
+ export declare function useMergeMotionProperties(): {
139
+ handleDeepMergeMotionProperties: DeepMergeMotionProperties;
140
+ };
141
+
123
142
  export { useMotionValue }
124
143
 
125
144
  /**
@@ -145,10 +164,7 @@ export { useSpring }
145
164
 
146
165
  export declare const useSystemHausMotionProvider: () => SystemHausMotionProvider;
147
166
 
148
- export { Variant }
149
-
150
- export { Variants }
151
167
 
152
- export { ViewportOptions }
168
+ export * from "framer-motion";
153
169
 
154
170
  export { }
@@ -5,7 +5,7 @@
5
5
  "toolPackages": [
6
6
  {
7
7
  "packageName": "@microsoft/api-extractor",
8
- "packageVersion": "7.55.0"
8
+ "packageVersion": "7.55.2"
9
9
  }
10
10
  ]
11
11
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kurocado-studio/systemhaus-motion-react",
3
- "version": "1.0.0-develop.11",
3
+ "version": "1.0.0-develop.13",
4
4
  "private": false,
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -23,36 +23,29 @@
23
23
  "dist"
24
24
  ],
25
25
  "scripts": {
26
+ "dependency:build": "tsup && pnpm build:typings && rm -rf dist/exports.d.ts",
26
27
  "build:typings": "api-extractor run --local",
27
- "build": "tsup && pnpm build:typings && rm -rf dist/exports.d.ts",
28
- "prepublishOnly": "node ../../scripts/strip-workspaces.js .",
29
28
  "clean": "rm -rf .turbo node_modules dist",
30
- "dev": "tsup --watch",
31
- "lint": "eslint --max-warnings=0 --no-warn-ignored",
32
- "lint:fix": "eslint --max-warnings=0 --fix --no-warn-ignored",
33
- "prettier:fix": "prettier --write . --ignore-path ../../.prettierignore",
29
+ "dev": "pnpm storybook:dev && cross-env VITE_NODE_ENV=local tsup --watch",
30
+ "lint": "eslint --max-warnings=0 . --no-warn-ignored",
31
+ "lint:fix": "eslint --max-warnings=0 . --fix --no-warn-ignored",
32
+ "prepublishOnly": "node ../../scripts/strip-workspaces.js .",
34
33
  "prettier:check": "prettier --check . --ignore-path ../../.prettierignore",
34
+ "prettier:fix": "prettier --write . --ignore-path ../../.prettierignore",
35
+ "preview": "vite preview",
36
+ "storybook:build": "storybook build",
37
+ "storybook:dev": "storybook dev -p 6006 --no-open",
35
38
  "typecheck": "tsc --noEmit --pretty"
36
39
  },
37
40
  "dependencies": {
38
- "framer-motion": "^12.23.24",
41
+ "framer-motion": "^12.23.26",
39
42
  "lodash-es": "^4.17.21",
40
- "react": "19"
43
+ "motion": "^12.11.0",
44
+ "react": "^19.2.0",
45
+ "react-dom": "^19.2.0"
41
46
  },
42
47
  "devDependencies": {
43
48
  "@internal/config": "workspace:*",
44
- "@kurocado-studio/qa": "2.0.1",
45
- "@microsoft/api-extractor": "^7.52.11",
46
- "@testing-library/jest-dom": "^6.9.1",
47
- "@types/lodash-es": "^4.17.12",
48
- "@types/node": "^22.15.19",
49
- "@types/react": "^19.1.10",
50
- "@types/react-dom": "^19.1.4",
51
- "@vitest/coverage-v8": "^3.1.3",
52
- "eslint": "^9.28.0",
53
- "prettier": "3.5.3",
54
- "tsup": "^8.5.0",
55
- "typescript": "5.8.3",
56
- "vitest": "^3.1.3"
49
+ "@internal/storybook-config": "workspace:*"
57
50
  }
58
51
  }