framer-motion 6.3.10 → 6.3.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (234) hide show
  1. package/dist/cjs/index.js +18 -25
  2. package/dist/es/animation/use-animated-state.mjs +0 -1
  3. package/dist/es/animation/utils/transitions.mjs +0 -2
  4. package/dist/es/context/DeprecatedLayoutGroupContext.mjs +0 -1
  5. package/dist/es/context/LayoutGroupContext.mjs +0 -3
  6. package/dist/es/gestures/use-pan-gesture.mjs +1 -1
  7. package/dist/es/motion/index.mjs +0 -2
  8. package/dist/es/motion/utils/valid-prop.mjs +1 -1
  9. package/dist/es/projection/styles/transform.mjs +13 -2
  10. package/dist/es/render/utils/animation.mjs +0 -3
  11. package/dist/es/render/utils/motion-values.mjs +1 -1
  12. package/dist/es/value/index.mjs +2 -5
  13. package/dist/es/value/use-inverted-scale.mjs +0 -1
  14. package/dist/es/value/utils/resolve-motion-value.mjs +0 -2
  15. package/dist/framer-motion.dev.js +18 -25
  16. package/dist/framer-motion.js +1 -1
  17. package/dist/index.d.ts +4188 -0
  18. package/dist/projection.dev.js +16 -12
  19. package/dist/size-rollup-dom-animation.js +1 -1
  20. package/dist/size-rollup-dom-max.js +1 -1
  21. package/dist/size-webpack-dom-max.js +1 -1
  22. package/dist/three-entry.d.ts +2502 -0
  23. package/package.json +5 -5
  24. package/types/animation/animate.d.ts +0 -54
  25. package/types/animation/animation-controls.d.ts +0 -5
  26. package/types/animation/types.d.ts +0 -79
  27. package/types/animation/use-animated-state.d.ts +0 -6
  28. package/types/animation/use-animation.d.ts +0 -31
  29. package/types/animation/utils/default-transitions.d.ts +0 -19
  30. package/types/animation/utils/easing.d.ts +0 -3
  31. package/types/animation/utils/is-animatable.d.ts +0 -11
  32. package/types/animation/utils/is-animation-controls.d.ts +0 -2
  33. package/types/animation/utils/is-keyframes-target.d.ts +0 -2
  34. package/types/animation/utils/transitions.d.ts +0 -29
  35. package/types/animation/utils/variant-resolvers.d.ts +0 -12
  36. package/types/components/AnimatePresence/PresenceChild.d.ts +0 -12
  37. package/types/components/AnimatePresence/index.d.ts +0 -36
  38. package/types/components/AnimatePresence/types.d.ts +0 -61
  39. package/types/components/AnimatePresence/use-presence.d.ts +0 -52
  40. package/types/components/AnimateSharedLayout.d.ts +0 -2
  41. package/types/components/LayoutGroup/index.d.ts +0 -12
  42. package/types/components/LazyMotion/index.d.ts +0 -38
  43. package/types/components/LazyMotion/types.d.ts +0 -54
  44. package/types/components/MotionConfig/index.d.ts +0 -25
  45. package/types/components/Reorder/Group.d.ts +0 -297
  46. package/types/components/Reorder/Item.d.ts +0 -278
  47. package/types/components/Reorder/index.d.ts +0 -509
  48. package/types/components/Reorder/types.d.ts +0 -10
  49. package/types/components/Reorder/utils/check-reorder.d.ts +0 -2
  50. package/types/context/DeprecatedLayoutGroupContext.d.ts +0 -6
  51. package/types/context/LayoutGroupContext.d.ts +0 -11
  52. package/types/context/LazyContext.d.ts +0 -7
  53. package/types/context/MotionConfigContext.d.ts +0 -36
  54. package/types/context/MotionContext/create.d.ts +0 -3
  55. package/types/context/MotionContext/index.d.ts +0 -9
  56. package/types/context/MotionContext/utils.d.ts +0 -3
  57. package/types/context/PresenceContext.d.ts +0 -17
  58. package/types/context/ReorderContext.d.ts +0 -3
  59. package/types/context/SwitchLayoutGroupContext.d.ts +0 -23
  60. package/types/events/event-info.d.ts +0 -5
  61. package/types/events/types.d.ts +0 -10
  62. package/types/events/use-dom-event.d.ts +0 -24
  63. package/types/events/use-pointer-event.d.ts +0 -4
  64. package/types/events/utils.d.ts +0 -3
  65. package/types/gestures/PanSession.d.ts +0 -127
  66. package/types/gestures/drag/VisualElementDragControls.d.ts +0 -56
  67. package/types/gestures/drag/types.d.ts +0 -294
  68. package/types/gestures/drag/use-drag-controls.d.ts +0 -74
  69. package/types/gestures/drag/use-drag.d.ts +0 -7
  70. package/types/gestures/drag/utils/constraints.d.ts +0 -77
  71. package/types/gestures/drag/utils/lock.d.ts +0 -4
  72. package/types/gestures/types.d.ts +0 -225
  73. package/types/gestures/use-focus-gesture.d.ts +0 -8
  74. package/types/gestures/use-hover-gesture.d.ts +0 -2
  75. package/types/gestures/use-pan-gesture.d.ts +0 -14
  76. package/types/gestures/use-tap-gesture.d.ts +0 -6
  77. package/types/gestures/utils/event-type.d.ts +0 -2
  78. package/types/gestures/utils/is-node-or-child.d.ts +0 -8
  79. package/types/index.d.ts +0 -96
  80. package/types/motion/features/animations.d.ts +0 -2
  81. package/types/motion/features/definitions.d.ts +0 -3
  82. package/types/motion/features/drag.d.ts +0 -2
  83. package/types/motion/features/gestures.d.ts +0 -2
  84. package/types/motion/features/layout/MeasureLayout.d.ts +0 -3
  85. package/types/motion/features/layout/index.d.ts +0 -2
  86. package/types/motion/features/layout/types.d.ts +0 -75
  87. package/types/motion/features/types.d.ts +0 -52
  88. package/types/motion/features/use-features.d.ts +0 -8
  89. package/types/motion/features/use-projection.d.ts +0 -3
  90. package/types/motion/features/viewport/observers.d.ts +0 -3
  91. package/types/motion/features/viewport/types.d.ts +0 -21
  92. package/types/motion/features/viewport/use-viewport.d.ts +0 -2
  93. package/types/motion/index.d.ts +0 -25
  94. package/types/motion/types.d.ts +0 -279
  95. package/types/motion/utils/VisualElementHandler.d.ts +0 -18
  96. package/types/motion/utils/is-forced-motion-value.d.ts +0 -2
  97. package/types/motion/utils/make-renderless-component.d.ts +0 -2
  98. package/types/motion/utils/should-inherit-variant.d.ts +0 -2
  99. package/types/motion/utils/use-motion-ref.d.ts +0 -8
  100. package/types/motion/utils/use-visual-element.d.ts +0 -6
  101. package/types/motion/utils/use-visual-state.d.ts +0 -14
  102. package/types/motion/utils/valid-prop.d.ts +0 -9
  103. package/types/projection/animation/mix-values.d.ts +0 -2
  104. package/types/projection/geometry/conversion.d.ts +0 -14
  105. package/types/projection/geometry/copy.d.ts +0 -13
  106. package/types/projection/geometry/delta-apply.d.ts +0 -37
  107. package/types/projection/geometry/delta-calc.d.ts +0 -10
  108. package/types/projection/geometry/delta-remove.d.ts +0 -20
  109. package/types/projection/geometry/models.d.ts +0 -5
  110. package/types/projection/geometry/types.d.ts +0 -29
  111. package/types/projection/geometry/utils.d.ts +0 -3
  112. package/types/projection/index.d.ts +0 -14
  113. package/types/projection/node/DocumentProjectionNode.d.ts +0 -108
  114. package/types/projection/node/HTMLProjectionNode.d.ts +0 -112
  115. package/types/projection/node/create-projection-node.d.ts +0 -301
  116. package/types/projection/node/group.d.ts +0 -7
  117. package/types/projection/node/id.d.ts +0 -1
  118. package/types/projection/node/types.d.ts +0 -136
  119. package/types/projection/shared/stack.d.ts +0 -17
  120. package/types/projection/styles/scale-border-radius.d.ts +0 -11
  121. package/types/projection/styles/scale-box-shadow.d.ts +0 -2
  122. package/types/projection/styles/scale-correction.d.ts +0 -3
  123. package/types/projection/styles/transform-origin.d.ts +0 -0
  124. package/types/projection/styles/transform.d.ts +0 -4
  125. package/types/projection/styles/types.d.ts +0 -9
  126. package/types/projection/use-instant-layout-transition.d.ts +0 -1
  127. package/types/projection/use-reset-projection.d.ts +0 -1
  128. package/types/projection/utils/each-axis.d.ts +0 -3
  129. package/types/projection/utils/has-transform.d.ts +0 -3
  130. package/types/projection/utils/measure.d.ts +0 -4
  131. package/types/render/dom/create-visual-element.d.ts +0 -2
  132. package/types/render/dom/features-animation.d.ts +0 -5
  133. package/types/render/dom/features-max.d.ts +0 -5
  134. package/types/render/dom/motion-minimal.d.ts +0 -5
  135. package/types/render/dom/motion-proxy.d.ts +0 -30
  136. package/types/render/dom/motion.d.ts +0 -25
  137. package/types/render/dom/types.d.ts +0 -28
  138. package/types/render/dom/use-render.d.ts +0 -4
  139. package/types/render/dom/utils/camel-to-dash.d.ts +0 -4
  140. package/types/render/dom/utils/create-config.d.ts +0 -8
  141. package/types/render/dom/utils/css-variables-conversion.d.ts +0 -22
  142. package/types/render/dom/utils/filter-props.d.ts +0 -4
  143. package/types/render/dom/utils/is-css-variable.d.ts +0 -4
  144. package/types/render/dom/utils/is-svg-component.d.ts +0 -2
  145. package/types/render/dom/utils/parse-dom-variant.d.ts +0 -6
  146. package/types/render/dom/utils/unit-conversion.d.ts +0 -27
  147. package/types/render/dom/value-types/animatable-none.d.ts +0 -1
  148. package/types/render/dom/value-types/defaults.d.ts +0 -9
  149. package/types/render/dom/value-types/dimensions.d.ts +0 -8
  150. package/types/render/dom/value-types/find.d.ts +0 -9
  151. package/types/render/dom/value-types/get-as-type.d.ts +0 -5
  152. package/types/render/dom/value-types/number.d.ts +0 -2
  153. package/types/render/dom/value-types/test.d.ts +0 -5
  154. package/types/render/dom/value-types/type-auto.d.ts +0 -5
  155. package/types/render/dom/value-types/type-int.d.ts +0 -8
  156. package/types/render/dom/value-types/types.d.ts +0 -4
  157. package/types/render/html/config-motion.d.ts +0 -3
  158. package/types/render/html/supported-elements.d.ts +0 -7
  159. package/types/render/html/types.d.ts +0 -61
  160. package/types/render/html/use-props.d.ts +0 -8
  161. package/types/render/html/utils/build-styles.d.ts +0 -5
  162. package/types/render/html/utils/build-transform.d.ts +0 -15
  163. package/types/render/html/utils/create-render-state.d.ts +0 -7
  164. package/types/render/html/utils/render.d.ts +0 -4
  165. package/types/render/html/utils/scrape-motion-values.d.ts +0 -2
  166. package/types/render/html/utils/transform.d.ts +0 -15
  167. package/types/render/html/visual-element.d.ts +0 -6
  168. package/types/render/index.d.ts +0 -2
  169. package/types/render/svg/config-motion.d.ts +0 -3
  170. package/types/render/svg/lowercase-elements.d.ts +0 -5
  171. package/types/render/svg/supported-elements.d.ts +0 -7
  172. package/types/render/svg/types.d.ts +0 -44
  173. package/types/render/svg/use-props.d.ts +0 -7
  174. package/types/render/svg/utils/build-attrs.d.ts +0 -8
  175. package/types/render/svg/utils/camel-case-attrs.d.ts +0 -4
  176. package/types/render/svg/utils/create-render-state.d.ts +0 -2
  177. package/types/render/svg/utils/path.d.ts +0 -9
  178. package/types/render/svg/utils/render.d.ts +0 -4
  179. package/types/render/svg/utils/scrape-motion-values.d.ts +0 -2
  180. package/types/render/svg/utils/transform-origin.d.ts +0 -6
  181. package/types/render/svg/visual-element.d.ts +0 -2
  182. package/types/render/types.d.ts +0 -113
  183. package/types/render/utils/animation-state.d.ts +0 -31
  184. package/types/render/utils/animation.d.ts +0 -21
  185. package/types/render/utils/compare-by-depth.d.ts +0 -5
  186. package/types/render/utils/flat-tree.d.ts +0 -8
  187. package/types/render/utils/is-draggable.d.ts +0 -2
  188. package/types/render/utils/lifecycles.d.ts +0 -114
  189. package/types/render/utils/motion-values.d.ts +0 -3
  190. package/types/render/utils/setters.d.ts +0 -792
  191. package/types/render/utils/types.d.ts +0 -9
  192. package/types/render/utils/variants.d.ts +0 -20
  193. package/types/three-entry.d.ts +0 -19
  194. package/types/types.d.ts +0 -981
  195. package/types/utils/array.d.ts +0 -3
  196. package/types/utils/each-axis.d.ts +0 -1
  197. package/types/utils/is-browser.d.ts +0 -1
  198. package/types/utils/is-numerical-string.d.ts +0 -4
  199. package/types/utils/is-ref-object.d.ts +0 -2
  200. package/types/utils/is-zero-value-string.d.ts +0 -4
  201. package/types/utils/noop.d.ts +0 -1
  202. package/types/utils/process.d.ts +0 -1
  203. package/types/utils/resolve-value.d.ts +0 -3
  204. package/types/utils/shallow-compare.d.ts +0 -1
  205. package/types/utils/subscription-manager.d.ts +0 -9
  206. package/types/utils/time-conversion.d.ts +0 -7
  207. package/types/utils/transform.d.ts +0 -91
  208. package/types/utils/use-animation-frame.d.ts +0 -2
  209. package/types/utils/use-constant.d.ts +0 -10
  210. package/types/utils/use-cycle.d.ts +0 -30
  211. package/types/utils/use-force-update.d.ts +0 -1
  212. package/types/utils/use-id.d.ts +0 -6
  213. package/types/utils/use-instant-transition-state.d.ts +0 -3
  214. package/types/utils/use-instant-transition.d.ts +0 -1
  215. package/types/utils/use-is-mounted.d.ts +0 -2
  216. package/types/utils/use-isomorphic-effect.d.ts +0 -2
  217. package/types/utils/use-reduced-motion.d.ts +0 -28
  218. package/types/utils/use-unmount-effect.d.ts +0 -1
  219. package/types/utils/warn-once.d.ts +0 -2
  220. package/types/value/index.d.ts +0 -260
  221. package/types/value/scroll/use-element-scroll.d.ts +0 -28
  222. package/types/value/scroll/use-viewport-scroll.d.ts +0 -22
  223. package/types/value/scroll/utils.d.ts +0 -19
  224. package/types/value/use-combine-values.d.ts +0 -2
  225. package/types/value/use-inverted-scale.d.ts +0 -28
  226. package/types/value/use-motion-template.d.ts +0 -24
  227. package/types/value/use-motion-value.d.ts +0 -19
  228. package/types/value/use-on-change.d.ts +0 -3
  229. package/types/value/use-spring.d.ts +0 -22
  230. package/types/value/use-time.d.ts +0 -1
  231. package/types/value/use-transform.d.ts +0 -93
  232. package/types/value/use-velocity.d.ts +0 -13
  233. package/types/value/utils/is-motion-value.d.ts +0 -2
  234. package/types/value/utils/resolve-motion-value.d.ts +0 -10
