motion-start 0.0.1

package/src/gestures/types.ts

@@ -0,0 +1,257 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { EventInfo } from "../events/types";
+import type { VariantLabels } from "../motion/types";
+import type { TargetAndTransition } from "../types";
+import type { Point2D } from "../types/geometry";
+import type { PanInfo } from "./PanSession";
+export type RemoveEvent = () => void;
+/**
+ * @public
+ */
+export interface FocusHandlers {
+    /**
+     * Properties or variant label to animate to while the focus gesture is recognised.
+     *
+     * @motion
+     *
+     * ```jsx
+     * <motion.input whileFocus={{ scale: 1.2 }} />
+     * ```
+     */
+    whileFocus?: VariantLabels | TargetAndTransition;
+}
+/**
+ * Passed in to tap event handlers like `onTap` the `TapInfo` object contains
+ * information about the tap gesture such as it‘s location.
+ *
+ * @motion
+ *
+ * ```jsx
+ * function onTap(event, info) {
+ *   console.log(info.point.x, info.point.y)
+ * }
+ *
+ * <MotionDiv onTap={onTap} />
+ * ```
+ *
+ * @public
+ */
+export interface TapInfo {
+    /**
+     * Contains `x` and `y` values for the tap gesture relative to the
+     * device or page.
+     *
+     * @motion
+     *
+     * ```jsx
+     * function onTapStart(event, info) {
+     *   console.log(info.point.x, info.point.y)
+     * }
+     *
+     * <MotionDiv onTapStart={onTapStart} />
+     * ```
+     *
+     * @public
+     */
+    point: Point2D;
+}
+/**
+ * @public
+ */
+export interface TapHandlers {
+    /**
+     * Callback when the tap gesture successfully ends on this element.
+     *
+     * @motion
+     *
+     * ```jsx
+     * function onTap(event, info) {
+     *   console.log(info.point.x, info.point.y)
+     * }
+     *
+     * <MotionDiv onTap={onTap} />
+     * ```
+     *
+     * @param event - The originating pointer event.
+     * @param info - An {@link TapInfo} object containing `x` and `y` values for the `point` relative to the device or page.
+     */
+    onTap?(event: MouseEvent | TouchEvent | PointerEvent, info: TapInfo): void;
+    /**
+     * Callback when the tap gesture starts on this element.
+     *
+     * @motion
+     *
+     * ```jsx
+     * function onTapStart(event, info) {
+     *   console.log(info.point.x, info.point.y)
+     * }
+     *
+     * <MotionDiv onTapStart={onTapStart} />
+     * ```
+     *
+     * @param event - The originating pointer event.
+     * @param info - An {@link TapInfo} object containing `x` and `y` values for the `point` relative to the device or page.
+     */
+    onTapStart?(event: MouseEvent | TouchEvent | PointerEvent, info: TapInfo): void;
+    /**
+     * Callback when the tap gesture ends outside this element.
+     *
+     * @motion
+     *
+     * ```jsx
+     * function onTapCancel(event, info) {
+     *   console.log(info.point.x, info.point.y)
+     * }
+     *
+     * <MotionDiv onTapCancel={onTapCancel} />
+     * ```
+     *
+     * @param event - The originating pointer event.
+     * @param info - An {@link TapInfo} object containing `x` and `y` values for the `point` relative to the device or page.
+     */
+    onTapCancel?(event: MouseEvent | TouchEvent | PointerEvent, info: TapInfo): void;
+    /**
+     * Properties or variant label to animate to while the component is pressed.
+     *
+     * @motion
+     *
+     * ```jsx
+     * <MotionDiv whileTap={{ scale: 0.8 }} />
+     * ```
+     */
+    whileTap?: VariantLabels | TargetAndTransition;
+}
+export type PanHandler = (event: Event, info: PanInfo) => void;
+/**
+ * @public
+ */
+export interface PanHandlers {
+    /**
+     * Callback function that fires when the pan gesture is recognised on this element.
+     *
+     * **Note:** For pan gestures to work correctly with touch input, the element needs
+     * touch scrolling to be disabled on either x/y or both axis with the
+     * [touch-action](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action) CSS rule.
+     *
+     * @motion
+     *
+     * ```jsx
+     * function onPan(event, info) {
+     *   console.log(info.point.x, info.point.y)
+     * }
+     *
+     * <MotionDiv onPan={onPan} />
+     * ```
+     *
+     * @param event - The originating pointer event.
+     * @param info - A {@link PanInfo} object containing `x` and `y` values for:
+     *
+     *   - `point`: Relative to the device or page.
+     *   - `delta`: Distance moved since the last event.
+     *   - `offset`: Offset from the original pan event.
+     *   - `velocity`: Current velocity of the pointer.
+     */
+    onPan?(event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo): void;
+    /**
+     * Callback function that fires when the pan gesture begins on this element.
+     *
+     * @motion
+     *
+     * ```jsx
+     * function onPanStart(event, info) {
+     *   console.log(info.point.x, info.point.y)
+     * }
+     *
+     * <MotionDiv onPanStart={onPanStart} />
+     * ```
+     *
+     * @param event - The originating pointer event.
+     * @param info - A {@link PanInfo} object containing `x`/`y` values for:
+     *
+     *   - `point`: Relative to the device or page.
+     *   - `delta`: Distance moved since the last event.
+     *   - `offset`: Offset from the original pan event.
+     *   - `velocity`: Current velocity of the pointer.
+     */
+    onPanStart?(event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo): void;
+    /**
+     * Callback function that fires when we begin detecting a pan gesture. This
+     * is analogous to `onMouseStart` or `onTouchStart`.
+     *
+     * @motion
+     *
+     * ```jsx
+     * function onPanSessionStart(event, info) {
+     *   console.log(info.point.x, info.point.y)
+     * }
+     *
+     * <MotionDiv onPanSessionStart={onPanSessionStart} />
+     * ```
+     *
+     * @param event - The originating pointer event.
+     * @param info - An {@link EventInfo} object containing `x`/`y` values for:
+     *
+     *   - `point`: Relative to the device or page.
+     */
+    onPanSessionStart?(event: MouseEvent | TouchEvent | PointerEvent, info: EventInfo): void;
+    /**
+     * Callback function that fires when the pan gesture ends on this element.
+     *
+     * @motion
+     *
+     * ```jsx
+     * function onPanEnd(event, info) {
+     *   console.log(info.point.x, info.point.y)
+     * }
+     *
+     * <MotionDiv onPanEnd={onPanEnd} />
+     * ```
+     *
+     * @param event - The originating pointer event.
+     * @param info - A {@link PanInfo} object containing `x`/`y` values for:
+     *
+     *   - `point`: Relative to the device or page.
+     *   - `delta`: Distance moved since the last event.
+     *   - `offset`: Offset from the original pan event.
+     *   - `velocity`: Current velocity of the pointer.
+     */
+    onPanEnd?(event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo): void;
+}
+/**
+ * @public
+ */
+export interface HoverHandlers {
+    /**
+     * Properties or variant label to animate to while the hover gesture is recognised.
+     *
+     * @motion
+     *
+     * ```jsx
+     * <MotionDiv whileHover={{ scale: 1.2 }} />
+     * ```
+     */
+    whileHover?: VariantLabels | TargetAndTransition;
+    /**
+     * Callback function that fires when pointer starts hovering over the component.
+     *
+     * @motion
+     *
+     * ```jsx
+     * <MotionDiv onHoverStart={() => console.log('Hover starts')} />
+     * ```
+     */
+    onHoverStart?(event: MouseEvent, info: EventInfo): void;
+    /**
+     * Callback function that fires when pointer stops hovering over the component.
+     *
+     * @motion
+     *
+     * ```jsx
+     * <MotionDiv onHoverEnd={() => console.log("Hover ends")} />
+     * ```
+     */
+    onHoverEnd?(event: MouseEvent, info: EventInfo): void;
+}

