flikkui 0.1.0-beta.11

package/dist/node_modules/framer-motion/dist/es/render/VisualElement.js

@@ -0,0 +1,489 @@
+import { featureDefinitions } from '../motion/features/definitions.js';
+import { createBox } from '../projection/geometry/models.js';
+import { initPrefersReducedMotion } from '../utils/reduced-motion/index.js';
+import { hasReducedMotionListener, prefersReducedMotion } from '../utils/reduced-motion/state.js';
+import { visualElementStore } from './store.js';
+import { isControllingVariants, isVariantNode } from './utils/is-controlling-variants.js';
+import { updateMotionValuesFromProps } from './utils/motion-values.js';
+import { resolveVariantFromProps } from './utils/resolve-variants.js';
+import { KeyframeResolver } from '../../../../motion-dom/dist/es/animation/keyframes/KeyframesResolver.js';
+import { time } from '../../../../motion-dom/dist/es/frameloop/sync-time.js';
+import { frame, cancelFrame } from '../../../../motion-dom/dist/es/frameloop/frame.js';
+import { isMotionValue } from '../../../../motion-dom/dist/es/value/utils/is-motion-value.js';
+import { warnOnce } from '../../../../motion-utils/dist/es/warn-once.js';
+import { transformProps } from '../../../../motion-dom/dist/es/render/utils/keys-transform.js';
+import { motionValue } from '../../../../motion-dom/dist/es/value/index.js';
+import { isNumericalString } from '../../../../motion-utils/dist/es/is-numerical-string.js';
+import { isZeroValueString } from '../../../../motion-utils/dist/es/is-zero-value-string.js';
+import { findValueType } from '../../../../motion-dom/dist/es/value/types/utils/find.js';
+import { complex } from '../../../../motion-dom/dist/es/value/types/complex/index.js';
+import { getAnimatableNone } from '../../../../motion-dom/dist/es/value/types/utils/animatable-none.js';
+import { SubscriptionManager } from '../../../../motion-utils/dist/es/subscription-manager.js';
+import { microtask } from '../../../../motion-dom/dist/es/frameloop/microtask.js';
+
+const propEventHandlers = [
+    "AnimationStart",
+    "AnimationComplete",
+    "Update",
+    "BeforeLayoutMeasure",
+    "LayoutMeasure",
+    "LayoutAnimationStart",
+    "LayoutAnimationComplete",
+];
+/**
+ * A VisualElement is an imperative abstraction around UI elements such as
+ * HTMLElement, SVGElement, Three.Object3D etc.
+ */
+class VisualElement {
+    /**
+     * This method takes React props and returns found MotionValues. For example, HTML
+     * MotionValues will be found within the style prop, whereas for Three.js within attribute arrays.
+     *
+     * This isn't an abstract method as it needs calling in the constructor, but it is
+     * intended to be one.
+     */
+    scrapeMotionValuesFromProps(_props, _prevProps, _visualElement) {
+        return {};
+    }
+    constructor({ parent, props, presenceContext, reducedMotionConfig, blockInitialAnimation, visualState, }, options = {}) {
+        /**
+         * A reference to the current underlying Instance, e.g. a HTMLElement
+         * or Three.Mesh etc.
+         */
+        this.current = null;
+        /**
+         * A set containing references to this VisualElement's children.
+         */
+        this.children = new Set();
+        /**
+         * Determine what role this visual element should take in the variant tree.
+         */
+        this.isVariantNode = false;
+        this.isControllingVariants = false;
+        /**
+         * Decides whether this VisualElement should animate in reduced motion
+         * mode.
+         *
+         * TODO: This is currently set on every individual VisualElement but feels
+         * like it could be set globally.
+         */
+        this.shouldReduceMotion = null;
+        /**
+         * A map of all motion values attached to this visual element. Motion
+         * values are source of truth for any given animated value. A motion
+         * value might be provided externally by the component via props.
+         */
+        this.values = new Map();
+        this.KeyframeResolver = KeyframeResolver;
+        /**
+         * Cleanup functions for active features (hover/tap/exit etc)
+         */
+        this.features = {};
+        /**
+         * A map of every subscription that binds the provided or generated
+         * motion values onChange listeners to this visual element.
+         */
+        this.valueSubscriptions = new Map();
+        /**
+         * A reference to the previously-provided motion values as returned
+         * from scrapeMotionValuesFromProps. We use the keys in here to determine
+         * if any motion values need to be removed after props are updated.
+         */
+        this.prevMotionValues = {};
+        /**
+         * An object containing a SubscriptionManager for each active event.
+         */
+        this.events = {};
+        /**
+         * An object containing an unsubscribe function for each prop event subscription.
+         * For example, every "Update" event can have multiple subscribers via
+         * VisualElement.on(), but only one of those can be defined via the onUpdate prop.
+         */
+        this.propEventSubscriptions = {};
+        this.notifyUpdate = () => this.notify("Update", this.latestValues);
+        this.render = () => {
+            if (!this.current)
+                return;
+            this.triggerBuild();
+            this.renderInstance(this.current, this.renderState, this.props.style, this.projection);
+        };
+        this.renderScheduledAt = 0.0;
+        this.scheduleRender = () => {
+            const now = time.now();
+            if (this.renderScheduledAt < now) {
+                this.renderScheduledAt = now;
+                frame.render(this.render, false, true);
+            }
+        };
+        const { latestValues, renderState } = visualState;
+        this.latestValues = latestValues;
+        this.baseTarget = { ...latestValues };
+        this.initialValues = props.initial ? { ...latestValues } : {};
+        this.renderState = renderState;
+        this.parent = parent;
+        this.props = props;
+        this.presenceContext = presenceContext;
+        this.depth = parent ? parent.depth + 1 : 0;
+        this.reducedMotionConfig = reducedMotionConfig;
+        this.options = options;
+        this.blockInitialAnimation = Boolean(blockInitialAnimation);
+        this.isControllingVariants = isControllingVariants(props);
+        this.isVariantNode = isVariantNode(props);
+        if (this.isVariantNode) {
+            this.variantChildren = new Set();
+        }
+        this.manuallyAnimateOnMount = Boolean(parent && parent.current);
+        /**
+         * Any motion values that are provided to the element when created
+         * aren't yet bound to the element, as this would technically be impure.
+         * However, we iterate through the motion values and set them to the
+         * initial values for this component.
+         *
+         * TODO: This is impure and we should look at changing this to run on mount.
+         * Doing so will break some tests but this isn't necessarily a breaking change,
+         * more a reflection of the test.
+         */
+        const { willChange, ...initialMotionValues } = this.scrapeMotionValuesFromProps(props, {}, this);
+        for (const key in initialMotionValues) {
+            const value = initialMotionValues[key];
+            if (latestValues[key] !== undefined && isMotionValue(value)) {
+                value.set(latestValues[key]);
+            }
+        }
+    }
+    mount(instance) {
+        this.current = instance;
+        visualElementStore.set(instance, this);
+        if (this.projection && !this.projection.instance) {
+            this.projection.mount(instance);
+        }
+        if (this.parent && this.isVariantNode && !this.isControllingVariants) {
+            this.removeFromVariantTree = this.parent.addVariantChild(this);
+        }
+        this.values.forEach((value, key) => this.bindToMotionValue(key, value));
+        if (!hasReducedMotionListener.current) {
+            initPrefersReducedMotion();
+        }
+        this.shouldReduceMotion =
+            this.reducedMotionConfig === "never"
+                ? false
+                : this.reducedMotionConfig === "always"
+                    ? true
+                    : prefersReducedMotion.current;
+        if (process.env.NODE_ENV !== "production") {
+            warnOnce(this.shouldReduceMotion !== true, "You have Reduced Motion enabled on your device. Animations may not appear as expected.", "reduced-motion-disabled");
+        }
+        this.parent?.addChild(this);
+        this.update(this.props, this.presenceContext);
+    }
+    unmount() {
+        this.projection && this.projection.unmount();
+        cancelFrame(this.notifyUpdate);
+        cancelFrame(this.render);
+        this.valueSubscriptions.forEach((remove) => remove());
+        this.valueSubscriptions.clear();
+        this.removeFromVariantTree && this.removeFromVariantTree();
+        this.parent?.removeChild(this);
+        for (const key in this.events) {
+            this.events[key].clear();
+        }
+        for (const key in this.features) {
+            const feature = this.features[key];
+            if (feature) {
+                feature.unmount();
+                feature.isMounted = false;
+            }
+        }
+        this.current = null;
+    }
+    addChild(child) {
+        this.children.add(child);
+        this.enteringChildren ?? (this.enteringChildren = new Set());
+        this.enteringChildren.add(child);
+    }
+    removeChild(child) {
+        this.children.delete(child);
+        this.enteringChildren && this.enteringChildren.delete(child);
+    }
+    bindToMotionValue(key, value) {
+        if (this.valueSubscriptions.has(key)) {
+            this.valueSubscriptions.get(key)();
+        }
+        const valueIsTransform = transformProps.has(key);
+        if (valueIsTransform && this.onBindTransform) {
+            this.onBindTransform();
+        }
+        const removeOnChange = value.on("change", (latestValue) => {
+            this.latestValues[key] = latestValue;
+            this.props.onUpdate && frame.preRender(this.notifyUpdate);
+            if (valueIsTransform && this.projection) {
+                this.projection.isTransformDirty = true;
+            }
+            this.scheduleRender();
+        });
+        let removeSyncCheck;
+        if (window.MotionCheckAppearSync) {
+            removeSyncCheck = window.MotionCheckAppearSync(this, key, value);
+        }
+        this.valueSubscriptions.set(key, () => {
+            removeOnChange();
+            if (removeSyncCheck)
+                removeSyncCheck();
+            if (value.owner)
+                value.stop();
+        });
+    }
+    sortNodePosition(other) {
+        /**
+         * If these nodes aren't even of the same type we can't compare their depth.
+         */
+        if (!this.current ||
+            !this.sortInstanceNodePosition ||
+            this.type !== other.type) {
+            return 0;
+        }
+        return this.sortInstanceNodePosition(this.current, other.current);
+    }
+    updateFeatures() {
+        let key = "animation";
+        for (key in featureDefinitions) {
+            const featureDefinition = featureDefinitions[key];
+            if (!featureDefinition)
+                continue;
+            const { isEnabled, Feature: FeatureConstructor } = featureDefinition;
+            /**
+             * If this feature is enabled but not active, make a new instance.
+             */
+            if (!this.features[key] &&
+                FeatureConstructor &&
+                isEnabled(this.props)) {
+                this.features[key] = new FeatureConstructor(this);
+            }
+            /**
+             * If we have a feature, mount or update it.
+             */
+            if (this.features[key]) {
+                const feature = this.features[key];
+                if (feature.isMounted) {
+                    feature.update();
+                }
+                else {
+                    feature.mount();
+                    feature.isMounted = true;
+                }
+            }
+        }
+    }
+    triggerBuild() {
+        this.build(this.renderState, this.latestValues, this.props);
+    }
+    /**
+     * Measure the current viewport box with or without transforms.
+     * Only measures axis-aligned boxes, rotate and skew must be manually
+     * removed with a re-render to work.
+     */
+    measureViewportBox() {
+        return this.current
+            ? this.measureInstanceViewportBox(this.current, this.props)
+            : createBox();
+    }
+    getStaticValue(key) {
+        return this.latestValues[key];
+    }
+    setStaticValue(key, value) {
+        this.latestValues[key] = value;
+    }
+    /**
+     * Update the provided props. Ensure any newly-added motion values are
+     * added to our map, old ones removed, and listeners updated.
+     */
+    update(props, presenceContext) {
+        if (props.transformTemplate || this.props.transformTemplate) {
+            this.scheduleRender();
+        }
+        this.prevProps = this.props;
+        this.props = props;
+        this.prevPresenceContext = this.presenceContext;
+        this.presenceContext = presenceContext;
+        /**
+         * Update prop event handlers ie onAnimationStart, onAnimationComplete
+         */
+        for (let i = 0; i < propEventHandlers.length; i++) {
+            const key = propEventHandlers[i];
+            if (this.propEventSubscriptions[key]) {
+                this.propEventSubscriptions[key]();
+                delete this.propEventSubscriptions[key];
+            }
+            const listenerName = ("on" + key);
+            const listener = props[listenerName];
+            if (listener) {
+                this.propEventSubscriptions[key] = this.on(key, listener);
+            }
+        }
+        this.prevMotionValues = updateMotionValuesFromProps(this, this.scrapeMotionValuesFromProps(props, this.prevProps, this), this.prevMotionValues);
+        if (this.handleChildMotionValue) {
+            this.handleChildMotionValue();
+        }
+    }
+    getProps() {
+        return this.props;
+    }
+    /**
+     * Returns the variant definition with a given name.
+     */
+    getVariant(name) {
+        return this.props.variants ? this.props.variants[name] : undefined;
+    }
+    /**
+     * Returns the defined default transition on this component.
+     */
+    getDefaultTransition() {
+        return this.props.transition;
+    }
+    getTransformPagePoint() {
+        return this.props.transformPagePoint;
+    }
+    getClosestVariantNode() {
+        return this.isVariantNode
+            ? this
+            : this.parent
+                ? this.parent.getClosestVariantNode()
+                : undefined;
+    }
+    /**
+     * Add a child visual element to our set of children.
+     */
+    addVariantChild(child) {
+        const closestVariantNode = this.getClosestVariantNode();
+        if (closestVariantNode) {
+            closestVariantNode.variantChildren &&
+                closestVariantNode.variantChildren.add(child);
+            return () => closestVariantNode.variantChildren.delete(child);
+        }
+    }
+    /**
+     * Add a motion value and bind it to this visual element.
+     */
+    addValue(key, value) {
+        // Remove existing value if it exists
+        const existingValue = this.values.get(key);
+        if (value !== existingValue) {
+            if (existingValue)
+                this.removeValue(key);
+            this.bindToMotionValue(key, value);
+            this.values.set(key, value);
+            this.latestValues[key] = value.get();
+        }
+    }
+    /**
+     * Remove a motion value and unbind any active subscriptions.
+     */
+    removeValue(key) {
+        this.values.delete(key);
+        const unsubscribe = this.valueSubscriptions.get(key);
+        if (unsubscribe) {
+            unsubscribe();
+            this.valueSubscriptions.delete(key);
+        }
+        delete this.latestValues[key];
+        this.removeValueFromRenderState(key, this.renderState);
+    }
+    /**
+     * Check whether we have a motion value for this key
+     */
+    hasValue(key) {
+        return this.values.has(key);
+    }
+    getValue(key, defaultValue) {
+        if (this.props.values && this.props.values[key]) {
+            return this.props.values[key];
+        }
+        let value = this.values.get(key);
+        if (value === undefined && defaultValue !== undefined) {
+            value = motionValue(defaultValue === null ? undefined : defaultValue, { owner: this });
+            this.addValue(key, value);
+        }
+        return value;
+    }
+    /**
+     * If we're trying to animate to a previously unencountered value,
+     * we need to check for it in our state and as a last resort read it
+     * directly from the instance (which might have performance implications).
+     */
+    readValue(key, target) {
+        let value = this.latestValues[key] !== undefined || !this.current
+            ? this.latestValues[key]
+            : this.getBaseTargetFromProps(this.props, key) ??
+                this.readValueFromInstance(this.current, key, this.options);
+        if (value !== undefined && value !== null) {
+            if (typeof value === "string" &&
+                (isNumericalString(value) || isZeroValueString(value))) {
+                // If this is a number read as a string, ie "0" or "200", convert it to a number
+                value = parseFloat(value);
+            }
+            else if (!findValueType(value) && complex.test(target)) {
+                value = getAnimatableNone(key, target);
+            }
+            this.setBaseTarget(key, isMotionValue(value) ? value.get() : value);
+        }
+        return isMotionValue(value) ? value.get() : value;
+    }
+    /**
+     * Set the base target to later animate back to. This is currently
+     * only hydrated on creation and when we first read a value.
+     */
+    setBaseTarget(key, value) {
+        this.baseTarget[key] = value;
+    }
+    /**
+     * Find the base target for a value thats been removed from all animation
+     * props.
+     */
+    getBaseTarget(key) {
+        const { initial } = this.props;
+        let valueFromInitial;
+        if (typeof initial === "string" || typeof initial === "object") {
+            const variant = resolveVariantFromProps(this.props, initial, this.presenceContext?.custom);
+            if (variant) {
+                valueFromInitial = variant[key];
+            }
+        }
+        /**
+         * If this value still exists in the current initial variant, read that.
+         */
+        if (initial && valueFromInitial !== undefined) {
+            return valueFromInitial;
+        }
+        /**
+         * Alternatively, if this VisualElement config has defined a getBaseTarget
+         * so we can read the value from an alternative source, try that.
+         */
+        const target = this.getBaseTargetFromProps(this.props, key);
+        if (target !== undefined && !isMotionValue(target))
+            return target;
+        /**
+         * If the value was initially defined on initial, but it doesn't any more,
+         * return undefined. Otherwise return the value as initially read from the DOM.
+         */
+        return this.initialValues[key] !== undefined &&
+            valueFromInitial === undefined
+            ? undefined
+            : this.baseTarget[key];
+    }
+    on(eventName, callback) {
+        if (!this.events[eventName]) {
+            this.events[eventName] = new SubscriptionManager();
+        }
+        return this.events[eventName].add(callback);
+    }
+    notify(eventName, ...args) {
+        if (this.events[eventName]) {
+            this.events[eventName].notify(...args);
+        }
+    }
+    scheduleRenderMicrotask() {
+        microtask.render(this.render);
+    }
+}
+
+export { VisualElement };

