@kurocado-studio/systemhaus-motion-react 1.0.0 → 1.2.0-develop.1

package/README.md

@@ -1 +1,83 @@
-Kurocado Studio Design System components
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react)
+  uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in
+  [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc)
+  uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build
+performances. To add it, see
+[this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable
+type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+]);
+```
+
+You can also install
+[eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x)
+and
+[eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom)
+for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactDom from 'eslint-plugin-react-dom';
+import reactX from 'eslint-plugin-react-x';
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+]);
+```

package/dist/exports.js

@@ -1 +1,2 @@
-import{get as z}from"lodash-es";var B=Symbol("ThemeProvider");var p="@kurocado:color-scheme",w="ph ph-moon-stars",x="ph ph-sun";var d=(function(r){return r.DARK="dark",r.LIGHT="light",r.SYSTEM="system",r})(d||{});function h(){return globalThis.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}function T(){var r;return(r=localStorage.getItem(p))!==null&&r!==void 0?r:void 0}function _(r){var o=document.documentElement,e=d.DARK;r===e?o.classList.add(e):o.classList.remove(e)}function y(){var r=T();return r==="system"||!r?h():r}function k(r){localStorage.setItem(p,r),_(r==="system"?h():r)}function V(){var r=y(),o=r==="dark"?"light":"dark";return k(o),o}function A(){return y()==="dark"}var c={getStoredTheme:T,getSystemTheme:h,resolveEffectiveTheme:y,applyTheme:_,setTheme:k,toggleTheme:V,isDarkMode:A};import{useEffect as D,useState as I}from"react";function Y(){let[r,o]=I(()=>globalThis.window===void 0?d.LIGHT:c.resolveEffectiveTheme());D(()=>{if(globalThis.window===void 0)return;c.applyTheme(r);let n=globalThis.matchMedia("(prefers-color-scheme: dark)"),l=()=>{let i=c.getStoredTheme();if(i===d.SYSTEM||!i){let v=c.getSystemTheme();c.applyTheme(v),o(v)}};return n.addEventListener("change",l),()=>{n.removeEventListener("change",l)}},[r]);let e=()=>{let n=c.toggleTheme();o(n)},t=n=>{c.setTheme(n),o(c.resolveEffectiveTheme())},a=r===d.DARK?w:x;return{isDark:r===d.DARK,theme:r,toggle:e,iconSettings:a,setTheme:t}}import{get as M}from"lodash-es";function G(r,o,e,t){var a=r.getBoundingClientRect(),m=a.left+a.width/2,n=a.top+a.height/2,l=o-m,i=e-n,v=t.magneticModeActivationRadius,s=M(t,["maxDistance"],3e3),u=M(t,["intensity"],.1);if(globalThis.matchMedia("(prefers-reduced-motion: reduce)").matches)return{x:0,y:0};if(typeof v=="number"){var f=Math.hypot(Math.pow(l,2)+Math.pow(i,2));if(f>s)return{x:0,y:0};var g=0;return f<v&&(g=1-f/v),{x:l*g*u,y:i*g*u}}if(Math.abs(l)<s&&Math.abs(i)<s){var b=1-Math.max(Math.abs(l),Math.abs(i))/s;return{x:l*b*u,y:i*b*u}}return{x:0,y:0}}import{useMotionValue as E,useSpring as S}from"framer-motion";import{get as C}from"lodash-es";import{useEffect as O,useState as R}from"react";function $(r){let o=C(r,["damping"],100),e=C(r,["stiffness"],600),t=E(0),a=E(0),[m,n]=R(),l=S(t,{damping:o,stiffness:e}),i=S(a,{damping:o,stiffness:e});return O(()=>{let v=s=>{if(!m)return;let{x:u,y:f}=G(m,s.clientX,s.clientY,r);t.set(u),a.set(f)};return document.addEventListener("mousemove",v),()=>document.removeEventListener("mousemove",v)},[m,r,t,a]),{ref:n,x:l,y:i}}export{d as ThemeEnum,$ as useCursorFollow,Y as useDarkMode};
+import{get as z}from"lodash-es";function G(e,o,t,a){let n=e.getBoundingClientRect(),i=n.left+n.width/2,c=n.top+n.height/2,r=o-i,p=t-c,{magneticModeActivationRadius:m}=a,d=z(a,["maxDistance"],3e3),l=z(a,["intensity"],.1);if(globalThis.matchMedia("(prefers-reduced-motion: reduce)").matches)return{x:0,y:0};if(typeof m=="number"){let u=Math.hypot(r**2+p**2);if(u>d)return{x:0,y:0};let P=0;return u<m&&(P=1-u/m),{x:r*P*l,y:p*P*l}}if(Math.abs(r)<d&&Math.abs(p)<d){let u=1-Math.max(Math.abs(r),Math.abs(p))/d;return{x:r*u*l,y:p*u*l}}return{x:0,y:0}}var s=(e=>(e.TOP="TOP",e.BOTTOM="BOTTOM",e.LEFT="LEFT",e.RIGHT="RIGHT",e.DEFAULT="DEFAULT",e))(s||{});var ye="easeInOut",S=12;var H={isStatic:!1,fadeInSpeed:12,fadeDistance:12,transition:{duration:.4,ease:ye},reducedMotion:"user"};import{get as F}from"lodash-es";import $,{createContext as fe,useContext as ge,useMemo as he}from"react";import{stagger as X,useMotionValue as O,useSpring as V,MotionConfig as K,AnimatePresence as B,motion as Y}from"framer-motion";var I={...H,fadeInDirection:s.TOP,fadeInDistance:S,viewport:{once:!1,amount:.2}},q=fe(I),Fe=({children:e,motionOverrides:o})=>{let t=he(()=>({...H,...o,viewport:F(o,["viewport"],I.viewport),fadeInDistance:F(o,["fadeInDistance"],I.fadeInDistance),fadeInDirection:F(o,["fadeInDirection"],I.fadeInDirection)}),[o]);return $.createElement(q.Provider,{value:t},$.createElement(K,{...t},e))},M=()=>ge(q);import D from"react";function Ue({children:e,isVisible:o,mode:t,initial:a}){return D.createElement(B,{mode:t,initial:a},o&&D.Children.toArray(e).map((n,i)=>D.isValidElement(n)?D.cloneElement(n,{key:n.key??`motion-child-${i}`}):n))}import Me from"react";function Be(e){let{as:o,...t}=e,a=Y[o??"div"];return Me.createElement(a,{...t})}import{set as Pe}from"lodash-es";import xe from"react";import{cloneDeep as J,merge as j}from"lodash-es";import W from"react";function Je(...e){return W.useMemo(()=>{let o=e.map(t=>J(t));return j({},...o)},e)}function Q(){return{handleDeepMergeMotionProperties:W.useCallback((...o)=>{let t=o.map(a=>J(a));return j({},...t)},[])}}var tt=()=>{let{handleDeepMergeMotionProperties:e}=Q();return{composeStagger:xe.useCallback(({payload:t,staggerPayload:a})=>{let n={...t},i=X(...a),c=t.custom==null?a[0]??0:i;return Pe(n,["transition","delay"],c),e(t,n)},[e])}};import{get as Z}from"lodash-es";import{useEffect as ve,useRef as Te}from"react";function st(e,o){let t=Z(e,["damping"],100),a=Z(e,["stiffness"],600),n=O(0),i=O(0),c=Te(null),r=o??c,p=V(n,{damping:t,stiffness:a}),m=V(i,{damping:t,stiffness:a});return ve(()=>{let d=l=>{let u=r.current;if(!u)return;let{x:P,y:b}=G(u,l.clientX,l.clientY,e);n.set(P),i.set(b)};return document.addEventListener("mousemove",d),()=>document.removeEventListener("mousemove",d)},[e,r,n,i]),{ref:r,x:p,y:m}}import{get as ee}from"lodash-es";import te from"react";var dt=({onEnterDirection:e,onExitDirection:o}={})=>{let{viewport:t,transition:a,fadeInDistance:n=S}=M(),i=Math.abs(n),r=te.useCallback(m=>({[s.DEFAULT]:{hidden:{opacity:0,y:0},visible:{opacity:1,y:0},exit:{opacity:0,y:0}},[s.TOP]:{hidden:{opacity:0,y:-m},visible:{opacity:1,y:0},exit:{opacity:0,y:-m}},[s.BOTTOM]:{hidden:{opacity:0,y:m},visible:{opacity:1,y:0},exit:{opacity:0,y:m}},[s.LEFT]:{hidden:{opacity:0,x:-m},visible:{opacity:1,x:0},exit:{opacity:0,x:-m}},[s.RIGHT]:{hidden:{opacity:0,x:m},visible:{opacity:1,x:0},exit:{opacity:0,x:m}}}),[])(i),p=ee(r,[o??s.BOTTOM,"exit"],r[s.BOTTOM].exit);return te.useMemo(()=>({initial:"hidden",animate:"visible",exit:"exit",variants:{...ee(r,[e??s.TOP],r[s.TOP]),exit:p},transition:a,viewport:t}),[r,p,e,a,t])};import{useEffect as oe,useRef as Ee,useState as v}from"react";var Ie={hidden:{opacity:0,scale:.8},visible:{opacity:1,scale:1},exit:{opacity:0,scale:.8}};function Mt({images:e,frequency:o=15,visibleFor:t=1.5,animation:a}){let n=Ee(null),[i,c]=v({x:0,y:0}),[r,p]=v(!1),[m,d]=v({x:0,y:0}),[l,u]=v(0),[P,b]=v([]),[R,ae]=v(!1),[_,se]=v([]),{transition:me}=M(),k=200,pe=k-1,N=k-(o-1)*pe/49;oe(()=>{let x=!0,f=[];return(async()=>{let g=[];await Promise.all(e.map(T=>new Promise((y,E)=>{let h=new Image,w=()=>{g.push({width:h.width,height:h.height}),U(),y()},A=de=>{U(),E(de)},U=()=>{h.removeEventListener("load",w),h.removeEventListener("error",A)};h.addEventListener("load",w),h.addEventListener("error",A),f.push({img:h,onLoad:w,onError:A}),h.src=T}))),x&&(se(g),ae(!0))})().then(),()=>{x=!1;for(let{img:g,onLoad:T,onError:y}of f)g.removeEventListener("load",T),g.removeEventListener("error",y)}},[e]);let ce=x=>{let f=x.currentTarget.getBoundingClientRect();c({x:x.clientX-f.left,y:x.clientY-f.top})},le=()=>p(!0),ue=()=>p(!1);return oe(()=>{if(!r||e.length===0||!R||Math.hypot(i.x-m.x,i.y-m.y)<N)return;let f=_[l]||{width:100,height:100},C=f.width,g=f.height,T={imageTrailKey:Math.random().toString(),style:{width:C,height:g,position:"absolute",backgroundImage:`url(${e[l]})`,backgroundSize:"auto",backgroundPosition:"center",pointerEvents:"none",left:i.x-C/2,top:i.y-g/2},initial:"hidden",animate:"visible",exit:"exit",variants:Ie,transition:me};b(y=>[...y,T]),u(y=>(y+1)%e.length),d(i),setTimeout(()=>{b(y=>y.map(E=>E.imageTrailKey===T.imageTrailKey?{...E,animate:"exit"}:E))},t*1e3)},[i,r,m,e,R,_,N,l,t,a]),{componentRef:n,componentProps:{onMouseMove:ce,onMouseEnter:le,onMouseLeave:ue},activeImages:P,imagesPreloaded:R}}import{get as L}from"lodash-es";import ie from"react";function Et(e={}){let{transition:t}=M(),n=ie.useCallback(()=>({default:{hidden:{opacity:0,scale:L(e,["initialScale"],1.1)},visible:{opacity:1,scale:1},exit:{opacity:0,scale:L(e,["exitScale"],1.1)}}}),[])(),i=L(n,["default","exit"],n.default.exit);return ie.useMemo(()=>({initial:"hidden",animate:"visible",exit:"exit",variants:{...n.default,exit:i},transition:{duration:L(t,["duration"],1.2),...t}}),[n,i,t])}import{get as re}from"lodash-es";import ne from"react";function Rt({onEnterDirection:e=s.RIGHT,onExitDirection:o=s.RIGHT,distance:t="100%"}={}){let{transition:a}=M(),i=ne.useCallback(r=>({[s.DEFAULT]:{hidden:{opacity:0},visible:{opacity:1},exit:{opacity:0}},[s.TOP]:{hidden:{opacity:0,y:`-${r}`},visible:{opacity:1,y:0},exit:{opacity:0,y:`-${r}`}},[s.BOTTOM]:{hidden:{opacity:0,y:r},visible:{opacity:1,y:0},exit:{opacity:0,y:r}},[s.LEFT]:{hidden:{opacity:0,x:`-${r}`},visible:{opacity:1,x:0},exit:{opacity:0,x:`-${r}`}},[s.RIGHT]:{hidden:{opacity:0,x:r},visible:{opacity:1,x:0},exit:{opacity:0,x:r}}}),[])(t),c=re(i,[o,"exit"],i[s.RIGHT].exit);return ne.useMemo(()=>({initial:"hidden",animate:"visible",exit:"exit",variants:{...re(i,[e],i[s.RIGHT]),exit:c},transition:{...a}}),[i,c,e,a])}import{cloneDeep as be,merge as Se}from"lodash-es";function At(...e){let o=e.map(t=>be(t));return Se({},...o)}export*from"framer-motion";export{Ue as AnimateMotionPresence,s as DirectionEnum,Fe as MotionProvider,Be as PolymorphicMotionElement,At as mergeMotionProperties,I as systemHausMotionConfiguration,tt as useComposeStagger,st as useCursorFollow,Je as useDeepMergeMotionProperties,dt as useFadeIn,Mt as useImageTrail,Q as useMergeMotionProperties,Et as useScale,Rt as useSlideOut,M as useSystemHausMotionProvider};
+//# sourceMappingURL=exports.js.map

