@onepercentio/one-ui 1.3.3 → 1.3.5

package/dist/components/Transition/MasksFactory/DiagonalSquareToBalls.js

@@ -0,0 +1,56 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const server_1 = require("react-dom/server");
+const utils_1 = __importStar(require("./utils"));
+/**
+ * Creates an svg that transitions from a square grid to rounded corners and them shrinks the balls to reveal the content
+ * @param amountOfVerticalSquares The amount of squares vertically to be shown
+ */
+function DiagonalSquareToBalls(amountOfVerticalSquares = 10) {
+    return function (el) {
+        const height = el.clientHeight;
+        const width = el.clientWidth;
+        const _ballsize = height / amountOfVerticalSquares;
+        const maximumBalls = width / _ballsize;
+        const amountOfBalls = Math.floor(maximumBalls);
+        const _time = (0, utils_1.getTime)(el);
+        const rndTime = () => _time * 0.25 + _time * 0.75 * 1;
+        const resultSvg = (0, server_1.renderToString)((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", id: Date.now().toString(), children: (0, utils_1.default)(amountOfVerticalSquares, amountOfBalls, _ballsize).map(({ ballSize: _ballsize, x: _x, y: _y, column, row }) => {
+                const ratio = (column / amountOfBalls) * (row / amountOfVerticalSquares);
+                const fourthTime = rndTime() * 0.25;
+                const time = fourthTime + ratio * (fourthTime * 3);
+                const padding = 1 * _ballsize;
+                const ballsize = _ballsize - padding;
+                const x = _x + padding / 2;
+                const y = _y + padding / 2;
+                return ((0, jsx_runtime_1.jsxs)("rect", { fill: "white", rx: `${ballsize}px`, children: [(0, jsx_runtime_1.jsx)("animate", { attributeName: "rx", attributeType: "XML", values: `${0}px;${0}px;${_ballsize}px`, dur: `${time / 2}ms` }), (0, jsx_runtime_1.jsx)("animate", { attributeName: "x", attributeType: "XML", values: `${_x}px;${x}px;${x + ballsize / 2}px`, dur: `${time}ms` }), (0, jsx_runtime_1.jsx)("animate", { attributeName: "y", attributeType: "XML", values: `${_y}px;${y}px;${y + ballsize / 2}px`, dur: `${time}ms` }), (0, jsx_runtime_1.jsx)("animate", { attributeName: "width", attributeType: "XML", values: `${_ballsize}px;${ballsize}px;${0}px`, dur: `${time}ms` }), (0, jsx_runtime_1.jsx)("animate", { attributeName: "height", attributeType: "XML", values: `${_ballsize}px;${ballsize}px;${0}px`, dur: `${time}ms` })] }));
+            }) }));
+        return `url('data:image/svg+xml;charset=utf8,${encodeURIComponent(resultSvg)}')`;
+    };
+}
+exports.default = DiagonalSquareToBalls;
+//# sourceMappingURL=DiagonalSquareToBalls.js.map

package/dist/components/Transition/MasksFactory/DiagonalSquareToBalls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiagonalSquareToBalls.js","sourceRoot":"","sources":["../../../../src/components/Transition/MasksFactory/DiagonalSquareToBalls.tsx"],"names":[],"mappings":"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"}

package/dist/components/Transition/MasksFactory/PhysicsSquares.d.ts

@@ -0,0 +1,7 @@
+/**
+ * DO NOT DARE TO USE THIS IF YOU HAVE A MINIMAL RESPECT FOR PERFORMANCE
+ *
+ * Creates an svg that transitions from a square grid to rounded corners and them shrinks the balls to reveal the content
+ * @param amountOfVerticalSquares The amount of squares vertically to be shown
+ */
+export default function PhysicsSquares(amountOfVerticalSquares?: number): (el: HTMLDivElement) => string;

package/dist/components/Transition/MasksFactory/PhysicsSquares.js