package/dist/node_modules/framer-motion/dist/es/render/components/create-proxy.js

@@ -0,0 +1,45 @@
+import { createMotionComponent } from '../../motion/index.js';
+import { warnOnce } from '../../../../../motion-utils/dist/es/warn-once.js';
+
+function createMotionProxy(preloadedFeatures, createVisualElement) {
+    if (typeof Proxy === "undefined") {
+        return createMotionComponent;
+    }
+    /**
+     * A cache of generated `motion` components, e.g `motion.div`, `motion.input` etc.
+     * Rather than generating them anew every render.
+     */
+    const componentCache = new Map();
+    const factory = (Component, options) => {
+        return createMotionComponent(Component, options, preloadedFeatures, createVisualElement);
+    };
+    /**
+     * Support for deprecated`motion(Component)` pattern
+     */
+    const deprecatedFactoryFunction = (Component, options) => {
+        if (process.env.NODE_ENV !== "production") {
+            warnOnce(false, "motion() is deprecated. Use motion.create() instead.");
+        }
+        return factory(Component, options);
+    };
+    return new Proxy(deprecatedFactoryFunction, {
+        /**
+         * Called when `motion` is referenced with a prop: `motion.div`, `motion.input` etc.
+         * The prop name is passed through as `key` and we can use that to generate a `motion`
+         * DOM component with that name.
+         */
+        get: (_target, key) => {
+            if (key === "create")
+                return factory;
+            /**
+             * If this element doesn't exist in the component cache, create it and cache.
+             */
+            if (!componentCache.has(key)) {
+                componentCache.set(key, createMotionComponent(key, undefined, preloadedFeatures, createVisualElement));
+            }
+            return componentCache.get(key);
+        },
+    });
+}
+
+export { createMotionProxy };

