@onepercentio/one-ui 1.3.3 → 1.3.5

package/dist/hooks/useElementFit.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+/**
+ * This hook receives a base width of an element and returns how much items fit **vertically** inside the referenced html element
+ *
+ * @param baseWidth The base width of each element
+ */
+function useElementFit(baseWidth, baseHeight) {
+    const ref = (0, react_1.useRef)(undefined);
+    function calculateDimension() {
+        var _a;
+        function howManyItemsStackVertically() {
+            if (!ref.current || baseHeight === undefined)
+                return 1;
+            return Math.floor(ref.current.clientHeight / baseHeight);
+        }
+        if (window.PRERENDER)
+            return {
+                howManyItemsWillBeVisible: 4,
+                byRow: 4,
+            };
+        const width = ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.clientWidth) || window.visualViewport.width;
+        const maxItemsHorizontally = Math.floor(width / baseWidth) || 1;
+        return {
+            howManyItemsWillBeVisible: maxItemsHorizontally * howManyItemsStackVertically(),
+            byRow: maxItemsHorizontally,
+        };
+    }
+    const [itemsToShow, setItemsToShow] = (0, react_1.useState)(window.PRERENDER
+        ? {
+            byRow: 4,
+            howManyItemsWillBeVisible: 4,
+        }
+        : undefined);
+    (0, react_1.useEffect)(() => {
+        setItemsToShow(calculateDimension());
+        function onResize() {
+            setItemsToShow(calculateDimension());
+        }
+        window.addEventListener("resize", onResize);
+        return () => {
+            window.removeEventListener("resize", onResize);
+        };
+    }, []);
+    return {
+        howManyItemsFit: itemsToShow === null || itemsToShow === void 0 ? void 0 : itemsToShow.howManyItemsWillBeVisible,
+        howManyItemsFitWithExtraRow: itemsToShow
+            ? itemsToShow.howManyItemsWillBeVisible + itemsToShow.byRow
+            : undefined,
+        anItemMore: itemsToShow
+            ? itemsToShow.howManyItemsWillBeVisible + 1
+            : undefined,
+        howManyItemsByRow: itemsToShow === null || itemsToShow === void 0 ? void 0 : itemsToShow.byRow,
+        ref,
+    };
+}
+exports.default = useElementFit;
+//# sourceMappingURL=useElementFit.js.map

package/dist/hooks/useElementFit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useElementFit.js","sourceRoot":"","sources":["../../src/hooks/useElementFit.ts"],"names":[],"mappings":";;AAAA,iCAAgF;AAEhF;;;;GAIG;AACH,SAAwB,aAAa,CACnC,SAAiB,EACjB,UAAmB;IAcnB,MAAM,GAAG,GAAG,IAAA,cAAM,EAAiB,SAAS,CAAC,CAAC;IAC9C,SAAS,kBAAkB;;QACzB,SAAS,2BAA2B;YAClC,IAAI,CAAC,GAAG,CAAC,OAAO,IAAI,UAAU,KAAK,SAAS;gBAAE,OAAO,CAAC,CAAC;YACvD,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,OAAQ,CAAC,YAAY,GAAG,UAAU,CAAC,CAAC;QAC5D,CAAC;QACD,IAAK,MAAc,CAAC,SAAS;YAC3B,OAAO;gBACL,yBAAyB,EAAE,CAAC;gBAC5B,KAAK,EAAE,CAAC;aACT,CAAC;QAEJ,MAAM,KAAK,GAAG,CAAA,MAAA,GAAG,CAAC,OAAO,0CAAE,WAAW,KAAI,MAAM,CAAC,cAAe,CAAC,KAAK,CAAC;QACvE,MAAM,oBAAoB,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC;QAEhE,OAAO;YACL,yBAAyB,EACvB,oBAAoB,GAAG,2BAA2B,EAAE;YACtD,KAAK,EAAE,oBAAoB;SAC5B,CAAC;IACJ,CAAC;IACD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAG3C,MAAc,CAAC,SAAS;QACvB,CAAC,CAAC;YACE,KAAK,EAAE,CAAC;YACR,yBAAyB,EAAE,CAAC;SAC7B;QACH,CAAC,CAAC,SAAS,CACd,CAAC;IACF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,cAAc,CAAC,kBAAkB,EAAE,CAAC,CAAC;QACrC,SAAS,QAAQ;YACf,cAAc,CAAC,kBAAkB,EAAE,CAAC,CAAC;QACvC,CAAC;QACD,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAC5C,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QACjD,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACL,eAAe,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,yBAAyB;QACvD,2BAA2B,EAAE,WAAW;YACtC,CAAC,CAAC,WAAW,CAAC,yBAAyB,GAAG,WAAW,CAAC,KAAK;YAC3D,CAAC,CAAC,SAAS;QACb,UAAU,EAAE,WAAW;YACrB,CAAC,CAAC,WAAW,CAAC,yBAAyB,GAAG,CAAC;YAC3C,CAAC,CAAC,SAAS;QACb,iBAAiB,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,KAAK;QACrC,GAAG;KACJ,CAAC;AACJ,CAAC;AArED,gCAqEC"}

