@onepercentio/one-ui 0.1.2

package/dist/components/MutableHamburgerButton/MutableHamburgerButton.module.scss

@@ -0,0 +1,82 @@
+@import "../../assets/styles/index.scss";
+
+$slice: 1/7;
+
+.container {
+  cursor: pointer;
+  width: 1em;
+  height: 1em;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-evenly;
+  background-size: 0 0;
+  background-repeat: no-repeat;
+  transition: transform 250ms;
+  &:active {
+    transform: scale(0.9);
+  }
+  > * {
+    width: 0.8em;
+    height: #{$slice}em;
+    border-radius: #{$slice / 2}em;
+    transition: transform $veryFast, width $veryFast;
+    background: var(--mutable-hamburger-background, $digitalBlue);
+    background-size: 1em 1em;
+    background-repeat: no-repeat;
+  }
+  & > * {
+    background-position-x: -0.1em;
+  }
+  & > :nth-child(1) {
+    background-position-y: #{$slice * -1}em;
+  }
+  & > :nth-child(2) {
+    background-position-y: #{$slice * -3}em;
+  }
+  & > :nth-child(3) {
+    background-position-y: #{$slice * -5}em;
+  }
+
+  &.closed {
+    > :nth-child(1) {
+      transform: translateY(#{$slice * 2}em) rotateZ(-45deg);
+    }
+    > :nth-child(2) {
+      transform: rotateZ(45deg);
+    }
+    > :nth-child(3) {
+      transform: translateY(-#{$slice * 2}em) rotateZ(-45deg);
+    }
+  }
+
+  &.arrow-up {
+    > * {
+      width: 0.4em;
+    }
+    > :nth-child(1) {
+      transform: translateX(0.1em) translateY(#{$slice * 2}em) rotateZ(45deg);
+    }
+    > :nth-child(2) {
+      transform: translateX(0.1em) rotateZ(45deg);
+    }
+    > :nth-child(3) {
+      transform: translateX(-0.1em) translateY(-#{$slice * 2}em) rotateZ(-45deg);
+    }
+  }
+
+  &.arrow-down {
+    > * {
+      width: 0.4em;
+    }
+    > :nth-child(1) {
+      transform: translateX(0.1em) translateY(#{$slice * 2}em) rotateZ(-45deg);
+    }
+    > :nth-child(2) {
+      transform: translateX(0.1em) rotateZ(-45deg);
+    }
+    > :nth-child(3) {
+      transform: translateX(-0.1em) translateY(-#{$slice * 2}em) rotateZ(45deg);
+    }
+  }
+}

package/dist/components/MutableHamburgerButton/MutableHamburgerButton.stories.d.ts

@@ -0,0 +1,13 @@
+import MutableHamburgerButton from "./MutableHamburgerButton";
+declare const _default: {
+    component: typeof MutableHamburgerButton;
+    title: string;
+};
+export default _default;
+export declare const InitialImplementation: {
+    (args: any): JSX.Element;
+    args: Partial<{
+        state?: "default" | "closed" | "arrow-up" | "arrow-down" | undefined;
+        size: number;
+    }>;
+};

package/dist/components/MutableHamburgerButton/MutableHamburgerButton.stories.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InitialImplementation = void 0;
+const react_1 = __importDefault(require("react"));
+const MutableHamburgerButton_1 = __importDefault(require("./MutableHamburgerButton"));
+exports.default = {
+    component: MutableHamburgerButton_1.default,
+    title: "Mutable Hamburger Button"
+};
+const InitialImplementation = (args) => react_1.default.createElement(MutableHamburgerButton_1.default, Object.assign({}, args));
+exports.InitialImplementation = InitialImplementation;
+exports.InitialImplementation.args = {};
+//# sourceMappingURL=MutableHamburgerButton.stories.js.map

package/dist/components/MutableHamburgerButton/MutableHamburgerButton.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MutableHamburgerButton.stories.js","sourceRoot":"","sources":["../../../src/components/MutableHamburgerButton/MutableHamburgerButton.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,sFAA8D;AAE9D,kBAAe;IACX,SAAS,EAAE,gCAAsB;IACjC,KAAK,EAAE,0BAA0B;CACpC,CAAA;AAEM,MAAM,qBAAqB,GAAG,CAAC,IAAS,EAAE,EAAE,CAAC,8BAAC,gCAAsB,oBAAK,IAAI,EAAG,CAAC;AAA3E,QAAA,qBAAqB,yBAAsD;AACxF,6BAAqB,CAAC,IAAI,GAAG,EAAkE,CAAA"}

package/dist/components/MutableHamburgerButton/index.d.ts

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

package/dist/components/MutableHamburgerButton/index.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var MutableHamburgerButton_1 = require("./MutableHamburgerButton");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(MutableHamburgerButton_1).default; } });
+//# sourceMappingURL=index.js.map

package/dist/components/MutableHamburgerButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/MutableHamburgerButton/index.tsx"],"names":[],"mappings":";;;;;;AAAA,mEAAmD;AAA1C,kIAAA,OAAO,OAAA"}

package/dist/components/Notification/Notification.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from "react";
+/**
+ * A layout for the notification card
+ **/
+export default function Notification({ type, children }: PropsWithChildren<{
+    type: "success";
+}>): JSX.Element;

package/dist/components/Notification/Notification.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const Card_1 = __importDefault(require("../Card"));
+const Notification_module_scss_1 = __importDefault(require("./Notification.module.scss"));
+/**
+ * A layout for the notification card
+ **/
+function Notification({ type, children }) {
+    return react_1.default.createElement(Card_1.default, { className: `${Notification_module_scss_1.default.container} ${Notification_module_scss_1.default[type]}` }, children);
+}
+exports.default = Notification;
+//# sourceMappingURL=Notification.js.map

package/dist/components/Notification/Notification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notification.js","sourceRoot":"","sources":["../../../src/components/Notification/Notification.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAiD;AACjD,mDAA2B;AAC3B,0FAAgD;AAEhD;;IAEI;AACJ,SAAwB,YAAY,CAAC,EACnC,IAAI,EACJ,QAAQ,EAC+B;IACvC,OAAO,8BAAC,cAAI,IAAC,SAAS,EAAE,GAAG,kCAAM,CAAC,SAAS,IAAI,kCAAM,CAAC,IAAI,CAAC,EAAE,IAAG,QAAQ,CAAQ,CAAC;AACnF,CAAC;AALD,+BAKC"}

package/dist/components/Notification/Notification.module.scss

@@ -0,0 +1,25 @@
+@import "../../assets/styles/variables.scss";
+
+.container {
+  animation-fill-mode: forwards;
+  animation-duration: $fast;
+  animation-name: expand;
+  width: auto;
+  min-width: 250px;
+}
+
+.success {
+  background-color: $success;
+}
+
+@keyframes expand {
+  0% {
+    padding: 0px 12px;
+    max-height: 0%;
+  }
+
+  100% {
+    padding: 12px 12px;
+    max-height: 100%;
+  }
+}

package/dist/components/Notification/Notification.stories.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import Notification from "./Notification";
+declare const _default: {
+    component: typeof Notification;
+    title: string;
+};
+export default _default;
+export declare const InitialImplementation: {
+    (args: any): JSX.Element;
+    args: Partial<{
+        type: "success";
+    } & {
+        children?: React.ReactNode;
+    }>;
+};

package/dist/components/Notification/Notification.stories.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InitialImplementation = void 0;
+const react_1 = __importDefault(require("react"));
+const Notification_1 = __importDefault(require("./Notification"));
+exports.default = {
+    component: Notification_1.default,
+    title: "Notification",
+};
+const InitialImplementation = (args) => react_1.default.createElement("div", { style: { height: "250px" } },
+    react_1.default.createElement(Notification_1.default, Object.assign({}, args), "Exemplo de notifica\u00E7\u00E3o"));
+exports.InitialImplementation = InitialImplementation;
+exports.InitialImplementation.args = {
+    type: "success",
+};
+//# sourceMappingURL=Notification.stories.js.map

package/dist/components/Notification/Notification.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notification.stories.js","sourceRoot":"","sources":["../../../src/components/Notification/Notification.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,kEAA0C;AAE1C,kBAAe;IACb,SAAS,EAAE,sBAAY;IACvB,KAAK,EAAE,cAAc;CACtB,CAAC;AAEK,MAAM,qBAAqB,GAAG,CAAC,IAAS,EAAE,EAAE,CAAC,uCAAK,KAAK,EAAE,EAAC,MAAM,EAAE,OAAO,EAAC;IAC/E,8BAAC,sBAAY,oBAAK,IAAI,sCAAuC,CACzD,CAAC;AAFM,QAAA,qBAAqB,yBAE3B;AACP,6BAAqB,CAAC,IAAI,GAAG;IAC3B,IAAI,EAAE,SAAS;CACsC,CAAC"}

package/dist/components/Notification/index.d.ts

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

package/dist/components/Notification/index.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var Notification_1 = require("./Notification");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Notification_1).default; } });
+//# sourceMappingURL=index.js.map

