flikkui 0.1.0-beta.9 → 0.2.0-beta.2

package/dist/node_modules/motion-dom/dist/es/frameloop/render-step.js

@@ -1,81 +0,0 @@
-function createRenderStep(runNextFrame, stepName) {
-    /**
-     * We create and reuse two queues, one to queue jobs for the current frame
-     * and one for the next. We reuse to avoid triggering GC after x frames.
-     */
-    let thisFrame = new Set();
-    let nextFrame = new Set();
-    /**
-     * Track whether we're currently processing jobs in this step. This way
-     * we can decide whether to schedule new jobs for this frame or next.
-     */
-    let isProcessing = false;
-    let flushNextFrame = false;
-    /**
-     * A set of processes which were marked keepAlive when scheduled.
-     */
-    const toKeepAlive = new WeakSet();
-    let latestFrameData = {
-        delta: 0.0,
-        timestamp: 0.0,
-        isProcessing: false,
-    };
-    function triggerCallback(callback) {
-        if (toKeepAlive.has(callback)) {
-            step.schedule(callback);
-            runNextFrame();
-        }
-        callback(latestFrameData);
-    }
-    const step = {
-        /**
-         * Schedule a process to run on the next frame.
-         */
-        schedule: (callback, keepAlive = false, immediate = false) => {
-            const addToCurrentFrame = immediate && isProcessing;
-            const queue = addToCurrentFrame ? thisFrame : nextFrame;
-            if (keepAlive)
-                toKeepAlive.add(callback);
-            if (!queue.has(callback))
-                queue.add(callback);
-            return callback;
-        },
-        /**
-         * Cancel the provided callback from running on the next frame.
-         */
-        cancel: (callback) => {
-            nextFrame.delete(callback);
-            toKeepAlive.delete(callback);
-        },
-        /**
-         * Execute all schedule callbacks.
-         */
-        process: (frameData) => {
-            latestFrameData = frameData;
-            /**
-             * If we're already processing we've probably been triggered by a flushSync
-             * inside an existing process. Instead of executing, mark flushNextFrame
-             * as true and ensure we flush the following frame at the end of this one.
-             */
-            if (isProcessing) {
-                flushNextFrame = true;
-                return;
-            }
-            isProcessing = true;
-            [thisFrame, nextFrame] = [nextFrame, thisFrame];
-            // Execute this frame
-            thisFrame.forEach(triggerCallback);
-            // Clear the frame so no callbacks remain. This is to avoid
-            // memory leaks should this render step not run for a while.
-            thisFrame.clear();
-            isProcessing = false;
-            if (flushNextFrame) {
-                flushNextFrame = false;
-                step.process(frameData);
-            }
-        },
-    };
-    return step;
-}
-
-export { createRenderStep };

package/dist/node_modules/motion-dom/dist/es/frameloop/sync-time.js

@@ -1,31 +0,0 @@
-import { frameData } from './frame.js';
-import { MotionGlobalConfig } from '../../../../motion-utils/dist/es/global-config.js';
-
-let now;
-function clearTime() {
-    now = undefined;
-}
-/**
- * An eventloop-synchronous alternative to performance.now().
- *
- * Ensures that time measurements remain consistent within a synchronous context.
- * Usually calling performance.now() twice within the same synchronous context
- * will return different values which isn't useful for animations when we're usually
- * trying to sync animations to the same frame.
- */
-const time = {
-    now: () => {
-        if (now === undefined) {
-            time.set(frameData.isProcessing || MotionGlobalConfig.useManualTiming
-                ? frameData.timestamp
-                : performance.now());
-        }
-        return now;
-    },
-    set: (newTime) => {
-        now = newTime;
-        queueMicrotask(clearTime);
-    },
-};
-
-export { time };

package/dist/node_modules/motion-dom/dist/es/gestures/drag/state/is-active.js