@@ -0,0 +1,86 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const matter_js_1 = __importDefault(require("matter-js"));
+const utils_1 = __importDefault(require("./utils"));
+/**
+ * DO NOT DARE TO USE THIS IF YOU HAVE A MINIMAL RESPECT FOR PERFORMANCE
+ *
+ * Creates an svg that transitions from a square grid to rounded corners and them shrinks the balls to reveal the content
+ * @param amountOfVerticalSquares The amount of squares vertically to be shown
+ */
+function PhysicsSquares(amountOfVerticalSquares = 10) {
+    return function (el) {
+        const height = el.clientHeight;
+        const width = el.clientWidth;
+        const _ballsize = height / amountOfVerticalSquares;
+        const maximumBalls = width / _ballsize;
+        const amountOfBalls = Math.floor(maximumBalls);
+        const gridData = (0, utils_1.default)(amountOfVerticalSquares, amountOfBalls, _ballsize);
+        const _time = getComputedStyle(el).getPropertyValue("--animation-speed-transition");
+        const time = _time.endsWith("ms")
+            ? Number(_time.replace("ms", ""))
+            : Number(_time.replace("s", "")) * 1000;
+        const canvas = document.createElement("canvas");
+        canvas.width = el.clientWidth / 10;
+        canvas.height = el.clientHeight / 10;
+        // module aliases
+        var Engine = matter_js_1.default.Engine, Render = matter_js_1.default.Render, Runner = matter_js_1.default.Runner, Bodies = matter_js_1.default.Bodies, Composite = matter_js_1.default.Composite;
+        // create an engine
+        var engine = Engine.create();
+        // create a renderer
+        var render = Render.create({
+            engine: engine,
+            options: {
+                wireframes: false,
+                background: "black",
+                height: el.clientHeight,
+                width: el.clientWidth,
+            },
+            canvas: canvas,
+            bounds: {
+                min: {
+                    x: 0,
+                    y: 0,
+                },
+                max: {
+                    x: el.clientWidth,
+                    y: el.clientHeight,
+                },
+            },
+        });
+        var ground = Bodies.rectangle(0, el.clientHeight, el.clientWidth * 2, 10, {
+            render: {
+                fillStyle: "black",
+            },
+            angle: 0.1,
+            isStatic: true,
+        });
+        const gridBodies = gridData.map((a) => Bodies.circle(a.x + a.ballSize / 2 + (Math.random() * a.ballSize) / 2, a.y + a.ballSize / 2 + (Math.random() * a.ballSize) / 2, a.ballSize / 4 + (Math.random() * a.ballSize) / 4, {
+            density: 0.1,
+            render: {
+                fillStyle: "black",
+            },
+        }));
+        // add all of the bodies to the world
+        Composite.add(engine.world, [...gridBodies, ground]);
+        // run the renderer
+        Render.run(render);
+        // create runner
+        var runner = Runner.create();
+        // run the engine
+        Runner.run(runner, engine);
+        const i = setInterval(() => {
+            el.firstElementChild.style.webkitMaskImage = `url('${canvas.toDataURL("base64")}')`;
+        }, 1000 / 60);
+        setTimeout(() => {
+            clearInterval(i);
+            Runner.stop(runner);
+        }, time);
+        return ``;
+    };
+}
+exports.default = PhysicsSquares;
+//# sourceMappingURL=PhysicsSquares.js.map

package/dist/components/Transition/MasksFactory/PhysicsSquares.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhysicsSquares.js","sourceRoot":"","sources":["../../../../src/components/Transition/MasksFactory/PhysicsSquares.tsx"],"names":[],"mappings":"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"}

package/dist/components/Transition/MasksFactory/SquareToBalls.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Creates an svg that transitions from a square grid to rounded corners and them shrinks the balls to reveal the content
+ * @param amountOfVerticalSquares The amount of squares vertically to be shown
+ */
+export default function (amountOfVerticalSquares?: number): (el: HTMLDivElement) => string;

package/dist/components/Transition/MasksFactory/SquareToBalls.js

