@kurocado-studio/systemhaus-motion-react 1.0.0-develop.11 → 1.0.0-develop.12
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 +83 -1
- package/dist/exports.js +2 -1
- package/dist/exports.js.map +1 -0
- package/dist/index.d.ts +52 -63
- package/dist/tsdoc-metadata.json +1 -1
- package/package.json +15 -22
package/README.md
CHANGED
|
@@ -1 +1,83 @@
|
|
|
1
|
-
|
|
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{
|
|
1
|
+
import R from"react";import{useMotionValue as O,useSpring as w,MotionConfig as _,AnimatePresence as G,motion as K}from"framer-motion";function Ce({children:e,isVisible:i,mode:t,initial:a}){return R.createElement(G,{mode:t,initial:a},i&&R.Children.toArray(e).map((n,o)=>R.isValidElement(n)?R.cloneElement(n,{key:n.key??`motion-child-${o}`}):n))}import se from"react";function we(e){let{as:i,...t}=e,a=K[i??"div"];return se.createElement(a,{...t})}import{calculateCursorOffset as me}from"@kurocado-studio/systemhaus-motion";import{get as U}from"lodash-es";import{useEffect as pe,useRef as ce}from"react";function _e(e,i){let t=U(e,["damping"],100),a=U(e,["stiffness"],600),n=O(0),o=O(0),d=ce(null),r=i??d,M=w(n,{damping:t,stiffness:a}),s=w(o,{damping:t,stiffness:a});return pe(()=>{let E=v=>{let T=r.current;if(!T)return;let{x:S,y:I}=me(T,v.clientX,v.clientY,e);n.set(S),o.set(I)};return document.addEventListener("mousemove",E),()=>document.removeEventListener("mousemove",E)},[e,r,n,o]),{ref:r,x:M,y:s}}import{DEFAULT_FADE_DISTANCE as Me,DirectionEnum as p}from"@kurocado-studio/systemhaus-motion";import{get as q}from"lodash-es";import Y from"react";import{DEFAULT_FADE_DISTANCE as le,DirectionEnum as ue,motionContextDefaultConfig as z}from"@kurocado-studio/systemhaus-motion";import{get as A}from"lodash-es";import $,{createContext as fe,useContext as ye,useMemo as de}from"react";var b={...z,fadeInDirection:ue.TOP,fadeInDistance:le,viewport:{once:!1,amount:.2}},B=fe(b),Be=({children:e,motionOverrides:i})=>{let t=de(()=>({...z,...i,viewport:A(i,["viewport"],b.viewport),fadeInDistance:A(i,["fadeInDistance"],b.fadeInDistance),fadeInDirection:A(i,["fadeInDirection"],b.fadeInDirection)}),[i]);return $.createElement(B.Provider,{value:t},$.createElement(_,{...t},e))},y=()=>ye(B);var Qe=({onEnterDirection:e,onExitDirection:i}={})=>{let{viewport:t,transition:a,fadeInDistance:n=Me}=y(),o=Math.abs(n),r=Y.useCallback(s=>({[p.DEFAULT]:{hidden:{opacity:0,y:0},visible:{opacity:1,y:0},exit:{opacity:0,y:0}},[p.TOP]:{hidden:{opacity:0,y:-s},visible:{opacity:1,y:0},exit:{opacity:0,y:-s}},[p.BOTTOM]:{hidden:{opacity:0,y:s},visible:{opacity:1,y:0},exit:{opacity:0,y:s}},[p.LEFT]:{hidden:{opacity:0,x:-s},visible:{opacity:1,x:0},exit:{opacity:0,x:-s}},[p.RIGHT]:{hidden:{opacity:0,x:s},visible:{opacity:1,x:0},exit:{opacity:0,x:s}}}),[])(o),M=q(r,[i??p.BOTTOM,"exit"],r[p.BOTTOM].exit);return Y.useMemo(()=>({initial:"hidden",animate:"visible",exit:"exit",variants:{...q(r,[e??p.TOP],r[p.TOP]),exit:M},transition:a,viewport:t}),[r,M,e,a,t])};import{useEffect as J,useRef as xe,useState as P}from"react";var Pe={hidden:{opacity:0,scale:.8},visible:{opacity:1,scale:1},exit:{opacity:0,scale:.8}};function it({images:e,frequency:i=15,visibleFor:t=1.5,animation:a}){let n=xe(null),[o,d]=P({x:0,y:0}),[r,M]=P(!1),[s,E]=P({x:0,y:0}),[v,T]=P(0),[S,I]=P([]),[C,Z]=P(!1),[k,ee]=P([]),{transition:te}=y(),F=200,oe=F-1,N=F-(i-1)*oe/49;J(()=>{let x=!0,l=[];return(async()=>{let u=[];await Promise.all(e.map(g=>new Promise((m,h)=>{let f=new Image,L=()=>{u.push({width:f.width,height:f.height}),X(),m()},V=ae=>{X(),h(ae)},X=()=>{f.removeEventListener("load",L),f.removeEventListener("error",V)};f.addEventListener("load",L),f.addEventListener("error",V),l.push({img:f,onLoad:L,onError:V}),f.src=g}))),x&&(ee(u),Z(!0))})().then(),()=>{x=!1;for(let{img:u,onLoad:g,onError:m}of l)u.removeEventListener("load",g),u.removeEventListener("error",m)}},[e]);let ie=x=>{let l=x.currentTarget.getBoundingClientRect();d({x:x.clientX-l.left,y:x.clientY-l.top})},re=()=>M(!0),ne=()=>M(!1);return J(()=>{if(!r||e.length===0||!C||Math.hypot(o.x-s.x,o.y-s.y)<N)return;let l=k[v]||{width:100,height:100},H=l.width,u=l.height,g={imageTrailKey:Math.random().toString(),style:{width:H,height:u,position:"absolute",backgroundImage:`url(${e[v]})`,backgroundSize:"auto",backgroundPosition:"center",pointerEvents:"none",left:o.x-H/2,top:o.y-u/2},initial:"hidden",animate:"visible",exit:"exit",variants:Pe,transition:te};I(m=>[...m,g]),T(m=>(m+1)%e.length),E(o),setTimeout(()=>{I(m=>m.map(h=>h.imageTrailKey===g.imageTrailKey?{...h,animate:"exit"}:h))},t*1e3)},[o,r,s,e,C,k,N,v,t,a]),{componentRef:n,componentProps:{onMouseMove:ie,onMouseEnter:re,onMouseLeave:ne},activeImages:S,imagesPreloaded:C}}import{cloneDeep as ve,merge as ge}from"lodash-es";import he from"react";function st(...e){return he.useMemo(()=>{let i=e.map(t=>ve(t));return ge({},...i)},e)}import{get as D}from"lodash-es";import j from"react";function ut(e={}){let{transition:t}=y(),n=j.useCallback(()=>({default:{hidden:{opacity:0,scale:D(e,["initialScale"],1.1)},visible:{opacity:1,scale:1},exit:{opacity:0,scale:D(e,["exitScale"],1.1)}}}),[])(),o=D(n,["default","exit"],n.default.exit);return j.useMemo(()=>({initial:"hidden",animate:"visible",exit:"exit",variants:{...n.default,exit:o},transition:{duration:D(t,["duration"],1.2),...t}}),[n,o,t])}import{DirectionEnum as c}from"@kurocado-studio/systemhaus-motion";import{get as W}from"lodash-es";import Q from"react";function Pt({onEnterDirection:e=c.RIGHT,onExitDirection:i=c.RIGHT,distance:t="100%"}={}){let{transition:a}=y(),o=Q.useCallback(r=>({[c.DEFAULT]:{hidden:{opacity:0},visible:{opacity:1},exit:{opacity:0}},[c.TOP]:{hidden:{opacity:0,y:`-${r}`},visible:{opacity:1,y:0},exit:{opacity:0,y:`-${r}`}},[c.BOTTOM]:{hidden:{opacity:0,y:r},visible:{opacity:1,y:0},exit:{opacity:0,y:r}},[c.LEFT]:{hidden:{opacity:0,x:`-${r}`},visible:{opacity:1,x:0},exit:{opacity:0,x:`-${r}`}},[c.RIGHT]:{hidden:{opacity:0,x:r},visible:{opacity:1,x:0},exit:{opacity:0,x:r}}}),[])(t),d=W(o,[i,"exit"],o[c.RIGHT].exit);return Q.useMemo(()=>({initial:"hidden",animate:"visible",exit:"exit",variants:{...W(o,[e],o[c.RIGHT]),exit:d},transition:{...a}}),[o,d,e,a])}import{cloneDeep as be,merge as Ee}from"lodash-es";function ht(...e){let i=e.map(t=>be(t));return Ee({},...i)}export*from"framer-motion";import{DirectionEnum as kt}from"@kurocado-studio/systemhaus-motion";export{Ce as AnimateMotionPresence,kt as DirectionEnum,Be as MotionProvider,we as PolymorphicMotionElement,ht as mergeMotionProperties,b as systemHausMotionConfiguration,_e as useCursorFollow,st as useDeepMergeMotionProperties,Qe as useFadeIn,it as useImageTrail,ut as useScale,Pt as useSlideOut,y 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/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 MotionVariant = Library.Variant;\nexport type MotionVariants = Library.Variants;\nexport type MotionViewportOptions = Library.ViewportOptions;\n\nexport {\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 { PolymorphicMotionProperties } from '../types';\n\nexport const useFadeIn = ({\n onEnterDirection,\n onExitDirection,\n}: UseFadeInProperties = {}): PolymorphicMotionProperties => {\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 );\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';\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","'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/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","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","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,80 +1,81 @@
|
|
|
1
1
|
import { AnimatePresence } from 'framer-motion';
|
|
2
|
-
import
|
|
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
|
|
6
|
-
import
|
|
7
|
-
import
|
|
10
|
+
import * as MotionLibrary from 'framer-motion';
|
|
11
|
+
import { default as React_2 } from 'react';
|
|
12
|
+
import { RefObject } from 'react';
|
|
13
|
+
import { SystemHausMotionProviderConfig } from '@kurocado-studio/systemhaus-motion';
|
|
14
|
+
import { UseFadeInProperties } from '@kurocado-studio/systemhaus-motion';
|
|
8
15
|
import { useMotionValue } from 'framer-motion';
|
|
9
16
|
import { useSpring } from 'framer-motion';
|
|
10
|
-
import { Variant } from 'framer-motion';
|
|
11
|
-
import { Variants } from 'framer-motion';
|
|
12
|
-
import { ViewportOptions } from 'framer-motion';
|
|
13
17
|
|
|
14
|
-
export declare function AnimateMotionPresence({ children, isVisible, mode, initial, }:
|
|
18
|
+
export declare function AnimateMotionPresence({ children, isVisible, mode, initial, }: React_2.PropsWithChildren<AnimateMotionPresenceProperties>): React_2.ReactNode;
|
|
15
19
|
|
|
16
20
|
export declare interface AnimateMotionPresenceProperties {
|
|
17
21
|
isVisible?: boolean;
|
|
18
22
|
initial?: boolean;
|
|
19
|
-
children?:
|
|
23
|
+
children?: React_2.ReactNode;
|
|
20
24
|
mode?: 'wait' | 'sync' | 'popLayout';
|
|
21
25
|
}
|
|
22
26
|
|
|
23
27
|
export { AnimatePresence }
|
|
24
28
|
|
|
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
|
-
}
|
|
34
|
-
|
|
35
29
|
declare interface CursorImageTrailOptions {
|
|
36
30
|
images: string[];
|
|
37
31
|
frequency?: number;
|
|
38
32
|
visibleFor?: number;
|
|
39
33
|
animation?: {
|
|
40
|
-
in?:
|
|
41
|
-
out?:
|
|
34
|
+
in?: MotionProperties;
|
|
35
|
+
out?: MotionProperties;
|
|
42
36
|
};
|
|
43
37
|
}
|
|
44
38
|
|
|
45
|
-
export
|
|
46
|
-
TOP = "TOP",
|
|
47
|
-
BOTTOM = "BOTTOM",
|
|
48
|
-
LEFT = "LEFT",
|
|
49
|
-
RIGHT = "RIGHT",
|
|
50
|
-
DEFAULT = "DEFAULT"
|
|
51
|
-
}
|
|
39
|
+
export { DirectionEnum }
|
|
52
40
|
|
|
53
|
-
export declare function mergeMotionProperties(...motionProperties:
|
|
41
|
+
export declare function mergeMotionProperties(...motionProperties: MotionProperties[]): MotionProperties;
|
|
54
42
|
|
|
55
43
|
export { motion }
|
|
56
44
|
|
|
57
45
|
export { MotionConfig }
|
|
58
46
|
|
|
59
|
-
export {
|
|
47
|
+
export { MotionLibrary }
|
|
48
|
+
|
|
49
|
+
export declare type MotionOverridableProperties<T extends ElementType> = OverrideProperties<ComponentPropsWithoutRef<T>, Omit<MotionProperties, 'style'> & {
|
|
50
|
+
style?: MotionProperties['style'] | React_2.HTMLAttributes<T>['style'];
|
|
51
|
+
}>;
|
|
52
|
+
|
|
53
|
+
export declare type MotionProperties = MotionLibrary.MotionProps;
|
|
60
54
|
|
|
61
|
-
export declare const MotionProvider:
|
|
55
|
+
export declare const MotionProvider: React_2.FC<SystemHausMotionProviderProperties>;
|
|
62
56
|
|
|
63
|
-
declare type
|
|
57
|
+
export declare type MotionVariant = MotionLibrary.Variant;
|
|
58
|
+
|
|
59
|
+
export declare type MotionVariants = MotionLibrary.Variants;
|
|
60
|
+
|
|
61
|
+
export declare type MotionViewportOptions = MotionLibrary.ViewportOptions;
|
|
62
|
+
|
|
63
|
+
declare type OverrideProperties<Base, Override> = Omit<Base, keyof Override> & Override;
|
|
64
|
+
|
|
65
|
+
declare type PolymorphicActiveMotionProperties<T extends keyof React_2.JSX.IntrinsicElements = 'img'> = PolymorphicMotionProperties<T> & {
|
|
64
66
|
imageTrailKey?: string;
|
|
65
67
|
};
|
|
66
68
|
|
|
67
|
-
export declare function PolymorphicMotionElement<T extends keyof
|
|
69
|
+
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;
|
|
68
70
|
|
|
69
|
-
export declare type
|
|
70
|
-
as?: T;
|
|
71
|
-
isVisible?: boolean;
|
|
72
|
-
style?: React__default.CSSProperties & Record<string, unknown>;
|
|
73
|
-
};
|
|
71
|
+
export declare type PolymorphicMotionElementMap = keyof React_2.JSX.IntrinsicElements | keyof HTMLElementTagNameMap;
|
|
74
72
|
|
|
75
|
-
declare type
|
|
76
|
-
|
|
77
|
-
|
|
73
|
+
export declare type PolymorphicMotionProperties<T extends ElementType = 'div'> = MotionOverridableProperties<T> & {
|
|
74
|
+
as?: T;
|
|
75
|
+
transition?: MotionProperties['transition'];
|
|
76
|
+
initial?: MotionVariant | string;
|
|
77
|
+
animate?: MotionVariant | string;
|
|
78
|
+
exit?: MotionVariant | string;
|
|
78
79
|
};
|
|
79
80
|
|
|
80
81
|
export declare const systemHausMotionConfiguration: SystemHausMotionProvider;
|
|
@@ -82,37 +83,28 @@ export declare const systemHausMotionConfiguration: SystemHausMotionProvider;
|
|
|
82
83
|
export declare interface SystemHausMotionProvider extends SystemHausMotionProviderConfig {
|
|
83
84
|
fadeInDistance: number;
|
|
84
85
|
fadeInDirection: DirectionEnum;
|
|
85
|
-
viewport:
|
|
86
|
+
viewport: MotionViewportOptions;
|
|
86
87
|
}
|
|
87
88
|
|
|
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
89
|
declare interface SystemHausMotionProviderProperties {
|
|
93
|
-
children?:
|
|
90
|
+
children?: React_2.ReactNode;
|
|
94
91
|
motionOverrides?: Partial<SystemHausMotionProvider>;
|
|
95
92
|
}
|
|
96
93
|
|
|
97
|
-
export declare function useCursorFollow(settings: CalculateCursorOffsetController): {
|
|
98
|
-
ref:
|
|
99
|
-
x:
|
|
100
|
-
y:
|
|
94
|
+
export declare function useCursorFollow(settings: CalculateCursorOffsetController, elementReference?: RefObject<HTMLDivElement | null>): {
|
|
95
|
+
ref: RefObject<HTMLDivElement | null>;
|
|
96
|
+
x: motion_dom.MotionValue<number>;
|
|
97
|
+
y: motion_dom.MotionValue<number>;
|
|
101
98
|
};
|
|
102
99
|
|
|
103
|
-
export declare function useDeepMergeMotionProperties(...motionProperties:
|
|
100
|
+
export declare function useDeepMergeMotionProperties(...motionProperties: MotionProperties[]): MotionProperties;
|
|
104
101
|
|
|
105
102
|
export declare const useFadeIn: ({ onEnterDirection, onExitDirection, }?: UseFadeInProperties) => PolymorphicMotionProperties;
|
|
106
103
|
|
|
107
|
-
export declare interface UseFadeInProperties {
|
|
108
|
-
onEnterDirection?: DirectionEnum;
|
|
109
|
-
onExitDirection?: DirectionEnum;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
104
|
export declare function useImageTrail({ images, frequency, visibleFor, animation, }: CursorImageTrailOptions): {
|
|
113
|
-
componentRef:
|
|
105
|
+
componentRef: React_2.RefObject<HTMLDivElement | null>;
|
|
114
106
|
componentProps: {
|
|
115
|
-
onMouseMove: (event:
|
|
107
|
+
onMouseMove: (event: React_2.MouseEvent<HTMLDivElement>) => void;
|
|
116
108
|
onMouseEnter: () => void;
|
|
117
109
|
onMouseLeave: () => void;
|
|
118
110
|
};
|
|
@@ -145,10 +137,7 @@ export { useSpring }
|
|
|
145
137
|
|
|
146
138
|
export declare const useSystemHausMotionProvider: () => SystemHausMotionProvider;
|
|
147
139
|
|
|
148
|
-
export { Variant }
|
|
149
|
-
|
|
150
|
-
export { Variants }
|
|
151
140
|
|
|
152
|
-
export
|
|
141
|
+
export * from "framer-motion";
|
|
153
142
|
|
|
154
143
|
export { }
|
package/dist/tsdoc-metadata.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kurocado-studio/systemhaus-motion-react",
|
|
3
|
-
"version": "1.0.0-develop.
|
|
3
|
+
"version": "1.0.0-develop.12",
|
|
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
|
|
32
|
-
"lint:fix": "eslint --max-warnings=0
|
|
33
|
-
"
|
|
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.
|
|
41
|
+
"framer-motion": "^12.23.26",
|
|
39
42
|
"lodash-es": "^4.17.21",
|
|
40
|
-
"
|
|
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
|
-
"@
|
|
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
|
}
|