@onepercentio/one-ui 0.29.0 → 0.29.1

package/dist-ts/components/Tabs/Tabs.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import Styles from "./Tabs.module.scss";
+export var TabType;
+(function (TabType) {
+    /** A div that encovers the tab */
+    TabType[TabType["FULL"] = 0] = "FULL";
+    /** An underline */
+    TabType[TabType["UNDERLINE"] = 1] = "UNDERLINE";
+    /** A class is assigned to the selected tab */
+    TabType[TabType["CLASS"] = 2] = "CLASS";
+})(TabType || (TabType = {}));
+/**
+ * Show tabs for toggling between options
+ **/
+export default function Tabs(props) {
+    const { options, selected, onSelect, itemClassName = "", className = "", type = TabType.UNDERLINE, } = props;
+    const selectedRef = useRef(null);
+    const guideRef = useRef(null);
+    useEffect(() => {
+        if (props.type === TabType.CLASS)
+            return;
+        const guideStyle = guideRef.current.style;
+        const currEl = selectedRef.current;
+        guideStyle["opacity"] = currEl ? "1" : guideStyle["opacity"];
+        guideStyle["width"] = currEl ? currEl.clientWidth + "px" : "0px";
+        guideStyle["left"] = currEl
+            ? currEl.offsetLeft + "px"
+            : guideStyle["left"] || "initial";
+        if (type === TabType.FULL) {
+            guideStyle["height"] = currEl ? currEl.clientHeight + "px" : "";
+            guideStyle["top"] = currEl
+                ? currEl.offsetTop + "px"
+                : guideStyle["top"] || "initial";
+        }
+        else {
+            guideStyle["top"] = currEl
+                ? currEl.offsetTop + currEl.clientHeight + "px"
+                : guideStyle["top"] || "initial";
+        }
+    }, [selected]);
+    useEffect(() => {
+        if (props.type === TabType.CLASS)
+            return;
+        guideRef.current.classList.add(Styles.enableTransition);
+    }, []);
+    const tabNativeCls = TabType[type] in Styles ? Styles[TabType[type]] : "";
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: `${Styles.container} ${className} ${tabNativeCls}`, children: [options.map((o) => (_jsx("div", { ref: selected === o.id ? selectedRef : undefined, onClick: () => onSelect(o.id), className: `${selected === o.id ? Styles.selected : ""} ${itemClassName} ${props.type === TabType.CLASS && selected === o.id
+                        ? props.selectedClass
+                        : ""}`, "data-testid": "tab-option", children: o.label }, o.id))), TabType.CLASS !== props.type && (_jsx("div", { ref: guideRef, className: Styles.guide, "data-testid": "tab-guide" }))] }) }));
+}
+//# sourceMappingURL=Tabs.js.map