package/dist/hooks/useFirestoreWatch.d.ts

@@ -0,0 +1,12 @@
+import { DocumentChangeType, Unsubscribe } from "firebase/firestore";
+type SnapshotFactoryCb<D extends any> = (changes: {
+    doc: D;
+    type: DocumentChangeType;
+}[]) => void;
+export type SnapshotFactoryReturn<D extends {
+    id: string;
+}> = (cb: SnapshotFactoryCb<D>) => Unsubscribe;
+export default function useFirestoreWatch<D extends {
+    id: string;
+}, P extends any[]>(queryFactory: (...params: P) => SnapshotFactoryReturn<D>, params: P): D[] | undefined;
+export {};

package/dist/hooks/useFirestoreWatch.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+function useFirestoreWatch(queryFactory, params) {
+    const [docsList, updateList] = (0, react_1.useState)();
+    (0, react_1.useEffect)(() => {
+        const unsub = queryFactory(...params)((changes) => {
+            updateList((prevList = []) => {
+                for (let docChange of changes) {
+                    if (docChange.type === undefined) {
+                        const existing = prevList.find((f) => f.id === docChange.doc.id);
+                        if (existing)
+                            docChange.type = "modified";
+                        else
+                            docChange.type = "added";
+                    }
+                    switch (docChange.type) {
+                        case 'added':
+                            if (!prevList.find((f) => f.id === docChange.doc.id)) {
+                                prevList.unshift(docChange.doc);
+                            }
+                            break;
+                        case 'modified':
+                            prevList = prevList.map((item) => {
+                                if (item.id === docChange.doc.id)
+                                    for (let key in docChange.doc) {
+                                        item[key] = docChange.doc[key];
+                                    }
+                                return item;
+                            });
+                            break;
+                        case 'removed':
+                            prevList = prevList.filter((item) => item.id !== docChange.doc.id);
+                            break;
+                    }
+                }
+                return [...prevList];
+            });
+        });
+        return unsub;
+    }, params);
+    return docsList;
+}
+exports.default = useFirestoreWatch;
+//# sourceMappingURL=useFirestoreWatch.js.map

package/dist/hooks/useFirestoreWatch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFirestoreWatch.js","sourceRoot":"","sources":["../../src/hooks/useFirestoreWatch.ts"],"names":[],"mappings":";;AAAA,iCAA4C;AAU5C,SAAwB,iBAAiB,CAA4C,YAAwD,EAAE,MAAS;IACpJ,MAAM,CAAC,QAAQ,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,GAAO,CAAC;IAE/C,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,MAAM,KAAK,GAAG,YAAY,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,OAAO,EAAE,EAAE;YAC9C,UAAU,CAAC,CAAC,QAAQ,GAAG,EAAE,EAAE,EAAE;gBACzB,KAAK,IAAI,SAAS,IAAI,OAAO,EAAE,CAAC;oBAC5B,IAAI,SAAS,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;wBACjC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;wBACjE,IAAI,QAAQ;4BAAE,SAAS,CAAC,IAAI,GAAG,UAAU,CAAA;;4BACpC,SAAS,CAAC,IAAI,GAAG,OAAO,CAAA;oBAC/B,CAAC;oBACD,QAAQ,SAAS,CAAC,IAAI,EAAE,CAAC;wBACrB,KAAK,OAAO;4BACR,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC;gCACnD,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,CAAA;4BACnC,CAAC;4BACD,MAAK;wBACT,KAAK,UAAU;4BACX,QAAQ,GAAG,QAAS,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;gCAC9B,IAAI,IAAI,CAAC,EAAE,KAAK,SAAS,CAAC,GAAG,CAAC,EAAE;oCAC5B,KAAK,IAAI,GAAG,IAAI,SAAS,CAAC,GAAG,EAAE,CAAC;wCAC5B,IAAI,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;oCACnC,CAAC;gCACL,OAAO,IAAI,CAAA;4BACf,CAAC,CAAC,CAAA;4BACF,MAAK;wBACT,KAAK,SAAS;4BACV,QAAQ,GAAG,QAAS,CAAC,MAAM,CACvB,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,SAAS,CAAC,GAAG,CAAC,EAAE,CACzC,CAAA;4BACD,MAAK;oBACb,CAAC;gBACL,CAAC;gBAED,OAAO,CAAC,GAAG,QAAQ,CAAC,CAAA;YACxB,CAAC,CAAC,CAAA;QAEN,CAAC,CAAC,CAAA;QACF,OAAO,KAAK,CAAC;IACjB,CAAC,EAAE,MAAM,CAAC,CAAC;IAEX,OAAO,QAAQ,CAAC;AACpB,CAAC;AA3CD,oCA2CC"}