package/dist/node_modules/framer-motion/dist/es/render/components/motion/feature-bundle.js

@@ -0,0 +1,13 @@
+import { animations } from '../../../motion/features/animations.js';
+import { drag } from '../../../motion/features/drag.js';
+import { gestureAnimations } from '../../../motion/features/gestures.js';
+import { layout } from '../../../motion/features/layout.js';
+
+const featureBundle = {
+    ...animations,
+    ...gestureAnimations,
+    ...drag,
+    ...layout,
+};
+
+export { featureBundle };

package/dist/node_modules/framer-motion/dist/es/render/components/motion/proxy.js

@@ -0,0 +1,7 @@
+import { createDomVisualElement } from '../../dom/create-visual-element.js';
+import { createMotionProxy } from '../create-proxy.js';
+import { featureBundle } from './feature-bundle.js';
+
+const motion = /*@__PURE__*/ createMotionProxy(featureBundle, createDomVisualElement);
+
+export { motion };

package/dist/node_modules/framer-motion/dist/es/render/dom/DOMVisualElement.js

@@ -0,0 +1,43 @@
+import { VisualElement } from '../VisualElement.js';
+import { DOMKeyframesResolver } from '../../../../../motion-dom/dist/es/animation/keyframes/DOMKeyframesResolver.js';
+import { isMotionValue } from '../../../../../motion-dom/dist/es/value/utils/is-motion-value.js';
+
+class DOMVisualElement extends VisualElement {
+    constructor() {
+        super(...arguments);
+        this.KeyframeResolver = DOMKeyframesResolver;
+    }
+    sortInstanceNodePosition(a, b) {
+        /**
+         * compareDocumentPosition returns a bitmask, by using the bitwise &
+         * we're returning true if 2 in that bitmask is set to true. 2 is set
+         * to true if b preceeds a.
+         */
+        return a.compareDocumentPosition(b) & 2 ? 1 : -1;
+    }
+    getBaseTargetFromProps(props, key) {
+        return props.style
+            ? props.style[key]
+            : undefined;
+    }
+    removeValueFromRenderState(key, { vars, style }) {
+        delete vars[key];
+        delete style[key];
+    }
+    handleChildMotionValue() {
+        if (this.childSubscription) {
+            this.childSubscription();
+            delete this.childSubscription;
+        }
+        const { children } = this.props;
+        if (isMotionValue(children)) {
+            this.childSubscription = children.on("change", (latest) => {
+                if (this.current) {
+                    this.current.textContent = `${latest}`;
+                }
+            });
+        }
+    }
+}
+
+export { DOMVisualElement };