package/dist-ts/components/Tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAgB,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAExC,MAAM,CAAN,IAAY,OAOX;AAPD,WAAY,OAAO;IACjB,kCAAkC;IAClC,qCAAI,CAAA;IACJ,mBAAmB;IACnB,+CAAS,CAAA;IACT,8CAA8C;IAC9C,uCAAK,CAAA;AACP,CAAC,EAPW,OAAO,KAAP,OAAO,QAOlB;AAED;;IAEI;AACJ,MAAM,CAAC,OAAO,UAAU,IAAI,CAC1B,KAmBC;IAED,MAAM,EACJ,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,aAAa,GAAG,EAAE,EAClB,SAAS,GAAG,EAAE,EACd,IAAI,GAAG,OAAO,CAAC,SAAS,GACzB,GAAG,KAAK,CAAC;IACV,MAAM,WAAW,GAAG,MAAM,CAAuB,IAAI,CAAC,CAAC;IACvD,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC9C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,CAAC,KAAK;YAAE,OAAO;QACzC,MAAM,UAAU,GAAG,QAAQ,CAAC,OAAQ,CAAC,KAAK,CAAC;QAC3C,MAAM,MAAM,GAAG,WAAW,CAAC,OAAO,CAAC;QACnC,UAAU,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC;QAC7D,UAAU,CAAC,OAAO,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;QACjE,UAAU,CAAC,MAAM,CAAC,GAAG,MAAM;YACzB,CAAC,CAAC,MAAM,CAAC,UAAU,GAAG,IAAI;YAC1B,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,SAAS,CAAC;QACpC,IAAI,IAAI,KAAK,OAAO,CAAC,IAAI,EAAE,CAAC;YAC1B,UAAU,CAAC,QAAQ,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,GAAG,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;YAChE,UAAU,CAAC,KAAK,CAAC,GAAG,MAAM;gBACxB,CAAC,CAAC,MAAM,CAAC,SAAS,GAAG,IAAI;gBACzB,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,IAAI,SAAS,CAAC;QACrC,CAAC;aAAM,CAAC;YACN,UAAU,CAAC,KAAK,CAAC,GAAG,MAAM;gBACxB,CAAC,CAAC,MAAM,CAAC,SAAS,GAAG,MAAM,CAAC,YAAY,GAAG,IAAI;gBAC/C,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,IAAI,SAAS,CAAC;QACrC,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,CAAC,KAAK;YAAE,OAAO;QACzC,QAAQ,CAAC,OAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;IAC3D,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAC1E,OAAO,CACL,4BACE,eAAK,SAAS,EAAE,GAAG,MAAM,CAAC,SAAS,IAAI,SAAS,IAAI,YAAY,EAAE,aAC/D,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAClB,cACE,GAAG,EAAE,QAAQ,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,EAChD,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,EAC7B,SAAS,EAAE,GACT,QAAQ,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EACxC,IAAI,aAAa,IACf,KAAK,CAAC,IAAI,KAAK,OAAO,CAAC,KAAK,IAAI,QAAQ,KAAK,CAAC,CAAC,EAAE;wBAC/C,CAAC,CAAC,KAAK,CAAC,aAAa;wBACrB,CAAC,CAAC,EACN,EAAE,iBAEU,YAAY,YAEvB,CAAC,CAAC,KAAK,IAHH,CAAC,CAAC,EAAE,CAIL,CACP,CAAC,EACD,OAAO,CAAC,KAAK,KAAK,KAAK,CAAC,IAAI,IAAI,CAC/B,cACE,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,MAAM,CAAC,KAAK,iBACX,WAAW,GACvB,CACH,IACG,GACL,CACJ,CAAC;AACJ,CAAC"}

package/dist-ts/components/Tabs/Tabs.module.scss

@@ -0,0 +1,40 @@
+@import "../../assets/styles/index.scss";
+
+.container {
+  overflow-x: auto;
+  display: flex;
+  position: relative;
+  align-items: flex-start;
+  > div {
+    cursor: pointer;
+    &.selected {
+      font-weight: bold;
+    }
+  }
+  &.FULL {
+    overflow: visible;
+    > div {
+      transition: color 250ms linear;
+      padding: 0.4em 1em;
+      z-index: 1;
+      margin: 0px;
+
+      &.selected {
+        color: var(--tab-selected-color);
+      }
+    }
+    .guide {
+      box-shadow: $elevation;
+      border-radius: 1em / 50%;
+    }
+  }
+}
+
+.guide {
+  height: 0.1em;
+  background-color: var(--tab-guide-color, $digitalBlue);
+  position: absolute;
+  &.enableTransition {
+    transition: left $fast, width $fast, top $fast, height $fast;
+  }
+}

package/dist-ts/components/Tabs/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Tabs';

package/dist-ts/components/Tabs/index.js

@@ -0,0 +1,2 @@
+export { default } from './Tabs';
+//# sourceMappingURL=index.js.map

package/dist-ts/components/Tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tabs/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC"}

package/dist-ts/components/Text/Text.d.ts

@@ -0,0 +1,17 @@
+import React, { ForwardedRef } from "react";
+export declare function _Text({ type, children, className, ...otherProps }: React.PropsWithChildren<{
+    className?: string;
+    type: OnepercentUtility.UIElements.TextVariants;
+    color?: OnepercentUtility.UIElements.TextColors;
+} & Omit<React.HTMLAttributes<HTMLParagraphElement>, "color">>, _ref?: ForwardedRef<HTMLParagraphElement>): import("react/jsx-runtime").JSX.Element;
+/**
+ * A component to hold all text variantions
+ **/
+declare const Text: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+    type: OnepercentUtility.UIElements.TextVariants;
+    color?: OnepercentUtility.UIElements.TextColors;
+} & Omit<React.HTMLAttributes<HTMLParagraphElement>, "color"> & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLParagraphElement>>;
+export default Text;