package/src/gestures/use-focus-gesture.ts

@@ -0,0 +1,16 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { FeatureProps } from "../motion/features/types";
+/**
+ *
+ * @param props
+ * @param ref
+ * @internal
+ */
+export type useFocusGesture = ({ whileFocus, visualElement }: FeatureProps)=> void;
+
+
+export { default as UseFocusGesture } from './UseFocusGesture.svelte';
+

package/src/gestures/use-gestures.ts

@@ -0,0 +1,2 @@
+
+export { default as UseGestures } from "./UseGestures.svelte";

package/src/gestures/use-hover-gesture.ts

@@ -0,0 +1,10 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { FeatureProps } from "../motion/features/types";
+export type useHoverGesture = ({ onHoverStart, onHoverEnd, whileHover, visualElement, }: FeatureProps) => void;
+
+
+export { default as UseHoverGesture } from './UseHoverGesture.svelte';
+

package/src/gestures/use-pan-gesture.ts

@@ -0,0 +1,22 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { FeatureProps } from "../motion/features/types";
+/**
+ *
+ * @param handlers -
+ * @param ref -
+ *
+ * @internalremarks
+ * Currently this sets new pan gesture functions every render. The memo route has been explored
+ * in the past but ultimately we're still creating new functions every render. An optimisation
+ * to explore is creating the pan gestures and loading them into a `ref`.
+ *
+ * @internal
+ */
+export type usePanGesture = ({ onPan, onPanStart, onPanEnd, onPanSessionStart, visualElement, }: FeatureProps) => void;
+
+
+export { default as UsePanGesture } from './UsePanGesture.svelte';
+