package/dist/hooks/useFreeze.d.ts

@@ -0,0 +1,5 @@
+/**
+ * This hook pipes a data and when it is set to a falsy value ("", undefined, null, 0),
+ * it returns the previous valid value
+ */
+export default function useFreeze<T>(something: T): T | undefined;

package/dist/hooks/useFreeze.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+/**
+ * This hook pipes a data and when it is set to a falsy value ("", undefined, null, 0),
+ * it returns the previous valid value
+ */
+function useFreeze(something) {
+    const currChildOrPrev = (0, react_1.useRef)(undefined);
+    currChildOrPrev.current =
+        something === undefined ? currChildOrPrev.current : something;
+    return currChildOrPrev.current;
+}
+exports.default = useFreeze;
+//# sourceMappingURL=useFreeze.js.map

package/dist/hooks/useFreeze.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFreeze.js","sourceRoot":"","sources":["../../src/hooks/useFreeze.ts"],"names":[],"mappings":";;AAAA,iCAA+B;AAE/B;;;GAGG;AACH,SAAwB,SAAS,CAAI,SAAY;IAC/C,MAAM,eAAe,GAAG,IAAA,cAAM,EAAI,SAAS,CAAC,CAAC;IAC7C,eAAe,CAAC,OAAO;QACrB,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;IAChE,OAAO,eAAe,CAAC,OAAO,CAAC;AACjC,CAAC;AALD,4BAKC"}

package/dist/hooks/useHero.d.ts

@@ -0,0 +1,68 @@
+import React, { CSSProperties } from "react";
+type ShouldSkip = boolean;
+type Result = [
+    originContainer: Element | VisualViewport,
+    targetContainer: Element | VisualViewport
+];
+/**
+ * This hook implements the logic for a hero animation between 2 elements sharing the same id
+ */
+export default function useHero(id: string, options?: Partial<{
+    propsToTransition: Exclude<keyof CSSProperties, "width" | "height" | "top" | "left">[];
+    /** If set, the default properties (width, height, etc...) will not transition, and propsToTransition will be the only ones that will be transitioned */
+    overridePropsToTransition: boolean;
+    "data-preffix": string;
+    /** This indicates this hero animation will probably be repeated multiple time */
+    repeatable: boolean;
+}>, events?: {
+    /**
+     * Should return if the detected element should be "heroed"
+     *
+     * Usefull for when the hero has 2 possible origins.
+     * For example, one could hero only the current hovered element with el.matches(":hover")
+     */
+    onHeroDetect?: (origin: HTMLDivElement, target: HTMLDivElement) => boolean;
+    /**
+     * Do something when the hero ends
+     *
+     * Usefull for triggering secondary animations
+     */
+    onHeroEnd?: () => void;
+    /** Do somethign with the clone before it goes to the html */
+    onHeroCloned?: (clone: HTMLDivElement) => void;
+    /**
+     * Do something when the hero starts the transition
+     * Here it's usefull to switch classNames with the target.
+     *
+     * If done correctly, it will transition from state a to b smoothly
+     */
+    onHeroStart?: (clone: HTMLDivElement, origin: HTMLDivElement, target: HTMLDivElement) => void;
+    /**
+     * Is called when the hero is coming/going outside the viewport
+     *
+     * By default it's set to skip all heroes that have these conditions
+     *
+     * @returns If the hero should be skipped or not
+     */
+    onHeroSkip?: (origin: HTMLDivElement, target: HTMLDivElement) => ShouldSkip;
+    /**
+     * Called when a hero is skipped
+     */
+    onHeroSkipped?: () => void;
+    /**
+     * Before transition start, setup the properties that will be used for hero animation
+     * @returns The container that will be used to check if the hero is out or in the view
+     */
+    onBeforeTransition?: (origin: HTMLDivElement, target: HTMLDivElement) => Result | Readonly<Result>;
+}): {
+    heroRef: React.RefObject<HTMLDivElement | null>;
+    getHerosOnScreen: () => HTMLDivElement[];
+    trigger: () => void;
+    heroComponentRef: (componentId: string) => (elRef: HTMLDivElement | null) => void;
+};
+type EVENTS_INTERFACE = Parameters<typeof useHero>[2];
+type TRANSITION_TYPES = "ACCELERATION";
+export declare const TRANSITION_FACTORY: {
+    [n in TRANSITION_TYPES]: (events?: EVENTS_INTERFACE) => EVENTS_INTERFACE;
+};
+export {};