package/dist/components/Notification/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Notification/index.tsx"],"names":[],"mappings":";;;;;;AAAA,+CAAyC;AAAhC,wHAAA,OAAO,OAAA"}

package/dist/components/Parallax/Parallax.d.ts

@@ -0,0 +1,15 @@
+import React, { DetailedHTMLProps, HTMLAttributes, PropsWithChildren } from "react";
+export declare function calculateDistanceRelativeToBounds(mousePosition: number, elementInitialPosition: number, elementSizeDimension: number): number;
+export declare function givenTheRelativePositionHowMuchToRotate(relativePosition: number, maxRotation: number): number;
+declare type Props = PropsWithChildren<{
+    className?: string;
+    active: boolean;
+    onClick?: (e: any) => void;
+    reflection?: boolean;
+    maxParallax?: {
+        x: number;
+        y: number;
+    };
+}> & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+declare const _default: React.ForwardRefExoticComponent<Pick<Props, "key" | "active" | keyof React.HTMLAttributes<HTMLDivElement> | "reflection" | "maxParallax"> & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/dist/components/Parallax/Parallax.js

@@ -0,0 +1,171 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.givenTheRelativePositionHowMuchToRotate = exports.calculateDistanceRelativeToBounds = void 0;
+const react_1 = __importStar(require("react"));
+const Parallax_module_scss_1 = __importDefault(require("./Parallax.module.scss"));
+const lodash_1 = require("lodash");
+const helpers_1 = require("./math/helpers");
+const MAXIMUM_PARALLAX = {
+    x: 20,
+    y: 20,
+};
+function calculateDistanceRelativeToBounds(mousePosition, elementInitialPosition, elementSizeDimension) {
+    const normalizeInitialPosition = mousePosition - elementInitialPosition;
+    const doNotAllowGoingBeyondLowerLimit = Math.max(normalizeInitialPosition, 0);
+    const doNotAllowHoingBeyondHigherLimit = Math.min(doNotAllowGoingBeyondLowerLimit, elementSizeDimension);
+    const threeRule = (doNotAllowHoingBeyondHigherLimit * 100) / elementSizeDimension;
+    const result = Math.round(threeRule) / 100;
+    return result;
+}
+exports.calculateDistanceRelativeToBounds = calculateDistanceRelativeToBounds;
+function givenTheRelativePositionHowMuchToRotate(relativePosition, maxRotation) {
+    return relativePosition * maxRotation - maxRotation / 2;
+}
+exports.givenTheRelativePositionHowMuchToRotate = givenTheRelativePositionHowMuchToRotate;
+/**
+ * It holds a children and animates it according to mouse position
+ **/
+function Parallax(_a, ref) {
+    var { children, className = "", active, onClick, reflection, maxParallax = MAXIMUM_PARALLAX } = _a, props = __rest(_a, ["children", "className", "active", "onClick", "reflection", "maxParallax"]);
+    const parallaxableRef = (0, react_1.useRef)(null);
+    const reflectionRef = (0, react_1.useRef)(null);
+    const multiplierRef = (0, react_1.useRef)(1);
+    const initialPositionRef = (0, react_1.useRef)();
+    (0, react_1.useEffect)(() => {
+        if (ref)
+            ref.current =
+                parallaxableRef.current;
+        const el = parallaxableRef.current;
+        if (active && !initialPositionRef.current) {
+            initialPositionRef.current = getComputedStyle(el).transform;
+            if (initialPositionRef.current === "none")
+                initialPositionRef.current = "";
+            el.style.transform = `${initialPositionRef.current} rotateX(0deg) rotateY(0deg) translateZ(0px)`;
+        }
+        // eslint-disable-next-line
+    }, [active]);
+    (0, react_1.useEffect)(() => {
+        const el = parallaxableRef.current;
+        if (active) {
+            const updatePositions = (relativeToX, relativeToY) => {
+                const rect = el.getBoundingClientRect();
+                const { width: [x0, xW], height: [y0, yH], } = {
+                    width: [rect.left, el.clientWidth],
+                    height: [rect.top, el.clientHeight],
+                };
+                const distanceOffRight = calculateDistanceRelativeToBounds(relativeToX, x0, xW);
+                const distanceOffBottom = calculateDistanceRelativeToBounds(relativeToY, y0, yH);
+                const howMuchToRotateY = givenTheRelativePositionHowMuchToRotate(distanceOffRight, maxParallax.y) * multiplierRef.current;
+                const howMuchToRotateX = givenTheRelativePositionHowMuchToRotate(distanceOffBottom, maxParallax.x) * multiplierRef.current;
+                const howMuchToOpacify = Math.abs(Math.abs(distanceOffBottom - 0.5) / 0.5);
+                const howMuchToOpacifyHorizontal = Math.max(Math.abs(Math.abs(distanceOffRight - 0.5) / 0.5), Math.abs(Math.abs(distanceOffBottom - 0.5) / 0.5));
+                el.style.transform = `${initialPositionRef.current} rotateY(${howMuchToRotateY}deg) rotateX(${-howMuchToRotateX}deg) translateZ(${multiplierRef.current === 1 ? 0 : -30}px)`;
+                if (reflectionRef.current) {
+                    reflectionRef.current.style.left = `${(1 - distanceOffRight) * 100}%`;
+                    reflectionRef.current.style.top = `${(1 - distanceOffBottom) * 100}%`;
+                    reflectionRef.current.style.opacity = `${Math.min(howMuchToOpacify, howMuchToOpacifyHorizontal)}`;
+                }
+            };
+            const handler = (0, lodash_1.throttle)(({ x, y }) => {
+                updatePositions(x, y);
+            }, 1000 / 30);
+            const touchHandler = (0, lodash_1.throttle)(({ touches }) => {
+                const { pageX, pageY } = touches[0];
+                updatePositions(pageX, pageY);
+            }, 1000 / 30);
+            const mouseDownHandler = () => {
+                multiplierRef.current = 1.5;
+            };
+            const mouseUpHandler = () => {
+                multiplierRef.current = 1;
+            };
+            window.addEventListener("mousemove", handler);
+            window.addEventListener("touchmove", touchHandler);
+            let _inverseMatrix;
+            const _limits = {
+                beta: undefined,
+                gamma: undefined,
+            };
+            const orientationListener = ({ beta, gamma, }) => {
+                beta = beta * 0.5;
+                gamma = gamma * 0.5;
+                if (!_inverseMatrix) {
+                    window.removeEventListener("mousemove", handler);
+                    window.removeEventListener("touchmove", touchHandler);
+                    const offset = 12.5;
+                    _limits.beta = [beta - offset, beta + offset];
+                    _limits.gamma = [gamma - offset, gamma + offset];
+                }
+                const _beta = Math.min(_limits.beta[1], Math.max(_limits.beta[0], beta));
+                const _gamma = Math.min(_limits.gamma[1], Math.max(_limits.gamma[0], gamma));
+                if (!_inverseMatrix) {
+                    _inverseMatrix = (0, helpers_1.flattenMatrix)((0, helpers_1.invertMatrix)((0, helpers_1.generateMatrixFromOperations)({
+                        type: "rotateY",
+                        angle: _gamma,
+                    }, {
+                        type: "rotateX",
+                        angle: -_beta,
+                    })));
+                }
+                el.style.transform = `matrix3d(${_inverseMatrix.join(",")}) rotateX(${-_beta}deg) rotateY(${_gamma}deg)`;
+            };
+            window.addEventListener("deviceorientation", orientationListener);
+            window.addEventListener("touchend", () => {
+                _inverseMatrix = undefined;
+            });
+            el.addEventListener("touchstart", mouseDownHandler);
+            el.addEventListener("touchend", mouseUpHandler);
+            el.addEventListener("mousedown", mouseDownHandler);
+            el.addEventListener("mouseup", mouseUpHandler);
+            return () => {
+                window.removeEventListener("deviceorientation", orientationListener);
+                window.removeEventListener("mousemove", handler);
+                window.removeEventListener("touchmove", touchHandler);
+                el.removeEventListener("mousedown", mouseDownHandler);
+                el.removeEventListener("mouseup", mouseUpHandler);
+                el.removeEventListener("touchstart", mouseDownHandler);
+                el.removeEventListener("touchend", mouseUpHandler);
+                // el.style.transform = initialPositionRef.current!;
+                el.style.transform = `rotateX(0deg) rotateY(0deg) translateZ(0px)`;
+            };
+        }
+    }, [active]);
+    return (react_1.default.createElement("div", Object.assign({ onClick: onClick, ref: parallaxableRef, className: `${Parallax_module_scss_1.default.parallax} ${className}` }, props),
+        children,
+        reflection && react_1.default.createElement("div", { ref: reflectionRef, className: Parallax_module_scss_1.default.reflection })));
+}
+exports.default = (0, react_1.forwardRef)(Parallax);
+//# sourceMappingURL=Parallax.js.map