package/src/gestures/use-tap-gesture.ts

@@ -0,0 +1,14 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { FeatureProps } from "../motion/features/types";
+/**
+ * @param handlers -
+ * @internal
+ */
+export type useTapGesture = ({ onTap, onTapStart, onTapCancel, whileTap, visualElement, }: FeatureProps) => void;
+
+
+export { default as UseTapGesture } from './UseTapGesture.svelte';
+

package/src/gestures/utils/event-type.ts

@@ -0,0 +1,24 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+
+function isMouseEvent(event: MouseEvent | TouchEvent | PointerEvent): event is MouseEvent {
+    // PointerEvent inherits from MouseEvent so we can't use a straight instanceof check.
+    if (typeof PointerEvent !== "undefined" && event instanceof PointerEvent) {
+        return !!(event.pointerType === "mouse");
+    }
+    return event instanceof MouseEvent;
+}
+function isTouchEvent(event: MouseEvent | TouchEvent | PointerEvent): event is TouchEvent {
+    var hasTouches = !!(event as any).touches;
+    return hasTouches;
+}
+
+export { isMouseEvent, isTouchEvent };

package/src/gestures/utils/is-node-or-child.ts

@@ -0,0 +1,31 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+
+/**
+ * Recursively traverse up the tree to check whether the provided child node
+ * is the parent or a descendant of it.
+ *
+ * @param parent - Element to find
+ * @param child - Element to test against parent
+ */
+var isNodeOrChild = function (parent: Element, child?: Element | null | undefined) {
+    if (!child) {
+        return false;
+    }
+    else if (parent === child) {
+        return true;
+    }
+    else {
+        return isNodeOrChild(parent, child.parentElement);
+    }
+};
+
+export { isNodeOrChild };

package/src/index.ts