package/dist/hooks/useHero.js

@@ -0,0 +1,295 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TRANSITION_FACTORY = void 0;
+const react_1 = require("react");
+const ownEvent_1 = __importDefault(require("../utils/ownEvent"));
+const useHero_module_scss_1 = __importDefault(require("./useHero.module.scss"));
+const ID = (id) => `${id}-hero`;
+const viewport = window.visualViewport;
+const DATA_TAG_HERO_COMPONENT = "data-hero-component";
+function triggerDynamicComponents(clone, componentsFromOriginThatWillAppear, origin) {
+    const idsThatWillAppear = componentsFromOriginThatWillAppear.map((a) => a.getAttribute(DATA_TAG_HERO_COMPONENT));
+    const preexistingComponents = Array.from(clone.querySelectorAll(`[${DATA_TAG_HERO_COMPONENT}]`));
+    const removedElements = preexistingComponents.filter((el) => !idsThatWillAppear.includes(el.getAttribute(DATA_TAG_HERO_COMPONENT)));
+    for (let elementThatIsBeingRemoved of removedElements) {
+        for (let heightKey of ["height", "minHeight", "maxHeight"])
+            elementThatIsBeingRemoved.style[heightKey] = `${elementThatIsBeingRemoved.clientHeight}px`;
+    }
+    setTimeout(() => {
+        for (let elementThatIsBeingRemoved of removedElements) {
+            for (let heightKey of ["height", "minHeight", "maxHeight"])
+                elementThatIsBeingRemoved.style[heightKey] = `0px`;
+            elementThatIsBeingRemoved.style.opacity = `0`;
+        }
+    }, 0);
+    for (let componentThatWillAppear of componentsFromOriginThatWillAppear) {
+        const alreadyInjectedElement = !!clone.querySelector(`[${DATA_TAG_HERO_COMPONENT}="${componentThatWillAppear.getAttribute(DATA_TAG_HERO_COMPONENT)}"]`);
+        if (!alreadyInjectedElement) {
+            function recursiveBuildPath(fromElement, pathSuffix = "") {
+                if (fromElement === origin)
+                    return pathSuffix;
+                const parent = fromElement.parentElement;
+                const parentChilds = Array.from(parent.children);
+                const elChildSelector = `:nth-child(${parentChilds.indexOf(fromElement) + 1})`;
+                if (fromElement !== origin)
+                    return recursiveBuildPath(parent, `${elChildSelector}${pathSuffix ? `>${pathSuffix}` : ""}`);
+                else
+                    return pathSuffix;
+            }
+            const whatIsTheElementPathFromCloneElement = recursiveBuildPath(componentThatWillAppear.parentElement);
+            const insertAtIndex = Array.from(componentThatWillAppear.parentElement.children).indexOf(componentThatWillAppear);
+            const targetElementClone = componentThatWillAppear.cloneNode(true);
+            for (let heightKey of ["height", "minHeight", "maxHeight"])
+                targetElementClone.style[heightKey] = "0px";
+            const shouldBeInsertedAtElement = whatIsTheElementPathFromCloneElement
+                ? clone.querySelector(whatIsTheElementPathFromCloneElement)
+                : clone;
+            const remainingIndexes = Array.from(shouldBeInsertedAtElement.children)
+                .map((el, i) => removedElements.includes(el) ? undefined : i)
+                .filter((e) => e !== undefined);
+            if (insertAtIndex === remainingIndexes.length)
+                shouldBeInsertedAtElement.append(targetElementClone);
+            else
+                shouldBeInsertedAtElement.insertBefore(targetElementClone, shouldBeInsertedAtElement.childNodes.item(remainingIndexes[insertAtIndex]));
+            setTimeout(() => {
+                for (let heightKey of ["height", "minHeight", "maxHeight"])
+                    targetElementClone.style[heightKey] = `${componentThatWillAppear.clientHeight}px`;
+            }, 0);
+        }
+    }
+}
+const ALWAYS_TRANSITION = ["top", "left"];
+/**
+ * This hook implements the logic for a hero animation between 2 elements sharing the same id
+ */
+function useHero(id, options = {
+    propsToTransition: [],
+}, events = {}) {
+    const { propsToTransition: _p = [], "data-preffix": dataPreffix, repeatable, } = options;
+    const propsToTransition = (0, react_1.useMemo)(() => _p.map((p) => p.replace(/([A-Z])/g, (_, val) => `-${val.toLowerCase()}`)), [_p]);
+    const _dataPreffix = dataPreffix ? `-${dataPreffix}` : "";
+    const dataProperty = `data${_dataPreffix}-hero`;
+    const heroRef = (0, react_1.useRef)(null);
+    (0, react_1.useLayoutEffect)(() => {
+        heroRef.current.setAttribute(dataProperty, id);
+    }, [id]);
+    const getHerosOnScreen = (0, react_1.useCallback)(() => {
+        const otherElements = Array.from(document.querySelectorAll(`[${dataProperty}="${id}"]`)).filter((el) => el !== heroRef.current);
+        return otherElements;
+    }, [id]);
+    function triggerHeroAnimation() {
+        var _a, _b;
+        const allPropsToTransition = options.overridePropsToTransition
+            ? [...ALWAYS_TRANSITION, ...propsToTransition]
+            : ["width", "height", ...ALWAYS_TRANSITION, ...propsToTransition];
+        const shouldHeroFn = events.onHeroDetect || ((...a) => true);
+        const otherElements = getHerosOnScreen().filter((el) => shouldHeroFn(el, heroRef.current));
+        const currentElement = heroRef.current;
+        const currentElCoordinates = currentElement.getBoundingClientRect();
+        if (process.env.NODE_ENV === "development" && otherElements.length > 2)
+            console.warn("There are too many elements to transition to, I will transition to the first I find", otherElements);
+        const otherElement = otherElements.find((el) => el !== heroRef.current);
+        if (otherElement) {
+            const [originContainer, targetContainer] = events.onBeforeTransition
+                ? events.onBeforeTransition(otherElement, heroRef.current)
+                : [viewport, viewport];
+            const shouldSkip = isElementOutsideContainer(targetContainer, currentElCoordinates) ||
+                isElementOutsideContainer(originContainer, otherElement.getBoundingClientRect())
+                ? (events.onHeroSkip || (() => true))(otherElement, heroRef.current)
+                : false;
+            if (shouldSkip) {
+                (_a = events.onHeroSkipped) === null || _a === void 0 ? void 0 : _a.call(events);
+                return;
+            }
+            const oldClone = document.querySelector(`[${dataProperty}-clone="${ID(id)}"]`);
+            const clone = (oldClone ||
+                otherElement.cloneNode(true));
+            if (events.onHeroCloned && !oldClone)
+                events.onHeroCloned(clone);
+            // Clean up thos properties that can cause confusion since it's a clone
+            clone.style.visibility = "";
+            clone.removeAttribute(dataProperty);
+            clone.setAttribute(`${dataProperty}-clone`, ID(id));
+            /**
+             * If it's repeatable, we should keep the flag that indicates the hero existance
+             */
+            if (!repeatable)
+                // Since a transition is now triggering from the old element, he cannot be considered for other transitions
+                otherElement.removeAttribute(dataProperty);
+            function willTheHeroMove(origin, target) {
+                const willItMove = !(Math.trunc(origin.top) === Math.trunc(target.top) &&
+                    Math.trunc(origin.left) === Math.trunc(target.left) &&
+                    Math.trunc(origin.width) === Math.trunc(target.width) &&
+                    Math.trunc(origin.height) === Math.trunc(target.height));
+                return willItMove;
+            }
+            /**
+             *
+             * @param el
+             * @returns Returns if it will move
+             */
+            function setCloneToCoordinatesOf(el) {
+                const coordinates = el.getBoundingClientRect();
+                const currentCoordinates = clone.getBoundingClientRect();
+                const willMove = willTheHeroMove(coordinates, currentCoordinates);
+                clone.style.position = "fixed";
+                clone.style.top = `${coordinates.top}px`;
+                clone.style.left = `${coordinates.left}px`;
+                if (allPropsToTransition.includes("width"))
+                    clone.style.width = `${coordinates.width}px`;
+                if (allPropsToTransition.includes("height"))
+                    clone.style.height = `${coordinates.height}px`;
+                return willMove;
+            }
+            const coordinates = otherElement.getBoundingClientRect();
+            const currentCoordinates = heroRef.current.getBoundingClientRect();
+            const itWontMove = !willTheHeroMove(coordinates, currentCoordinates);
+            if (itWontMove) {
+                (_b = events.onHeroEnd) === null || _b === void 0 ? void 0 : _b.call(events);
+                return;
+            }
+            if (!oldClone) {
+                /** Set the clone over the starting element */
+                setCloneToCoordinatesOf(otherElement);
+                document.body.appendChild(clone);
+            }
+            heroRef.current.style.visibility = "hidden";
+            otherElement.style.visibility = "hidden";
+            for (let propToTransition of propsToTransition) {
+                clone.style[propToTransition] =
+                    window.getComputedStyle(otherElement)[propToTransition];
+            }
+            clone.style.transition = `${allPropsToTransition
+                .map((prop) => `${prop.replace(/[A-Z]/g, (sub) => `-${sub.toLowerCase()}`)} var(--animation--speed-fast, 250ms) ease-out`)
+                .join(", ")}`;
+            setTimeout(() => {
+                const elItWillTransitionTo = heroRef.current;
+                const cleanup = () => {
+                    if (events.onHeroEnd)
+                        events.onHeroEnd();
+                    if (elItWillTransitionTo) {
+                        if (repeatable)
+                            elItWillTransitionTo.setAttribute(dataProperty, id);
+                        elItWillTransitionTo.style.visibility = "";
+                    }
+                    setTimeout(() => {
+                        clone.remove();
+                    }, 0);
+                };
+                triggerDynamicComponents(clone, Array.from(heroRef.current.querySelectorAll(`[${DATA_TAG_HERO_COMPONENT}]`)), currentElement);
+                if (events.onHeroStart) {
+                    events.onHeroStart(clone, otherElement, heroRef.current);
+                }
+                if (!elItWillTransitionTo) {
+                    cleanup();
+                    return;
+                }
+                /** Set the clone over the new position */
+                const willMove = setCloneToCoordinatesOf(elItWillTransitionTo);
+                if (!willMove)
+                    cleanup();
+                else {
+                    for (let propToTransition of propsToTransition)
+                        clone.style[propToTransition] =
+                            window.getComputedStyle(elItWillTransitionTo)[propToTransition];
+                    let initialOffset;
+                    const s = ({ target }) => {
+                        const d = target;
+                        if (d.contains(elItWillTransitionTo)) {
+                            if (initialOffset === undefined)
+                                initialOffset = d.scrollTop;
+                            else
+                                clone.style.marginTop = `${-(d.scrollTop - initialOffset)}px`;
+                        }
+                    };
+                    const transitionEndCb = (0, ownEvent_1.default)(({ target, currentTarget }) => {
+                        if (target === currentTarget)
+                            cleanup();
+                        document.removeEventListener("scroll", s, true);
+                    });
+                    document.addEventListener("scroll", s, true);
+                    clone.addEventListener("transitionend", transitionEndCb);
+                    clone.addEventListener("transitionstart", () => {
+                        const onCancelCb = (0, ownEvent_1.default)((e) => {
+                            clone.removeEventListener("transitionend", transitionEndCb);
+                            clone.removeEventListener("transitioncancel", onCancelCb);
+                        });
+                        clone.addEventListener("transitioncancel", onCancelCb);
+                    });
+                }
+            }, 0);
+        }
+    }
+    (0, react_1.useEffect)(() => {
+        triggerHeroAnimation();
+    }, []);
+    return {
+        heroRef,
+        getHerosOnScreen,
+        trigger: triggerHeroAnimation,
+        heroComponentRef: (componentId) => (elRef) => {
+            if (elRef) {
+                elRef.setAttribute(DATA_TAG_HERO_COMPONENT, componentId);
+                elRef.classList.add(useHero_module_scss_1.default.component);
+            }
+        },
+    };
+}
+exports.default = useHero;
+function isElementOutsideViewport(coordinates) {
+    const elementOverflowsViewport = coordinates.left >= viewport.width || coordinates.top >= viewport.height;
+    const elementUnderflowsViewport = coordinates.left <= -coordinates.width ||
+        coordinates.top <= -coordinates.height;
+    return elementOverflowsViewport || elementUnderflowsViewport;
+}
+function isElementOutsideContainer(container, coordinates) {
+    if (container instanceof VisualViewport) {
+        return isElementOutsideViewport(coordinates);
+    }
+    else {
+        const containerBounds = container.getBoundingClientRect();
+        const isContainerOutsideViewport = isElementOutsideViewport(containerBounds);
+        if (isContainerOutsideViewport)
+            return true;
+        const elementOverflowsViewport = coordinates.left >= containerBounds.left + containerBounds.width ||
+            coordinates.top >= containerBounds.top + containerBounds.height;
+        const elementUnderflowsViewport = containerBounds.left - coordinates.left >= coordinates.width ||
+            containerBounds.top - coordinates.top >= coordinates.height;
+        return elementUnderflowsViewport || elementOverflowsViewport;
+    }
+}
+function centerPoint(rect) {
+    return [rect.left + rect.width / 2, rect.top + rect.height / 2];
+}
+const angle = (pointA, pointB) => Number((Math.atan2(pointA[1] - pointB[1], pointA[0] - pointB[0]) *
+    (179.08 / Math.PI)).toFixed(5));
+exports.TRANSITION_FACTORY = {
+    ACCELERATION: (events) => (Object.assign(Object.assign({}, events), { onHeroStart(clone, origin, target) {
+            if (events === null || events === void 0 ? void 0 : events.onHeroStart)
+                events.onHeroStart(clone, origin, target);
+            clone.classList.add(useHero_module_scss_1.default.acceleration);
+            const centerPointOrigin = centerPoint(origin.getBoundingClientRect());
+            const centerPointDestination = centerPoint(target.getBoundingClientRect());
+            const angleBetweenElements = angle(centerPointOrigin, centerPointDestination);
+            const vectorX = Math.sin(angleBetweenElements);
+            const vectorY = Math.cos(angleBetweenElements);
+            const rotateY = (10 * vectorY).toFixed(0);
+            const originX = (vectorY + 1) * 50;
+            const rotateX = -(10 * vectorX).toFixed(0);
+            const originY = (vectorX + 1) * 50;
+            clone.style.setProperty("--stage-1", `rotateY(${rotateY}deg) rotateX(${-rotateX}deg)`);
+            clone.style.setProperty("--stage-2", `rotateY(${-rotateY * 0.3}deg) rotateX(${rotateX * 0.3}deg)`);
+            clone.style.setProperty("--origin-1", `${originX}% ${originY}%`);
+            clone.style.setProperty("--origin-2", `${100 - originX}% ${100 - originY}%`);
+            document.body.style.perspective = "100vw";
+        },
+        onHeroEnd() {
+            if (events === null || events === void 0 ? void 0 : events.onHeroEnd)
+                events.onHeroEnd();
+            document.body.style.perspective = "";
+        } })),
+};
+//# sourceMappingURL=useHero.js.map

