anim-3d-obj 1.1.21 → 1.1.25

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,223 @@
-# 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 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)
+-   [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
+}
+=======
+   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
+-   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: `
+=======
+   // // 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: ' ',
+}
+=======
+   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}
+=======
+   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)
+-   [@mdnelles](https://github.com/mdnelles)
+
+## License
+
+[MIT](https://choosealicense.com/licenses/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/Faces/Face.d.ts

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

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

@@ -8,7 +8,7 @@ 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;
-    const styles = !!custom[faceType] && !!custom[faceType].css ? custom[faceType].css : global.css;
+    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;
@@ -46,6 +46,14 @@ const Face = (props) => {
             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) {
@@ -62,7 +70,8 @@ const Face = (props) => {
         }
         transform = `transform: rotateY(-90deg) translateZ(${tranz}px);`;
     }
-    const Specs = styled_components_1.default.div `
+    //const BackFlip: any = styled.section``;
+    const Specs = styled_components_1.default.section `
         ${styles}
         width: ${width}px;
         position: absolute;

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

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

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

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

package/dist/cjs/components/index.js

@@ -14,6 +14,9 @@ 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("./Cuboid"), exports);
+__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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,2CAAyB;AACzB,yCAAuB"}
+{"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/Scene.js

@@ -11,7 +11,6 @@ const SceneStyle = (props) => {
     const SceneStyleDiv = styled_components_1.default.div `
         width: ${width}px;
         height: ${height}px;
-
         -webkit-perspective: ${perspective}px;
         perspective: ${perspective}px;
         -webkit-perspective-origin: ${perspectiveOrigin};

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

@@ -1 +1 @@
-{"version":3,"file":"Scene.js","sourceRoot":"","sources":["../../../../src/components/styles/Scene.tsx"],"names":[],"mappings":";;;;;;AAAA,0EAAuC;AACvC,kDAA0B;AAWnB,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAE,EAAE;IACjD,MAAM,EAAE,KAAK,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,WAAW,GAAG,GAAG,EAAE,iBAAiB,GAAG,SAAS,EAAE,MAAM,GAAG,EAAE,EAAE,QAAQ,GAAG,EAAE,EAAE,GAAG,KAAK,CAAC;IAEtH,MAAM,aAAa,GAAQ,2BAAM,CAAC,GAAG,CAAA;iBACxB,KAAK;kBACJ,MAAM;;+BAEO,WAAW;uBACnB,WAAW;sCACI,iBAAiB;8BACzB,iBAAiB;KAC1C,CAAC;IAEF,OAAO,CACH,uCAAK,KAAK,EAAE,EAAE,MAAM,EAAE;QAClB,8BAAC,aAAa,QAAE,QAAQ,CAAiB,CACvC,CACT,CAAC;AACN,CAAC,CAAC;AAlBW,QAAA,UAAU,cAkBrB"}
+{"version":3,"file":"Scene.js","sourceRoot":"","sources":["../../../../src/components/styles/Scene.tsx"],"names":[],"mappings":";;;;;;AAAA,0EAAuC;AACvC,kDAA0B;AAWnB,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAE,EAAE;IACjD,MAAM,EAAE,KAAK,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,WAAW,GAAG,GAAG,EAAE,iBAAiB,GAAG,SAAS,EAAE,MAAM,GAAG,EAAE,EAAE,QAAQ,GAAG,EAAE,EAAE,GAAG,KAAK,CAAC;IAEtH,MAAM,aAAa,GAAQ,2BAAM,CAAC,GAAG,CAAA;iBACxB,KAAK;kBACJ,MAAM;+BACO,WAAW;uBACnB,WAAW;sCACI,iBAAiB;8BACzB,iBAAiB;KAC1C,CAAC;IAEF,OAAO,CACH,uCAAK,KAAK,EAAE,EAAE,MAAM,EAAE;QAClB,8BAAC,aAAa,QAAE,QAAQ,CAAiB,CACvC,CACT,CAAC;AACN,CAAC,CAAC;AAjBW,QAAA,UAAU,cAiBrB"}

package/dist/cjs/index.js

@@ -14,5 +14,7 @@ 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 });
+//export * from './hooks';
+//export * from './library';
 __exportStar(require("./components"), exports);
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,+CAA6B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,0BAA0B;AAC1B,4BAA4B;AAC5B,+CAA6B"}

package/dist/esm/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/esm/components/Button.js

@@ -0,0 +1,12 @@
+import React from 'react';
+export 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.createElement("button", Object.assign({ style: _style }, props), children));
+};
+//# sourceMappingURL=Button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,CAAC,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,8CAAQ,KAAK,EAAE,MAAM,IAAM,KAAK,GAC3B,QAAQ,CACJ,CACZ,CAAC;AACN,CAAC,CAAC"}

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

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

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