@@ -0,0 +1,48 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const server_1 = require("react-dom/server");
+const utils_1 = __importStar(require("./utils"));
+/**
+ * Creates an svg that transitions from a square grid to rounded corners and them shrinks the balls to reveal the content
+ * @param amountOfVerticalSquares The amount of squares vertically to be shown
+ */
+function default_1(amountOfVerticalSquares = 10) {
+    return function (el) {
+        const height = el.clientHeight;
+        const width = el.clientWidth;
+        const _ballsize = height / amountOfVerticalSquares;
+        const maximumBalls = width / _ballsize;
+        const amountOfBalls = Math.floor(maximumBalls);
+        const time = (0, utils_1.getTime)(el);
+        const resultSvg = (0, server_1.renderToString)((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", id: Date.now().toString(), children: (0, utils_1.default)(amountOfVerticalSquares, amountOfBalls, _ballsize).map(({ ballSize, x, y }) => {
+                return ((0, jsx_runtime_1.jsxs)("rect", { fill: "white", children: [(0, jsx_runtime_1.jsx)("animate", { attributeName: "rx", attributeType: "XML", values: `${0}px;${ballSize / 2}px;${ballSize / 2}px`, dur: `${time}ms` }), (0, jsx_runtime_1.jsx)("animate", { attributeName: "x", attributeType: "XML", values: `${x}px;${x}px;${x + ballSize / 2}px`, dur: `${time}ms` }), (0, jsx_runtime_1.jsx)("animate", { attributeName: "y", attributeType: "XML", values: `${y}px;${y}px;${y + ballSize / 2}px`, dur: `${time}ms` }), (0, jsx_runtime_1.jsx)("animate", { attributeName: "width", attributeType: "XML", values: `${ballSize}px;${ballSize}px;${0}px`, dur: `${time}ms` }), (0, jsx_runtime_1.jsx)("animate", { attributeName: "height", attributeType: "XML", values: `${ballSize}px;${ballSize}px;${0}px`, dur: `${time}ms` })] }));
+            }) }));
+        return `url('data:image/svg+xml;charset=utf8,${encodeURIComponent(resultSvg)}')`;
+    };
+}
+exports.default = default_1;
+//# sourceMappingURL=SquareToBalls.js.map

package/dist/components/Transition/MasksFactory/SquareToBalls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SquareToBalls.js","sourceRoot":"","sources":["../../../../src/components/Transition/MasksFactory/SquareToBalls.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAkD;AAElD,iDAA6C;AAE7C;;;GAGG;AACH,mBAAyB,0BAAkC,EAAE;IAC3D,OAAO,UAAU,EAAkB;QACjC,MAAM,MAAM,GAAG,EAAE,CAAC,YAAY,CAAC;QAC/B,MAAM,KAAK,GAAG,EAAE,CAAC,WAAW,CAAC;QAC7B,MAAM,SAAS,GAAG,MAAM,GAAG,uBAAuB,CAAC;QACnD,MAAM,YAAY,GAAG,KAAK,GAAG,SAAS,CAAC;QACvC,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;QAE/C,MAAM,IAAI,GAAG,IAAA,eAAO,EAAC,EAAE,CAAC,CAAC;QAEzB,MAAM,SAAS,GAAG,IAAA,uBAAc,EAC9B,gCAAK,KAAK,EAAC,4BAA4B,EAAC,EAAE,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,YAC9D,IAAA,eAAS,EAAC,uBAAuB,EAAE,aAAa,EAAE,SAAS,CAAC,CAAC,GAAG,CAC/D,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE;gBACrB,OAAO,CACL,kCAAM,IAAI,EAAC,OAAO,aAChB,oCACE,aAAa,EAAC,IAAI,EAClB,aAAa,EAAC,KAAK,EACnB,MAAM,EAAE,GAAG,CAAC,MAAM,QAAQ,GAAG,CAAC,MAAM,QAAQ,GAAG,CAAC,IAAI,EACpD,GAAG,EAAE,GAAG,IAAI,IAAI,GAChB,EACF,oCACE,aAAa,EAAC,GAAG,EACjB,aAAa,EAAC,KAAK,EACnB,MAAM,EAAE,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,QAAQ,GAAG,CAAC,IAAI,EAC7C,GAAG,EAAE,GAAG,IAAI,IAAI,GAChB,EACF,oCACE,aAAa,EAAC,GAAG,EACjB,aAAa,EAAC,KAAK,EACnB,MAAM,EAAE,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,QAAQ,GAAG,CAAC,IAAI,EAC7C,GAAG,EAAE,GAAG,IAAI,IAAI,GAChB,EACF,oCACE,aAAa,EAAC,OAAO,EACrB,aAAa,EAAC,KAAK,EACnB,MAAM,EAAE,GAAG,QAAQ,MAAM,QAAQ,MAAM,CAAC,IAAI,EAC5C,GAAG,EAAE,GAAG,IAAI,IAAI,GAChB,EACF,oCACE,aAAa,EAAC,QAAQ,EACtB,aAAa,EAAC,KAAK,EACnB,MAAM,EAAE,GAAG,QAAQ,MAAM,QAAQ,MAAM,CAAC,IAAI,EAC5C,GAAG,EAAE,GAAG,IAAI,IAAI,GAChB,IACG,CACR,CAAC;YACJ,CAAC,CACF,GACG,CACP,CAAC;QAEF,OAAO,wCAAwC,kBAAkB,CAC/D,SAAS,CACV,IAAI,CAAC;IACR,CAAC,CAAC;AACJ,CAAC;AAzDD,4BAyDC"}

