flikkui 0.1.0-beta.11

package/dist/node_modules/framer-motion/dist/es/components/AnimatePresence/PopChild.js

@@ -0,0 +1,87 @@
+import { j as jsxRuntimeExports } from '../../../../../../_virtual/jsx-runtime.js';
+import * as React from 'react';
+import { useId, useRef, useContext, useInsertionEffect } from 'react';
+import { MotionConfigContext } from '../../context/MotionConfigContext.js';
+import { isHTMLElement } from '../../../../../motion-dom/dist/es/utils/is-html-element.js';
+
+/**
+ * Measurement functionality has to be within a separate component
+ * to leverage snapshot lifecycle.
+ */
+class PopChildMeasure extends React.Component {
+    getSnapshotBeforeUpdate(prevProps) {
+        const element = this.props.childRef.current;
+        if (element && prevProps.isPresent && !this.props.isPresent) {
+            const parent = element.offsetParent;
+            const parentWidth = isHTMLElement(parent)
+                ? parent.offsetWidth || 0
+                : 0;
+            const size = this.props.sizeRef.current;
+            size.height = element.offsetHeight || 0;
+            size.width = element.offsetWidth || 0;
+            size.top = element.offsetTop;
+            size.left = element.offsetLeft;
+            size.right = parentWidth - size.width - size.left;
+        }
+        return null;
+    }
+    /**
+     * Required with getSnapshotBeforeUpdate to stop React complaining.
+     */
+    componentDidUpdate() { }
+    render() {
+        return this.props.children;
+    }
+}
+function PopChild({ children, isPresent, anchorX, root }) {
+    const id = useId();
+    const ref = useRef(null);
+    const size = useRef({
+        width: 0,
+        height: 0,
+        top: 0,
+        left: 0,
+        right: 0,
+    });
+    const { nonce } = useContext(MotionConfigContext);
+    /**
+     * We create and inject a style block so we can apply this explicit
+     * sizing in a non-destructive manner by just deleting the style block.
+     *
+     * We can't apply size via render as the measurement happens
+     * in getSnapshotBeforeUpdate (post-render), likewise if we apply the
+     * styles directly on the DOM node, we might be overwriting
+     * styles set via the style prop.
+     */
+    useInsertionEffect(() => {
+        const { width, height, top, left, right } = size.current;
+        if (isPresent || !ref.current || !width || !height)
+            return;
+        const x = anchorX === "left" ? `left: ${left}` : `right: ${right}`;
+        ref.current.dataset.motionPopId = id;
+        const style = document.createElement("style");
+        if (nonce)
+            style.nonce = nonce;
+        const parent = root ?? document.head;
+        parent.appendChild(style);
+        if (style.sheet) {
+            style.sheet.insertRule(`
+          [data-motion-pop-id="${id}"] {
+            position: absolute !important;
+            width: ${width}px !important;
+            height: ${height}px !important;
+            ${x}px !important;
+            top: ${top}px !important;
+          }
+        `);
+        }
+        return () => {
+            if (parent.contains(style)) {
+                parent.removeChild(style);
+            }
+        };
+    }, [isPresent]);
+    return (jsxRuntimeExports.jsx(PopChildMeasure, { isPresent: isPresent, childRef: ref, sizeRef: size, children: React.cloneElement(children, { ref }) }));
+}
+
+export { PopChild };

package/dist/node_modules/framer-motion/dist/es/components/AnimatePresence/PresenceChild.js