package/dist/components/Parallax/Parallax.js.map

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

package/dist/components/Parallax/Parallax.module.scss

@@ -0,0 +1,28 @@
+@import "../../assets/styles/index.scss";
+
+.parallax {
+  display: flex;
+  position: relative;
+  transition: transform $fast;
+  overflow: hidden;
+  user-select: none;
+  transform: translate3d(0, 0, 0);
+}
+
+.reflection {
+  transform: translateX(-50%) translateY(-50%);
+  width: 40%;
+  pointer-events: none;
+  &::after {
+    background: radial-gradient(#fff2, #fff2 5%, #aaa0 50%);
+    background-size: 100% 100%;
+    content: "";
+    display: block;
+    padding-bottom: 100%;
+    border-radius: 50%;
+    background-repeat: no-repeat;
+  }
+  position: absolute;
+  left: -50%;
+  top: -50%;
+}

package/dist/components/Parallax/Parallax.stories.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<Pick<{
+        className?: string | undefined;
+        active: boolean;
+        onClick?: ((e: any) => void) | undefined;
+        reflection?: boolean | undefined;
+        maxParallax?: {
+            x: number;
+            y: number;
+        } | undefined;
+    } & {
+        children?: React.ReactNode;
+    } & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "key" | "active" | keyof React.HTMLAttributes<HTMLDivElement> | "reflection" | "maxParallax"> & React.RefAttributes<HTMLDivElement>>;
+};
+export default _default;
+export declare const InitialImplementation: {
+    (args: any): JSX.Element;
+    args: Partial<Pick<{
+        className?: string | undefined;
+        active: boolean;
+        onClick?: ((e: any) => void) | undefined;
+        reflection?: boolean | undefined;
+        maxParallax?: {
+            x: number;
+            y: number;
+        } | undefined;
+    } & {
+        children?: React.ReactNode;
+    } & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "key" | "active" | keyof React.HTMLAttributes<HTMLDivElement> | "reflection" | "maxParallax"> & React.RefAttributes<HTMLDivElement>>;
+};