@@ -1,9 +0,0 @@
-const isDragging = {
-    x: false,
-    y: false,
-};
-function isDragActive() {
-    return isDragging.x || isDragging.y;
-}
-
-export { isDragActive, isDragging };

package/dist/node_modules/motion-dom/dist/es/gestures/drag/state/set-active.js

@@ -1,28 +0,0 @@
-import { isDragging } from './is-active.js';
-
-function setDragLock(axis) {
-    if (axis === "x" || axis === "y") {
-        if (isDragging[axis]) {
-            return null;
-        }
-        else {
-            isDragging[axis] = true;
-            return () => {
-                isDragging[axis] = false;
-            };
-        }
-    }
-    else {
-        if (isDragging.x || isDragging.y) {
-            return null;
-        }
-        else {
-            isDragging.x = isDragging.y = true;
-            return () => {
-                isDragging.x = isDragging.y = false;
-            };
-        }
-    }
-}
-
-export { setDragLock };

package/dist/node_modules/motion-dom/dist/es/gestures/hover.js

@@ -1,37 +0,0 @@
-import { isDragActive } from './drag/state/is-active.js';
-import { setupGesture } from './utils/setup.js';
-
-function isValidHover(event) {
-    return !(event.pointerType === "touch" || isDragActive());
-}
-/**
- * Create a hover gesture. hover() is different to .addEventListener("pointerenter")
- * in that it has an easier syntax, filters out polyfilled touch events, interoperates
- * with drag gestures, and automatically removes the "pointerennd" event listener when the hover ends.
- *
- * @public
- */
-function hover(elementOrSelector, onHoverStart, options = {}) {
-    const [elements, eventOptions, cancel] = setupGesture(elementOrSelector, options);
-    const onPointerEnter = (enterEvent) => {
-        if (!isValidHover(enterEvent))
-            return;
-        const { target } = enterEvent;
-        const onHoverEnd = onHoverStart(target, enterEvent);
-        if (typeof onHoverEnd !== "function" || !target)
-            return;
-        const onPointerLeave = (leaveEvent) => {
-            if (!isValidHover(leaveEvent))
-                return;
-            onHoverEnd(leaveEvent);
-            target.removeEventListener("pointerleave", onPointerLeave);
-        };
-        target.addEventListener("pointerleave", onPointerLeave, eventOptions);
-    };
-    elements.forEach((element) => {
-        element.addEventListener("pointerenter", onPointerEnter, eventOptions);
-    });
-    return cancel;
-}
-
-export { hover };

package/dist/node_modules/motion-dom/dist/es/gestures/press/index.js