package/dist/components/Transition/MasksFactory/utils.d.ts

@@ -0,0 +1,8 @@
+export default function buildGrid(amountOfVerticalSquares: number, howManyHorizontalSquare: number, ballSize: number): {
+    x: number;
+    y: number;
+    ballSize: number;
+    column: number;
+    row: number;
+}[];
+export declare function getTime(el: HTMLDivElement): number;

package/dist/components/Transition/MasksFactory/utils.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTime = void 0;
+function buildGrid(amountOfVerticalSquares, howManyHorizontalSquare, ballSize) {
+    return new Array(howManyHorizontalSquare * amountOfVerticalSquares)
+        .fill(undefined)
+        .map((_, i) => {
+        const modX = Math.floor(i / howManyHorizontalSquare);
+        const modY = i - modX * howManyHorizontalSquare;
+        const ballsize = ballSize * 1.1;
+        const padding = (ballsize - ballSize) / 2;
+        const x = modY * ballSize - padding;
+        const y = modX * ballSize - padding;
+        return {
+            x,
+            y,
+            ballSize,
+            column: modY,
+            row: modX,
+        };
+    });
+}
+exports.default = buildGrid;
+function getTime(el) {
+    const _time = getComputedStyle(el.firstElementChild).getPropertyValue("--animation-speed-transition") || "250ms";
+    const __time = _time.endsWith("ms")
+        ? Number(_time.replace("ms", ""))
+        : Number(_time.replace("s", "")) * 1000;
+    return __time + 50;
+}
+exports.getTime = getTime;
+//# sourceMappingURL=utils.js.map

package/dist/components/Transition/MasksFactory/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/components/Transition/MasksFactory/utils.ts"],"names":[],"mappings":";;;AAAA,SAAwB,SAAS,CAC/B,uBAA+B,EAC/B,uBAA+B,EAC/B,QAAgB;IAEhB,OAAO,IAAI,KAAK,CAAC,uBAAuB,GAAG,uBAAuB,CAAC;SAChE,IAAI,CAAC,SAAS,CAAC;SACf,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QACZ,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,uBAAuB,CAAC,CAAC;QACrD,MAAM,IAAI,GAAG,CAAC,GAAG,IAAI,GAAG,uBAAuB,CAAC;QAChD,MAAM,QAAQ,GAAG,QAAQ,GAAG,GAAG,CAAC;QAChC,MAAM,OAAO,GAAG,CAAC,QAAQ,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;QAC1C,MAAM,CAAC,GAAG,IAAI,GAAG,QAAQ,GAAG,OAAO,CAAC;QACpC,MAAM,CAAC,GAAG,IAAI,GAAG,QAAQ,GAAG,OAAO,CAAC;QAEpC,OAAO;YACL,CAAC;YACD,CAAC;YACD,QAAQ;YACR,MAAM,EAAE,IAAI;YACZ,GAAG,EAAE,IAAI;SACV,CAAC;IACJ,CAAC,CAAC,CAAC;AACP,CAAC;AAvBD,4BAuBC;AAED,SAAgB,OAAO,CAAC,EAAkB;IACxC,MAAM,KAAK,GACT,gBAAgB,CAAC,EAAE,CAAC,iBAAkB,CAAC,CAAC,gBAAgB,CACtD,8BAA8B,CAC/B,IAAI,OAAO,CAAC;IACf,MAAM,MAAM,GAAG,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC;QACjC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QACjC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC;IAC1C,OAAO,MAAM,GAAG,EAAE,CAAC;AACrB,CAAC;AATD,0BASC"}

package/dist/components/Transition/Transition.d.ts