package/dist/components/Parallax/Parallax.stories.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InitialImplementation = void 0;
+const react_1 = __importDefault(require("react"));
+const Parallax_1 = __importDefault(require("./Parallax"));
+exports.default = {
+    title: "Parallax",
+    component: Parallax_1.default,
+};
+const InitialImplementation = (args) => {
+    return (react_1.default.createElement(Parallax_1.default, Object.assign({}, args),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement("h1", null, "This is a parallax component"),
+            react_1.default.createElement("p", null, "It should emulate movement when moving the screen on mobile or hovering the mouse on desktop"))));
+};
+exports.InitialImplementation = InitialImplementation;
+exports.InitialImplementation.args = {
+    active: true,
+};
+//# sourceMappingURL=Parallax.stories.js.map

package/dist/components/Parallax/Parallax.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Parallax.stories.js","sourceRoot":"","sources":["../../../src/components/Parallax/Parallax.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA8C;AAC9C,0DAAkC;AAElC,kBAAe;IACb,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,kBAAQ;CACpB,CAAC;AAEK,MAAM,qBAAqB,GAAG,CAAC,IAAS,EAAE,EAAE;IACjD,OAAO,CACL,8BAAC,kBAAQ,oBAAK,IAAI;QAChB;YACE,yEAAqC;YACrC,wIAGI,CACA,CACG,CACZ,CAAC;AACJ,CAAC,CAAC;AAZW,QAAA,qBAAqB,yBAYhC;AACF,6BAAqB,CAAC,IAAI,GAAG;IAC3B,MAAM,EAAE,IAAI;CAC+B,CAAC"}