@@ -0,0 +1,63 @@
+import { j as jsxRuntimeExports } from '../../../../../../_virtual/jsx-runtime.js';
+import * as React from 'react';
+import { useId, useMemo } from 'react';
+import { PresenceContext } from '../../context/PresenceContext.js';
+import { useConstant } from '../../utils/use-constant.js';
+import { PopChild } from './PopChild.js';
+
+const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, mode, anchorX, root }) => {
+    const presenceChildren = useConstant(newChildrenMap);
+    const id = useId();
+    let isReusedContext = true;
+    let context = useMemo(() => {
+        isReusedContext = false;
+        return {
+            id,
+            initial,
+            isPresent,
+            custom,
+            onExitComplete: (childId) => {
+                presenceChildren.set(childId, true);
+                for (const isComplete of presenceChildren.values()) {
+                    if (!isComplete)
+                        return; // can stop searching when any is incomplete
+                }
+                onExitComplete && onExitComplete();
+            },
+            register: (childId) => {
+                presenceChildren.set(childId, false);
+                return () => presenceChildren.delete(childId);
+            },
+        };
+    }, [isPresent, presenceChildren, onExitComplete]);
+    /**
+     * If the presence of a child affects the layout of the components around it,
+     * we want to make a new context value to ensure they get re-rendered
+     * so they can detect that layout change.
+     */
+    if (presenceAffectsLayout && isReusedContext) {
+        context = { ...context };
+    }
+    useMemo(() => {
+        presenceChildren.forEach((_, key) => presenceChildren.set(key, false));
+    }, [isPresent]);
+    /**
+     * If there's no `motion` components to fire exit animations, we want to remove this
+     * component immediately.
+     */
+    React.useEffect(() => {
+        !isPresent &&
+            !presenceChildren.size &&
+            onExitComplete &&
+            onExitComplete();
+    }, [isPresent]);
+    if (mode === "popLayout") {
+        children = (jsxRuntimeExports.jsx(PopChild, { isPresent: isPresent, anchorX: anchorX, root: root, children: children }));
+    }
+    return (jsxRuntimeExports.jsx(PresenceContext.Provider, { value: context, children: children }));
+};
+function newChildrenMap() {
+    return new Map();
+}
+
+export { PresenceChild };

package/dist/node_modules/framer-motion/dist/es/components/AnimatePresence/index.js