@@ -1,83 +0,0 @@
-import { isHTMLElement } from '../../utils/is-html-element.js';
-import { isDragActive } from '../drag/state/is-active.js';
-import { isNodeOrChild } from '../utils/is-node-or-child.js';
-import { isPrimaryPointer } from '../utils/is-primary-pointer.js';
-import { setupGesture } from '../utils/setup.js';
-import { isElementKeyboardAccessible } from './utils/is-keyboard-accessible.js';
-import { enableKeyboardPress } from './utils/keyboard.js';
-import { isPressing } from './utils/state.js';
-
-/**
- * Filter out events that are not primary pointer events, or are triggering
- * while a Motion gesture is active.
- */
-function isValidPressEvent(event) {
-    return isPrimaryPointer(event) && !isDragActive();
-}
-/**
- * Create a press gesture.
- *
- * Press is different to `"pointerdown"`, `"pointerup"` in that it
- * automatically filters out secondary pointer events like right
- * click and multitouch.
- *
- * It also adds accessibility support for keyboards, where
- * an element with a press gesture will receive focus and
- *  trigger on Enter `"keydown"` and `"keyup"` events.
- *
- * This is different to a browser's `"click"` event, which does
- * respond to keyboards but only for the `"click"` itself, rather
- * than the press start and end/cancel. The element also needs
- * to be focusable for this to work, whereas a press gesture will
- * make an element focusable by default.
- *
- * @public
- */
-function press(targetOrSelector, onPressStart, options = {}) {
-    const [targets, eventOptions, cancelEvents] = setupGesture(targetOrSelector, options);
-    const startPress = (startEvent) => {
-        const target = startEvent.currentTarget;
-        if (!isValidPressEvent(startEvent))
-            return;
-        isPressing.add(target);
-        const onPressEnd = onPressStart(target, startEvent);
-        const onPointerEnd = (endEvent, success) => {
-            window.removeEventListener("pointerup", onPointerUp);
-            window.removeEventListener("pointercancel", onPointerCancel);
-            if (isPressing.has(target)) {
-                isPressing.delete(target);
-            }
-            if (!isValidPressEvent(endEvent)) {
-                return;
-            }
-            if (typeof onPressEnd === "function") {
-                onPressEnd(endEvent, { success });
-            }
-        };
-        const onPointerUp = (upEvent) => {
-            onPointerEnd(upEvent, target === window ||
-                target === document ||
-                options.useGlobalTarget ||
-                isNodeOrChild(target, upEvent.target));
-        };
-        const onPointerCancel = (cancelEvent) => {
-            onPointerEnd(cancelEvent, false);
-        };
-        window.addEventListener("pointerup", onPointerUp, eventOptions);
-        window.addEventListener("pointercancel", onPointerCancel, eventOptions);
-    };
-    targets.forEach((target) => {
-        const pointerDownTarget = options.useGlobalTarget ? window : target;
-        pointerDownTarget.addEventListener("pointerdown", startPress, eventOptions);
-        if (isHTMLElement(target)) {
-            target.addEventListener("focus", (event) => enableKeyboardPress(event, eventOptions));
-            if (!isElementKeyboardAccessible(target) &&
-                !target.hasAttribute("tabindex")) {
-                target.tabIndex = 0;
-            }
-        }
-    });
-    return cancelEvents;
-}
-
-export { press };

package/dist/node_modules/motion-dom/dist/es/gestures/press/utils/is-keyboard-accessible.js

@@ -1,13 +0,0 @@
-const focusableElements = new Set([
-    "BUTTON",
-    "INPUT",
-    "SELECT",
-    "TEXTAREA",
-    "A",
-]);
-function isElementKeyboardAccessible(element) {
-    return (focusableElements.has(element.tagName) ||
-        element.tabIndex !== -1);
-}
-
-export { isElementKeyboardAccessible };

package/dist/node_modules/motion-dom/dist/es/gestures/press/utils/keyboard.js

@@ -1,38 +0,0 @@
-import { isPressing } from './state.js';
-
-/**
- * Filter out events that are not "Enter" keys.
- */
-function filterEvents(callback) {
-    return (event) => {
-        if (event.key !== "Enter")
-            return;
-        callback(event);
-    };
-}
-function firePointerEvent(target, type) {
-    target.dispatchEvent(new PointerEvent("pointer" + type, { isPrimary: true, bubbles: true }));
-}
-const enableKeyboardPress = (focusEvent, eventOptions) => {
-    const element = focusEvent.currentTarget;
-    if (!element)
-        return;
-    const handleKeydown = filterEvents(() => {
-        if (isPressing.has(element))
-            return;
-        firePointerEvent(element, "down");
-        const handleKeyup = filterEvents(() => {
-            firePointerEvent(element, "up");
-        });
-        const handleBlur = () => firePointerEvent(element, "cancel");
-        element.addEventListener("keyup", handleKeyup, eventOptions);
-        element.addEventListener("blur", handleBlur, eventOptions);
-    });
-    element.addEventListener("keydown", handleKeydown, eventOptions);
-    /**
-     * Add an event listener that fires on blur to remove the keydown events.
-     */
-    element.addEventListener("blur", () => element.removeEventListener("keydown", handleKeydown), eventOptions);
-};
-
-export { enableKeyboardPress };