package/dist/components/Parallax/Parallax.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Parallax/Parallax.test.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const Parallax_1 = require("./Parallax");
+const ELEMENT_POSITION_SIZE = [130, 500];
+it.each([
+    [0, ...ELEMENT_POSITION_SIZE, 0],
+    [130, ...ELEMENT_POSITION_SIZE, 0],
+    [380, ...ELEMENT_POSITION_SIZE, 0.5],
+    [630, ...ELEMENT_POSITION_SIZE, 1],
+    [750, ...ELEMENT_POSITION_SIZE, 1],
+])("Should calculate relative mouse position correctly", (mousePosition, elementPosition, elementSize, expectedResult) => {
+    expect((0, Parallax_1.calculateDistanceRelativeToBounds)(mousePosition, elementPosition, elementSize)).toEqual(expectedResult);
+});
+const MAX_ROTATION = 50;
+it.each([
+    [0, MAX_ROTATION, -25],
+    [0.5, MAX_ROTATION, 0],
+    [1, MAX_ROTATION, 25],
+])("Should calculate rotation correctly", (relativePosition, maxRotation, expectedRotation) => {
+    expect((0, Parallax_1.givenTheRelativePositionHowMuchToRotate)(relativePosition, maxRotation)).toEqual(expectedRotation);
+});
+//# sourceMappingURL=Parallax.test.js.map

