anim-3d-obj 1.1.22 → 1.1.23

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 JTL (Saman)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,154 +1,7 @@
-# React Typescript Cuboid Builder
-
-This project allows a user to create Cuboids of any size simply by entering a set of parameters.  
-The program does the leg work with regard to calculating translationZ depth and config on the fly.
-
--  [GIT HOME](https://github.com/mdnelles/anim-3d-objs-launcher)
--  [NPM HOME](https://www.npmjs.com/package/anim-3d-obj) npm i anim-3d-obj
-
-## Examples
-
--  [6 sided Cuboid - animate X360 Y360](https://codesandbox.io/s/anim-3d-obj-all-sides-simple-bf67yg)
--  [3 sided Object - animate y-axis](https://codesandbox.io/s/anim-3d-obj-3-sides-wobble-y-axis-wglkms)
--  [Double box spin](https://codesandbox.io/s/react-anim-3d-double-box-spin-vbdhg2)
--  [2 sided object with animation wobble](https://codesandbox.io/s/anim-3d-obj-wobblex-mmidkg)
--  [Parallel divs animated x and y axis in tandem](https://codesandbox.io/s/anim-3d-obj-2-sides-simple-4057y7)
--  [Spinning Slab](https://codesandbox.io/s/react-anim-3d-pulse-kc8g0f)
-
-## Config
-
-Animations are optional. Either or both of `anim1Specs` or `anim2Specs` can be applied to the object.
-
-```typescript
-const anim1Specs: object = {
-   border: "", // while testing reveal the animation wrapper
-   degreesHi: -45, // degrees if spin
-   degreesLow: 45, // degrees if spin
-   delay: 0, // start delay in seconds
-   direction: "normal", //normal alternating reverse
-   duration: 8, // seconds
-   fillMode: "forward", // node forward backward both
-   iterationCount: "infinite", // number or infinte
-   name: "Y360", // ** ANIMATIONS
-   timing: "ease-in-out", // linear ease ease-in-out
-};
-```
-
-`** ANIMATIONS`
-
--  X360: rotate 360 degrees on the x-axis
--  Y360: rotate 360 degrees on the y-axis
--  fadeInkf: fade object in from 0 to 1 Opacity
--  wobY: wobble on y-axis (degreesHi <-> degreesLow)
--  wobX: wobble on x-axis (degreesHi <-> degreesLow)
--  fwdx018: spin object on x-axis from 0 degrees to 180 degrees
--  fwdx1836: spin object on x-axis from 180 degrees to 360 degrees
--  fwdx09: spin object on x-axis from 0 degrees to 90 degrees
--  fwdx918: spin object on x-axis from 90 degrees to 180 degrees
--  fwdx1827: spin object on x-axis from 180 degrees to 270 degrees
--  fwdx2736: spin object on x-axis from 270 degrees to 360 degrees
--  fwdy018: spin object on y-axis from 0 degrees to 180 degrees
--  fwdy1836: spin object on y-axis from 180 degrees to 360 degrees
--  fwdy09: spin object on y-axis from 0 degrees to 90 degrees
--  fwdy918: spin object on y-axis from 90 degrees to 180 degrees
--  fwdy1827: spin object on y-axis from 180 degrees to 270 degrees
--  fwdy2736: spin object on y-axis from 270 degrees to 360 degrees
--  floatX: float object so is not stationary
--  floatShadow: float object + add shadow
--  pulseSM: pulse object Small
--  pulseMD: pulse object Medium
--  pulseLG: pulse object Large
--  noAnim: no animation place holder
-
-<>
-
-GLOBAL CONFIG
-
-```typescript
-// EXAMPLE GLOBAL FACE CONFIG
-// This will be applied to all Faces that do not have their own custom config
-const global: object = {
-   // // face individual styles (over rides global)
-   css: `
-         border: 1px solid #fff;
-         background: rgb(2,0,36);
-         background: linear-gradient(180deg, rgba(255,255,255,.1) 0%, rgba(141,191,249,.7) 100%);
-         color:white;
-         text-align:center;
-         line-height:10;
-         backface-visibility: visible;
-         font-family: Arial, Helvetica, sans-serif;
-         border-radius:5px;
-         `,
-   body: " ",
-};
-```
-
-<>
-
-CUSTOM CONFIG FOR INDIVIDUAL FACES
-
-```typescript
-const custom: object = {
-      // // face individual styles (over rides global)
-      front: {
-         css: ``,
-         body: <Login />,
-      },
-      left: {
-         css: `
-         border: 1px solid #fff;
-         background: rgb(2,0,36);
-         color:white;
-         text-align: center;
-         line-height:8;`
-         body: " ",
-      },
-      right: {
-         css: ``,
-         body: " ",
-      },
-      back: {
-         css: ``,
-         body: <Logout />,
-      },
-      bottom: {
-         css: `
-         background-color:rgba(141,191,249,1);
-         -webkit-box-shadow: 0px 0px 23px 18px #858585;
-         box-shadow: 0px 0px 23px 18px #858585;
-         `,
-      },
-```
-
-## Render
-
-and
-
-```typescript
-<Cuboid
-   width={250}
-   height={300}
-   depth={250}
-   perspective={800}
-   perspectiveOrigin='50% 50%'
-   zIndex={10}
-   anim1Specs={anim1Specs}
-   anim2Specs={anim2Specs}
-   custom={custom}
-   faces={faceprops}
-   global={global}
-/>
-```
-
-will produce the following
-
-![Logo](https://raw.githubusercontent.com/mdnelles/objs-local/main/img.png?token=GHSAT0AAAAAABQVNJ4VATWQM4SI3LXSTDZWYVDOL7Q)
-
-## Authors
-
--  [@mdnelles](https://github.com/mdnelles)
-
-## License
-
-[MIT](https://choosealicense.com/licenses/mit/)
+# React Component Library
+
+Learn how to make a component library! Link is in the repository description.
+
+## License
+
+MIT

package/dist/cjs/components/Button.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface IButtonProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
+    backgroundColor?: string;
+    color?: string;
+}
+export declare const Button: React.FunctionComponent<IButtonProps>;

package/dist/cjs/components/Button.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.Button = void 0;
+const react_1 = __importDefault(require("react"));
+const Button = (props) => {
+    const { children, backgroundColor, color, style } = props;
+    let _style = style || {};
+    /** Override Defaults */
+    if (backgroundColor && _style)
+        _style.backgroundColor = backgroundColor;
+    if (color && _style)
+        _style.color = color;
+    return (react_1.default.createElement("button", Object.assign({ style: _style }, props), children));
+};
+exports.Button = Button;
+//# sourceMappingURL=Button.js.map

package/dist/cjs/components/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAOnB,MAAM,MAAM,GAA0C,CAAC,KAAK,EAAE,EAAE;IACnE,MAAM,EAAE,QAAQ,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAE1D,IAAI,MAAM,GAAwB,KAAK,IAAI,EAAE,CAAC;IAE9C,wBAAwB;IACxB,IAAI,eAAe,IAAI,MAAM;QAAE,MAAM,CAAC,eAAe,GAAG,eAAe,CAAC;IACxE,IAAI,KAAK,IAAI,MAAM;QAAE,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC;IAE1C,OAAO,CACH,wDAAQ,KAAK,EAAE,MAAM,IAAM,KAAK,GAC3B,QAAQ,CACJ,CACZ,CAAC;AACN,CAAC,CAAC;AAdW,QAAA,MAAM,UAcjB"}

package/dist/cjs/components/Card.d.ts

@@ -0,0 +1,2 @@
+import { ObjProps } from './Faces/FaceInter';
+export declare const Card: (props: ObjProps) => any;

package/dist/cjs/components/Card.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Card = void 0;
+const react_1 = __importDefault(require("react"));
+const AnimWrap_1 = require("./styles/AnimWrap");
+const Scene_1 = require("./styles/Scene");
+const Face_1 = __importDefault(require("./Faces/Face"));
+const Global_1 = require("./styles/Global");
+const Card = (props) => {
+    let { anim1Specs, anim2Specs, width = 5, height = 5, faces, global = {}, custom = {}, tranz = (+height / 2) | 0, perspective, perspectiveOrigin, zIndex } = props;
+    const buildFace = (faceType) => {
+        return react_1.default.createElement(Face_1.default, { width: width, height: height, depth: 0.1, faceType: faceType, id: faceType, tranz: tranz, global: global, custom: custom });
+    };
+    return (react_1.default.createElement(Scene_1.SceneStyle, { width: width, height: height, perspective: perspective, perspectiveOrigin: perspectiveOrigin, zIndex: zIndex },
+        react_1.default.createElement(AnimWrap_1.AnimWrap, { animSpecs: anim1Specs },
+            react_1.default.createElement(AnimWrap_1.AnimWrap, { animSpecs: anim2Specs },
+                react_1.default.createElement(Global_1.ObjWrapper, null,
+                    !!faces && !!faces.front ? buildFace('front') : null,
+                    !!faces && !!faces.back ? buildFace('back') : null)))));
+};
+exports.Card = Card;
+//# sourceMappingURL=Card.js.map

package/dist/cjs/components/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,gDAA6C;AAC7C,0CAA4C;AAE5C,wDAAgC;AAChC,4CAA6C;AAEtC,MAAM,IAAI,GAAG,CAAC,KAAe,EAAO,EAAE;IACzC,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,GAAG,EAAE,EAAE,MAAM,GAAG,EAAE,EAAE,KAAK,GAAG,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IAElK,MAAM,SAAS,GAAG,CAAC,QAAa,EAAO,EAAE;QACrC,OAAO,8BAAC,cAAI,IAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAI,CAAC;IAC9I,CAAC,CAAC;IAEF,OAAO,CACH,8BAAC,kBAAU,IAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,EAAE,MAAM;QACpH,8BAAC,mBAAQ,IAAC,SAAS,EAAE,UAAU;YAC3B,8BAAC,mBAAQ,IAAC,SAAS,EAAE,UAAU;gBAC3B,8BAAC,mBAAU;oBACN,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI;oBACpD,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAC1C,CACN,CACJ,CACF,CAChB,CAAC;AACN,CAAC,CAAC;AAnBW,QAAA,IAAI,QAmBf"}

package/dist/cjs/components/Cuboid.d.ts

@@ -0,0 +1,2 @@
+import { ObjProps } from './Faces/FaceInter';
+export declare const Cuboid: (props: ObjProps) => any;

package/dist/cjs/components/Cuboid.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Cuboid = void 0;
+const react_1 = __importDefault(require("react"));
+const AnimWrap_1 = require("./styles/AnimWrap");
+const Scene_1 = require("./styles/Scene");
+const Face_1 = __importDefault(require("./Faces/Face"));
+const Global_1 = require("./styles/Global");
+const Cuboid = (props) => {
+    let { anim1Specs, anim2Specs, width = 5, height = 5, depth = 5, faces, global = {}, custom = {}, tranz = (+height / 2) | 0, perspective, perspectiveOrigin, zIndex } = props;
+    const buildFace = (faceType) => {
+        return react_1.default.createElement(Face_1.default, { width: width, height: height, depth: depth, faceType: faceType, id: faceType, tranz: tranz, global: global, custom: custom });
+    };
+    return (react_1.default.createElement(Scene_1.SceneStyle, { width: width, height: height, perspective: perspective, perspectiveOrigin: perspectiveOrigin, zIndex: zIndex },
+        react_1.default.createElement(AnimWrap_1.AnimWrap, { animSpecs: anim1Specs },
+            react_1.default.createElement(AnimWrap_1.AnimWrap, { animSpecs: anim2Specs },
+                react_1.default.createElement(Global_1.ObjWrapper, null,
+                    !!faces && !!faces.front ? buildFace('front') : null,
+                    !!faces && !!faces.right ? buildFace('right') : null,
+                    !!faces && !!faces.back ? buildFace('back') : null,
+                    !!faces && !!faces.left ? buildFace('left') : null,
+                    !!faces && !!faces.top ? buildFace('top') : null,
+                    !!faces && !!faces.bottom ? buildFace('bottom') : null)))));
+};
+exports.Cuboid = Cuboid;
+//# sourceMappingURL=Cuboid.js.map

package/dist/cjs/components/Cuboid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Cuboid.js","sourceRoot":"","sources":["../../../src/components/Cuboid.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,gDAA6C;AAC7C,0CAA4C;AAE5C,wDAAgC;AAChC,4CAA6C;AAEtC,MAAM,MAAM,GAAG,CAAC,KAAe,EAAO,EAAE;IAC3C,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,GAAG,EAAE,EAAE,MAAM,GAAG,EAAE,EAAE,KAAK,GAAG,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IAE7K,MAAM,SAAS,GAAG,CAAC,QAAa,EAAO,EAAE;QACrC,OAAO,8BAAC,cAAI,IAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAI,CAAC;IAChJ,CAAC,CAAC;IAEF,OAAO,CACH,8BAAC,kBAAU,IAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,EAAE,MAAM;QACpH,8BAAC,mBAAQ,IAAC,SAAS,EAAE,UAAU;YAC3B,8BAAC,mBAAQ,IAAC,SAAS,EAAE,UAAU;gBAC3B,8BAAC,mBAAU;oBACN,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI;oBACpD,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI;oBACpD,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI;oBAClD,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI;oBAClD,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI;oBAChD,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAC9C,CACN,CACJ,CACF,CAChB,CAAC;AACN,CAAC,CAAC;AAvBW,QAAA,MAAM,UAuBjB"}

package/dist/cjs/components/Faces/Face.d.ts

@@ -0,0 +1,3 @@
+import { FaceProps } from './FaceInter';
+declare const Face: (props: FaceProps) => JSX.Element;
+export default Face;

package/dist/cjs/components/Faces/Face.js

@@ -0,0 +1,84 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_components_1 = __importDefault(require("styled-components"));
+const react_1 = __importDefault(require("react"));
+const Face = (props) => {
+    let { depth = 10, faceType, global = {}, height = 10, custom = false, tranz = 80, width = 100 } = props;
+    let transform;
+    let styles = !!custom[faceType] && !!custom[faceType].css ? custom[faceType].css : global.css;
+    const body = !!custom[faceType] && !!custom[faceType].body ? custom[faceType].body : global.body;
+    if (faceType === 'bottom') {
+        tranz = +height - +depth / 2;
+        height = +depth;
+        transform = `transform: rotateX(-90deg) translateZ(${tranz}px);`;
+        //styles = !!custom["top"] ? custom : global;
+    }
+    else if (faceType === 'top') {
+        height = +depth;
+        if (!!depth)
+            tranz = +depth / 2;
+        transform = `transform: rotateX(90deg) translateZ(${tranz}px);`;
+    }
+    else if (faceType === 'front') {
+        if (!!depth)
+            tranz = +depth / 2;
+        transform = `transform: rotateY(0deg) translateZ(${tranz}px);`;
+    }
+    else if (faceType === 'back') {
+        if (!!depth)
+            tranz = +depth / 2;
+        transform = `transform: rotateY(180deg) translateZ(${tranz}px);`;
+    }
+    else if (faceType === 'right') {
+        if (height > width && !depth) {
+            tranz = -(+height / 2 - +width);
+            width = +height;
+        }
+        else if (width > height && !depth) {
+            tranz = +height / 2;
+            height = +width;
+        }
+        else {
+            tranz = +width - +depth / 2;
+            width = +depth;
+        }
+        transform = `transform: rotateY(90deg) translateZ(${tranz}px);`;
+        // topr is to of Ribbon which points back
+    }
+    else if (faceType === 'topr') {
+        height = +depth;
+        if (!!depth)
+            tranz = +depth / 2;
+        //let offset = depth / 2;
+        transform = `transform: rotateX(90deg) translateZ(${tranz}px );  `;
+    }
+    else {
+        if (height > width && !depth) {
+            tranz = -(+height / 2 - +width);
+            width = +height;
+        }
+        else if (width > height && !depth) {
+            tranz = +height / 2;
+            height = +width;
+        }
+        else {
+            tranz = +depth / 2;
+            width = +depth;
+        }
+        transform = `transform: rotateY(-90deg) translateZ(${tranz}px);`;
+    }
+    //const BackFlip: any = styled.section``;
+    const Specs = styled_components_1.default.section `
+        ${styles}
+        width: ${width}px;
+        position: absolute;
+        height: ${height}px;
+        ${transform};
+    `;
+    return react_1.default.createElement(Specs, null, body);
+};
+exports.default = Face;
+//# sourceMappingURL=Face.js.map

package/dist/cjs/components/Faces/Face.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Face.js","sourceRoot":"","sources":["../../../../src/components/Faces/Face.tsx"],"names":[],"mappings":";;;;;AAAA,0EAAuC;AACvC,kDAA0B;AAG1B,MAAM,IAAI,GAAG,CAAC,KAAgB,EAAe,EAAE;IAC3C,IAAI,EAAE,KAAK,GAAG,EAAE,EAAE,QAAQ,EAAE,MAAM,GAAG,EAAE,EAAE,MAAM,GAAG,EAAE,EAAE,MAAM,GAAG,KAAK,EAAE,KAAK,GAAG,EAAE,EAAE,KAAK,GAAG,GAAG,EAAE,GAAG,KAAK,CAAC;IAExG,IAAI,SAAS,CAAC;IACd,IAAI,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC;IAC9F,MAAM,IAAI,GAAG,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC;IACjG,IAAI,QAAQ,KAAK,QAAQ,EAAE;QACvB,KAAK,GAAG,CAAC,MAAM,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC;QAC7B,MAAM,GAAG,CAAC,KAAK,CAAC;QAChB,SAAS,GAAG,yCAAyC,KAAK,MAAM,CAAC;QACjE,6CAA6C;KAChD;SAAM,IAAI,QAAQ,KAAK,KAAK,EAAE;QAC3B,MAAM,GAAG,CAAC,KAAK,CAAC;QAChB,IAAI,CAAC,CAAC,KAAK;YAAE,KAAK,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC;QAChC,SAAS,GAAG,wCAAwC,KAAK,MAAM,CAAC;KACnE;SAAM,IAAI,QAAQ,KAAK,OAAO,EAAE;QAC7B,IAAI,CAAC,CAAC,KAAK;YAAE,KAAK,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC;QAChC,SAAS,GAAG,uCAAuC,KAAK,MAAM,CAAC;KAClE;SAAM,IAAI,QAAQ,KAAK,MAAM,EAAE;QAC5B,IAAI,CAAC,CAAC,KAAK;YAAE,KAAK,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC;QAChC,SAAS,GAAG,yCAAyC,KAAK,MAAM,CAAC;KACpE;SAAM,IAAI,QAAQ,KAAK,OAAO,EAAE;QAC7B,IAAI,MAAM,GAAG,KAAK,IAAI,CAAC,KAAK,EAAE;YAC1B,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;YAChC,KAAK,GAAG,CAAC,MAAM,CAAC;SACnB;aAAM,IAAI,KAAK,GAAG,MAAM,IAAI,CAAC,KAAK,EAAE;YACjC,KAAK,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC;YACpB,MAAM,GAAG,CAAC,KAAK,CAAC;SACnB;aAAM;YACH,KAAK,GAAG,CAAC,KAAK,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC;YAC5B,KAAK,GAAG,CAAC,KAAK,CAAC;SAClB;QACD,SAAS,GAAG,wCAAwC,KAAK,MAAM,CAAC;QAChE,yCAAyC;KAC5C;SAAM,IAAI,QAAQ,KAAK,MAAM,EAAE;QAC5B,MAAM,GAAG,CAAC,KAAK,CAAC;QAChB,IAAI,CAAC,CAAC,KAAK;YAAE,KAAK,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC;QAChC,yBAAyB;QACzB,SAAS,GAAG,wCAAwC,KAAK,SAAS,CAAC;KACtE;SAAM;QACH,IAAI,MAAM,GAAG,KAAK,IAAI,CAAC,KAAK,EAAE;YAC1B,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;YAChC,KAAK,GAAG,CAAC,MAAM,CAAC;SACnB;aAAM,IAAI,KAAK,GAAG,MAAM,IAAI,CAAC,KAAK,EAAE;YACjC,KAAK,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC;YACpB,MAAM,GAAG,CAAC,KAAK,CAAC;SACnB;aAAM;YACH,KAAK,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC;YACnB,KAAK,GAAG,CAAC,KAAK,CAAC;SAClB;QACD,SAAS,GAAG,yCAAyC,KAAK,MAAM,CAAC;KACpE;IAED,yCAAyC;IAEzC,MAAM,KAAK,GAAQ,2BAAM,CAAC,OAAO,CAAA;UAC3B,MAAM;iBACC,KAAK;;kBAEJ,MAAM;UACd,SAAS;KACd,CAAC;IAEF,OAAO,8BAAC,KAAK,QAAE,IAAI,CAAS,CAAC;AACjC,CAAC,CAAC;AAEF,kBAAe,IAAI,CAAC"}

package/dist/cjs/components/Ribbon.d.ts

@@ -0,0 +1,2 @@
+import { ObjProps } from './Faces/FaceInter';
+export declare const Ribbon: (props: ObjProps) => any;

package/dist/cjs/components/Ribbon.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Ribbon = void 0;
+const react_1 = __importDefault(require("react"));
+const AnimWrap_1 = require("./styles/AnimWrap");
+const Scene_1 = require("./styles/Scene");
+const Face_1 = __importDefault(require("./Faces/Face"));
+const Global_1 = require("./styles/Global");
+const Ribbon = (props) => {
+    let { anim1Specs, anim2Specs, width = 5, height = 5, depth = 5, faces, global = {}, custom = {}, tranz = (+height / 2) | 0, perspective, perspectiveOrigin, zIndex } = props;
+    const buildFace = (faceType) => {
+        return react_1.default.createElement(Face_1.default, { width: width, height: height, depth: depth, faceType: faceType, id: faceType, tranz: tranz, global: global, custom: custom });
+    };
+    return (react_1.default.createElement(Scene_1.SceneStyle, { width: width, height: height, perspective: perspective, perspectiveOrigin: perspectiveOrigin, zIndex: zIndex },
+        react_1.default.createElement(AnimWrap_1.AnimWrap, { animSpecs: anim1Specs },
+            react_1.default.createElement(AnimWrap_1.AnimWrap, { animSpecs: anim2Specs },
+                react_1.default.createElement(Global_1.ObjWrapper, null,
+                    !!faces && !!faces.bottom ? buildFace('bottom') : null,
+                    !!faces && !!faces.back ? buildFace('back') : null,
+                    !!faces && !!faces.top ? buildFace('topr') : null)))));
+};
+exports.Ribbon = Ribbon;
+//# sourceMappingURL=Ribbon.js.map

package/dist/cjs/components/Ribbon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Ribbon.js","sourceRoot":"","sources":["../../../src/components/Ribbon.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,gDAA6C;AAC7C,0CAA4C;AAE5C,wDAAgC;AAChC,4CAA6C;AAEtC,MAAM,MAAM,GAAG,CAAC,KAAe,EAAO,EAAE;IAC3C,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,GAAG,EAAE,EAAE,MAAM,GAAG,EAAE,EAAE,KAAK,GAAG,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IAE7K,MAAM,SAAS,GAAG,CAAC,QAAa,EAAO,EAAE;QACrC,OAAO,8BAAC,cAAI,IAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAI,CAAC;IAChJ,CAAC,CAAC;IAEF,OAAO,CACH,8BAAC,kBAAU,IAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,EAAE,MAAM;QACpH,8BAAC,mBAAQ,IAAC,SAAS,EAAE,UAAU;YAC3B,8BAAC,mBAAQ,IAAC,SAAS,EAAE,UAAU;gBAC3B,8BAAC,mBAAU;oBACN,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI;oBACtD,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI;oBAClD,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CACzC,CACN,CACJ,CACF,CAChB,CAAC;AACN,CAAC,CAAC;AApBW,QAAA,MAAM,UAoBjB"}

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

@@ -0,0 +1,5 @@
+export * from './Button';
+export * from './Faces/Face';
+export * from './Card';
+export * from './Cuboid';
+export * from './Ribbon';

package/dist/cjs/components/index.js

@@ -0,0 +1,22 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Button"), exports);
+__exportStar(require("./Faces/Face"), exports);
+__exportStar(require("./Card"), exports);
+__exportStar(require("./Cuboid"), exports);
+__exportStar(require("./Ribbon"), exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,2CAAyB;AACzB,+CAA6B;AAC7B,yCAAuB;AACvB,2CAAyB;AACzB,2CAAyB"}

package/dist/cjs/components/styles/AnimWrap.d.ts

@@ -0,0 +1,2 @@
+import { AnimStylesProps } from './Anim';
+export declare const AnimWrap: (props: AnimStylesProps) => JSX.Element;

package/dist/cjs/components/styles/AnimWrap.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 });
+exports.AnimWrap = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const react_1 = __importDefault(require("react"));
+const Anims_1 = require("./Anims");
+const AnimWrap = (props) => {
+    const { children, animSpecs } = props;
+    const AS = animSpecs;
+    const { X360, Y360, fadeInkf, wobY, wobX, fwdx018, fwdx1836, fwdx09, fwdx918, fwdx1827, fwdx2736, fwdy018, fwdy1836, fwdy09, fwdy918, fwdy1827, fwdy2736, floatX, floatShadow, pulseSM, pulseMD, pulseLG, noAnim } = (0, Anims_1.allAnims)({ degreesHi: AS.degreesHi, degreesLow: AS.degreesLow });
+    let theAnim = 'noAnim';
+    // need to iterate through all animation posibilities and not use eval() to satisfy TS
+    if (AS.name === 'X360')
+        theAnim = X360;
+    else if (AS.name === 'Y360')
+        theAnim = Y360;
+    else if (AS.name === 'fadeInkf')
+        theAnim = fadeInkf;
+    else if (AS.name === 'wobX')
+        theAnim = wobX;
+    else if (AS.name === 'wobY')
+        theAnim = wobY;
+    else if (AS.name === 'fwdx018')
+        theAnim = fwdx018;
+    else if (AS.name === 'fwdx1836')
+        theAnim = fwdx1836;
+    else if (AS.name === 'fwdx09')
+        theAnim = fwdx09;
+    else if (AS.name === 'fwdx918')
+        theAnim = fwdx918;
+    else if (AS.name === 'fwdx1827')
+        theAnim = fwdx1827;
+    else if (AS.name === 'fwdx2736')
+        theAnim = fwdx2736;
+    else if (AS.name === 'fwdy018')
+        theAnim = fwdy018;
+    else if (AS.name === 'fwdy1836')
+        theAnim = fwdy1836;
+    else if (AS.name === 'fwdy09')
+        theAnim = fwdy09;
+    else if (AS.name === 'fwdy918')
+        theAnim = fwdy918;
+    else if (AS.name === 'fwdy1827')
+        theAnim = fwdy1827;
+    else if (AS.name === 'fwdy2736')
+        theAnim = fwdy2736;
+    else if (AS.name === 'floatX')
+        theAnim = floatX;
+    else if (AS.name === 'floatShadow')
+        theAnim = floatShadow;
+    else if (AS.name === 'pulseSM')
+        theAnim = pulseSM;
+    else if (AS.name === 'pulseMD')
+        theAnim = pulseMD;
+    else if (AS.name === 'pulseLG')
+        theAnim = pulseLG;
+    else
+        theAnim = noAnim;
+    const AnimWrapDiv = styled_components_1.default.div `
+        width: 100%;
+        height: 100%;
+        position: relative;
+        transform-style: preserve-3d;
+        border: ${AS.border};
+        -webkit-animation-duration: ${AS.duration}s;
+        animation-duration: ${AS.duration}s;
+        -webkit-animation-iteration-count: ${AS.iterationCount};
+        animation-iteration-count: ${AS.iterationCount};
+        -webkit-animation-name: ${theAnim};
+        animation-name: ${theAnim};
+        -webkit-animation-fill-mode: ${AS.fillMode};
+        animation-fill-mode: ${AS.fillMode};
+        animation-direction: ${AS.direction};
+        -webkit-animation-direction: ${AS.direction};
+        -webkit-animation-timing-function: ${AS.timing};
+        animation-timing-function: ${AS.timing};
+        -webkit-animation-delay: ${AS.delay}s;
+        animation-delay: ${AS.delay}s;
+    `;
+    return react_1.default.createElement(AnimWrapDiv, null, children);
+};
+exports.AnimWrap = AnimWrap;
+//# sourceMappingURL=AnimWrap.js.map

package/dist/cjs/components/styles/AnimWrap.js.map

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

package/dist/cjs/components/styles/Anims.d.ts

@@ -0,0 +1,30 @@
+interface AllAnimsProps {
+    degreesLow?: number;
+    degreesHi?: number;
+}
+export declare const allAnims: (props: AllAnimsProps) => {
+    X360: import("styled-components").Keyframes;
+    Y360: import("styled-components").Keyframes;
+    fadeInkf: import("styled-components").Keyframes;
+    wobY: import("styled-components").Keyframes;
+    wobX: import("styled-components").Keyframes;
+    fwdx018: import("styled-components").Keyframes;
+    fwdx1836: import("styled-components").Keyframes;
+    fwdx09: import("styled-components").Keyframes;
+    fwdx918: import("styled-components").Keyframes;
+    fwdx1827: import("styled-components").Keyframes;
+    fwdx2736: import("styled-components").Keyframes;
+    fwdy018: import("styled-components").Keyframes;
+    fwdy1836: import("styled-components").Keyframes;
+    fwdy09: import("styled-components").Keyframes;
+    fwdy918: import("styled-components").Keyframes;
+    fwdy1827: import("styled-components").Keyframes;
+    fwdy2736: import("styled-components").Keyframes;
+    floatX: import("styled-components").Keyframes;
+    floatShadow: import("styled-components").Keyframes;
+    pulseSM: import("styled-components").Keyframes;
+    pulseMD: import("styled-components").Keyframes;
+    pulseLG: import("styled-components").Keyframes;
+    noAnim: import("styled-components").Keyframes;
+};
+export {};