package/dist/hooks/useHero.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHero.js","sourceRoot":"","sources":["../../src/hooks/useHero.ts"],"names":[],"mappings":"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"}

package/dist/hooks/useHero.module.scss

@@ -0,0 +1,41 @@
+@use "../assets/styles/index.scss" as *;
+
+$timing: cubic-bezier(0.5, -0.45, 0.44, 1.37);
+// $timing: cubic-bezier(0.73, -0.49, 0.16, 1.4);
+
+.acceleration {
+  --animation--speed-fast: 1s;
+  animation-name: acceleration;
+  animation-duration: var(--animation--speed-fast);
+  animation-timing-function: $timing;
+  transition-timing-function: $timing !important;
+  transform-origin: var(--origin-1);
+}
+
+@keyframes acceleration {
+  0% {
+    transform: rotateY(0deg);
+  }
+  10% {
+    transform-origin: var(--origin-1);
+    transform: var(--stage-1);
+  }
+
+  70% {
+    transform: var(--stage-1);
+    transform-origin: var(--origin-1);
+  }
+  85% {
+    transform-origin: var(--origin-2);
+    transform: var(--stage-2);
+  }
+  100% {
+    transform: rotateY(0deg);
+  }
+}
+
+.component:not([data-hero-clone]) {
+  transition: height $fast linear, opacity $fast linear, min-height $fast linear,
+    max-height $fast linear !important;
+  overflow: hidden;
+}