@@ -0,0 +1,165 @@
+import { j as jsxRuntimeExports } from '../../../../../../_virtual/jsx-runtime.js';
+import { useMemo, useRef, useState, useContext } from 'react';
+import { LayoutGroupContext } from '../../context/LayoutGroupContext.js';
+import { useConstant } from '../../utils/use-constant.js';
+import { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.js';
+import { PresenceChild } from './PresenceChild.js';
+import { usePresence } from './use-presence.js';
+import { onlyElements, getChildKey } from './utils.js';
+
+/**
+ * `AnimatePresence` enables the animation of components that have been removed from the tree.
+ *
+ * When adding/removing more than a single child, every child **must** be given a unique `key` prop.
+ *
+ * Any `motion` components that have an `exit` property defined will animate out when removed from
+ * the tree.
+ *
+ * ```jsx
+ * import { motion, AnimatePresence } from 'framer-motion'
+ *
+ * export const Items = ({ items }) => (
+ *   <AnimatePresence>
+ *     {items.map(item => (
+ *       <motion.div
+ *         key={item.id}
+ *         initial={{ opacity: 0 }}
+ *         animate={{ opacity: 1 }}
+ *         exit={{ opacity: 0 }}
+ *       />
+ *     ))}
+ *   </AnimatePresence>
+ * )
+ * ```
+ *
+ * You can sequence exit animations throughout a tree using variants.
+ *
+ * If a child contains multiple `motion` components with `exit` props, it will only unmount the child
+ * once all `motion` components have finished animating out. Likewise, any components using
+ * `usePresence` all need to call `safeToRemove`.
+ *
+ * @public
+ */
+const AnimatePresence = ({ children, custom, initial = true, onExitComplete, presenceAffectsLayout = true, mode = "sync", propagate = false, anchorX = "left", root }) => {
+    const [isParentPresent, safeToRemove] = usePresence(propagate);
+    /**
+     * Filter any children that aren't ReactElements. We can only track components
+     * between renders with a props.key.
+     */
+    const presentChildren = useMemo(() => onlyElements(children), [children]);
+    /**
+     * Track the keys of the currently rendered children. This is used to
+     * determine which children are exiting.
+     */
+    const presentKeys = propagate && !isParentPresent ? [] : presentChildren.map(getChildKey);
+    /**
+     * If `initial={false}` we only want to pass this to components in the first render.
+     */
+    const isInitialRender = useRef(true);
+    /**
+     * A ref containing the currently present children. When all exit animations
+     * are complete, we use this to re-render the component with the latest children
+     * *committed* rather than the latest children *rendered*.
+     */
+    const pendingPresentChildren = useRef(presentChildren);
+    /**
+     * Track which exiting children have finished animating out.
+     */
+    const exitComplete = useConstant(() => new Map());
+    /**
+     * Save children to render as React state. To ensure this component is concurrent-safe,
+     * we check for exiting children via an effect.
+     */
+    const [diffedChildren, setDiffedChildren] = useState(presentChildren);
+    const [renderedChildren, setRenderedChildren] = useState(presentChildren);
+    useIsomorphicLayoutEffect(() => {
+        isInitialRender.current = false;
+        pendingPresentChildren.current = presentChildren;
+        /**
+         * Update complete status of exiting children.
+         */
+        for (let i = 0; i < renderedChildren.length; i++) {
+            const key = getChildKey(renderedChildren[i]);
+            if (!presentKeys.includes(key)) {
+                if (exitComplete.get(key) !== true) {
+                    exitComplete.set(key, false);
+                }
+            }
+            else {
+                exitComplete.delete(key);
+            }
+        }
+    }, [renderedChildren, presentKeys.length, presentKeys.join("-")]);
+    const exitingChildren = [];
+    if (presentChildren !== diffedChildren) {
+        let nextChildren = [...presentChildren];
+        /**
+         * Loop through all the currently rendered components and decide which
+         * are exiting.
+         */
+        for (let i = 0; i < renderedChildren.length; i++) {
+            const child = renderedChildren[i];
+            const key = getChildKey(child);
+            if (!presentKeys.includes(key)) {
+                nextChildren.splice(i, 0, child);
+                exitingChildren.push(child);
+            }
+        }
+        /**
+         * If we're in "wait" mode, and we have exiting children, we want to
+         * only render these until they've all exited.
+         */
+        if (mode === "wait" && exitingChildren.length) {
+            nextChildren = exitingChildren;
+        }
+        setRenderedChildren(onlyElements(nextChildren));
+        setDiffedChildren(presentChildren);
+        /**
+         * Early return to ensure once we've set state with the latest diffed
+         * children, we can immediately re-render.
+         */
+        return null;
+    }
+    if (process.env.NODE_ENV !== "production" &&
+        mode === "wait" &&
+        renderedChildren.length > 1) {
+        console.warn(`You're attempting to animate multiple children within AnimatePresence, but its mode is set to "wait". This will lead to odd visual behaviour.`);
+    }
+    /**
+     * If we've been provided a forceRender function by the LayoutGroupContext,
+     * we can use it to force a re-render amongst all surrounding components once
+     * all components have finished animating out.
+     */
+    const { forceRender } = useContext(LayoutGroupContext);
+    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: renderedChildren.map((child) => {
+            const key = getChildKey(child);
+            const isPresent = propagate && !isParentPresent
+                ? false
+                : presentChildren === renderedChildren ||
+                    presentKeys.includes(key);
+            const onExit = () => {
+                if (exitComplete.has(key)) {
+                    exitComplete.set(key, true);
+                }
+                else {
+                    return;
+                }
+                let isEveryExitComplete = true;
+                exitComplete.forEach((isExitComplete) => {
+                    if (!isExitComplete)
+                        isEveryExitComplete = false;
+                });
+                if (isEveryExitComplete) {
+                    forceRender?.();
+                    setRenderedChildren(pendingPresentChildren.current);
+                    propagate && safeToRemove?.();
+                    onExitComplete && onExitComplete();
+                }
+            };
+            return (jsxRuntimeExports.jsx(PresenceChild, { isPresent: isPresent, initial: !isInitialRender.current || initial
+                    ? undefined
+                    : false, custom: custom, presenceAffectsLayout: presenceAffectsLayout, mode: mode, root: root, onExitComplete: isPresent ? undefined : onExit, anchorX: anchorX, children: child }, key));
+        }) }));
+};
+
+export { AnimatePresence };

