react-ui-animate 2.0.0-rc.7 → 3.0.0-rc.0

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.
Files changed (222) hide show
  1. package/.vscode/settings.json +3 -3
  2. package/LICENSE +21 -21
  3. package/README.md +115 -115
  4. package/dist/animation/animationType.d.ts +15 -15
  5. package/dist/animation/core/animation/Animation.d.ts +16 -0
  6. package/dist/animation/core/animation/FluidValue.d.ts +21 -0
  7. package/dist/animation/core/animation/RequestAnimationFrame.d.ts +8 -0
  8. package/dist/animation/core/animation/SpringAnimation.d.ts +41 -0
  9. package/dist/animation/core/animation/TimingAnimation.d.ts +35 -0
  10. package/dist/animation/core/animation/TransitionValue.d.ts +21 -0
  11. package/dist/animation/core/controllers/Animation.d.ts +16 -0
  12. package/dist/animation/core/controllers/FluidValue.d.ts +32 -0
  13. package/dist/animation/core/controllers/RequestAnimationFrame.d.ts +8 -0
  14. package/dist/animation/core/controllers/SpringAnimation.d.ts +41 -0
  15. package/dist/animation/core/controllers/TimingAnimation.d.ts +35 -0
  16. package/dist/animation/core/easing/Bezier.d.ts +8 -0
  17. package/dist/animation/core/easing/Easing.d.ts +40 -0
  18. package/dist/animation/core/helpers/camelCaseToKebabCase.d.ts +8 -0
  19. package/dist/animation/core/helpers/camelToDash.d.ts +7 -0
  20. package/dist/animation/core/helpers/canInterpolate.d.ts +11 -0
  21. package/dist/animation/core/helpers/getAnimatableObject.d.ts +22 -0
  22. package/dist/animation/core/helpers/getCleanProps.d.ts +10 -0
  23. package/dist/animation/core/helpers/getCssValue.d.ts +8 -0
  24. package/dist/animation/core/helpers/getNonAnimatableStyle.d.ts +6 -0
  25. package/dist/animation/core/helpers/index.d.ts +5 -0
  26. package/dist/animation/core/helpers/isDefined.d.ts +12 -0
  27. package/dist/animation/core/helpers/isFluidValue.d.ts +6 -0
  28. package/dist/animation/core/index.d.ts +11 -0
  29. package/dist/animation/core/interpolation/Colors.d.ts +25 -0
  30. package/dist/animation/core/interpolation/Interpolation.d.ts +80 -0
  31. package/dist/animation/core/interpolation/__tests__/Colors.test.d.ts +1 -0
  32. package/dist/animation/core/react/Tags.d.ts +3 -0
  33. package/dist/animation/core/react/TransformStyles.d.ts +8 -0
  34. package/dist/animation/core/react/animated.d.ts +29 -0
  35. package/dist/animation/core/react/combineRefs.d.ts +2 -0
  36. package/dist/animation/core/react/fluid.d.ts +6 -0
  37. package/dist/animation/core/react/functions/camelToDash.d.ts +7 -0
  38. package/dist/animation/core/react/functions/getAnimatableObject.d.ts +22 -0
  39. package/dist/animation/core/react/functions/getCleanProps.d.ts +4 -0
  40. package/dist/animation/core/react/functions/getCssValue.d.ts +8 -0
  41. package/dist/animation/core/react/functions/getNonAnimatableStyle.d.ts +6 -0
  42. package/dist/animation/core/react/functions/index.d.ts +7 -0
  43. package/dist/animation/core/react/functions/isDefined.d.ts +6 -0
  44. package/dist/animation/core/react/functions/isTransitionValue.d.ts +6 -0
  45. package/dist/animation/core/react/helpers/camelToDash.d.ts +7 -0
  46. package/dist/animation/core/react/helpers/canInterpolate.d.ts +7 -0
  47. package/dist/animation/core/react/helpers/getAnimatableObject.d.ts +22 -0
  48. package/dist/animation/core/react/helpers/getCleanProps.d.ts +4 -0
  49. package/dist/animation/core/react/helpers/getCssValue.d.ts +8 -0
  50. package/dist/animation/core/react/helpers/getNonAnimatableStyle.d.ts +6 -0
  51. package/dist/animation/core/react/helpers/index.d.ts +7 -0
  52. package/dist/animation/core/react/helpers/isDefined.d.ts +6 -0
  53. package/dist/animation/core/react/helpers/isFluidValue.d.ts +6 -0
  54. package/dist/animation/core/react/helpers/isTransitionValue.d.ts +6 -0
  55. package/dist/animation/core/react/makeFluid.d.ts +30 -0
  56. package/dist/animation/core/react/transforms.d.ts +6 -0
  57. package/dist/animation/core/react/useFluidValue.d.ts +9 -0
  58. package/dist/animation/core/react/useMount.d.ts +20 -0
  59. package/dist/animation/core/react/useMounts.d.ts +26 -0
  60. package/dist/animation/core/react/useTransition.d.ts +9 -0
  61. package/dist/animation/core/react/useTransitions.d.ts +11 -0
  62. package/dist/animation/core/types/animation.d.ts +54 -0
  63. package/dist/animation/core/types/common.d.ts +4 -0
  64. package/dist/animation/core/types/fluid.d.ts +19 -0
  65. package/dist/animation/core/types/index.d.ts +2 -0
  66. package/dist/animation/getInitialConfig.d.ts +3 -3
  67. package/dist/animation/index.d.ts +6 -6
  68. package/dist/animation/interpolation.d.ts +21 -21
  69. package/dist/animation/lib/animationType.d.ts +15 -0
  70. package/dist/animation/lib/getInitialConfig.d.ts +3 -0
  71. package/dist/animation/lib/index.d.ts +5 -0
  72. package/dist/animation/lib/interpolation.d.ts +20 -0
  73. package/dist/animation/lib/modules/AnimatedBlock.d.ts +8 -0
  74. package/dist/animation/lib/modules/AnimatedImage.d.ts +8 -0
  75. package/dist/animation/lib/modules/AnimatedInline.d.ts +8 -0
  76. package/dist/animation/lib/modules/MountedBlock.d.ts +29 -0
  77. package/dist/animation/lib/modules/ScrollableBlock.d.ts +22 -0
  78. package/dist/animation/lib/modules/TransitionBlock.d.ts +18 -0
  79. package/dist/animation/lib/modules/index.d.ts +6 -0
  80. package/dist/animation/lib/useAnimatedValue.d.ts +17 -0
  81. package/dist/animation/lib/useMountedValue.d.ts +14 -0
  82. package/dist/animation/modules/AnimatedBlock.d.ts +8 -8
  83. package/dist/animation/modules/AnimatedImage.d.ts +8 -8
  84. package/dist/animation/modules/AnimatedInline.d.ts +8 -8
  85. package/dist/animation/modules/MountedBlock.d.ts +29 -18
  86. package/dist/animation/modules/ScrollableBlock.d.ts +21 -21
  87. package/dist/animation/modules/TransitionBlock.d.ts +17 -17
  88. package/dist/animation/modules/index.d.ts +6 -6
  89. package/dist/animation/useAnimatedValue.d.ts +22 -22
  90. package/dist/animation/useMountedValue.d.ts +15 -15
  91. package/dist/gestures/controllers/DragGesture.d.ts +17 -17
  92. package/dist/gestures/controllers/Gesture.d.ts +20 -20
  93. package/dist/gestures/controllers/MouseMoveGesture.d.ts +13 -13
  94. package/dist/gestures/controllers/ScrollGesture.d.ts +14 -14
  95. package/dist/gestures/controllers/WheelGesture.d.ts +15 -15
  96. package/dist/gestures/controllers/index.d.ts +4 -4
  97. package/dist/gestures/eventAttacher.d.ts +11 -11
  98. package/dist/gestures/helpers/eventAttacher.d.ts +11 -0
  99. package/dist/gestures/helpers/index.d.ts +1 -0
  100. package/dist/gestures/helpers/math.d.ts +34 -0
  101. package/dist/gestures/helpers/withDefault.d.ts +4 -0
  102. package/dist/gestures/hooks/index.d.ts +5 -5
  103. package/dist/gestures/hooks/useDrag.d.ts +4 -4
  104. package/dist/gestures/hooks/useGesture.d.ts +9 -9
  105. package/dist/gestures/hooks/useMouseMove.d.ts +4 -4
  106. package/dist/gestures/hooks/useRecognizer.d.ts +10 -10
  107. package/dist/gestures/hooks/useScroll.d.ts +4 -4
  108. package/dist/gestures/hooks/useWheel.d.ts +4 -4
  109. package/dist/gestures/index.d.ts +2 -2
  110. package/dist/gestures/math.d.ts +34 -34
  111. package/dist/gestures/types.d.ts +51 -51
  112. package/dist/gestures/withDefault.d.ts +4 -4
  113. package/dist/hooks/index.d.ts +3 -3
  114. package/dist/hooks/useMeasure.d.ts +14 -14
  115. package/dist/hooks/useOutsideClick.d.ts +2 -2
  116. package/dist/hooks/useWindowDimension.d.ts +9 -9
  117. package/dist/index.d.ts +9 -5
  118. package/dist/index.js +2758 -1052
  119. package/dist/index.js.map +1 -1
  120. package/dist/utils/delay.d.ts +5 -5
  121. package/dist/utils/index.d.ts +1 -2
  122. package/dist/utils/isDefined.d.ts +1 -1
  123. package/ecosystem.config.js +12 -0
  124. package/example/README.md +46 -0
  125. package/example/package-lock.json +19597 -0
  126. package/example/package.json +45 -0
  127. package/example/public/favicon.ico +0 -0
  128. package/example/public/index.html +20 -0
  129. package/example/public/logo192.png +0 -0
  130. package/example/public/logo512.png +0 -0
  131. package/example/public/manifest.json +25 -0
  132. package/example/public/robots.txt +3 -0
  133. package/example/src/App.tsx +41 -0
  134. package/example/src/components/Draggable.tsx +46 -0
  135. package/example/src/components/Gestures.tsx +151 -0
  136. package/example/src/components/Interpolation.tsx +21 -0
  137. package/example/src/components/Loop.tsx +48 -0
  138. package/example/src/components/MountedBlock.tsx +25 -0
  139. package/example/src/components/MouseMove.tsx +59 -0
  140. package/example/src/components/MultistageTransition.tsx +34 -0
  141. package/example/src/components/Scroll.tsx +39 -0
  142. package/example/src/components/ScrollableBlock.tsx +27 -0
  143. package/example/src/components/SnapTo.tsx +55 -0
  144. package/example/src/components/TransitionBlock.tsx +37 -0
  145. package/example/src/components/Wheel.tsx +39 -0
  146. package/example/src/components/index.ts +18 -0
  147. package/example/src/components/svgLine.tsx +48 -0
  148. package/example/src/components/useAnimatedValue.tsx +57 -0
  149. package/example/src/components/useMountedValue.tsx +62 -0
  150. package/example/src/index.css +8 -0
  151. package/example/src/index.tsx +16 -0
  152. package/example/tsconfig.json +26 -0
  153. package/package.json +48 -48
  154. package/{rollup.config.js → rollup.config.mjs} +18 -18
  155. package/src/animation/core/controllers/Animation.ts +27 -0
  156. package/src/animation/core/controllers/FluidValue.ts +97 -0
  157. package/src/animation/core/controllers/RequestAnimationFrame.ts +13 -0
  158. package/src/animation/core/controllers/SpringAnimation.ts +218 -0
  159. package/src/animation/core/controllers/TimingAnimation.ts +152 -0
  160. package/src/animation/core/easing/Bezier.ts +146 -0
  161. package/src/animation/core/easing/Easing.ts +132 -0
  162. package/src/animation/core/helpers/camelCaseToKebabCase.ts +10 -0
  163. package/src/animation/core/helpers/getCleanProps.ts +16 -0
  164. package/src/animation/core/helpers/getCssValue.ts +60 -0
  165. package/src/animation/core/helpers/index.ts +5 -0
  166. package/src/animation/core/helpers/isDefined.ts +14 -0
  167. package/src/animation/core/helpers/isFluidValue.ts +11 -0
  168. package/src/animation/core/index.ts +16 -0
  169. package/src/animation/core/interpolation/Colors.ts +232 -0
  170. package/src/animation/core/interpolation/Interpolation.ts +395 -0
  171. package/src/animation/core/interpolation/__tests__/Colors.test.tsx +35 -0
  172. package/src/animation/core/react/fluid.ts +197 -0
  173. package/src/animation/core/react/makeFluid.ts +294 -0
  174. package/src/animation/core/react/transforms.ts +90 -0
  175. package/src/animation/core/react/useFluidValue.ts +43 -0
  176. package/src/animation/core/react/useMount.ts +58 -0
  177. package/src/animation/core/types/animation.d.ts +56 -0
  178. package/src/animation/core/types/common.d.ts +4 -0
  179. package/src/animation/core/types/fluid.d.ts +38 -0
  180. package/src/animation/{animationType.ts → lib/animationType.ts} +17 -17
  181. package/src/animation/{getInitialConfig.ts → lib/getInitialConfig.ts} +61 -61
  182. package/src/animation/lib/index.ts +12 -0
  183. package/src/animation/{interpolation.ts → lib/interpolation.ts} +47 -48
  184. package/src/animation/{modules → lib/modules}/AnimatedBlock.ts +8 -8
  185. package/src/animation/{modules → lib/modules}/AnimatedImage.ts +8 -8
  186. package/src/animation/{modules → lib/modules}/AnimatedInline.ts +8 -8
  187. package/src/animation/lib/modules/MountedBlock.tsx +51 -0
  188. package/src/animation/{modules → lib/modules}/ScrollableBlock.tsx +68 -69
  189. package/src/animation/{modules → lib/modules}/TransitionBlock.tsx +28 -29
  190. package/src/animation/{modules → lib/modules}/index.ts +6 -6
  191. package/src/animation/{useAnimatedValue.ts → lib/useAnimatedValue.ts} +60 -71
  192. package/src/animation/{useMountedValue.ts → lib/useMountedValue.ts} +18 -19
  193. package/src/gestures/controllers/DragGesture.ts +178 -177
  194. package/src/gestures/controllers/Gesture.ts +54 -54
  195. package/src/gestures/controllers/MouseMoveGesture.ts +111 -111
  196. package/src/gestures/controllers/ScrollGesture.ts +107 -107
  197. package/src/gestures/controllers/WheelGesture.ts +123 -123
  198. package/src/gestures/controllers/index.ts +4 -4
  199. package/src/gestures/{eventAttacher.ts → helpers/eventAttacher.ts} +67 -67
  200. package/src/gestures/helpers/index.ts +1 -0
  201. package/src/gestures/{math.ts → helpers/math.ts} +120 -120
  202. package/src/gestures/{withDefault.ts → helpers/withDefault.ts} +3 -3
  203. package/src/gestures/hooks/index.ts +5 -5
  204. package/src/gestures/hooks/useDrag.ts +14 -14
  205. package/src/gestures/hooks/useGesture.ts +38 -38
  206. package/src/gestures/hooks/useMouseMove.ts +11 -11
  207. package/src/gestures/hooks/useRecognizer.ts +59 -59
  208. package/src/gestures/hooks/useScroll.ts +11 -11
  209. package/src/gestures/hooks/useWheel.ts +11 -11
  210. package/src/gestures/{types.ts → types/index.d.ts} +49 -49
  211. package/src/hooks/index.ts +3 -3
  212. package/src/hooks/useMeasure.ts +132 -133
  213. package/src/hooks/useOutsideClick.ts +36 -36
  214. package/src/hooks/useWindowDimension.ts +58 -59
  215. package/src/index.ts +42 -5
  216. package/src/utils/delay.ts +9 -9
  217. package/src/utils/index.ts +1 -2
  218. package/tsconfig.json +24 -25
  219. package/src/animation/index.ts +0 -10
  220. package/src/animation/modules/MountedBlock.tsx +0 -25
  221. package/src/gestures/index.ts +0 -2
  222. package/src/utils/isDefined.ts +0 -4