package/dist/node_modules/motion-dom/dist/es/gestures/press/utils/state.js

@@ -1,3 +0,0 @@
-const isPressing = new WeakSet();
-
-export { isPressing };

package/dist/node_modules/motion-dom/dist/es/gestures/utils/is-node-or-child.js

@@ -1,20 +0,0 @@
-/**
- * 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
- */
-const isNodeOrChild = (parent, child) => {
-    if (!child) {
-        return false;
-    }
-    else if (parent === child) {
-        return true;
-    }
-    else {
-        return isNodeOrChild(parent, child.parentElement);
-    }
-};
-
-export { isNodeOrChild };

package/dist/node_modules/motion-dom/dist/es/gestures/utils/is-primary-pointer.js

@@ -1,18 +0,0 @@
-const isPrimaryPointer = (event) => {
-    if (event.pointerType === "mouse") {
-        return typeof event.button !== "number" || event.button <= 0;
-    }
-    else {
-        /**
-         * isPrimary is true for all mice buttons, whereas every touch point
-         * is regarded as its own input. So subsequent concurrent touch points
-         * will be false.
-         *
-         * Specifically match against false here as incomplete versions of
-         * PointerEvents in very old browser might have it set as undefined.
-         */
-        return event.isPrimary !== false;
-    }
-};
-
-export { isPrimaryPointer };

package/dist/node_modules/motion-dom/dist/es/gestures/utils/setup.js

@@ -1,15 +0,0 @@
-import { resolveElements } from '../../utils/resolve-elements.js';
-
-function setupGesture(elementOrSelector, options) {
-    const elements = resolveElements(elementOrSelector);
-    const gestureAbortController = new AbortController();
-    const eventOptions = {
-        passive: true,
-        ...options,
-        signal: gestureAbortController.signal,
-    };
-    const cancel = () => gestureAbortController.abort();
-    return [elements, eventOptions, cancel];
-}
-
-export { setupGesture };

package/dist/node_modules/motion-dom/dist/es/render/dom/is-css-var.js

@@ -1,3 +0,0 @@
-const isCSSVar = (name) => name.startsWith("--");
-
-export { isCSSVar };

package/dist/node_modules/motion-dom/dist/es/render/dom/parse-transform.js