@@ -0,0 +1,114 @@
+import React, { DetailedHTMLProps, Key, ReactElement } from "react";
+export type TransitionTypeDefinitions = {
+    transitionType?: TransitionAnimationTypes.SLIDE | TransitionAnimationTypes.POP_FROM_CLICK_ORIGIN | TransitionAnimationTypes.FADE | TransitionAnimationTypes.COIN_FLIP;
+} | {
+    transitionType?: TransitionAnimationTypes.POP_FROM_ELEMENT_ID;
+    elementId: string;
+} | {
+    transitionType?: TransitionAnimationTypes.MASK;
+    /**
+     * It provides the transition container so you can create a dynamic svg to mask with
+     */
+    maskFactory: (container: HTMLDivElement) => string;
+} | {
+    transitionType?: TransitionAnimationTypes.CUSTOM;
+    config: ReturnType<typeof TransitionClasses>;
+};
+export type TransitionProps = {
+    step: number;
+    className?: string;
+    contentStyle?: React.CSSProperties;
+    contentClassName?: string;
+    children: (React.ReactElement | undefined)[];
+    onDiscardStep?: (discardedKey: React.Key, startedAnimationAt: number) => void;
+    lockTransitionWidth?: boolean;
+    lockTransitionHeight?: boolean;
+} & TransitionTypeDefinitions & Omit<DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, any>, "className" | "children">;
+declare function TransitionClasses(type: NonNullable<Exclude<TransitionProps["transitionType"], TransitionAnimationTypes.CUSTOM>>): {
+    /**
+     * Applied to the element that was not visible and is now entering the screen
+     */
+    backward: {
+        elementEntering: string;
+        elementExiting: string;
+    };
+    /**
+     * Applied to the element that was visible and now is exiting the screen
+     */
+    forward: {
+        elementEntering: string;
+        elementExiting: string;
+    };
+};
+export declare enum TransitionAnimationTypes {
+    SLIDE = 0,
+    POP_FROM_CLICK_ORIGIN = 1,
+    POP_FROM_ELEMENT_ID = 2,
+    FADE = 3,
+    COIN_FLIP = 4,
+    MASK = 5,
+    CUSTOM = 6
+}
+/**
+ * A component that manages smooth transitions between different views or screens.
+ * It handles animations and switching between multiple children elements.
+ *
+ * Simple explanation: This component controls how content changes from one screen to another,
+ * making the transition look smooth and professional with various animation styles.
+ */
+declare const Transition: React.ForwardRefExoticComponent<(Omit<{
+    step: number;
+    className?: string | undefined;
+    contentStyle?: React.CSSProperties | undefined;
+    contentClassName?: string | undefined;
+    children: (React.ReactElement | undefined)[];
+    onDiscardStep?: ((discardedKey: React.Key, startedAnimationAt: number) => void) | undefined;
+    lockTransitionWidth?: boolean | undefined;
+    lockTransitionHeight?: boolean | undefined;
+} & {
+    transitionType?: TransitionAnimationTypes.SLIDE | TransitionAnimationTypes.POP_FROM_CLICK_ORIGIN | TransitionAnimationTypes.FADE | TransitionAnimationTypes.COIN_FLIP | undefined;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, any>, "children" | "className">, "ref"> | Omit<{
+    step: number;
+    className?: string | undefined;
+    contentStyle?: React.CSSProperties | undefined;
+    contentClassName?: string | undefined;
+    children: (React.ReactElement | undefined)[];
+    onDiscardStep?: ((discardedKey: React.Key, startedAnimationAt: number) => void) | undefined;
+    lockTransitionWidth?: boolean | undefined;
+    lockTransitionHeight?: boolean | undefined;
+} & {
+    transitionType?: TransitionAnimationTypes.POP_FROM_ELEMENT_ID | undefined;
+    elementId: string;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, any>, "children" | "className">, "ref"> | Omit<{
+    step: number;
+    className?: string | undefined;
+    contentStyle?: React.CSSProperties | undefined;
+    contentClassName?: string | undefined;
+    children: (React.ReactElement | undefined)[];
+    onDiscardStep?: ((discardedKey: React.Key, startedAnimationAt: number) => void) | undefined;
+    lockTransitionWidth?: boolean | undefined;
+    lockTransitionHeight?: boolean | undefined;
+} & {
+    transitionType?: TransitionAnimationTypes.MASK | undefined;
+    /**
+     * It provides the transition container so you can create a dynamic svg to mask with
+     */
+    maskFactory: (container: HTMLDivElement) => string;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, any>, "children" | "className">, "ref"> | Omit<{
+    step: number;
+    className?: string | undefined;
+    contentStyle?: React.CSSProperties | undefined;
+    contentClassName?: string | undefined;
+    children: (React.ReactElement | undefined)[];
+    onDiscardStep?: ((discardedKey: React.Key, startedAnimationAt: number) => void) | undefined;
+    lockTransitionWidth?: boolean | undefined;
+    lockTransitionHeight?: boolean | undefined;
+} & {
+    transitionType?: TransitionAnimationTypes.CUSTOM | undefined;
+    config: ReturnType<typeof TransitionClasses>;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, any>, "children" | "className">, "ref">) & React.RefAttributes<HTMLDivElement | null>>;
+/**
+ * A component that manages smooth transitions between different views or screens.
+ * It handles animations and switching between multiple children elements.
+ */
+export default Transition;