@@ -1,30 +0,0 @@
1
- import * as React from "react";
2
- import { MotionProps } from "../../motion/types";
3
- import { MotionComponentConfig } from "../../motion";
4
- /**
5
- * I'd rather the return type of `custom` to be implicit but this throws
6
- * incorrect relative paths in the exported types and API Extractor throws
7
- * a wobbly.
8
- *
9
- * @internal
10
- */
11
- export declare type CustomDomComponent<Props> = React.ForwardRefExoticComponent<React.PropsWithoutRef<Props & MotionProps> & React.RefAttributes<SVGElement | HTMLElement>>;
12
- export interface CustomMotionComponentConfig {
13
- forwardMotionProps?: boolean;
14
- }
15
- export declare type CreateConfig = <Instance, RenderState, Props>(Component: string | React.ComponentType<Props>, config: CustomMotionComponentConfig) => MotionComponentConfig<Instance, RenderState>;
16
- /**
17
- * Convert any React component into a `motion` component. The provided component
18
- * **must** use `React.forwardRef` to the underlying DOM component you want to animate.
19
- *
20
- * ```jsx
21
- * const Component = React.forwardRef((props, ref) => {
22
- * return <div ref={ref} />
23
- * })
24
- *
25
- * const MotionComponent = motion(Component)
26
- * ```
27
- *
28
- * @public
29
- */
30
- export declare function createMotionProxy(createConfig: CreateConfig): (<Props>(Component: string | React.ComponentType<Props>, customMotionComponentConfig?: CustomMotionComponentConfig) => CustomDomComponent<Props>) & import("../html/types").HTMLMotionComponents & import("../svg/types").SVGMotionComponents;
@@ -1,25 +0,0 @@
1
- /// <reference types="react" />
2
- import { DOMMotionComponents } from "./types";
3
- /**
4
- * HTML & SVG components, optimised for use with gestures and animation. These can be used as
5
- * drop-in replacements for any HTML & SVG component, all CSS & SVG properties are supported.
6
- *
7
- * @public
8
- */
9
- export declare const motion: (<Props>(Component: string | import("react").ComponentType<Props>, customMotionComponentConfig?: import("./motion-proxy").CustomMotionComponentConfig) => import("./motion-proxy").CustomDomComponent<Props>) & import("../html/types").HTMLMotionComponents & import("../svg/types").SVGMotionComponents;
10
- /**
11
- * Create a DOM `motion` component with the provided string. This is primarily intended
12
- * as a full alternative to `motion` for consumers who have to support environments that don't
13
- * support `Proxy`.
14
- *
15
- * ```javascript
16
- * import { createDomMotionComponent } from "framer-motion"
17
- *
18
- * const motion = {
19
- * div: createDomMotionComponent('div')
20
- * }
21
- * ```
22
- *
23
- * @public
24
- */
25
- export declare function createDomMotionComponent<T extends keyof DOMMotionComponents>(key: T): DOMMotionComponents[T];
@@ -1,28 +0,0 @@
1
- import { TransformPoint } from "../../projection/geometry/types";
2
- import { HTMLMotionComponents } from "../html/types";
3
- import { SVGMotionComponents } from "../svg/types";
4
- export interface DOMVisualElementOptions {
5
- /**
6
- * A function that can map a page point between spaces. Used by Framer
7
- * to support dragging and layout animations within scaled space.
8
- *
9
- * @public
10
- */
11
- transformPagePoint?: TransformPoint;
12
- /**
13
- * Allow `transform` to be set as `"none"` if all transforms are their default
14
- * values. Switching to this removes the element as a GPU layer which can lead to subtle
15
- * graphical shifts.
16
- *
17
- * @public
18
- */
19
- allowTransformNone?: boolean;
20
- /**
21
- * Allow this element to be GPU-accelerated. We currently enable this by
22
- * adding a `translateZ(0)`.
23
- *
24
- * @public
25
- */
26
- enableHardwareAcceleration?: boolean;
27
- }
28
- export declare type DOMMotionComponents = HTMLMotionComponents & SVGMotionComponents;
@@ -1,4 +0,0 @@
1
- import { RenderComponent } from "../../motion/features/types";
2
- import { HTMLRenderState } from "../html/types";
3
- import { SVGRenderState } from "../svg/types";
4
- export declare function createUseRender(forwardMotionProps?: boolean): RenderComponent<SVGElement | HTMLElement, HTMLRenderState | SVGRenderState>;
@@ -1,4 +0,0 @@
1
- /**
2
- * Convert camelCase to dash-case properties.
3
- */
4
- export declare const camelToDash: (str: string) => string;
@@ -1,8 +0,0 @@
1
- import * as React from "react";
2
- import { FeatureComponents } from "../../../motion/features/types";
3
- import { MotionComponentConfig } from "../../../motion";
4
- import { HTMLRenderState } from "../../html/types";
5
- import { SVGRenderState } from "../../svg/types";
6
- import { CreateVisualElement } from "../../types";
7
- import { CustomMotionComponentConfig } from "../motion-proxy";
8
- export declare function createDomMotionConfig<Props>(Component: string | React.ComponentType<Props>, { forwardMotionProps }: CustomMotionComponentConfig, preloadedFeatures?: FeatureComponents, createVisualElement?: CreateVisualElement<any>, projectionNodeConstructor?: any): MotionComponentConfig<SVGElement, SVGRenderState> | MotionComponentConfig<HTMLElement, HTMLRenderState>;
@@ -1,22 +0,0 @@
1
- import { Target, TargetWithKeyframes } from "../../../types";
2
- import { VisualElement } from "../../types";
3
- /**
4
- * Parse Framer's special CSS variable format into a CSS token and a fallback.
5
- *
6
- * ```
7
- * `var(--foo, #fff)` => [`--foo`, '#fff']
8
- * ```
9
- *
10
- * @param current
11
- */
12
- export declare const cssVariableRegex: RegExp;
13
- export declare function parseCSSVariable(current: string): string[] | undefined[];
14
- /**
15
- * Resolve CSS variables from
16
- *
17
- * @internal
18
- */
19
- export declare function resolveCSSVariables(visualElement: VisualElement, { ...target }: TargetWithKeyframes, transitionEnd: Target | undefined): {
20
- target: TargetWithKeyframes;
21
- transitionEnd?: Target;
22
- };
@@ -1,4 +0,0 @@
1
- import { MotionProps } from "../../../motion/types";
2
- export declare type IsValidProp = (key: string) => boolean;
3
- export declare function loadExternalIsValidProp(isValidProp?: IsValidProp): void;
4
- export declare function filterProps(props: MotionProps, isDom: boolean, forwardMotionProps: boolean): {};
@@ -1,4 +0,0 @@
1
- /**
2
- * Returns true if the provided key is a CSS variable
3
- */
4
- export declare function isCSSVariable(key: string): boolean;
@@ -1,2 +0,0 @@
1
- import { ComponentType } from "react";
2
- export declare function isSVGComponent(Component: string | ComponentType): boolean;
@@ -1,6 +0,0 @@
1
- import { MakeTargetAnimatable } from "../../utils/animation";
2
- /**
3
- * Parse a DOM variant to make it animatable. This involves resolving CSS variables
4
- * and ensuring animations like "20%" => "calc(50vw)" are performed in pixels.
5
- */
6
- export declare const parseDomVariant: MakeTargetAnimatable;
@@ -1,27 +0,0 @@
1
- import { Target, TargetWithKeyframes } from "../../../types";
2
- import { VisualElement } from "../../types";
3
- import { Box } from "../../../projection/geometry/types";
4
- export declare enum BoundingBoxDimension {
5
- width = "width",
6
- height = "height",
7
- left = "left",
8
- right = "right",
9
- top = "top",
10
- bottom = "bottom"
11
- }
12
- declare type GetActualMeasurementInPixels = (bbox: Box, computedStyle: Partial<CSSStyleDeclaration>) => number;
13
- export declare const positionalValues: {
14
- [key: string]: GetActualMeasurementInPixels;
15
- };
16
- /**
17
- * Convert value types for x/y/width/height/top/left/bottom/right
18
- *
19
- * Allows animation between `'auto'` -> `'100%'` or `0` -> `'calc(50% - 10vw)'`
20
- *
21
- * @internal
22
- */
23
- export declare function unitConversion(visualElement: VisualElement, target: TargetWithKeyframes, origin?: Target, transitionEnd?: Target): {
24
- target: TargetWithKeyframes;
25
- transitionEnd?: Target;
26
- };
27
- export {};
@@ -1 +0,0 @@
1
- export declare function getAnimatableNone(key: string, value: string): any;
@@ -1,9 +0,0 @@
1
- import { ValueTypeMap } from "./types";
2
- /**
3
- * A map of default value types for common values
4
- */
5
- export declare const defaultValueTypes: ValueTypeMap;
6
- /**
7
- * Gets the default ValueType for the provided value key
8
- */
9
- export declare const getDefaultValueType: (key: string) => import("style-value-types").ValueType;
@@ -1,8 +0,0 @@
1
- /**
2
- * A list of value types commonly used for dimensions
3
- */
4
- export declare const dimensionValueTypes: import("style-value-types").ValueType[];
5
- /**
6
- * Tests a dimensional value against the list of dimension ValueTypes
7
- */
8
- export declare const findDimensionValueType: (v: any) => import("style-value-types").ValueType | undefined;
@@ -1,9 +0,0 @@
1
- /**
2
- * Tests a value against the list of ValueTypes
3
- */
4
- export declare const findValueType: (v: any) => import("style-value-types").ValueType | {
5
- test: (v: any) => boolean;
6
- parse: (v: string | number) => (number | import("style-value-types").RGBA | import("style-value-types").HSLA)[];
7
- createTransformer: (v: string | number) => (v: (string | number | import("style-value-types").Color)[]) => string;
8
- getAnimatableNone: (v: string | number) => string;
9
- } | undefined;
@@ -1,5 +0,0 @@
1
- import { ValueType } from "style-value-types";
2
- /**
3
- * Provided a value and a ValueType, returns the value as that value type.
4
- */
5
- export declare const getValueAsType: (value: any, type?: ValueType | undefined) => any;
@@ -1,2 +0,0 @@
1
- import { ValueTypeMap } from "./types";
2
- export declare const numberValueTypes: ValueTypeMap;
@@ -1,5 +0,0 @@
1
- import { ValueType } from "style-value-types";
2
- /**
3
- * Tests a provided value against a ValueType
4
- */
5
- export declare const testValueType: (v: any) => (type: ValueType) => boolean;
@@ -1,5 +0,0 @@
1
- import { ValueType } from "style-value-types";
2
- /**
3
- * ValueType for "auto"
4
- */
5
- export declare const auto: ValueType;
@@ -1,8 +0,0 @@
1
- export declare const int: {
2
- transform: (x: number) => number;
3
- test: (v: any) => boolean;
4
- parse: (v: any) => any;
5
- createTransformer?: ((template: string) => import("style-value-types").Transformer) | undefined;
6
- default?: any;
7
- getAnimatableNone?: ((v: any) => any) | undefined;
8
- };
@@ -1,4 +0,0 @@
1
- import { ValueType } from "style-value-types";
2
- export interface ValueTypeMap {
3
- [key: string]: ValueType;
4
- }
@@ -1,3 +0,0 @@
1
- import { MotionComponentConfig } from "../../motion";
2
- import { HTMLRenderState } from "./types";
3
- export declare const htmlMotionConfig: Partial<MotionComponentConfig<HTMLElement, HTMLRenderState>>;
@@ -1,7 +0,0 @@
1
- declare type UnionStringArray<T extends Readonly<string[]>> = T[number];
2
- /**
3
- * @internal
4
- */
5
- export declare const htmlElements: readonly ["a", "abbr", "address", "area", "article", "aside", "audio", "b", "base", "bdi", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "cite", "code", "col", "colgroup", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "link", "main", "map", "mark", "menu", "menuitem", "meta", "meter", "nav", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "small", "source", "span", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "u", "ul", "var", "video", "wbr", "webview"];
6
- export declare type HTMLElements = UnionStringArray<typeof htmlElements>;
7
- export {};
@@ -1,61 +0,0 @@
1
- import { ResolvedValues } from "../types";
2
- import { DetailedHTMLFactory, ForwardRefExoticComponent, HTMLAttributes, PropsWithoutRef, ReactHTML, RefAttributes } from "react";
3
- import { MotionProps } from "../../motion/types";
4
- import { HTMLElements } from "./supported-elements";
5
- export interface TransformOrigin {
6
- originX?: number | string;
7
- originY?: number | string;
8
- originZ?: number | string;
9
- }
10
- export interface HTMLRenderState {
11
- /**
12
- * A mutable record of transforms we want to apply directly to the rendered Element
13
- * every frame. We use a mutable data structure to reduce GC during animations.
14
- */
15
- transform: ResolvedValues;
16
- /**
17
- * A mutable record of transform keys we want to apply to the rendered Element. We order
18
- * this to order transforms in the desired order. We use a mutable data structure to reduce GC during animations.
19
- */
20
- transformKeys: string[];
21
- /**
22
- * A mutable record of transform origins we want to apply directly to the rendered Element
23
- * every frame. We use a mutable data structure to reduce GC during animations.
24
- */
25
- transformOrigin: TransformOrigin;
26
- /**
27
- * A mutable record of styles we want to apply directly to the rendered Element
28
- * every frame. We use a mutable data structure to reduce GC during animations.
29
- */
30
- style: ResolvedValues;
31
- /**
32
- * A mutable record of CSS variables we want to apply directly to the rendered Element
33
- * every frame. We use a mutable data structure to reduce GC during animations.
34
- */
35
- vars: ResolvedValues;
36
- }
37
- /**
38
- * @public
39
- */
40
- export declare type ForwardRefComponent<T, P> = ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;
41
- /**
42
- * Support for React component props
43
- */
44
- declare type UnwrapFactoryAttributes<F> = F extends DetailedHTMLFactory<infer P, any> ? P : never;
45
- declare type UnwrapFactoryElement<F> = F extends DetailedHTMLFactory<any, infer P> ? P : never;
46
- declare type HTMLAttributesWithoutMotionProps<Attributes extends HTMLAttributes<Element>, Element extends HTMLElement> = {
47
- [K in Exclude<keyof Attributes, keyof MotionProps>]?: Attributes[K];
48
- };
49
- /**
50
- * @public
51
- */
52
- export declare type HTMLMotionProps<TagName extends keyof ReactHTML> = HTMLAttributesWithoutMotionProps<UnwrapFactoryAttributes<ReactHTML[TagName]>, UnwrapFactoryElement<ReactHTML[TagName]>> & MotionProps;
53
- /**
54
- * Motion-optimised versions of React's HTML components.
55
- *
56
- * @public
57
- */
58
- export declare type HTMLMotionComponents = {
59
- [K in HTMLElements]: ForwardRefComponent<UnwrapFactoryElement<ReactHTML[K]>, HTMLMotionProps<K>>;
60
- };
61
- export {};
@@ -1,8 +0,0 @@
1
- import { MotionProps } from "../../motion/types";
2
- import { MotionValue } from "../../value";
3
- import { ResolvedValues } from "../types";
4
- export declare function copyRawValuesOnly(target: ResolvedValues, source: {
5
- [key: string]: string | number | MotionValue;
6
- }, props: MotionProps): void;
7
- export declare function useStyle(props: MotionProps, visualState: ResolvedValues, isStatic: boolean): ResolvedValues;
8
- export declare function useHTMLProps(props: MotionProps, visualState: ResolvedValues, isStatic: boolean): any;
@@ -1,5 +0,0 @@
1
- import { MotionProps } from "../../../motion/types";
2
- import { HTMLRenderState } from "../types";
3
- import { ResolvedValues } from "../../types";
4
- import { DOMVisualElementOptions } from "../../dom/types";
5
- export declare function buildHTMLStyles(state: HTMLRenderState, latestValues: ResolvedValues, options: DOMVisualElementOptions, transformTemplate?: MotionProps["transformTemplate"]): void;
@@ -1,15 +0,0 @@
1
- import { DOMVisualElementOptions } from "../../dom/types";
2
- import { MotionProps } from "../../../motion/types";
3
- import { HTMLRenderState, TransformOrigin } from "../types";
4
- /**
5
- * Build a CSS transform style from individual x/y/scale etc properties.
6
- *
7
- * This outputs with a default order of transforms/scales/rotations, this can be customised by
8
- * providing a transformTemplate function.
9
- */
10
- export declare function buildTransform({ transform, transformKeys }: HTMLRenderState, { enableHardwareAcceleration, allowTransformNone, }: DOMVisualElementOptions, transformIsDefault: boolean, transformTemplate?: MotionProps["transformTemplate"]): string;
11
- /**
12
- * Build a transformOrigin style. Uses the same defaults as the browser for
13
- * undefined origins.
14
- */
15
- export declare function buildTransformOrigin({ originX, originY, originZ, }: TransformOrigin): string;
@@ -1,7 +0,0 @@
1
- export declare const createHtmlRenderState: () => {
2
- style: {};
3
- transform: {};
4
- transformKeys: never[];
5
- transformOrigin: {};
6
- vars: {};
7
- };
@@ -1,4 +0,0 @@
1
- import { MotionStyle } from "../../..";
2
- import { IProjectionNode } from "../../../projection/node/types";
3
- import { HTMLRenderState } from "../types";
4
- export declare function renderHTML(element: HTMLElement, { style, vars }: HTMLRenderState, styleProp?: MotionStyle, projection?: IProjectionNode): void;
@@ -1,2 +0,0 @@
1
- import { MotionProps } from "../../../motion/types";
2
- export declare function scrapeMotionValuesFromProps(props: MotionProps): {};
@@ -1,15 +0,0 @@
1
- /**
2
- * A list of all transformable axes. We'll use this list to generated a version
3
- * of each axes for each transform.
4
- */
5
- export declare const transformAxes: string[];
6
- /**
7
- * Generate a list of every possible transform key.
8
- */
9
- export declare const transformProps: string[];
10
- /**
11
- * A function to use with Array.sort to sort transform keys by their default order.
12
- */
13
- export declare function sortTransformProps(a: string, b: string): number;
14
- export declare function isTransformProp(key: string): boolean;
15
- export declare function isTransformOriginProp(key: string): boolean;
@@ -1,6 +0,0 @@
1
- import { HTMLRenderState } from "./types";
2
- import { VisualElementConfig } from "../types";
3
- import { DOMVisualElementOptions } from "../dom/types";
4
- export declare function getComputedStyle(element: HTMLElement): CSSStyleDeclaration;
5
- export declare const htmlConfig: VisualElementConfig<HTMLElement, HTMLRenderState, DOMVisualElementOptions>;
6
- export declare const htmlVisualElement: ({ parent, props, presenceId, blockInitialAnimation, visualState, shouldReduceMotion, }: import("../types").VisualElementOptions<HTMLElement, any>, options?: DOMVisualElementOptions) => import("../types").VisualElement<HTMLElement, any>;
@@ -1,2 +0,0 @@
1
- import { VisualElement, VisualElementConfig, VisualElementOptions } from "./types";
2
- export declare const visualElement: <Instance, MutableState, Options>({ treeType, build, getBaseTarget, makeTargetAnimatable, measureViewportBox, render: renderInstance, readValueFromInstance, removeValueFromRenderState, sortNodePosition, scrapeMotionValuesFromProps, }: VisualElementConfig<Instance, MutableState, Options>) => ({ parent, props, presenceId, blockInitialAnimation, visualState, shouldReduceMotion, }: VisualElementOptions<Instance, any>, options?: Options) => VisualElement<Instance, any>;
@@ -1,3 +0,0 @@
1
- import { MotionComponentConfig } from "../../motion";
2
- import { SVGRenderState } from "./types";
3
- export declare const svgMotionConfig: Partial<MotionComponentConfig<SVGElement, SVGRenderState>>;
@@ -1,5 +0,0 @@
1
- /**
2
- * We keep these listed seperately as we use the lowercase tag names as part
3
- * of the runtime bundle to detect SVG components
4
- */
5
- export declare const lowercaseSVGElements: string[];
@@ -1,7 +0,0 @@
1
- declare type UnionStringArray<T extends Readonly<string[]>> = T[number];
2
- /**
3
- * @internal
4
- */
5
- export declare const svgElements: readonly ["animate", "circle", "defs", "desc", "ellipse", "g", "image", "line", "filter", "marker", "mask", "metadata", "path", "pattern", "polygon", "polyline", "rect", "stop", "svg", "switch", "symbol", "text", "tspan", "use", "view", "clipPath", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "foreignObject", "linearGradient", "radialGradient", "textPath"];
6
- export declare type SVGElements = UnionStringArray<typeof svgElements>;
7
- export {};
@@ -1,44 +0,0 @@
1
- import { ResolvedValues } from "../types";
2
- import { SVGAttributes } from "react";
3
- import { MakeMotion, MotionProps } from "../../motion/types";
4
- import { SVGElements } from "./supported-elements";
5
- import { ForwardRefComponent, HTMLRenderState } from "../html/types";
6
- export interface SVGRenderState extends HTMLRenderState {
7
- /**
8
- * Measured dimensions of the SVG element to be used to calculate a transform-origin.
9
- */
10
- dimensions?: SVGDimensions;
11
- /**
12
- * A mutable record of attributes we want to apply directly to the rendered Element
13
- * every frame. We use a mutable data structure to reduce GC during animations.
14
- */
15
- attrs: ResolvedValues;
16
- }
17
- export declare type SVGDimensions = {
18
- x: number;
19
- y: number;
20
- width: number;
21
- height: number;
22
- };
23
- interface SVGAttributesWithoutMotionProps<T> extends Pick<SVGAttributes<T>, Exclude<keyof SVGAttributes<T>, keyof MotionProps>> {
24
- }
25
- /**
26
- * Blanket-accept any SVG attribute as a `MotionValue`
27
- * @public
28
- */
29
- export declare type SVGAttributesAsMotionValues<T> = MakeMotion<SVGAttributesWithoutMotionProps<T>>;
30
- declare type UnwrapSVGFactoryElement<F> = F extends React.SVGProps<infer P> ? P : never;
31
- /**
32
- * @public
33
- */
34
- export interface SVGMotionProps<T> extends SVGAttributesAsMotionValues<T>, MotionProps {
35
- }
36
- /**
37
- * Motion-optimised versions of React's SVG components.
38
- *
39
- * @public
40
- */
41
- export declare type SVGMotionComponents = {
42
- [K in SVGElements]: ForwardRefComponent<UnwrapSVGFactoryElement<JSX.IntrinsicElements[K]>, SVGMotionProps<UnwrapSVGFactoryElement<JSX.IntrinsicElements[K]>>>;
43
- };
44
- export {};
@@ -1,7 +0,0 @@
1
- import { MotionProps } from "../../motion/types";
2
- import { ResolvedValues } from "../types";
3
- export declare function useSVGProps(props: MotionProps, visualState: ResolvedValues): {
4
- style: {
5
- [x: string]: string | number;
6
- };
7
- };
@@ -1,8 +0,0 @@
1
- import { DOMVisualElementOptions } from "../../dom/types";
2
- import { ResolvedValues } from "../../types";
3
- import { MotionProps } from "../../../motion/types";
4
- import { SVGRenderState } from "../types";
5
- /**
6
- * Build SVG visual attrbutes, like cx and style.transform
7
- */
8
- export declare function buildSVGAttrs(state: SVGRenderState, { attrX, attrY, originX, originY, pathLength, pathSpacing, pathOffset, ...latest }: ResolvedValues, options: DOMVisualElementOptions, transformTemplate?: MotionProps["transformTemplate"]): void;
@@ -1,4 +0,0 @@
1
- /**
2
- * A set of attribute names that are always read/written as camel case.
3
- */
4
- export declare const camelCaseAttributes: Set<string>;
@@ -1,2 +0,0 @@
1
- import { SVGRenderState } from "../types";
2
- export declare const createSvgRenderState: () => SVGRenderState;
@@ -1,9 +0,0 @@
1
- import { ResolvedValues } from "../../types";
2
- /**
3
- * Build SVG path properties. Uses the path's measured length to convert
4
- * our custom pathLength, pathSpacing and pathOffset into stroke-dashoffset
5
- * and stroke-dasharray attributes.
6
- *
7
- * This function is mutative to reduce per-frame GC.
8
- */
9
- export declare function buildSVGPath(attrs: ResolvedValues, length: number, spacing?: number, offset?: number, useDashCase?: boolean): void;
@@ -1,4 +0,0 @@
1
- import { MotionStyle } from "../../../motion/types";
2
- import { IProjectionNode } from "../../../projection/node/types";
3
- import { SVGRenderState } from "../types";
4
- export declare function renderSVG(element: SVGElement, renderState: SVGRenderState, _styleProp?: MotionStyle, projection?: IProjectionNode): void;
@@ -1,2 +0,0 @@
1
- import { MotionProps } from "../../../motion/types";
2
- export declare function scrapeMotionValuesFromProps(props: MotionProps): {};
@@ -1,6 +0,0 @@
1
- import { SVGDimensions } from "../types";
2
- /**
3
- * The SVG transform origin defaults are different to CSS and is less intuitive,
4
- * so we use the measured dimensions of the SVG to reconcile these.
5
- */
6
- export declare function calcSVGTransformOrigin(dimensions: SVGDimensions, originX: number | string, originY: number | string): string;
@@ -1,2 +0,0 @@
1
- import { DOMVisualElementOptions } from "../dom/types";
2
- export declare const svgVisualElement: ({ parent, props, presenceId, blockInitialAnimation, visualState, shouldReduceMotion, }: import("../types").VisualElementOptions<SVGElement, any>, options?: DOMVisualElementOptions) => import("../types").VisualElement<SVGElement, any>;