package/dist-ts/components/Text/Text.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useOneUIConfig } from "../../context/OneUIProvider";
+import Styles from "./Text.module.scss";
+export function _Text({ type, children, className = "", ...otherProps }, _ref) {
+    const classNameType = useOneUIConfig("component.text.className", {});
+    const tagByType = useOneUIConfig("component.text.htmlTag", {});
+    const TagType = tagByType[type] || "p";
+    return (_jsx(TagType, { ref: _ref, className: `${Styles.text} ${classNameType[type] || Styles[type]} ${className} ${otherProps.onClick ? Styles.iteractible : ""}`, ...otherProps, children: children }));
+}
+/**
+ * A component to hold all text variantions
+ **/
+const Text = forwardRef(_Text);
+export default Text;
+//# sourceMappingURL=Text.js.map

package/dist-ts/components/Text/Text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAgC,UAAU,EAAE,MAAM,OAAO,CAAC;AACxE,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAExC,MAAM,UAAU,KAAK,CACnB,EACE,IAAI,EACJ,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,GAAG,UAAU,EAOd,EACD,IAAyC;IAEzC,MAAM,aAAa,GAAG,cAAc,CAAC,0BAA0B,EAAE,EAAE,CAAC,CAAC;IACrE,MAAM,SAAS,GAAG,cAAc,CAAC,wBAAwB,EAAE,EAAE,CAAC,CAAC;IAE/D,MAAM,OAAO,GAAG,SAAS,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC;IAEvC,OAAO,CACL,KAAC,OAAO,IACN,GAAG,EAAE,IAAI,EACT,SAAS,EAAE,GAAG,MAAM,CAAC,IAAI,IACvB,aAAa,CAAC,IAAI,CAAC,IAAI,MAAM,CAAC,IAAI,CACpC,IAAI,SAAS,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,KAC3D,UAAU,YAEb,QAAQ,GACD,CACX,CAAC;AACJ,CAAC;AAED;;IAEI;AACJ,MAAM,IAAI,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;AAC/B,eAAe,IAAI,CAAC"}

package/dist-ts/components/Text/Text.module.scss