package/dist/hooks/useIntersection.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A hook that helps you watch when HTML or SVG elements appear on the screen.
+ * It lets you run code automatically when an element becomes visible to the user.
+ */
+export default function useIntersection(): {
+    observe: (e: HTMLOrSVGElement, cb: () => void) => void;
+    unobserve: (e: HTMLOrSVGElement) => void;
+};

package/dist/hooks/useIntersection.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+/**
+ * A hook that helps you watch when HTML or SVG elements appear on the screen.
+ * It lets you run code automatically when an element becomes visible to the user.
+ */
+function useIntersection() {
+    const { current: targetMap } = (0, react_1.useRef)([]);
+    const { current: observer } = (0, react_1.useRef)(("IntersectionObserver" in window) ? new IntersectionObserver((els) => {
+        els.forEach((e, i) => {
+            const result = targetMap.find((el) => el[0] === e.target);
+            if (result && e.isIntersecting) {
+                result[1]();
+            }
+        });
+    }) : null);
+    return (0, react_1.useMemo)(() => {
+        return {
+            observe: (e, cb) => {
+                targetMap.push([e, cb]);
+                if (observer)
+                    observer.observe(e);
+            },
+            unobserve: (e) => {
+                if (observer)
+                    observer.unobserve(e);
+                targetMap.splice(targetMap.findIndex((el) => el[0] === e), 1);
+            },
+        };
+    }, []);
+}
+exports.default = useIntersection;
+//# sourceMappingURL=useIntersection.js.map