package/dist/components/Parallax/Parallax.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Parallax.test.js","sourceRoot":"","sources":["../../../src/components/Parallax/Parallax.test.ts"],"names":[],"mappings":";;AAAA,yCAGoB;AAEpB,MAAM,qBAAqB,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;AAEzC,EAAE,CAAC,IAAI,CAAC;IACN,CAAC,CAAC,EAAE,GAAG,qBAAqB,EAAE,CAAC,CAAC;IAChC,CAAC,GAAG,EAAE,GAAG,qBAAqB,EAAE,CAAC,CAAC;IAClC,CAAC,GAAG,EAAE,GAAG,qBAAqB,EAAE,GAAG,CAAC;IACpC,CAAC,GAAG,EAAE,GAAG,qBAAqB,EAAE,CAAC,CAAC;IAClC,CAAC,GAAG,EAAE,GAAG,qBAAqB,EAAE,CAAC,CAAC;CACG,CAAC,CACtC,oDAAoD,EACpD,CAAC,aAAa,EAAE,eAAe,EAAE,WAAW,EAAE,cAAc,EAAE,EAAE;IAC9D,MAAM,CACJ,IAAA,4CAAiC,EAC/B,aAAa,EACb,eAAe,EACf,WAAW,CACZ,CACF,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;AAC5B,CAAC,CACF,CAAC;AAEF,MAAM,YAAY,GAAG,EAAE,CAAC;AAExB,EAAE,CAAC,IAAI,CAAC;IACN,CAAC,CAAC,EAAE,YAAY,EAAE,CAAC,EAAE,CAAC;IACtB,CAAC,GAAG,EAAE,YAAY,EAAE,CAAC,CAAC;IACtB,CAAC,CAAC,EAAE,YAAY,EAAE,EAAE,CAAC;CACtB,CAAC,CACA,qCAAqC,EACrC,CAAC,gBAAgB,EAAE,WAAW,EAAE,gBAAgB,EAAE,EAAE;IAClD,MAAM,CACJ,IAAA,kDAAuC,EAAC,gBAAgB,EAAE,WAAW,CAAC,CACvE,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;AAC9B,CAAC,CACF,CAAC"}