@@ -0,0 +1,81 @@
+@import "../../assets/styles/index.scss";
+
+.title {
+  font-weight: 300;
+  font-size: 22px;
+  line-height: 33px;
+}
+.boldTitle {
+  font-family: $secondaryFontFamily;
+  font-size: 24px;
+  font-weight: bolder;
+  line-height: 26px;
+}
+.boldTitleBig {
+  font-family: $secondaryFontFamily;
+  font-size: 28px;
+  font-weight: bolder;
+  line-height: 33.8px;
+}
+.content {
+  font-size: 16px;
+  line-height: 24px;
+  font-family: $mainFontFamily;
+}
+.icon.description {
+  font-size: 14px;
+  line-height: 21px;
+  color: $darkestGray;
+}
+.text.error,
+.text.caption {
+  font-size: 12px;
+  line-height: 18px;
+}
+.text.error {
+  color: $warningRed;
+}
+.text {
+  margin: 0px;
+  font-family: $mainFontFamily;
+  white-space: pre-wrap;
+  color: $textDefaultColor;
+}
+.highlightTitle {
+  font-family: $secondaryFontFamily;
+  font-size: 24px;
+  font-weight: bolder;
+  line-height: 29px;
+  color: $sunsetPink;
+}
+.subtitle {
+  font-family: $secondaryFontFamily;
+  font-size: 20px;
+  font-weight: 800;
+  line-height: 22px;
+  color: var(--text-default-color, $gray);
+}
+.link {
+  font-family: $mainFontFamily;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+}
+.iteractible {
+  cursor: pointer;
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.highlight {
+  font-family: $secondaryFontFamily;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  color: $sunsetPink;
+}
+
+.text[color="primary"] {
+  color: var(--digital-blue);
+}

package/dist-ts/components/Text/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Text';

package/dist-ts/components/Text/index.js

@@ -0,0 +1,2 @@
+export { default } from './Text';
+//# sourceMappingURL=index.js.map

package/dist-ts/components/Text/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Text/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC"}

package/dist-ts/components/Transition/MasksFactory/DiagonalReveal.d.ts

@@ -0,0 +1 @@
+export default function DiagonalReveal(el: HTMLDivElement): string;

package/dist-ts/components/Transition/MasksFactory/DiagonalReveal.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { renderToString } from "react-dom/server";
+import { getTime } from "./utils";
+export default function DiagonalReveal(el) {
+    const height = el.clientHeight;
+    const width = el.clientWidth;
+    const time = getTime(el);
+    const filterId = `f-${Date.now().toString()}`;
+    const resultSvg = renderToString(_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", id: Date.now().toString(), children: [_jsx("defs", { children: _jsx("filter", { id: filterId, x: "0", y: "0", children: _jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "15" }) }) }), _jsxs("rect", { x: "-25", y: "-25", width: `${width * 1.5}px`, fill: "white", height: `${height * 1.1}px`, filter: `url(#${filterId})`, children: [_jsx("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", values: "0 0 0; 25 0 0; 32 0 0;", dur: `${time}ms` }), _jsx("animateTransform", { additive: "sum", attributeName: "transform", attributeType: "XML", type: "translate", values: `0 0; 0 ${height * 0.2}; 0 ${height};`, dur: `${time}ms` })] })] }));
+    return `url('data:image/svg+xml;charset=utf8,${encodeURIComponent(resultSvg)}')`;
+}
+//# sourceMappingURL=DiagonalReveal.js.map

package/dist-ts/components/Transition/MasksFactory/DiagonalReveal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiagonalReveal.js","sourceRoot":"","sources":["../../../../src/components/Transition/MasksFactory/DiagonalReveal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAElC,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EAAkB;IACvD,MAAM,MAAM,GAAG,EAAE,CAAC,YAAY,CAAC;IAC/B,MAAM,KAAK,GAAG,EAAE,CAAC,WAAW,CAAC;IAC7B,MAAM,IAAI,GAAG,OAAO,CAAC,EAAE,CAAC,CAAC;IACzB,MAAM,QAAQ,GAAG,KAAK,IAAI,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC;IAC9C,MAAM,SAAS,GAAG,cAAc,CAC9B,eAAK,KAAK,EAAC,4BAA4B,EAAC,EAAE,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,aAC/D,yBACE,iBAAQ,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,YAC/B,yBAAgB,EAAE,EAAC,eAAe,EAAC,YAAY,EAAC,IAAI,GAAG,GAChD,GACJ,EACP,gBACE,CAAC,EAAC,KAAK,EACP,CAAC,EAAC,KAAK,EACP,KAAK,EAAE,GAAG,KAAK,GAAG,GAAG,IAAI,EACzB,IAAI,EAAC,OAAO,EACZ,MAAM,EAAE,GAAG,MAAM,GAAG,GAAG,IAAI,EAC3B,MAAM,EAAE,QAAQ,QAAQ,GAAG,aAE3B,2BACE,aAAa,EAAC,WAAW,EACzB,aAAa,EAAC,KAAK,EACnB,IAAI,EAAC,QAAQ,EACb,MAAM,EAAC,wBAAwB,EAC/B,GAAG,EAAE,GAAG,IAAI,IAAI,GAChB,EACF,2BACE,QAAQ,EAAC,KAAK,EACd,aAAa,EAAC,WAAW,EACzB,aAAa,EAAC,KAAK,EACnB,IAAI,EAAC,WAAW,EAChB,MAAM,EAAE,UAAU,MAAM,GAAG,GAAG,OAAO,MAAM,GAAG,EAC9C,GAAG,EAAE,GAAG,IAAI,IAAI,GAChB,IACG,IACH,CACP,CAAC;IAEF,OAAO,wCAAwC,kBAAkB,CAC/D,SAAS,CACV,IAAI,CAAC;AACR,CAAC"}

package/dist-ts/components/Transition/MasksFactory/DiagonalSquareToBalls.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 DiagonalSquareToBalls(amountOfVerticalSquares?: number): (el: HTMLDivElement) => string;

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

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { renderToString } from "react-dom/server";
+import buildGrid, { getTime } from "./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
+ */
+export default 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 = getTime(el);
+        const rndTime = () => _time * 0.25 + _time * 0.75 * 1;
+        const resultSvg = renderToString(_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", id: Date.now().toString(), children: buildGrid(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 (_jsxs("rect", { fill: "white", rx: `${ballsize}px`, children: [_jsx("animate", { attributeName: "rx", attributeType: "XML", values: `${0}px;${0}px;${_ballsize}px`, dur: `${time / 2}ms` }), _jsx("animate", { attributeName: "x", attributeType: "XML", values: `${_x}px;${x}px;${x + ballsize / 2}px`, dur: `${time}ms` }), _jsx("animate", { attributeName: "y", attributeType: "XML", values: `${_y}px;${y}px;${y + ballsize / 2}px`, dur: `${time}ms` }), _jsx("animate", { attributeName: "width", attributeType: "XML", values: `${_ballsize}px;${ballsize}px;${0}px`, dur: `${time}ms` }), _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)}')`;
+    };
+}
+//# sourceMappingURL=DiagonalSquareToBalls.js.map

package/dist-ts/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-ts/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-ts/components/Transition/MasksFactory/PhysicsSquares.js

@@ -0,0 +1,80 @@
+import Matter from "matter-js";
+import buildGrid from "./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
+ */
+export default 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 = buildGrid(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.Engine, Render = Matter.Render, Runner = Matter.Runner, Bodies = Matter.Bodies, Composite = Matter.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 ``;
+    };
+}
+//# sourceMappingURL=PhysicsSquares.js.map