package/dist/node_modules/framer-motion/dist/es/render/dom/create-visual-element.js

@@ -0,0 +1,14 @@
+import { Fragment } from 'react';
+import { HTMLVisualElement } from '../html/HTMLVisualElement.js';
+import { SVGVisualElement } from '../svg/SVGVisualElement.js';
+import { isSVGComponent } from './utils/is-svg-component.js';
+
+const createDomVisualElement = (Component, options) => {
+    return isSVGComponent(Component)
+        ? new SVGVisualElement(options)
+        : new HTMLVisualElement(options, {
+            allowProjection: Component !== Fragment,
+        });
+};
+
+export { createDomVisualElement };

package/dist/node_modules/framer-motion/dist/es/render/dom/use-render.js

@@ -0,0 +1,28 @@
+import { Fragment, useMemo, createElement } from 'react';
+import { useHTMLProps } from '../html/use-props.js';
+import { useSVGProps } from '../svg/use-props.js';
+import { filterProps } from './utils/filter-props.js';
+import { isSVGComponent } from './utils/is-svg-component.js';
+import { isMotionValue } from '../../../../../motion-dom/dist/es/value/utils/is-motion-value.js';
+
+function useRender(Component, props, ref, { latestValues, }, isStatic, forwardMotionProps = false) {
+    const useVisualProps = isSVGComponent(Component)
+        ? useSVGProps
+        : useHTMLProps;
+    const visualProps = useVisualProps(props, latestValues, isStatic, Component);
+    const filteredProps = filterProps(props, typeof Component === "string", forwardMotionProps);
+    const elementProps = Component !== Fragment ? { ...filteredProps, ...visualProps, ref } : {};
+    /**
+     * If component has been handed a motion value as its child,
+     * memoise its initial value and render that. Subsequent updates
+     * will be handled by the onChange handler
+     */
+    const { children } = props;
+    const renderedChildren = useMemo(() => (isMotionValue(children) ? children.get() : children), [children]);
+    return createElement(Component, {
+        ...elementProps,
+        children: renderedChildren,
+    });
+}
+
+export { useRender };

package/dist/node_modules/framer-motion/dist/es/render/dom/utils/camel-to-dash.js

@@ -0,0 +1,6 @@
+/**
+ * Convert camelCase to dash-case properties.
+ */
+const camelToDash = (str) => str.replace(/([a-z])([A-Z])/gu, "$1-$2").toLowerCase();
+
+export { camelToDash };