package/dist/node_modules/framer-motion/dist/es/components/AnimatePresence/use-presence.js

@@ -0,0 +1,44 @@
+import { useContext, useId, useEffect, useCallback } from 'react';
+import { PresenceContext } from '../../context/PresenceContext.js';
+
+/**
+ * When a component is the child of `AnimatePresence`, it can use `usePresence`
+ * to access information about whether it's still present in the React tree.
+ *
+ * ```jsx
+ * import { usePresence } from "framer-motion"
+ *
+ * export const Component = () => {
+ *   const [isPresent, safeToRemove] = usePresence()
+ *
+ *   useEffect(() => {
+ *     !isPresent && setTimeout(safeToRemove, 1000)
+ *   }, [isPresent])
+ *
+ *   return <div />
+ * }
+ * ```
+ *
+ * If `isPresent` is `false`, it means that a component has been removed the tree, but
+ * `AnimatePresence` won't really remove it until `safeToRemove` has been called.
+ *
+ * @public
+ */
+function usePresence(subscribe = true) {
+    const context = useContext(PresenceContext);
+    if (context === null)
+        return [true, null];
+    const { isPresent, onExitComplete, register } = context;
+    // It's safe to call the following hooks conditionally (after an early return) because the context will always
+    // either be null or non-null for the lifespan of the component.
+    const id = useId();
+    useEffect(() => {
+        if (subscribe) {
+            return register(id);
+        }
+    }, [subscribe]);
+    const safeToRemove = useCallback(() => subscribe && onExitComplete && onExitComplete(id), [id, onExitComplete, subscribe]);
+    return !isPresent && onExitComplete ? [false, safeToRemove] : [true];
+}
+
+export { usePresence };

package/dist/node_modules/framer-motion/dist/es/components/AnimatePresence/utils.js

@@ -0,0 +1,14 @@
+import { Children, isValidElement } from 'react';
+
+const getChildKey = (child) => child.key || "";
+function onlyElements(children) {
+    const filtered = [];
+    // We use forEach here instead of map as map mutates the component key by preprending `.$`
+    Children.forEach(children, (child) => {
+        if (isValidElement(child))
+            filtered.push(child);
+    });
+    return filtered;
+}
+
+export { getChildKey, onlyElements };

package/dist/node_modules/framer-motion/dist/es/components/Reorder/Group.js

@@ -0,0 +1,52 @@
+import { j as jsxRuntimeExports } from '../../../../../../_virtual/jsx-runtime.js';
+import { forwardRef, useRef, useEffect } from 'react';
+import { ReorderContext } from '../../context/ReorderContext.js';
+import { motion } from '../../render/components/motion/proxy.js';
+import { useConstant } from '../../utils/use-constant.js';
+import { checkReorder } from './utils/check-reorder.js';
+import { invariant } from '../../../../../motion-utils/dist/es/errors.js';
+
+function ReorderGroupComponent({ children, as = "ul", axis = "y", onReorder, values, ...props }, externalRef) {
+    const Component = useConstant(() => motion[as]);
+    const order = [];
+    const isReordering = useRef(false);
+    invariant(Boolean(values), "Reorder.Group must be provided a values prop", "reorder-values");
+    const context = {
+        axis,
+        registerItem: (value, layout) => {
+            // If the entry was already added, update it rather than adding it again
+            const idx = order.findIndex((entry) => value === entry.value);
+            if (idx !== -1) {
+                order[idx].layout = layout[axis];
+            }
+            else {
+                order.push({ value: value, layout: layout[axis] });
+            }
+            order.sort(compareMin);
+        },
+        updateOrder: (item, offset, velocity) => {
+            if (isReordering.current)
+                return;
+            const newOrder = checkReorder(order, item, offset, velocity);
+            if (order !== newOrder) {
+                isReordering.current = true;
+                onReorder(newOrder
+                    .map(getValue)
+                    .filter((value) => values.indexOf(value) !== -1));
+            }
+        },
+    };
+    useEffect(() => {
+        isReordering.current = false;
+    });
+    return (jsxRuntimeExports.jsx(Component, { ...props, ref: externalRef, ignoreStrict: true, children: jsxRuntimeExports.jsx(ReorderContext.Provider, { value: context, children: children }) }));
+}
+const ReorderGroup = /*@__PURE__*/ forwardRef(ReorderGroupComponent);
+function getValue(item) {
+    return item.value;
+}
+function compareMin(a, b) {
+    return a.layout.min - b.layout.min;
+}
+
+export { ReorderGroup, ReorderGroupComponent };