package/dist-ts/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-ts/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-ts/components/Transition/MasksFactory/SquareToBalls.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { renderToString } from "react-dom/server";
+import buildGrid, { getTime } from "./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
+ */
+export default function (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 = getTime(el);
+        const resultSvg = renderToString(_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", id: Date.now().toString(), children: buildGrid(amountOfVerticalSquares, amountOfBalls, _ballsize).map(({ ballSize, x, y }) => {
+                return (_jsxs("rect", { fill: "white", children: [_jsx("animate", { attributeName: "rx", attributeType: "XML", values: `${0}px;${ballSize / 2}px;${ballSize / 2}px`, dur: `${time}ms` }), _jsx("animate", { attributeName: "x", attributeType: "XML", values: `${x}px;${x}px;${x + ballSize / 2}px`, dur: `${time}ms` }), _jsx("animate", { attributeName: "y", attributeType: "XML", values: `${y}px;${y}px;${y + ballSize / 2}px`, dur: `${time}ms` }), _jsx("animate", { attributeName: "width", attributeType: "XML", values: `${ballSize}px;${ballSize}px;${0}px`, dur: `${time}ms` }), _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)}')`;
+    };
+}
+//# sourceMappingURL=SquareToBalls.js.map

package/dist-ts/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,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,SAAS,EAAE,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAE7C;;;GAGG;AACH,MAAM,CAAC,OAAO,WAAW,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,OAAO,CAAC,EAAE,CAAC,CAAC;QAEzB,MAAM,SAAS,GAAG,cAAc,CAC9B,cAAK,KAAK,EAAC,4BAA4B,EAAC,EAAE,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,YAC9D,SAAS,CAAC,uBAAuB,EAAE,aAAa,EAAE,SAAS,CAAC,CAAC,GAAG,CAC/D,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE;gBACrB,OAAO,CACL,gBAAM,IAAI,EAAC,OAAO,aAChB,kBACE,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,kBACE,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,kBACE,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,kBACE,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,kBACE,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"}

package/dist-ts/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-ts/components/Transition/MasksFactory/utils.js

@@ -0,0 +1,27 @@
+export default 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,
+        };
+    });
+}
+export 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;
+}
+//# sourceMappingURL=utils.js.map

package/dist-ts/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,MAAM,CAAC,OAAO,UAAU,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;AAED,MAAM,UAAU,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"}

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

@@ -0,0 +1,106 @@
+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
+}
+/**
+ * Handles the transition between multiple children and recycling of elements
+ **/
+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>, "className" | "children">, "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>, "className" | "children">, "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>, "className" | "children">, "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>, "className" | "children">, "ref">) & React.RefAttributes<HTMLDivElement | null>>;
+export default Transition;