package/dist/hooks/useIntersection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIntersection.js","sourceRoot":"","sources":["../../src/hooks/useIntersection.ts"],"names":[],"mappings":";;AAAA,iCAAwC;AAExC;;;GAGG;AACH,SAAwB,eAAe;IACrC,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAAmC,EAAE,CAAC,CAAC;IAC5E,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,IAAA,cAAM,EAClC,CAAC,sBAAsB,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,oBAAoB,CAAC,CAAC,GAAG,EAAE,EAAE;QACpE,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YACnB,MAAM,MAAM,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,MAAa,CAAC,CAAC;YACjE,IAAI,MAAM,IAAI,CAAC,CAAC,cAAc,EAAE,CAAC;gBAC/B,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;YACd,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CACV,CAAC;IACF,OAAO,IAAA,eAAO,EAAC,GAAG,EAAE;QAClB,OAAO;YACL,OAAO,EAAE,CAAC,CAAmB,EAAE,EAAc,EAAE,EAAE;gBAC/C,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;gBACxB,IAAI,QAAQ;oBACZ,QAAQ,CAAC,OAAO,CAAC,CAAQ,CAAC,CAAC;YAC7B,CAAC;YACD,SAAS,EAAE,CAAC,CAAmB,EAAE,EAAE;gBACjC,IAAI,QAAQ;oBACZ,QAAQ,CAAC,SAAS,CAAC,CAAQ,CAAC,CAAC;gBAC7B,SAAS,CAAC,MAAM,CACd,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EACxC,CAAC,CACF,CAAC;YACJ,CAAC;SACF,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC;AA7BD,kCA6BC"}

package/dist/hooks/useMergeRefs.d.ts

@@ -0,0 +1,9 @@
+import { useRef } from "react";
+/**
+ * This hook combines multiple refs into one so they all point to the same element
+ */
+export default function useMergeRefs<T extends ReturnType<typeof useRef>>(mainRef: T, ...otherRefs: (T | undefined)[]): T;
+/**
+ * This function exists so we can work with multiple refs as a single one, almost immediatly
+ */
+export declare function useMergeRefsFunc<T extends ReturnType<typeof useRef> | ((ref: any) => void)>(mainRef: T, ...otherRefs: T[]): (providedRef: any) => void;