package/dist/exports.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../domains/systemhaus-motion/src/calculateCursorOffset.ts","../../../domains/systemhaus-motion/src/enums/direction.enum.ts","../../../domains/systemhaus-motion/src/composeCursorImageTrail.ts","../../../domains/systemhaus-motion/src/cursorImageTrailController.ts","../../../domains/systemhaus-motion/src/constants.ts","../../../domains/systemhaus-motion/src/motionContextDefaultConfig.ts","../src/provider/MotionProvider.tsx","../src/lib/motion.ts","../src/components/AnimateMotionPresence.tsx","../src/components/PolymorphicMotionElement.tsx","../src/hooks/useComposeStagger.ts","../src/hooks/useMergeMotionProperties.ts","../src/hooks/useCursorFollow.ts","../src/hooks/useFadeIn.ts","../src/hooks/useImageTrail.ts","../src/hooks/useScale.ts","../src/hooks/useSlideOut.ts","../src/utils/mergeMotionProperties.ts","../src/exports.ts"],"sourcesContent":["import { get } from 'lodash-es';\n\nimport { CursorFollowSettings } from './types';\n\nexport type CalculateCursorOffsetController = CursorFollowSettings;\n\nexport function calculateCursorOffset(\n  element: HTMLElement,\n  mouseX: number,\n  mouseY: number,\n  settings: CalculateCursorOffsetController,\n): { x: number; y: number } {\n  const elementRect = element.getBoundingClientRect();\n  const elementCenterX = elementRect.left + elementRect.width / 2;\n  const elementCenterY = elementRect.top + elementRect.height / 2;\n\n  const offsetXFromCenter = mouseX - elementCenterX;\n  const offsetYFromCenter = mouseY - elementCenterY;\n\n  const { magneticModeActivationRadius } = settings;\n  const maxDistance = get(settings, ['maxDistance'], 3000);\n  const intensity = get(settings, ['intensity'], 0.1);\n\n  if (globalThis.matchMedia('(prefers-reduced-motion: reduce)').matches) {\n    return { x: 0, y: 0 };\n  }\n\n  if (typeof magneticModeActivationRadius === 'number') {\n    const distanceToCursor = Math.hypot(\n      offsetXFromCenter ** 2 + offsetYFromCenter ** 2,\n    );\n\n    if (distanceToCursor > maxDistance) {\n      return { x: 0, y: 0 };\n    }\n\n    let proximityStrength = 0;\n    if (distanceToCursor < magneticModeActivationRadius) {\n      proximityStrength = 1 - distanceToCursor / magneticModeActivationRadius;\n    }\n\n    return {\n      x: offsetXFromCenter * proximityStrength * intensity,\n      y: offsetYFromCenter * proximityStrength * intensity,\n    };\n  }\n\n  // Smooth follow mode\n  if (\n    Math.abs(offsetXFromCenter) < maxDistance &&\n    Math.abs(offsetYFromCenter) < maxDistance\n  ) {\n    const proximityStrength =\n      1 -\n      Math.max(Math.abs(offsetXFromCenter), Math.abs(offsetYFromCenter)) /\n        maxDistance;\n\n    return {\n      x: offsetXFromCenter * proximityStrength * intensity,\n      y: offsetYFromCenter * proximityStrength * intensity,\n    };\n  }\n\n  return { x: 0, y: 0 };\n}\n","export enum DirectionEnum {\n  TOP = 'TOP',\n  BOTTOM = 'BOTTOM',\n  LEFT = 'LEFT',\n  RIGHT = 'RIGHT',\n  DEFAULT = 'DEFAULT',\n}\n","export interface ImageTrailCoreOptions {\n  images: string[];\n  frequency?: number;\n  visibleFor?: number;\n}\n\nexport interface ImageTrailFrame {\n  key: string;\n  src: string;\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  createdAt: number;\n  shouldHide: boolean;\n}\n\nexport interface ImageDimensions {\n  width: number;\n  height: number;\n}\n\nexport interface ImageTrailCoreState {\n  active: ImageTrailFrame[];\n  index: number;\n  lastX: number;\n  lastY: number;\n  imagesLoaded: boolean;\n  imageSizes: ImageDimensions[];\n}\n\nexport interface ComposedCursorImageTrail {\n  state: ImageTrailCoreState;\n  loadImages: () => Promise<void>;\n  shouldTrigger: (x: number, y: number) => boolean;\n  pushFrame: (x: number, y: number) => ImageTrailFrame;\n  updateVisibility: (now: number) => void;\n}\n\nexport function composeCursorImageTrail(\n  options: ImageTrailCoreOptions,\n): ComposedCursorImageTrail {\n  const frequency = options.frequency ?? 15;\n  const visibleFor = options.visibleFor ?? 1.5;\n\n  const MAX = 200;\n  const MIN = 1;\n  const RANGE = MAX - MIN;\n  const threshold = MAX - ((frequency - 1) * RANGE) / 49;\n\n  const state: ImageTrailCoreState = {\n    active: [],\n    index: 0,\n    lastX: 0,\n    lastY: 0,\n    imagesLoaded: false,\n    imageSizes: [],\n  };\n\n  async function loadImages() {\n    state.imageSizes = await Promise.all(\n      options.images.map(\n        (source) =>\n          new Promise<ImageDimensions>((resolve, reject) => {\n            const img = new Image();\n\n            const handleLoad = () => {\n              img.removeEventListener('load', handleLoad);\n              img.removeEventListener('error', handleError);\n              resolve({ width: img.width, height: img.height });\n            };\n\n            const handleError = (event: Event) => {\n              img.removeEventListener('load', handleLoad);\n              img.removeEventListener('error', handleError);\n              reject(event);\n            };\n\n            img.addEventListener('load', handleLoad);\n            img.addEventListener('error', handleError);\n\n            img.src = source;\n          }),\n      ),\n    );\n\n    state.imagesLoaded = true;\n  }\n\n  function shouldTrigger(x: number, y: number) {\n    const dx = x - state.lastX;\n    const dy = y - state.lastY;\n    return Math.hypot(dx, dy) >= threshold;\n  }\n\n  function pushFrame(x: number, y: number) {\n    const index = state.index;\n    const source = options.images[index] || '';\n    const size = state.imageSizes[index] || { width: 100, height: 100 };\n\n    const frame: ImageTrailFrame = {\n      key: Math.random().toString(36),\n      src: source,\n      x: x - size.width / 2,\n      y: y - size.height / 2,\n      width: size.width,\n      height: size.height,\n      createdAt: performance.now(),\n      shouldHide: false,\n    };\n\n    state.active.push(frame);\n    state.index = (state.index + 1) % options.images.length;\n    state.lastX = x;\n    state.lastY = y;\n\n    return frame;\n  }\n\n  function updateVisibility(now: number) {\n    const ms = visibleFor * 1000;\n    state.active = state.active.map((f) => {\n      if (!f.shouldHide && now - f.createdAt >= ms) f.shouldHide = true;\n      return f;\n    });\n  }\n\n  return {\n    state,\n    loadImages,\n    shouldTrigger,\n    pushFrame,\n    updateVisibility,\n  };\n}\n","import { type MotionProps, type Variants } from 'framer-motion';\n\ntype ImageDimensions = { width: number; height: number };\n\nexport type ImageTrailItem = {\n  imageTrailItemKey: string;\n  src: string;\n  style: Record<string, unknown>;\n  variants: Variants;\n  initial: string;\n  animate: string;\n  exit: string;\n  transition?: MotionProps['transition'];\n};\n\ninterface ImageTrailOptions {\n  images: string[];\n  frequency?: number; // 1 - 50 (higher = more frequent)\n  visibleFor?: number; // seconds\n  transition?: MotionProps['transition'];\n}\n\nexport class ImageTrailController {\n  options: ImageTrailOptions;\n  state: {\n    imageSizes: ImageDimensions[];\n    imagesLoaded: boolean;\n    activeImages: ImageTrailItem[];\n  };\n  private timeouts: ReturnType<typeof setTimeout>[];\n  private lastTriggerPos: { x: number; y: number };\n\n  constructor(options: ImageTrailOptions) {\n    this.options = options;\n    this.state = {\n      imageSizes: [],\n      imagesLoaded: false,\n      activeImages: [],\n    };\n    this.timeouts = [];\n    this.lastTriggerPos = { x: 0, y: 0 };\n  }\n\n  clearTimeouts() {\n    for (const t of this.timeouts) {\n      clearTimeout(t);\n    }\n    this.timeouts = [];\n  }\n\n  async loadImages() {\n    this.clearTimeouts();\n    this.state.imageSizes = await Promise.all(\n      this.options.images.map(\n        (source) =>\n          new Promise<ImageDimensions>((resolve, reject) => {\n            const img = new Image();\n            img.addEventListener('load', () =>\n              resolve({ width: img.width, height: img.height }),\n            );\n            img.addEventListener('error', reject);\n            img.src = source;\n          }),\n      ),\n    );\n    this.state.imagesLoaded = true;\n  }\n\n  shouldTrigger(x: number, y: number) {\n    const frequency = this.options.frequency ?? 5;\n    const MAX_THRESHOLD = 20;\n    const MIN_THRESHOLD = 1;\n    const THRESHOLD_RANGE = MAX_THRESHOLD - MIN_THRESHOLD;\n    const threshold = MAX_THRESHOLD - ((frequency - 1) * THRESHOLD_RANGE) / 49;\n\n    const distance = Math.hypot(\n      x - this.lastTriggerPos.x,\n      y - this.lastTriggerPos.y,\n    );\n    if (distance < threshold) return false;\n\n    this.lastTriggerPos = { x, y };\n    return true;\n  }\n\n  triggerImage(x: number, y: number, index: number) {\n    if (!this.state.imagesLoaded) return;\n\n    const visibleFor = this.options.visibleFor ?? 1.5;\n    const naturalSize = this.state.imageSizes[index] || {\n      width: 100,\n      height: 100,\n    };\n    const key = Math.random().toString();\n\n    const newImage: ImageTrailItem = {\n      imageTrailItemKey: key,\n      src: this.options.images[index] || '',\n      style: {\n        position: 'absolute',\n        width: naturalSize.width,\n        height: naturalSize.height,\n        left: x - naturalSize.width / 2,\n        top: y - naturalSize.height / 2,\n        pointerEvents: 'none',\n        backgroundImage: `url(${this.options.images[index]})`,\n        backgroundSize: 'auto',\n        backgroundPosition: 'center',\n      },\n      variants: {\n        hidden: { opacity: 0, scale: 0.6 },\n        visible: { opacity: 1, scale: 1 },\n        exit: { opacity: 0, scale: 0.4 },\n      },\n      initial: 'hidden',\n      animate: 'visible',\n      exit: 'exit',\n      transition: this.options.transition,\n    };\n\n    this.state.activeImages.push(newImage);\n\n    // Schedule exit\n    const hideTimeout = setTimeout(() => {\n      const imageIndex = this.state.activeImages.findIndex(\n        (img) => img.imageTrailItemKey === key,\n      );\n      if (imageIndex !== -1) {\n        const old = this.state.activeImages[imageIndex];\n        // @ts-expect-error while we debug this\n        this.state.activeImages[imageIndex] = { ...old, animate: 'exit' };\n      }\n    }, visibleFor * 1000);\n\n    // Schedule removal\n    const removeTimeout = setTimeout(\n      () => {\n        this.state.activeImages = this.state.activeImages.filter(\n          (img) => img.imageTrailItemKey !== key,\n        );\n      },\n      visibleFor * 1000 + 1000,\n    );\n\n    this.timeouts.push(hideTimeout, removeTimeout);\n  }\n}\n","export const DEFAULT_TRANSITION_DURATION = 0.4;\nexport const DEFAULT_TRANSITION_TYPE = 'tween';\nexport const DEFAULT_TRANSITION_EASE = 'easeInOut';\nexport const DEFAULT_FADE_DISTANCE = 12;\nexport const LONG_FADE_DISTANCE = 24;\nexport const SHORT_FADE_DISTANCE = 8;\nexport const DEFAULT_STAGGER_SPEED = 0.2;\nexport const DEFAULT_FADE_IN_SPEED = 12;\n","import {\n  DEFAULT_FADE_DISTANCE,\n  DEFAULT_FADE_IN_SPEED,\n  DEFAULT_TRANSITION_DURATION,\n  DEFAULT_TRANSITION_EASE,\n} from './constants';\nimport { SystemHausMotionProviderConfig } from './types';\n\nexport const motionContextDefaultConfig: SystemHausMotionProviderConfig = {\n  isStatic: false,\n  fadeInSpeed: DEFAULT_FADE_IN_SPEED,\n  fadeDistance: DEFAULT_FADE_DISTANCE,\n  transition: {\n    duration: DEFAULT_TRANSITION_DURATION,\n    ease: DEFAULT_TRANSITION_EASE,\n  },\n  reducedMotion: 'user',\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 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 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 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 { 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 { 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 {\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","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 { 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 { DirectionEnum } from '@kurocado-studio/systemhaus-motion';\nexport { systemHausMotionConfiguration } from './provider/MotionProvider';\n\nexport * from './components/AnimateMotionPresence';\nexport * from './components/PolymorphicMotionElement';\nexport * from './hooks/useComposeStagger';\nexport * from './hooks/useCursorFollow';\nexport * from './hooks/useFadeIn';\nexport * from './hooks/useImageTrail';\nexport * from './hooks/useMergeMotionProperties';\nexport * from './hooks/useScale';\nexport * from './hooks/useSlideOut';\nexport * from './provider/MotionProvider';\nexport * from './utils/mergeMotionProperties';\nexport * from 'framer-motion';\nexport type * from './lib/motion';\nexport type * from './types';\n\nexport type { PolymorphicMotionProperties } from './types';\n"],"mappings":"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","names":["calculateCursorOffset","element","mouseX","mouseY","settings","elementRect","elementCenterX","elementCenterY","offsetXFromCenter","offsetYFromCenter","magneticModeActivationRadius","maxDistance","get","intensity","distanceToCursor","proximityStrength","DirectionEnum","DEFAULT_TRANSITION_EASE","DEFAULT_FADE_DISTANCE","motionContextDefaultConfig","DEFAULT_TRANSITION_EASE","get","React","createContext","useContext","useMemo","stagger","useMotionValue","useSpring","MotionConfig","AnimatePresence","motion","systemHausMotionConfiguration","z","A","E","MotionContext","createContext","MotionProvider","children","motionOverrides","motionContextConfig","useMemo","get","React","MotionConfig","useSystemHausMotionProvider","useContext","React","AnimateMotionPresence","children","isVisible","mode","initial","React","AnimatePresence","child","index","React","PolymorphicMotionElement","properties","as","rest","Component","motion","React","set","React","cloneDeep","merge","React","useDeepMergeMotionProperties","motionProperties","safeCopies","mappedObject","useMergeMotionProperties","payload","useComposeStagger","handleDeepMergeMotionProperties","useMergeMotionProperties","React","payload","staggerPayload","updatedPayload","staggerDelay","stagger","delay","set","get","useEffect","useRef","useCursorFollow","settings","elementReference","damping","get","stiffness","x","useMotionValue","y","localReference","useRef","targetReference","springX","useSpring","springY","useEffect","handleMouseMove","mouseEvent","element","newX","newY","D","get","React","useFadeIn","onEnterDirection","onExitDirection","viewport","transition","fadeInDistance","E","useSystemHausMotionProvider","fadeDistance","variantMap","React","distance","A","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","get","React","useScale","payload","transition","useSystemHausMotionProvider","variantMap","React","get","exitVariant","get","React","useSlideOut","onEnterDirection","A","onExitDirection","distance","transition","useSystemHausMotionProvider","variantMap","React","exitVariant","get","cloneDeep","merge","mergeMotionProperties","motionProperties","safeCopies","mappedObject"]}

package/dist/index.d.ts

@@ -1,36 +1,170 @@
-import * as framer_motion from 'framer-motion';
-import * as react from 'react';
+import { AnimatePresence } from 'framer-motion';
+import { CalculateCursorOffsetController } from '@kurocado-studio/systemhaus-motion';
+import { ComponentPropsWithoutRef } from 'react';
+import { DirectionEnum } from '@kurocado-studio/systemhaus-motion';
+import { ElementType } from 'react';
+import { JSX } from 'react';
+import { motion } from 'framer-motion';
+import * as motion_dom from 'motion-dom';
+import { MotionConfig } from 'framer-motion';
+import * as MotionLibrary from 'framer-motion';
+import { default as React_2 } from 'react';
+import { RefObject } from 'react';
+import { stagger } from 'framer-motion';
+import { SystemHausMotionProviderConfig } from '@kurocado-studio/systemhaus-motion';
+import { UseFadeInProperties } from '@kurocado-studio/systemhaus-motion';
+import { useMotionValue } from 'framer-motion';
+import { useSpring } from 'framer-motion';
 
-declare type CalculateCursorOffsetController = CursorFollowSettings;
+export declare function AnimateMotionPresence({ children, isVisible, mode, initial, }: React_2.PropsWithChildren<AnimateMotionPresenceProperties>): React_2.ReactNode;
 
-declare interface CursorFollowSettings {
-    damping?: number;
-    stiffness?: number;
-    maxDistance?: number;
-    intensity?: number;
-    magneticModeActivationRadius?: number;
+export declare interface AnimateMotionPresenceProperties {
+    isVisible?: boolean;
+    initial?: boolean;
+    children?: React_2.ReactNode;
+    mode?: 'wait' | 'sync' | 'popLayout';
 }
 
-export declare interface DarkModeController {
-    isDark: boolean;
-    theme: ThemeEnum;
-    toggle: () => void;
-    iconSettings: string;
-    setTheme: (newTheme: ThemeEnum) => void;
+export { AnimatePresence }
+
+export declare type ComposeStagger = <T extends PolymorphicMotionElementMap = 'div'>(payload: {
+    payload: PolymorphicMotionProperties<T>;
+    staggerPayload: Parameters<typeof stagger>;
+}) => PolymorphicMotionProperties<T>;
+
+declare interface CursorImageTrailOptions {
+    images: string[];
+    frequency?: number;
+    visibleFor?: number;
+    animation?: {
+        in?: MotionProperties;
+        out?: MotionProperties;
+    };
+}
+
+export declare type DeepMergeMotionProperties = <T extends PolymorphicMotionElementMap>(...motionProperties: PolymorphicMotionProperties<T>[]) => PolymorphicMotionProperties<T>;
+
+export { DirectionEnum }
+
+export declare function mergeMotionProperties(...motionProperties: MotionProperties[]): MotionProperties;
+
+export { motion }
+
+export { MotionConfig }
+
+export { MotionLibrary }
+
+export declare type MotionOverridableProperties<T extends ElementType> = OverrideProperties<ComponentPropsWithoutRef<T>, Omit<MotionProperties, 'style'> & {
+    style?: MotionProperties['style'] | React_2.HTMLAttributes<T>['style'];
+}>;
+
+export declare type MotionProperties = MotionLibrary.MotionProps;
+
+export declare const MotionProvider: React_2.FC<SystemHausMotionProviderProperties>;
+
+export declare type MotionStaggerOptions = MotionLibrary.StaggerOptions;
+
+export declare type MotionVariant = MotionLibrary.Variant;
+
+export declare type MotionVariants = MotionLibrary.Variants;
+
+export declare type MotionViewportOptions = MotionLibrary.ViewportOptions;
+
+declare type OverrideProperties<Base, Override> = Omit<Base, keyof Override> & Override;
+
+declare type PolymorphicActiveMotionProperties<T extends keyof React_2.JSX.IntrinsicElements = 'img'> = PolymorphicMotionProperties<T> & {
+    imageTrailKey?: string;
+};
+
+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;
+
+export declare type PolymorphicMotionElementMap = keyof React_2.JSX.IntrinsicElements | keyof HTMLElementTagNameMap | ElementType;
+
+export declare type PolymorphicMotionProperties<T extends ElementType = 'div'> = MotionOverridableProperties<T> & {
+    as?: T;
+    transition?: MotionProperties['transition'];
+    initial?: MotionVariant | string;
+    animate?: MotionVariant | string;
+    exit?: MotionVariant | string;
+};
+
+export { stagger }
+
+export declare const systemHausMotionConfiguration: SystemHausMotionProvider;
+
+export declare interface SystemHausMotionProvider extends SystemHausMotionProviderConfig {
+    fadeInDistance: number;
+    fadeInDirection: DirectionEnum;
+    viewport: MotionViewportOptions;
 }
 
-export declare enum ThemeEnum {
-    DARK = "dark",
-    LIGHT = "light",
-    SYSTEM = "system"
+declare interface SystemHausMotionProviderProperties {
+    children?: React_2.ReactNode;
+    motionOverrides?: Partial<SystemHausMotionProvider>;
 }
 
-export declare function useCursorFollow(settings: CalculateCursorOffsetController): {
-    ref: react.Dispatch<react.SetStateAction<HTMLDivElement | undefined>>;
-    x: framer_motion.MotionValue<number>;
-    y: framer_motion.MotionValue<number>;
+export declare type UseComposeStagger = () => {
+    composeStagger: ComposeStagger;
 };
 
-export declare function useDarkMode(): DarkModeController;
+export declare const useComposeStagger: () => {
+    composeStagger: <T extends PolymorphicMotionElementMap = "div">(payload: {
+        payload: PolymorphicMotionProperties<T>;
+        staggerPayload: Parameters<typeof stagger>;
+    }) => PolymorphicMotionProperties<T>;
+};
+
+export declare function useCursorFollow(settings: CalculateCursorOffsetController, elementReference?: RefObject<HTMLDivElement | null>): {
+    ref: RefObject<HTMLDivElement | null>;
+    x: motion_dom.MotionValue<number>;
+    y: motion_dom.MotionValue<number>;
+};
+
+export declare function useDeepMergeMotionProperties(...motionProperties: MotionProperties[]): MotionProperties;
+
+export declare const useFadeIn: <T extends PolymorphicMotionElementMap = "div">({ onEnterDirection, onExitDirection, }?: UseFadeInProperties) => PolymorphicMotionProperties<T>;
+
+export declare function useImageTrail({ images, frequency, visibleFor, animation, }: CursorImageTrailOptions): {
+    componentRef: React_2.RefObject<HTMLDivElement | null>;
+    componentProps: {
+        onMouseMove: (event: React_2.MouseEvent<HTMLDivElement>) => void;
+        onMouseEnter: () => void;
+        onMouseLeave: () => void;
+    };
+    activeImages: PolymorphicActiveMotionProperties<"img">[];
+    imagesPreloaded: boolean;
+};
+
+export declare function useMergeMotionProperties(): {
+    handleDeepMergeMotionProperties: DeepMergeMotionProperties;
+};
+
+export { useMotionValue }
+
+/**
+ * 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 { useSpring }
+
+export declare const useSystemHausMotionProvider: () => SystemHausMotionProvider;
+
+
+export * from "framer-motion";
 
 export { }

package/dist/tsdoc-metadata.json

@@ -5,7 +5,7 @@
   "toolPackages": [
     {
       "packageName": "@microsoft/api-extractor",
-      "packageVersion": "7.53.2"
+      "packageVersion": "7.55.2"
     }
   ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kurocado-studio/systemhaus-motion-react",
-  "version": "1.0.0",
+  "version": "1.2.0-develop.1",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -17,57 +17,35 @@
       "import": "./dist/exports.js",
       "types": "./dist/index.d.ts",
       "default": "./dist/exports.js"
-    },
-    "./tailwind.css": {
-      "import": "./dist/exports.css",
-      "default": "./dist/exports.css"
     }
   },
   "files": [
     "dist"
   ],
   "scripts": {
+    "dependency:build": "tsup && pnpm build:typings && rm -rf dist/exports.d.ts",
     "build:typings": "api-extractor run --local",
-    "build": "rm -rf dist && tsup && pnpm build:typings && rm -rf dist/exports.d.ts",
-    "prepublishOnly": "node ../../scripts/strip-workspaces.js .",
     "clean": "rm -rf .turbo node_modules dist",
-    "dev": "tsup --watch",
-    "dev:vite": "vite build --watch --mode development",
-    "vite:watch": "vite build --watch --mode development",
-    "build:vite": "rm -rf dist && vite build --mode production",
-    "lint": "eslint --max-warnings=0  --no-warn-ignored",
-    "lint:fix": "eslint --max-warnings=0  --fix --no-warn-ignored",
-    "prettier:fix": "prettier --write . --ignore-path ../../.prettierignore",
+    "dev": "pnpm storybook:dev && cross-env VITE_NODE_ENV=local tsup --watch",
+    "lint": "eslint --max-warnings=0 . --no-warn-ignored",
+    "lint:fix": "eslint --max-warnings=0 . --fix --no-warn-ignored",
+    "prepublishOnly": "node ../../scripts/strip-workspaces.js .",
     "prettier:check": "prettier --check . --ignore-path ../../.prettierignore",
+    "prettier:fix": "prettier --write . --ignore-path ../../.prettierignore",
+    "preview": "vite preview",
+    "storybook:build": "storybook build",
+    "storybook:dev": "storybook dev -p 6006 --no-open",
     "typecheck": "tsc --noEmit --pretty"
   },
   "dependencies": {
-    "@emotion/is-prop-valid": "^1.3.1",
-    "framer-motion": "^12.23.6",
+    "framer-motion": "^12.23.26",
     "lodash-es": "^4.17.21",
     "motion": "^12.11.0",
-    "react": "19"
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
   },
   "devDependencies": {
     "@internal/config": "workspace:*",
-    "@kurocado-studio/qa": "2.0.1",
-    "@microsoft/api-extractor": "^7.52.11",
-    "@testing-library/jest-dom": "^6.9.1",
-    "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.15.19",
-    "@types/react": "^19.1.10",
-    "@types/react-dom": "^19.1.4",
-    "@vitejs/plugin-react": "^4.4.1",
-    "@vitest/coverage-v8": "^3.1.3",
-    "copyfiles": "^2.4.1",
-    "eslint": "^9.28.0",
-    "prettier": "3.5.3",
-    "tsup": "^8.5.0",
-    "typescript": "5.8.3",
-    "vite": "^5.2.8",
-    "vite-node": "3.2.4",
-    "vite-plugin-dts": "^4.5.3",
-    "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^3.1.3"
+    "@internal/storybook-config": "workspace:*"
   }
 }