@@ -0,0 +1,104 @@
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+export { FramerTreeLayoutContext } from './context/SharedLayoutContext.js';
+
+export { UseGestures } from './gestures/use-gestures.js';
+export { UsePanGesture } from './gestures/use-pan-gesture.js';
+export { UseTapGesture } from './gestures/use-tap-gesture.js';
+
+export { default as MotionSSR } from './motion/MotionSSR.svelte';
+
+export { UseAnimation } from './animation/use-animation.js';
+
+export { default as Mdiv, default as MotionDiv } from './components/MotionDiv.svelte';
+
+// ----------------------------------------------------------------------------------------------
+
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+/**
+ * Components
+ */
+export { AnimatePresence } from "./components/AnimatePresence/index.js";
+export { AnimateSharedLayout } from "./components/AnimateSharedLayout/index.js";
+export { LazyMotion } from "./components/LazyMotion/index.js";
+export { MotionConfig } from "./components/MotionConfig/index.js";
+export { M } from "./render/dom/motion-proxy.js";
+export { Motion /*, createDomMotionComponent*/, Motion as MotionSVG } from "./render/dom/motion.js";
+/**
+ * Features
+ */
+// export { domMax, domAnimation } from "./render/dom/featureBundle.js";
+/**
+ * Motion values
+ */
+export { MotionValue, motionValue, type PassiveEffect, type Subscriber } from "./value/index.js";
+export { useElementScroll } from "./value/scroll/use-element-scroll.js";
+export { useViewportScroll } from "./value/scroll/use-viewport-scroll.js";
+export { useMotionTemplate } from "./value/use-motion-template.js";
+export { useMotionValue } from "./value/use-motion-value.js";
+export { useSpring } from "./value/use-spring.js";
+export { useTransform } from "./value/use-transform.js";
+export { useVelocity } from "./value/use-velocity.js";
+export { resolveMotionValue } from "./value/utils/resolve-motion-value.js";
+/**
+ * Accessibility
+ */
+export { useReducedMotion } from "./utils/use-reduced-motion.js";
+/**
+ * Utils
+ */
+export { animate } from "./animation/animate.js";
+export { animationControls } from "./animation/animation-controls.js";
+export type { AnimationControls } from "./animation/types.js";
+export { useAnimation } from "./animation/use-animation.js";
+export { useIsPresent, usePresence } from "./components/AnimatePresence/use-presence.js";
+export { createCrossfader } from "./components/AnimateSharedLayout/utils/crossfader.js";
+export { UseDomEvent } from "./events/use-dom-event.js";
+export { type PanInfo } from "./gestures/PanSession.js";
+export { DragControls, useDragControls } from "./gestures/drag/use-drag-controls.js";
+export type { FocusHandlers, HoverHandlers, PanHandlers, TapHandlers, TapInfo } from "./gestures/types.js";
+export { createMotionComponent } from "./motion/index.js";
+export { isValidMotionProp } from "./motion/utils/valid-prop.js";
+export { addScaleCorrection } from "./render/dom/projection/scale-correction.js";
+export { snapshotViewportBox } from "./render/dom/projection/utils.js";
+export { batchLayout, flushLayout } from "./render/dom/utils/batch-layout.js";
+export { visualElement } from "./render/index.js";
+export type { VisualElement } from "./render/types.js";
+export { animateVisualElement } from "./render/utils/animation.js";
+export { transform } from "./utils/transform.js";
+export { useCycle } from "./utils/use-cycle.js";
+/**
+ * Contexts
+ */
+export { LayoutGroupContext } from "./context/LayoutGroupContext.js";
+export { MotionConfigContext } from "./context/MotionConfigContext.js";
+export { PresenceContext } from "./context/PresenceContext.js";
+/**
+ * Types
+ */
+export type { AnimationOptions, AnimationPlaybackControls } from "./animation/animate.js";
+export type { AnimatePresenceProps } from "./components/AnimatePresence/types.js";
+export type { SharedLayoutAnimationConfig, SharedLayoutProps, SharedLayoutSyncMethods, SyncLayoutLifecycles, VisibilityAction } from "./components/AnimateSharedLayout/types.js";
+export { createBatcher } from "./components/AnimateSharedLayout/utils/batcher.js";
+export type { LazyProps } from "./components/LazyMotion/types.js";
+export type { MotionConfigProps } from "./components/MotionConfig/index.js";
+export type { SharedLayoutContext } from "./context/SharedLayoutContext.js";
+export type { EventInfo } from "./events/types.js";
+export type { DragElastic, DragHandlers, DraggableProps } from "./gestures/drag/types.js";
+export type { LayoutProps } from "./motion/features/layout/types.js";
+export * from "./motion/features/types.js";
+export type { AnimationProps, MotionAdvancedProps, MotionProps, MotionStyle, MotionTransform, RelayoutInfo, ResolveLayoutTransition, VariantLabels } from "./motion/types.js";
+export type { CustomDomComponent } from "./render/dom/motion-proxy.js";
+export type { ForwardRefComponent, HTMLMotionProps } from "./render/html/types.js";
+export type { SVGAttributesAsMotionValues, SVGMotionProps } from "./render/svg/types.js";
+export { FlatTree } from "./render/utils/flat-tree.js";
+export type { VisualElementLifecycles } from "./render/utils/lifecycles.js";
+export type { CustomValueType, EasingFunction, Inertia, Keyframes, KeyframesTarget, None, Orchestration, Repeat, ResolvedKeyframesTarget, ResolvedSingleTarget, ResolvedValueTarget, SingleTarget, Spring, Target, TargetAndTransition, Transition, Tween, ValueTarget, Variant, Variants } from "./types.js";
+export * from "./types/geometry.js";
+export type { ScrollMotionValues } from "./value/scroll/utils.js";
+