package/dist/node_modules/framer-motion/dist/es/components/Reorder/Item.js

@@ -0,0 +1,33 @@
+import { j as jsxRuntimeExports } from '../../../../../../_virtual/jsx-runtime.js';
+import { forwardRef, useContext } from 'react';
+import { ReorderContext } from '../../context/ReorderContext.js';
+import { motion } from '../../render/components/motion/proxy.js';
+import { useConstant } from '../../utils/use-constant.js';
+import { useMotionValue } from '../../value/use-motion-value.js';
+import { useTransform } from '../../value/use-transform.js';
+import { isMotionValue } from '../../../../../motion-dom/dist/es/value/utils/is-motion-value.js';
+import { invariant } from '../../../../../motion-utils/dist/es/errors.js';
+
+function useDefaultMotionValue(value, defaultValue = 0) {
+    return isMotionValue(value) ? value : useMotionValue(defaultValue);
+}
+function ReorderItemComponent({ children, style = {}, value, as = "li", onDrag, layout = true, ...props }, externalRef) {
+    const Component = useConstant(() => motion[as]);
+    const context = useContext(ReorderContext);
+    const point = {
+        x: useDefaultMotionValue(style.x),
+        y: useDefaultMotionValue(style.y),
+    };
+    const zIndex = useTransform([point.x, point.y], ([latestX, latestY]) => latestX || latestY ? 1 : "unset");
+    invariant(Boolean(context), "Reorder.Item must be a child of Reorder.Group", "reorder-item-child");
+    const { axis, registerItem, updateOrder } = context;
+    return (jsxRuntimeExports.jsx(Component, { drag: axis, ...props, dragSnapToOrigin: true, style: { ...style, x: point.x, y: point.y, zIndex }, layout: layout, onDrag: (event, gesturePoint) => {
+            const { velocity } = gesturePoint;
+            velocity[axis] &&
+                updateOrder(value, point[axis].get(), velocity[axis]);
+            onDrag && onDrag(event, gesturePoint);
+        }, onLayoutMeasure: (measured) => registerItem(value, measured), ref: externalRef, ignoreStrict: true, children: children }));
+}
+const ReorderItem = /*@__PURE__*/ forwardRef(ReorderItemComponent);
+
+export { ReorderItem, ReorderItemComponent };

package/dist/node_modules/framer-motion/dist/es/components/Reorder/utils/check-reorder.js

@@ -0,0 +1,24 @@
+import { mixNumber } from '../../../../../../motion-dom/dist/es/utils/mix/number.js';
+import { moveItem } from '../../../../../../motion-utils/dist/es/array.js';
+
+function checkReorder(order, value, offset, velocity) {
+    if (!velocity)
+        return order;
+    const index = order.findIndex((item) => item.value === value);
+    if (index === -1)
+        return order;
+    const nextOffset = velocity > 0 ? 1 : -1;
+    const nextItem = order[index + nextOffset];
+    if (!nextItem)
+        return order;
+    const item = order[index];
+    const nextLayout = nextItem.layout;
+    const nextItemCenter = mixNumber(nextLayout.min, nextLayout.max, 0.5);
+    if ((nextOffset === 1 && item.layout.max + offset > nextItemCenter) ||
+        (nextOffset === -1 && item.layout.min + offset < nextItemCenter)) {
+        return moveItem(order, index, index + nextOffset);
+    }
+    return order;
+}
+
+export { checkReorder };

package/dist/node_modules/framer-motion/dist/es/context/LayoutGroupContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const LayoutGroupContext = createContext({});
+
+export { LayoutGroupContext };