@@ -3,7 +3,7 @@ import React from 'react';
 const Face = (props) => {
     let { depth = 10, faceType, global = {}, height = 10, custom = false, tranz = 80, width = 100 } = props;
     let transform;
-    const styles = !!custom[faceType] && !!custom[faceType].css ? custom[faceType].css : global.css;
+    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;
@@ -41,6 +41,14 @@ const Face = (props) => {
             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) {
@@ -57,7 +65,8 @@ const Face = (props) => {
         }
         transform = `transform: rotateY(-90deg) translateZ(${tranz}px);`;
     }
-    const Specs = styled.div `
+    //const BackFlip: any = styled.section``;
+    const Specs = styled.section `
         ${styles}
         width: ${width}px;
         position: absolute;

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

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

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

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

package/dist/esm/components/index.js

@@ -1,3 +1,6 @@
-export * from './Cuboid';
+export * from './Button';
+export * from './Faces/Face';
 export * from './Card';
+export * from './Cuboid';
+export * from './Ribbon';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC"}

package/dist/esm/components/styles/Scene.js

@@ -5,7 +5,6 @@ export const SceneStyle = (props) => {
     const SceneStyleDiv = styled.div `
         width: ${width}px;
         height: ${height}px;
-
         -webkit-perspective: ${perspective}px;
         perspective: ${perspective}px;
         -webkit-perspective-origin: ${perspectiveOrigin};

package/dist/esm/components/styles/Scene.js.map

@@ -1 +1 @@
-{"version":3,"file":"Scene.js","sourceRoot":"","sources":["../../../../src/components/styles/Scene.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAE,EAAE;IACjD,MAAM,EAAE,KAAK,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,WAAW,GAAG,GAAG,EAAE,iBAAiB,GAAG,SAAS,EAAE,MAAM,GAAG,EAAE,EAAE,QAAQ,GAAG,EAAE,EAAE,GAAG,KAAK,CAAC;IAEtH,MAAM,aAAa,GAAQ,MAAM,CAAC,GAAG,CAAA;iBACxB,KAAK;kBACJ,MAAM;;+BAEO,WAAW;uBACnB,WAAW;sCACI,iBAAiB;8BACzB,iBAAiB;KAC1C,CAAC;IAEF,OAAO,CACH,6BAAK,KAAK,EAAE,EAAE,MAAM,EAAE;QAClB,oBAAC,aAAa,QAAE,QAAQ,CAAiB,CACvC,CACT,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"file":"Scene.js","sourceRoot":"","sources":["../../../../src/components/styles/Scene.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAE,EAAE;IACjD,MAAM,EAAE,KAAK,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,WAAW,GAAG,GAAG,EAAE,iBAAiB,GAAG,SAAS,EAAE,MAAM,GAAG,EAAE,EAAE,QAAQ,GAAG,EAAE,EAAE,GAAG,KAAK,CAAC;IAEtH,MAAM,aAAa,GAAQ,MAAM,CAAC,GAAG,CAAA;iBACxB,KAAK;kBACJ,MAAM;+BACO,WAAW;uBACnB,WAAW;sCACI,iBAAiB;8BACzB,iBAAiB;KAC1C,CAAC;IAEF,OAAO,CACH,6BAAK,KAAK,EAAE,EAAE,MAAM,EAAE;QAClB,oBAAC,aAAa,QAAE,QAAQ,CAAiB,CACvC,CACT,CAAC;AACN,CAAC,CAAC"}

package/dist/esm/index.js

@@ -1,2 +1,4 @@
+//export * from './hooks';
+//export * from './library';
 export * from './components';
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,0BAA0B;AAC1B,4BAA4B;AAC5B,cAAc,cAAc,CAAC"}

package/package.json

@@ -1,48 +1,41 @@
 {
-   "name": "anim-3d-obj",
-   "repository": {
-      "type": "git",
-      "url": "https://github.com/mdnelles/Component-Library"
-   },
-   "homepage": "https://github.com/mdnelles/anim-3d-objs-launchers",
-   "version": "1.1.21",
-   "description": "React library for creating 3D objects quickly.  Also these objects can be animated",
-   "main": "dist/cjs/index.js",
-   "module": "dist/esm/index.js",
-   "files": [
-      "dist"
-   ],
-   "scripts": {
-      "build": "rm -rf dist/ && prettier --write src/ && npm run build:esm && npm run build:cjs",
-      "build:esm": "tsc",
-      "build:cjs": "tsc --module CommonJS --outDir dist/cjs"
-   },
-   "author": "mdnelles",
-   "license": "MIT",
-   "devDependencies": {
-      "@types/node": "^17.0.21",
-      "@types/react": "^17.0.37",
-      "@types/react-dom": "^17.0.11",
-      "@types/styled-components": "^5.1.25",
-      "react": "^18.2.0",
-      "react-dom": "^18.2.0",
-      "typescript": "^4.5.2"
-   },
-   "peerDependencies": {
-      "react": "^18.2.0",
-      "react-dom": "^18.2.0"
-   },
-   "dependencies": {
-      "styled-components": "^5.3.5"
-   },
-   "keywords": [
-      "React",
-      "CSS",
-      "style",
-      "animation",
-      "cube",
-      "cuboid",
-      "3d",
-      "webGL"
-   ]
+    "name": "anim-3d-obj",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/mdnelles/anim-3d-objs",
+        "homepage": "https://github.com/mdnelles/anim-3d-objs/blob/main/README.md"
+    },
+    "version": "1.1.25",
+    "description": "A component library for getting people started with easy to re-use components for everyday projects.",
+    "main": "dist/cjs/index.js",
+    "module": "dist/esm/index.js",
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "build": "rm -rf dist/ && prettier --write src/ && npm run build:esm && npm run build:cjs",
+        "build:esm": "tsc",
+        "build:cjs": "tsc --module CommonJS --outDir dist/cjs"
+    },
+    "author": "mnelles",
+    "license": "MIT",
+    "devDependencies": {
+        "@types/node": "^18.7.8",
+        "@types/react": "^18.0.17",
+        "@types/react-dom": "^18.0.6",
+        "@types/styled-components": "^5.1.26",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "typescript": "^4.7.4",
+        "styled-components": "^5.3.5"
+    },
+    "peerDependencies": {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "styled-components": "^5.3.5"
+    },
+    "dependencies": {
+        "release-it": "^15.3.0",
+        "styled-components": "^5.3.5"
+    }
 }