@@ -1,83 +0,0 @@
-const radToDeg = (rad) => (rad * 180) / Math.PI;
-const rotate = (v) => {
-    const angle = radToDeg(Math.atan2(v[1], v[0]));
-    return rebaseAngle(angle);
-};
-const matrix2dParsers = {
-    x: 4,
-    y: 5,
-    translateX: 4,
-    translateY: 5,
-    scaleX: 0,
-    scaleY: 3,
-    scale: (v) => (Math.abs(v[0]) + Math.abs(v[3])) / 2,
-    rotate,
-    rotateZ: rotate,
-    skewX: (v) => radToDeg(Math.atan(v[1])),
-    skewY: (v) => radToDeg(Math.atan(v[2])),
-    skew: (v) => (Math.abs(v[1]) + Math.abs(v[2])) / 2,
-};
-const rebaseAngle = (angle) => {
-    angle = angle % 360;
-    if (angle < 0)
-        angle += 360;
-    return angle;
-};
-const rotateZ = rotate;
-const scaleX = (v) => Math.sqrt(v[0] * v[0] + v[1] * v[1]);
-const scaleY = (v) => Math.sqrt(v[4] * v[4] + v[5] * v[5]);
-const matrix3dParsers = {
-    x: 12,
-    y: 13,
-    z: 14,
-    translateX: 12,
-    translateY: 13,
-    translateZ: 14,
-    scaleX,
-    scaleY,
-    scale: (v) => (scaleX(v) + scaleY(v)) / 2,
-    rotateX: (v) => rebaseAngle(radToDeg(Math.atan2(v[6], v[5]))),
-    rotateY: (v) => rebaseAngle(radToDeg(Math.atan2(-v[2], v[0]))),
-    rotateZ,
-    rotate: rotateZ,
-    skewX: (v) => radToDeg(Math.atan(v[4])),
-    skewY: (v) => radToDeg(Math.atan(v[1])),
-    skew: (v) => (Math.abs(v[1]) + Math.abs(v[4])) / 2,
-};
-function defaultTransformValue(name) {
-    return name.includes("scale") ? 1 : 0;
-}
-function parseValueFromTransform(transform, name) {
-    if (!transform || transform === "none") {
-        return defaultTransformValue(name);
-    }
-    const matrix3dMatch = transform.match(/^matrix3d\(([-\d.e\s,]+)\)$/u);
-    let parsers;
-    let match;
-    if (matrix3dMatch) {
-        parsers = matrix3dParsers;
-        match = matrix3dMatch;
-    }
-    else {
-        const matrix2dMatch = transform.match(/^matrix\(([-\d.e\s,]+)\)$/u);
-        parsers = matrix2dParsers;
-        match = matrix2dMatch;
-    }
-    if (!match) {
-        return defaultTransformValue(name);
-    }
-    const valueParser = parsers[name];
-    const values = match[1].split(",").map(convertTransformToNumber);
-    return typeof valueParser === "function"
-        ? valueParser(values)
-        : values[valueParser];
-}
-const readTransformValue = (instance, name) => {
-    const { transform = "none" } = getComputedStyle(instance);
-    return parseValueFromTransform(transform, name);
-};
-function convertTransformToNumber(value) {
-    return parseFloat(value.trim());
-}
-
-export { defaultTransformValue, parseValueFromTransform, readTransformValue };

package/dist/node_modules/motion-dom/dist/es/render/dom/style-set.js

@@ -1,9 +0,0 @@
-import { isCSSVar } from './is-css-var.js';
-
-function setStyle(element, name, value) {
-    isCSSVar(name)
-        ? element.style.setProperty(name, value)
-        : (element.style[name] = value);
-}
-
-export { setStyle };

package/dist/node_modules/motion-dom/dist/es/render/utils/keys-position.js

@@ -1,13 +0,0 @@
-import { transformPropOrder } from './keys-transform.js';
-
-const positionalKeys = new Set([
-    "width",
-    "height",
-    "top",
-    "left",
-    "right",
-    "bottom",
-    ...transformPropOrder,
-]);
-
-export { positionalKeys };

package/dist/node_modules/motion-dom/dist/es/render/utils/keys-transform.js

@@ -1,28 +0,0 @@
-/**
- * Generate a list of every possible transform key.
- */
-const transformPropOrder = [
-    "transformPerspective",
-    "x",
-    "y",
-    "z",
-    "translateX",
-    "translateY",
-    "translateZ",
-    "scale",
-    "scaleX",
-    "scaleY",
-    "rotate",
-    "rotateX",
-    "rotateY",
-    "rotateZ",
-    "skew",
-    "skewX",
-    "skewY",
-];
-/**
- * A quick lookup for transform props.
- */
-const transformProps = /*@__PURE__*/ (() => new Set(transformPropOrder))();
-
-export { transformPropOrder, transformProps };

package/dist/node_modules/motion-dom/dist/es/utils/interpolate.js