package/dist/node_modules/framer-motion/dist/es/context/LazyContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const LazyContext = createContext({ strict: false });
+
+export { LazyContext };

package/dist/node_modules/framer-motion/dist/es/context/MotionConfigContext.js

@@ -0,0 +1,12 @@
+import { createContext } from 'react';
+
+/**
+ * @public
+ */
+const MotionConfigContext = createContext({
+    transformPagePoint: (p) => p,
+    isStatic: false,
+    reducedMotion: "never",
+});
+
+export { MotionConfigContext };

package/dist/node_modules/framer-motion/dist/es/context/MotionContext/create.js

@@ -0,0 +1,13 @@
+import { useContext, useMemo } from 'react';
+import { MotionContext } from './index.js';
+import { getCurrentTreeVariants } from './utils.js';
+
+function useCreateMotionContext(props) {
+    const { initial, animate } = getCurrentTreeVariants(props, useContext(MotionContext));
+    return useMemo(() => ({ initial, animate }), [variantLabelsAsDependency(initial), variantLabelsAsDependency(animate)]);
+}
+function variantLabelsAsDependency(prop) {
+    return Array.isArray(prop) ? prop.join(" ") : prop;
+}
+
+export { useCreateMotionContext };

package/dist/node_modules/framer-motion/dist/es/context/MotionContext/index.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const MotionContext = /* @__PURE__ */ createContext({});
+
+export { MotionContext };

package/dist/node_modules/framer-motion/dist/es/context/MotionContext/utils.js

@@ -0,0 +1,17 @@
+import { isControllingVariants } from '../../render/utils/is-controlling-variants.js';
+import { isVariantLabel } from '../../render/utils/is-variant-label.js';
+
+function getCurrentTreeVariants(props, context) {
+    if (isControllingVariants(props)) {
+        const { initial, animate } = props;
+        return {
+            initial: initial === false || isVariantLabel(initial)
+                ? initial
+                : undefined,
+            animate: isVariantLabel(animate) ? animate : undefined,
+        };
+    }
+    return props.inherit !== false ? context : {};
+}
+
+export { getCurrentTreeVariants };

package/dist/node_modules/framer-motion/dist/es/context/PresenceContext.js

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+
+/**
+ * @public
+ */
+const PresenceContext = 
+/* @__PURE__ */ createContext(null);
+
+export { PresenceContext };

package/dist/node_modules/framer-motion/dist/es/context/ReorderContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const ReorderContext = createContext(null);
+
+export { ReorderContext };

package/dist/node_modules/framer-motion/dist/es/context/SwitchLayoutGroupContext.js

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+
+/**
+ * Internal, exported only for usage in Framer
+ */
+const SwitchLayoutGroupContext = createContext({});
+
+export { SwitchLayoutGroupContext };

package/dist/node_modules/framer-motion/dist/es/events/add-dom-event.js

@@ -0,0 +1,6 @@
+function addDomEvent(target, eventName, handler, options = { passive: true }) {
+    target.addEventListener(eventName, handler, options);
+    return () => target.removeEventListener(eventName, handler);
+}
+
+export { addDomEvent };

package/dist/node_modules/framer-motion/dist/es/events/add-pointer-event.js

@@ -0,0 +1,8 @@
+import { addDomEvent } from './add-dom-event.js';
+import { addPointerInfo } from './event-info.js';
+
+function addPointerEvent(target, eventName, handler, options) {
+    return addDomEvent(target, eventName, addPointerInfo(handler), options);
+}
+
+export { addPointerEvent };

package/dist/node_modules/framer-motion/dist/es/events/event-info.js

@@ -0,0 +1,15 @@
+import { isPrimaryPointer } from '../../../../motion-dom/dist/es/gestures/utils/is-primary-pointer.js';
+
+function extractEventInfo(event) {
+    return {
+        point: {
+            x: event.pageX,
+            y: event.pageY,
+        },
+    };
+}
+const addPointerInfo = (handler) => {
+    return (event) => isPrimaryPointer(event) && handler(event, extractEventInfo(event));
+};
+
+export { addPointerInfo, extractEventInfo };