@@ -0,0 +1,19 @@
1
+ import { CSSProperties, HTMLAttributes, SVGAttributes, ComponentType } from 'react';
2
+ import { FluidValue } from '../controllers/FluidValue';
3
+ import { styleTrasformKeys } from '../react/transforms';
4
+ export type FluidTypes = 'spring' | 'timing';
5
+ export type FluidCSSProperties = {
6
+ [key in keyof CSSProperties]: CSSProperties[key];
7
+ } & {
8
+ [key in (typeof styleTrasformKeys)[number]]?: number | string | FluidValue;
9
+ };
10
+ export type FluidHTMLAttributes<T> = {
11
+ [property in keyof HTMLAttributes<T>]: HTMLAttributes<T>[property] | FluidValue;
12
+ };
13
+ export type FluidSVGAttributes<T> = {
14
+ [property in keyof SVGAttributes<T>]: SVGAttributes<T>[property] | FluidValue;
15
+ };
16
+ export type FluidProps<T> = Omit<FluidHTMLAttributes<T> & FluidSVGAttributes<T>, 'style'> & {
17
+ style?: FluidCSSProperties;
18
+ };
19
+ export type WrappedComponentOrTag = ComponentType<HTMLAttributes<HTMLElement>> | keyof JSX.IntrinsicElements;
@@ -0,0 +1,2 @@
1
+ export * from './common';
2
+ export * from './animation';
@@ -1,3 +1,3 @@
1
- import { TransitionValueConfig } from '@raidipesh78/re-motion';
2
- export declare type InitialConfigType = 'linear' | 'easein' | 'easeout' | 'easeinout' | 'ease' | 'power1' | 'power2' | 'power3' | 'power4' | 'elastic' | 'stiff' | 'wooble' | 'bounce';
3
- export declare const getInitialConfig: (animationType?: "linear" | "easein" | "easeout" | "easeinout" | "ease" | "power1" | "power2" | "power3" | "power4" | "elastic" | "stiff" | "wooble" | "bounce" | undefined) => TransitionValueConfig;
1
+ import { FluidValueConfig } from './core';
2
+ export type InitialConfigType = 'linear' | 'easein' | 'easeout' | 'easeinout' | 'ease' | 'power1' | 'power2' | 'power3' | 'power4' | 'elastic' | 'stiff' | 'wooble' | 'bounce';
3
+ export declare const getInitialConfig: (animationType?: InitialConfigType) => FluidValueConfig;
@@ -1,6 +1,6 @@
1
- export * from './interpolation';
2
- export * from './modules';
3
- export { useAnimatedValue, ValueType, UseAnimatedValueConfig, } from './useAnimatedValue';
4
- export { useMountedValue } from './useMountedValue';
5
- export * from './animationType';
6
- export * from './modules';
1
+ export * from './interpolation';
2
+ export * from './modules';
3
+ export { useAnimatedValue, ValueType, UseAnimatedValueConfig, } from './useAnimatedValue';
4
+ export { useMountedValue } from './useMountedValue';
5
+ export * from './animationType';
6
+ export * from './modules';
@@ -1,21 +1,21 @@
1
- import { ExtrapolateConfig, FluidValue } from '@raidipesh78/re-motion';
2
- import { ValueType } from './useAnimatedValue';
3
- /**
4
- * interpolate functions maps input range to given output range
5
- * @param value - number | TransitionValue
6
- * @param inputRange - Array<number>
7
- * @param outputRange - Array<number | string>
8
- * @param extrapolateConfig - "clamp" | "identity" | "extend"
9
- * @returns - number | TransitionValue
10
- */
11
- export declare function interpolate(value: number | FluidValue | ValueType, inputRange: Array<number>, outputRange: Array<number | string>, extrapolateConfig?: ExtrapolateConfig): any;
12
- /**
13
- * bInterpolate functions maps input range [0, 1] to given [minOutput, maxOutput]
14
- * sorthand function to interpolate input range [0, 1]
15
- * @param value - number | TransitionValue
16
- * @param minOutput - number | string
17
- * @param maxOutput - number | string
18
- * @param extrapolateConfig - "clamp" | "identity" | "extend"
19
- * @returns - number | TransitionValue
20
- */
21
- export declare function bInterpolate(value: number | FluidValue | ValueType, minOutput: number | string, maxOutput: number | string, extrapolateConfig?: ExtrapolateConfig): any;
1
+ import { ExtrapolateConfig, FluidValue } from './core';
2
+ import { ValueType } from './useAnimatedValue';
3
+ /**
4
+ * interpolate functions maps input range to given output range
5
+ * @param value - number | TransitionValue
6
+ * @param inputRange - Array<number>
7
+ * @param outputRange - Array<number | string>
8
+ * @param extrapolateConfig - "clamp" | "identity" | "extend"
9
+ * @returns - number | TransitionValue
10
+ */
11
+ export declare function interpolate(value: number | FluidValue | ValueType, inputRange: Array<number>, outputRange: Array<number | string>, extrapolateConfig?: ExtrapolateConfig): any;
12
+ /**
13
+ * bInterpolate functions maps input range [0, 1] to given [minOutput, maxOutput]
14
+ * sorthand function to interpolate input range [0, 1]
15
+ * @param value - number | TransitionValue
16
+ * @param minOutput - number | string
17
+ * @param maxOutput - number | string
18
+ * @param extrapolateConfig - "clamp" | "identity" | "extend"
19
+ * @returns - number | TransitionValue
20
+ */
21
+ export declare function bInterpolate(value: number | FluidValue | ValueType, minOutput: number | string, maxOutput: number | string, extrapolateConfig?: ExtrapolateConfig): any;
@@ -0,0 +1,15 @@
1
+ export declare const AnimationConfigUtils: {
2
+ ELASTIC: import("../core").FluidValueConfig;
3
+ BOUNCE: import("../core").FluidValueConfig;
4
+ EASE: import("../core").FluidValueConfig;
5
+ STIFF: import("../core").FluidValueConfig;
6
+ WOOBLE: import("../core").FluidValueConfig;
7
+ EASE_IN: import("../core").FluidValueConfig;
8
+ EASE_OUT: import("../core").FluidValueConfig;
9
+ EASE_IN_OUT: import("../core").FluidValueConfig;
10
+ POWER1: import("../core").FluidValueConfig;
11
+ POWER2: import("../core").FluidValueConfig;
12
+ POWER3: import("../core").FluidValueConfig;
13
+ POWER4: import("../core").FluidValueConfig;
14
+ LINEAR: import("../core").FluidValueConfig;
15
+ };
@@ -0,0 +1,3 @@
1
+ import { FluidValueConfig } from '../core';
2
+ export type InitialConfigType = 'linear' | 'easein' | 'easeout' | 'easeinout' | 'ease' | 'power1' | 'power2' | 'power3' | 'power4' | 'elastic' | 'stiff' | 'wooble' | 'bounce';
3
+ export declare const getInitialConfig: (animationType?: InitialConfigType) => FluidValueConfig;
@@ -0,0 +1,5 @@
1
+ export { interpolate, bInterpolate } from './interpolation';
2
+ export { AnimatedBlock, AnimatedImage, AnimatedInline, MountedBlock, ScrollableBlock, TransitionBlock, } from './modules';
3
+ export { useAnimatedValue, UseAnimatedValueConfig } from './useAnimatedValue';
4
+ export { useMountedValue } from './useMountedValue';
5
+ export { AnimationConfigUtils } from './animationType';
@@ -0,0 +1,20 @@
1
+ import { ExtrapolateConfig, FluidValue } from '../core';
2
+ /**
3
+ * interpolate functions maps input range to given output range
4
+ * @param value - number | TransitionValue
5
+ * @param inputRange - Array<number>
6
+ * @param outputRange - Array<number | string>
7
+ * @param extrapolateConfig - "clamp" | "identity" | "extend"
8
+ * @returns - number | TransitionValue
9
+ */
10
+ export declare function interpolate(value: number | FluidValue, inputRange: Array<number>, outputRange: Array<number | string>, extrapolateConfig?: ExtrapolateConfig): any;
11
+ /**
12
+ * bInterpolate functions maps input range [0, 1] to given [minOutput, maxOutput]
13
+ * sorthand function to interpolate input range [0, 1]
14
+ * @param value - number | TransitionValue
15
+ * @param minOutput - number | string
16
+ * @param maxOutput - number | string
17
+ * @param extrapolateConfig - "clamp" | "identity" | "extend"
18
+ * @returns - number | TransitionValue
19
+ */
20
+ export declare function bInterpolate(value: number | FluidValue, minOutput: number | string, maxOutput: number | string, extrapolateConfig?: ExtrapolateConfig): any;
@@ -0,0 +1,8 @@
1
+ /**
2
+ * AnimatedBlock - A higher order component built upon `div` element
3
+ * which can accept `AnimatedValue`. It also exposes some extra style properties like
4
+ * translateX, translateY, rotateX, rotateY, scaleX, etc.
5
+ */
6
+ export declare const AnimatedBlock: import("react").ForwardRefExoticComponent<Omit<import("../../core/types/fluid").FluidHTMLAttributes<"div"> & import("../../core/types/fluid").FluidSVGAttributes<"div">, "style"> & {
7
+ style?: import("../../core/types/fluid").FluidCSSProperties;
8
+ } & import("react").RefAttributes<unknown>>;
@@ -0,0 +1,8 @@
1
+ /**
2
+ * AnimatedImage - A higher order component built upon `img` element
3
+ * which can accept `AnimatedValue`. It also exposes some extra style properties like
4
+ * translateX, translateY, rotateX, rotateY, scaleX, etc.
5
+ */
6
+ export declare const AnimatedImage: import("react").ForwardRefExoticComponent<Omit<import("../../core/types/fluid").FluidHTMLAttributes<"img"> & import("../../core/types/fluid").FluidSVGAttributes<"img">, "style"> & {
7
+ style?: import("../../core/types/fluid").FluidCSSProperties;
8
+ } & import("react").RefAttributes<unknown>>;
@@ -0,0 +1,8 @@
1
+ /**
2
+ * AnimatedInline - A higher order component built upon `span` element
3
+ * which can accept `AnimatedValue`. It also exposes some extra style properties like
4
+ * translateX, translateY, rotateX, rotateY, scaleX, etc.
5
+ */
6
+ export declare const AnimatedInline: import("react").ForwardRefExoticComponent<Omit<import("../../core/types/fluid").FluidHTMLAttributes<"span"> & import("../../core/types/fluid").FluidSVGAttributes<"span">, "style"> & {
7
+ style?: import("../../core/types/fluid").FluidCSSProperties;
8
+ } & import("react").RefAttributes<unknown>>;
@@ -0,0 +1,29 @@
1
+ import * as React from 'react';
2
+ import { FluidValue, FluidValueConfig } from '../../core';
3
+ interface MountedValueConfig extends FluidValueConfig {
4
+ }
5
+ interface MountedBlockProps {
6
+ state: boolean;
7
+ children: (animation: {
8
+ value: FluidValue;
9
+ }) => React.ReactNode;
10
+ from?: number;
11
+ enter?: number;
12
+ exit?: number;
13
+ config?: MountedValueConfig;
14
+ enterConfig?: MountedValueConfig;
15
+ exitConfig?: MountedValueConfig;
16
+ }
17
+ /**
18
+ * MountedBlock - Higher order component which handles mounting and unmounting of a component.
19
+ * @prop { boolean } state - Boolean indicating the component should mount or unmount.
20
+ * @prop { function } children - Child as a function with `AnimatedValue` on `.value` property.
21
+ * @prop { number } from - Number that dictates the beginning state for animation.
22
+ * @prop { number } enter - Number that dictates the entry state for animation.
23
+ * @prop { number } exit - Number that dictates the exit state for animation.
24
+ * @prop { MountedValueConfig } config - Animation configuration for overall animation.
25
+ * @prop { MountedValueConfig } enterConfig - Animation configuration for the entering state of animation.
26
+ * @prop { MountedValueConfig } exitConfig - Animation configuration for the entering state of animation.
27
+ */
28
+ export declare const MountedBlock: ({ state, children, from, enter, exit, config, enterConfig, exitConfig, }: MountedBlockProps) => import("react/jsx-runtime").JSX.Element;
29
+ export {};
@@ -0,0 +1,22 @@
1
+ import * as React from 'react';
2
+ import { UseAnimatedValueConfig } from '../useAnimatedValue';
3
+ import { FluidValue } from '../../core';
4
+ interface ScrollableBlockProps {
5
+ children?: (animation: {
6
+ value?: FluidValue | string | number;
7
+ }) => React.ReactNode;
8
+ direction?: 'single' | 'both';
9
+ threshold?: number;
10
+ animationConfig?: UseAnimatedValueConfig;
11
+ }
12
+ /**
13
+ * ScrollableBlock - Higher order component to handle the entrance or exit animation
14
+ * of a component when it enters or exit the viewport. Accepts child as a function with
15
+ * `AnimatedValue` as its first argument which can be interpolated on input range [0, 1]
16
+ * @prop { function } children - child as a function with `AnimatedValue` as its first argument.
17
+ * @prop { 'single' | 'both' } direction - single applies animation on enter once, both applies on enter and exit.
18
+ * @prop { number } threshold - should be in range 0 to 1 which equivalent to `IntersectionObserver` threshold.
19
+ * @prop { UseAnimatedValueConfig } animationConfig - Animation config
20
+ */
21
+ export declare const ScrollableBlock: (props: ScrollableBlockProps) => import("react/jsx-runtime").JSX.Element;
22
+ export {};
@@ -0,0 +1,18 @@
1
+ import * as React from 'react';
2
+ import { UseAnimatedValueConfig } from '../useAnimatedValue';
3
+ import { FluidValue } from '../../core';
4
+ interface TransitionBlockProps {
5
+ state: boolean;
6
+ children: (animation: {
7
+ value?: FluidValue | string | number;
8
+ }) => React.ReactNode;
9
+ config?: UseAnimatedValueConfig;
10
+ }
11
+ /**
12
+ * TransitionBlock - Higher order component which animates on state change.
13
+ * @prop { boolean } state - Boolean indicating the current state of animation, usually `false = 0 and true = 1`.
14
+ * @prop { function } children - Child as a function with `AnimatedValue` on `.value` property.
15
+ * @prop { UseAnimatedValueConfig } config - Animation configuration.
16
+ */
17
+ export declare const TransitionBlock: ({ state, children, config, }: TransitionBlockProps) => import("react/jsx-runtime").JSX.Element;
18
+ export {};
@@ -0,0 +1,6 @@
1
+ export * from './AnimatedBlock';
2
+ export * from './AnimatedInline';
3
+ export * from './AnimatedImage';
4
+ export * from './MountedBlock';
5
+ export * from './ScrollableBlock';
6
+ export * from './TransitionBlock';
@@ -0,0 +1,17 @@
1
+ import { FluidValueConfig, FluidValue } from '../core';
2
+ type Length = number | string;
3
+ export interface UseAnimatedValueConfig extends FluidValueConfig {
4
+ }
5
+ /**
6
+ * `useAnimatedValue` returns an animation value with `.value` and `.currentValue` property which is
7
+ * initialized when passed to argument (`initialValue`). The retured value persist until the lifetime of
8
+ * a component. It doesnot cast any re-renders which can is very good for performance optimization.
9
+ *
10
+ * @param { string | number } initialValue - Initial value
11
+ * @param { UseAnimatedValueConfig } config - Animation configuration object.
12
+ */
13
+ export declare function useAnimatedValue(initialValue: Length, config?: UseAnimatedValueConfig): {
14
+ value: FluidValue | string | number | undefined;
15
+ currentValue: number | string;
16
+ };
17
+ export {};
@@ -0,0 +1,14 @@
1
+ import { UseMountConfig, FluidValue } from '../core';
2
+ export interface UseMountedValueConfig extends UseMountConfig {
3
+ }
4
+ /**
5
+ * `useMountedValue` handles mounting and unmounting of a component which captures current state
6
+ * passed as an arugment (`state`) and exposes the shadow state which handles the mount and unmount
7
+ * of a component.
8
+ *
9
+ * @param { boolean } state - Boolean indicating the component should mount or unmount.
10
+ * @param { UseMountedValueConfig } config - Animation configuration.
11
+ */
12
+ export declare function useMountedValue(state: boolean, config: UseMountedValueConfig): (cb: (value: {
13
+ value: FluidValue;
14
+ }, mounted: boolean) => React.ReactNode) => import("react").ReactNode;
@@ -1,8 +1,8 @@
1
- /**
2
- * AnimatedBlock - A higher order component built upon `div` element
3
- * which can accept `AnimatedValue`. It also exposes some extra style properties like
4
- * translateX, translateY, rotateX, rotateY, scaleX, etc.
5
- */
6
- export declare const AnimatedBlock: import("react").ForwardRefExoticComponent<Pick<import("@raidipesh78/re-motion").AnimatedHTMLAttributes<"div"> & import("@raidipesh78/re-motion").AnimatedSVGAttributes<"div">, "string" | "slot" | "title" | "clipPath" | "filter" | "mask" | "path" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "height" | "max" | "media" | "method" | "min" | "name" | "target" | "type" | "width" | "crossOrigin" | "accentHeight" | "accumulate" | "additive" | "alignmentBaseline" | "allowReorder" | "alphabetic" | "amplitude" | "arabicForm" | "ascent" | "attributeName" | "attributeType" | "autoReverse" | "azimuth" | "baseFrequency" | "baselineShift" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clip" | "clipPathUnits" | "clipRule" | "colorInterpolation" | "colorInterpolationFilters" | "colorProfile" | "colorRendering" | "contentScriptType" | "contentStyleType" | "cursor" | "cx" | "cy" | "d" | "decelerate" | "descent" | "diffuseConstant" | "direction" | "display" | "divisor" | "dominantBaseline" | "dur" | "dx" | "dy" | "edgeMode" | "elevation" | "enableBackground" | "end" | "exponent" | "externalResourcesRequired" | "fill" | "fillOpacity" | "fillRule" | "filterRes" | "filterUnits" | "floodColor" | "floodOpacity" | "focusable" | "fontFamily" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "format" | "fr" | "from" | "fx" | "fy" | "g1" | "g2" | "glyphName" | "glyphOrientationHorizontal" | "glyphOrientationVertical" | "glyphRef" | "gradientTransform" | "gradientUnits" | "hanging" | "horizAdvX" | "horizOriginX" | "href" | "ideographic" | "imageRendering" | "in2" | "in" | "intercept" | "k1" | "k2" | "k3" | "k4" | "k" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lengthAdjust" | "letterSpacing" | "lightingColor" | "limitingConeAngle" | "local" | "markerEnd" | "markerHeight" | "markerMid" | "markerStart" | "markerUnits" | "markerWidth" | "maskContentUnits" | "maskUnits" | "mathematical" | "mode" | "numOctaves" | "offset" | "opacity" | "operator" | "order" | "orient" | "orientation" | "origin" | "overflow" | "overlinePosition" | "overlineThickness" | "paintOrder" | "panose1" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "pointerEvents" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "r" | "radius" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "rotate" | "rx" | "ry" | "scale" | "seed" | "shapeRendering" | "slope" | "spacing" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "stopColor" | "stopOpacity" | "strikethroughPosition" | "strikethroughThickness" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textAnchor" | "textDecoration" | "textLength" | "textRendering" | "to" | "transform" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicode" | "unicodeBidi" | "unicodeRange" | "unitsPerEm" | "vAlphabetic" | "values" | "vectorEffect" | "version" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewBox" | "viewTarget" | "visibility" | "vMathematical" | "widths" | "wordSpacing" | "writingMode" | "x1" | "x2" | "x" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "y" | "yChannelSelector" | "z" | "zoomAndPan"> & {
7
- style?: import("@raidipesh78/re-motion").AnimatedCSSProperties | undefined;
8
- } & import("react").RefAttributes<unknown>>;
1
+ /**
2
+ * AnimatedBlock - A higher order component built upon `div` element
3
+ * which can accept `AnimatedValue`. It also exposes some extra style properties like
4
+ * translateX, translateY, rotateX, rotateY, scaleX, etc.
5
+ */
6
+ export declare const AnimatedBlock: import("react").ForwardRefExoticComponent<Omit<import("../core").FluidHTMLAttributes<"div"> & import("../core").FluidSVGAttributes<"div">, "style"> & {
7
+ style?: import("../core").FluidCSSProperties;
8
+ } & import("react").RefAttributes<unknown>>;
@@ -1,8 +1,8 @@
1
- /**
2
- * AnimatedImage - A higher order component built upon `img` element
3
- * which can accept `AnimatedValue`. It also exposes some extra style properties like
4
- * translateX, translateY, rotateX, rotateY, scaleX, etc.
5
- */
6
- export declare const AnimatedImage: import("react").ForwardRefExoticComponent<Pick<import("@raidipesh78/re-motion").AnimatedHTMLAttributes<"img"> & import("@raidipesh78/re-motion").AnimatedSVGAttributes<"img">, "string" | "slot" | "title" | "clipPath" | "filter" | "mask" | "path" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "height" | "max" | "media" | "method" | "min" | "name" | "target" | "type" | "width" | "crossOrigin" | "accentHeight" | "accumulate" | "additive" | "alignmentBaseline" | "allowReorder" | "alphabetic" | "amplitude" | "arabicForm" | "ascent" | "attributeName" | "attributeType" | "autoReverse" | "azimuth" | "baseFrequency" | "baselineShift" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clip" | "clipPathUnits" | "clipRule" | "colorInterpolation" | "colorInterpolationFilters" | "colorProfile" | "colorRendering" | "contentScriptType" | "contentStyleType" | "cursor" | "cx" | "cy" | "d" | "decelerate" | "descent" | "diffuseConstant" | "direction" | "display" | "divisor" | "dominantBaseline" | "dur" | "dx" | "dy" | "edgeMode" | "elevation" | "enableBackground" | "end" | "exponent" | "externalResourcesRequired" | "fill" | "fillOpacity" | "fillRule" | "filterRes" | "filterUnits" | "floodColor" | "floodOpacity" | "focusable" | "fontFamily" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "format" | "fr" | "from" | "fx" | "fy" | "g1" | "g2" | "glyphName" | "glyphOrientationHorizontal" | "glyphOrientationVertical" | "glyphRef" | "gradientTransform" | "gradientUnits" | "hanging" | "horizAdvX" | "horizOriginX" | "href" | "ideographic" | "imageRendering" | "in2" | "in" | "intercept" | "k1" | "k2" | "k3" | "k4" | "k" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lengthAdjust" | "letterSpacing" | "lightingColor" | "limitingConeAngle" | "local" | "markerEnd" | "markerHeight" | "markerMid" | "markerStart" | "markerUnits" | "markerWidth" | "maskContentUnits" | "maskUnits" | "mathematical" | "mode" | "numOctaves" | "offset" | "opacity" | "operator" | "order" | "orient" | "orientation" | "origin" | "overflow" | "overlinePosition" | "overlineThickness" | "paintOrder" | "panose1" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "pointerEvents" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "r" | "radius" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "rotate" | "rx" | "ry" | "scale" | "seed" | "shapeRendering" | "slope" | "spacing" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "stopColor" | "stopOpacity" | "strikethroughPosition" | "strikethroughThickness" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textAnchor" | "textDecoration" | "textLength" | "textRendering" | "to" | "transform" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicode" | "unicodeBidi" | "unicodeRange" | "unitsPerEm" | "vAlphabetic" | "values" | "vectorEffect" | "version" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewBox" | "viewTarget" | "visibility" | "vMathematical" | "widths" | "wordSpacing" | "writingMode" | "x1" | "x2" | "x" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "y" | "yChannelSelector" | "z" | "zoomAndPan"> & {
7
- style?: import("@raidipesh78/re-motion").AnimatedCSSProperties | undefined;
8
- } & import("react").RefAttributes<unknown>>;
1
+ /**
2
+ * AnimatedImage - A higher order component built upon `img` element
3
+ * which can accept `AnimatedValue`. It also exposes some extra style properties like
4
+ * translateX, translateY, rotateX, rotateY, scaleX, etc.
5
+ */
6
+ export declare const AnimatedImage: import("react").ForwardRefExoticComponent<Omit<import("../core").FluidHTMLAttributes<"img"> & import("../core").FluidSVGAttributes<"img">, "style"> & {
7
+ style?: import("../core").FluidCSSProperties;
8
+ } & import("react").RefAttributes<unknown>>;
@@ -1,8 +1,8 @@
1
- /**
2
- * AnimatedInline - A higher order component built upon `span` element
3
- * which can accept `AnimatedValue`. It also exposes some extra style properties like
4
- * translateX, translateY, rotateX, rotateY, scaleX, etc.
5
- */
6
- export declare const AnimatedInline: import("react").ForwardRefExoticComponent<Pick<import("@raidipesh78/re-motion").AnimatedHTMLAttributes<"span"> & import("@raidipesh78/re-motion").AnimatedSVGAttributes<"span">, "string" | "slot" | "title" | "clipPath" | "filter" | "mask" | "path" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "height" | "max" | "media" | "method" | "min" | "name" | "target" | "type" | "width" | "crossOrigin" | "accentHeight" | "accumulate" | "additive" | "alignmentBaseline" | "allowReorder" | "alphabetic" | "amplitude" | "arabicForm" | "ascent" | "attributeName" | "attributeType" | "autoReverse" | "azimuth" | "baseFrequency" | "baselineShift" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clip" | "clipPathUnits" | "clipRule" | "colorInterpolation" | "colorInterpolationFilters" | "colorProfile" | "colorRendering" | "contentScriptType" | "contentStyleType" | "cursor" | "cx" | "cy" | "d" | "decelerate" | "descent" | "diffuseConstant" | "direction" | "display" | "divisor" | "dominantBaseline" | "dur" | "dx" | "dy" | "edgeMode" | "elevation" | "enableBackground" | "end" | "exponent" | "externalResourcesRequired" | "fill" | "fillOpacity" | "fillRule" | "filterRes" | "filterUnits" | "floodColor" | "floodOpacity" | "focusable" | "fontFamily" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "format" | "fr" | "from" | "fx" | "fy" | "g1" | "g2" | "glyphName" | "glyphOrientationHorizontal" | "glyphOrientationVertical" | "glyphRef" | "gradientTransform" | "gradientUnits" | "hanging" | "horizAdvX" | "horizOriginX" | "href" | "ideographic" | "imageRendering" | "in2" | "in" | "intercept" | "k1" | "k2" | "k3" | "k4" | "k" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lengthAdjust" | "letterSpacing" | "lightingColor" | "limitingConeAngle" | "local" | "markerEnd" | "markerHeight" | "markerMid" | "markerStart" | "markerUnits" | "markerWidth" | "maskContentUnits" | "maskUnits" | "mathematical" | "mode" | "numOctaves" | "offset" | "opacity" | "operator" | "order" | "orient" | "orientation" | "origin" | "overflow" | "overlinePosition" | "overlineThickness" | "paintOrder" | "panose1" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "pointerEvents" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "r" | "radius" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "rotate" | "rx" | "ry" | "scale" | "seed" | "shapeRendering" | "slope" | "spacing" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "stopColor" | "stopOpacity" | "strikethroughPosition" | "strikethroughThickness" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textAnchor" | "textDecoration" | "textLength" | "textRendering" | "to" | "transform" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicode" | "unicodeBidi" | "unicodeRange" | "unitsPerEm" | "vAlphabetic" | "values" | "vectorEffect" | "version" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewBox" | "viewTarget" | "visibility" | "vMathematical" | "widths" | "wordSpacing" | "writingMode" | "x1" | "x2" | "x" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "y" | "yChannelSelector" | "z" | "zoomAndPan"> & {
7
- style?: import("@raidipesh78/re-motion").AnimatedCSSProperties | undefined;
8
- } & import("react").RefAttributes<unknown>>;
1
+ /**
2
+ * AnimatedInline - A higher order component built upon `span` element
3
+ * which can accept `AnimatedValue`. It also exposes some extra style properties like
4
+ * translateX, translateY, rotateX, rotateY, scaleX, etc.
5
+ */
6
+ export declare const AnimatedInline: import("react").ForwardRefExoticComponent<Omit<import("../core").FluidHTMLAttributes<"span"> & import("../core").FluidSVGAttributes<"span">, "style"> & {
7
+ style?: import("../core").FluidCSSProperties;
8
+ } & import("react").RefAttributes<unknown>>;
@@ -1,18 +1,29 @@
1
- import * as React from 'react';
2
- import { FluidValue } from '@raidipesh78/re-motion';
3
- import { UseMountedValueConfig } from '../useMountedValue';
4
- interface MountedBlockProps {
5
- state: boolean;
6
- children: (animation: {
7
- value: FluidValue;
8
- }) => React.ReactNode;
9
- config: UseMountedValueConfig;
10
- }
11
- /**
12
- * MountedBlock - Higher order component which handles mounting and unmounting of a component.
13
- * @prop { boolean } state - Boolean indicating the component should mount or unmount.
14
- * @prop { function } children - Child as a function with `AnimatedValue` on `.value` property.
15
- * @prop { UseMountedValueConfig } config - Animation configuration.
16
- */
17
- export declare const MountedBlock: ({ state, children, config, }: MountedBlockProps) => JSX.Element;
18
- export {};
1
+ import * as React from 'react';
2
+ import { FluidValue, FluidValueConfig } from '../core';
3
+ interface MountedValueConfig extends FluidValueConfig {
4
+ }
5
+ interface MountedBlockProps {
6
+ state: boolean;
7
+ children: (animation: {
8
+ value: FluidValue;
9
+ }) => React.ReactNode;
10
+ from?: number;
11
+ enter?: number;
12
+ exit?: number;
13
+ config?: MountedValueConfig;
14
+ enterConfig?: MountedValueConfig;
15
+ exitConfig?: MountedValueConfig;
16
+ }
17
+ /**
18
+ * MountedBlock - Higher order component which handles mounting and unmounting of a component.
19
+ * @prop { boolean } state - Boolean indicating the component should mount or unmount.
20
+ * @prop { function } children - Child as a function with `AnimatedValue` on `.value` property.
21
+ * @prop { number } from - Number that dictates the beginning state for animation.
22
+ * @prop { number } enter - Number that dictates the entry state for animation.
23
+ * @prop { number } exit - Number that dictates the exit state for animation.
24
+ * @prop { MountedValueConfig } config - Animation configuration for overall animation.
25
+ * @prop { MountedValueConfig } enterConfig - Animation configuration for the entering state of animation.
26
+ * @prop { MountedValueConfig } exitConfig - Animation configuration for the entering state of animation.
27
+ */
28
+ export declare const MountedBlock: ({ state, children, from, enter, exit, config, enterConfig, exitConfig, }: MountedBlockProps) => import("react/jsx-runtime").JSX.Element;
29
+ export {};
@@ -1,21 +1,21 @@
1
- import * as React from 'react';
2
- import { UseAnimatedValueConfig, ValueType } from '../useAnimatedValue';
3
- interface ScrollableBlockProps {
4
- children?: (animation: {
5
- value: ValueType;
6
- }) => React.ReactNode;
7
- direction?: 'single' | 'both';
8
- threshold?: number;
9
- animationConfig?: UseAnimatedValueConfig;
10
- }
11
- /**
12
- * ScrollableBlock - Higher order component to handle the entrance or exit animation
13
- * of a component when it enters or exit the viewport. Accepts child as a function with
14
- * `AnimatedValue` as its first argument which can be interpolated on input range [0, 1]
15
- * @prop { function } children - child as a function with `AnimatedValue` as its first argument.
16
- * @prop { 'single' | 'both' } direction - single applies animation on enter once, both applies on enter and exit.
17
- * @prop { number } threshold - should be in range 0 to 1 which equivalent to `IntersectionObserver` threshold.
18
- * @prop { UseAnimatedValueConfig } animationConfig - Animation config
19
- */
20
- export declare const ScrollableBlock: (props: ScrollableBlockProps) => JSX.Element;
21
- export {};
1
+ import * as React from 'react';
2
+ import { UseAnimatedValueConfig, ValueType } from '../useAnimatedValue';
3
+ interface ScrollableBlockProps {
4
+ children?: (animation: {
5
+ value: ValueType;
6
+ }) => React.ReactNode;
7
+ direction?: 'single' | 'both';
8
+ threshold?: number;
9
+ animationConfig?: UseAnimatedValueConfig;
10
+ }
11
+ /**
12
+ * ScrollableBlock - Higher order component to handle the entrance or exit animation
13
+ * of a component when it enters or exit the viewport. Accepts child as a function with
14
+ * `AnimatedValue` as its first argument which can be interpolated on input range [0, 1]
15
+ * @prop { function } children - child as a function with `AnimatedValue` as its first argument.
16
+ * @prop { 'single' | 'both' } direction - single applies animation on enter once, both applies on enter and exit.
17
+ * @prop { number } threshold - should be in range 0 to 1 which equivalent to `IntersectionObserver` threshold.
18
+ * @prop { UseAnimatedValueConfig } animationConfig - Animation config
19
+ */
20
+ export declare const ScrollableBlock: (props: ScrollableBlockProps) => import("react/jsx-runtime").JSX.Element;
21
+ export {};
@@ -1,17 +1,17 @@
1
- import * as React from 'react';
2
- import { UseAnimatedValueConfig, ValueType } from '../useAnimatedValue';
3
- interface TransitionBlockProps {
4
- state: boolean;
5
- children: (animation: {
6
- value: ValueType;
7
- }) => React.ReactNode;
8
- config?: UseAnimatedValueConfig;
9
- }
10
- /**
11
- * TransitionBlock - Higher order component which animates on state change.
12
- * @prop { boolean } state - Boolean indicating the current state of animation, usually `false = 0 and true = 1`.
13
- * @prop { function } children - Child as a function with `AnimatedValue` on `.value` property.
14
- * @prop { UseAnimatedValueConfig } config - Animation configuration.
15
- */
16
- export declare const TransitionBlock: ({ state, children, config, }: TransitionBlockProps) => JSX.Element;
17
- export {};
1
+ import * as React from 'react';
2
+ import { UseAnimatedValueConfig, ValueType } from '../useAnimatedValue';
3
+ interface TransitionBlockProps {
4
+ state: boolean;
5
+ children: (animation: {
6
+ value: ValueType;
7
+ }) => React.ReactNode;
8
+ config?: UseAnimatedValueConfig;
9
+ }
10
+ /**
11
+ * TransitionBlock - Higher order component which animates on state change.
12
+ * @prop { boolean } state - Boolean indicating the current state of animation, usually `false = 0 and true = 1`.
13
+ * @prop { function } children - Child as a function with `AnimatedValue` on `.value` property.
14
+ * @prop { UseAnimatedValueConfig } config - Animation configuration.
15
+ */
16
+ export declare const TransitionBlock: ({ state, children, config, }: TransitionBlockProps) => import("react/jsx-runtime").JSX.Element;
17
+ export {};
@@ -1,6 +1,6 @@
1
- export * from './AnimatedBlock';
2
- export * from './AnimatedInline';
3
- export * from './AnimatedImage';
4
- export * from './MountedBlock';
5
- export * from './ScrollableBlock';
6
- export * from './TransitionBlock';
1
+ export * from './AnimatedBlock';
2
+ export * from './AnimatedInline';
3
+ export * from './AnimatedImage';
4
+ export * from './MountedBlock';
5
+ export * from './ScrollableBlock';
6
+ export * from './TransitionBlock';