package/dist/components/Parallax/index.d.ts

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

package/dist/components/Parallax/index.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var Parallax_1 = require("./Parallax");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Parallax_1).default; } });
+//# sourceMappingURL=index.js.map

package/dist/components/Parallax/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Parallax/index.tsx"],"names":[],"mappings":";;;;;;AAAA,uCAAqC;AAA5B,oHAAA,OAAO,OAAA"}

package/dist/components/Parallax/math/helpers.d.ts

@@ -0,0 +1,58 @@
+export declare type Matrix3D = [
+    [
+        number,
+        number,
+        number,
+        number
+    ],
+    [
+        number,
+        number,
+        number,
+        number
+    ],
+    [
+        number,
+        number,
+        number,
+        number
+    ],
+    [
+        number,
+        number,
+        number,
+        number
+    ]
+];
+export declare type OperationData = {
+    type: "rotateX" | "rotateY" | "rotateZ";
+    angle: number;
+} | {
+    type: "translate";
+    x: number;
+    y: number;
+    z: number;
+} | {
+    type: "scale";
+    factorX: number;
+    factorY: number;
+    factorZ: number;
+} | {
+    type: "perspective";
+    fieldOfViewInRadians: number;
+    aspect: number;
+    near: number;
+    far: number;
+} | {
+    type: "matrix";
+    matrix: Matrix3D;
+};
+export declare function IDENTITY_MATRIX(): Matrix3D;
+export declare function generateMatrixFromOperations(...operations: OperationData[]): Matrix3D;
+declare type NumberMatrix = readonly (readonly number[])[];
+export declare function multiplyMatrixes<X extends NumberMatrix>(matrix1: X, matrix2: NumberMatrix & {
+    length: X[number]["length"];
+}): number[][];
+export declare function invertMatrix(matrix: Matrix3D): Matrix3D;
+export declare function flattenMatrix(matrix: number[][]): number[];
+export {};