@@ -1,79 +0,0 @@
-import { mix } from './mix/index.js';
-import { invariant } from '../../../../motion-utils/dist/es/errors.js';
-import { clamp } from '../../../../motion-utils/dist/es/clamp.js';
-import { MotionGlobalConfig } from '../../../../motion-utils/dist/es/global-config.js';
-import { noop } from '../../../../motion-utils/dist/es/noop.js';
-import { pipe } from '../../../../motion-utils/dist/es/pipe.js';
-import { progress } from '../../../../motion-utils/dist/es/progress.js';
-
-function createMixers(output, ease, customMixer) {
-    const mixers = [];
-    const mixerFactory = customMixer || MotionGlobalConfig.mix || mix;
-    const numMixers = output.length - 1;
-    for (let i = 0; i < numMixers; i++) {
-        let mixer = mixerFactory(output[i], output[i + 1]);
-        if (ease) {
-            const easingFunction = Array.isArray(ease) ? ease[i] || noop : ease;
-            mixer = pipe(easingFunction, mixer);
-        }
-        mixers.push(mixer);
-    }
-    return mixers;
-}
-/**
- * Create a function that maps from a numerical input array to a generic output array.
- *
- * Accepts:
- *   - Numbers
- *   - Colors (hex, hsl, hsla, rgb, rgba)
- *   - Complex (combinations of one or more numbers or strings)
- *
- * ```jsx
- * const mixColor = interpolate([0, 1], ['#fff', '#000'])
- *
- * mixColor(0.5) // 'rgba(128, 128, 128, 1)'
- * ```
- *
- * TODO Revisit this approach once we've moved to data models for values,
- * probably not needed to pregenerate mixer functions.
- *
- * @public
- */
-function interpolate(input, output, { clamp: isClamp = true, ease, mixer } = {}) {
-    const inputLength = input.length;
-    invariant(inputLength === output.length, "Both input and output ranges must be the same length", "range-length");
-    /**
-     * If we're only provided a single input, we can just make a function
-     * that returns the output.
-     */
-    if (inputLength === 1)
-        return () => output[0];
-    if (inputLength === 2 && output[0] === output[1])
-        return () => output[1];
-    const isZeroDeltaRange = input[0] === input[1];
-    // If input runs highest -> lowest, reverse both arrays
-    if (input[0] > input[inputLength - 1]) {
-        input = [...input].reverse();
-        output = [...output].reverse();
-    }
-    const mixers = createMixers(output, ease, mixer);
-    const numMixers = mixers.length;
-    const interpolator = (v) => {
-        if (isZeroDeltaRange && v < input[0])
-            return output[0];
-        let i = 0;
-        if (numMixers > 1) {
-            for (; i < input.length - 2; i++) {
-                if (v < input[i + 1])
-                    break;
-            }
-        }
-        const progressInRange = progress(input[i], input[i + 1], v);
-        return mixers[i](progressInRange);
-    };
-    return isClamp
-        ? (v) => interpolator(clamp(input[0], input[inputLength - 1], v))
-        : interpolator;
-}
-
-export { interpolate };

package/dist/node_modules/motion-dom/dist/es/utils/is-html-element.js

@@ -1,11 +0,0 @@
-import { isObject } from '../../../../motion-utils/dist/es/is-object.js';
-
-/**
- * Checks if an element is an HTML element in a way
- * that works across iframes
- */
-function isHTMLElement(element) {
-    return isObject(element) && "offsetHeight" in element;
-}
-
-export { isHTMLElement };

package/dist/node_modules/motion-dom/dist/es/utils/is-svg-element.js

@@ -1,11 +0,0 @@
-import { isObject } from '../../../../motion-utils/dist/es/is-object.js';
-
-/**
- * Checks if an element is an SVG element in a way
- * that works across iframes
- */
-function isSVGElement(element) {
-    return isObject(element) && "ownerSVGElement" in element;
-}
-
-export { isSVGElement };

package/dist/node_modules/motion-dom/dist/es/utils/is-svg-svg-element.js

@@ -1,11 +0,0 @@
-import { isSVGElement } from './is-svg-element.js';
-
-/**
- * Checks if an element is specifically an SVGSVGElement (the root SVG element)
- * in a way that works across iframes
- */
-function isSVGSVGElement(element) {
-    return isSVGElement(element) && element.tagName === "svg";
-}
-
-export { isSVGSVGElement };