@threekit-tools/treble 0.0.85 → 0.0.86

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

@@ -1,6 +1,7 @@
 import React from 'react';
-interface IAwaitThreekitLoad {
+interface AwaitThreekitLoadProps {
     children: React.ReactNode;
+    fallback?: React.ReactNode;
 }
-declare const AwaitThreekitLoad: (props: IAwaitThreekitLoad) => JSX.Element | null;
+declare const AwaitThreekitLoad: React.FC<AwaitThreekitLoadProps>;
 export default AwaitThreekitLoad;

package/dist/components/AwaitThreekitLoad/index.js

@@ -6,9 +6,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var useThreekitInitStatus_1 = __importDefault(require("../../hooks/useThreekitInitStatus"));
 var AwaitThreekitLoad = function (props) {
-    var children = props.children;
+    var children = props.children, fallback = props.fallback;
     var isLoaded = (0, useThreekitInitStatus_1.default)();
-    if (!isLoaded || !children)
+    if (!isLoaded) {
+        if (fallback)
+            return react_1.default.createElement(react_1.default.Fragment, null, fallback);
+        return null;
+    }
+    if (!children)
         return null;
     return react_1.default.createElement(react_1.default.Fragment, null, children);
 };

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

@@ -0,0 +1,8 @@
+interface BreatheAnimationProps {
+    magnifier?: number;
+    speed?: number;
+    resumeDelay?: number;
+    nodeName: string;
+}
+declare const BreatheAnimation: (props: BreatheAnimationProps) => null;
+export default BreatheAnimation;

package/dist/components/BreatheAnimation/index.js

@@ -0,0 +1,182 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var useAnimationStart_1 = __importDefault(require("../../hooks/useAnimationStart"));
+var types_1 = require("../../types");
+var BreatheAnimation = function (props) {
+    var readyToAnimate = (0, useAnimationStart_1.default)();
+    var initialTranslation = (0, react_1.useRef)(null);
+    var initialRotation = (0, react_1.useRef)(null);
+    var animationInProgress = (0, react_1.useRef)(false);
+    var animationNodeId = (0, react_1.useRef)(undefined);
+    var startTime = (0, react_1.useRef)(null);
+    var timeoutId = (0, react_1.useRef)(null);
+    var speed = props.speed || 4;
+    var magnifier = props.magnifier || 2;
+    var resumeDelay = props.resumeDelay, nodeName = props.nodeName;
+    (0, react_1.useEffect)(function () {
+        if (!readyToAnimate)
+            return;
+        if (!nodeName)
+            return;
+        var ruleName = "wobble-animation";
+        var animateFrame = function (timestamp) {
+            if (!initialTranslation.current ||
+                !initialRotation.current ||
+                !animationNodeId.current)
+                return;
+            if (startTime.current === null)
+                startTime.current = timestamp;
+            var elapsed = (timestamp - startTime.current) / 1000;
+            var rotationDelta = {
+                x: 6 * magnifier * Math.cos(elapsed / (2.25 * speed)),
+                y: 3 * magnifier * Math.sin(elapsed / (2 * speed)),
+                z: 2 * magnifier * Math.sin(elapsed / (2 * speed)),
+            };
+            var translationDelta = {
+                x: 0,
+                y: (magnifier * Math.sin(elapsed / speed)) / 100,
+                z: 0,
+            };
+            window.threekit.player.scene.set({
+                id: animationNodeId.current,
+                plug: types_1.PLUG_TYPES.TRANSFORM,
+                property: types_1.TRANSFORM_PROPERTY_TYPES.ROTATION,
+            }, {
+                x: initialRotation.current.x + rotationDelta.x,
+                y: initialRotation.current.y + rotationDelta.y,
+                z: initialRotation.current.z + rotationDelta.z,
+            });
+            window.threekit.player.scene.set({
+                id: animationNodeId.current,
+                plug: types_1.PLUG_TYPES.TRANSFORM,
+                property: types_1.TRANSFORM_PROPERTY_TYPES.TRANSLATION,
+            }, {
+                x: initialTranslation.current.x + translationDelta.x,
+                y: initialTranslation.current.y + translationDelta.y,
+                z: initialTranslation.current.z + translationDelta.z,
+            });
+            if (animationInProgress.current)
+                window.requestAnimationFrame(animateFrame);
+        };
+        (function () { return __awaiter(void 0, void 0, void 0, function () {
+            var player, assetInstance;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        player = window.threekit.player.enableApi(types_1.PRIVATE_APIS.PLAYER);
+                        return [4, player.getAssetInstance(window.threekit.player.scene.find({
+                                id: window.threekit.player.instanceId,
+                                plug: types_1.PLUG_TYPES.PROXY,
+                                property: 'asset',
+                            }))];
+                    case 1:
+                        assetInstance = _a.sent();
+                        animationNodeId.current = window.threekit.player.scene.get({
+                            from: assetInstance,
+                            name: nodeName,
+                        }).id;
+                        initialRotation.current = window.threekit.player.scene.get({
+                            id: animationNodeId.current,
+                            plug: types_1.PLUG_TYPES.TRANSFORM,
+                            property: types_1.TRANSFORM_PROPERTY_TYPES.ROTATION,
+                        });
+                        initialTranslation.current = window.threekit.player.scene.get({
+                            id: animationNodeId.current,
+                            plug: types_1.PLUG_TYPES.TRANSFORM,
+                            property: types_1.TRANSFORM_PROPERTY_TYPES.TRANSLATION,
+                        });
+                        animationInProgress.current = true;
+                        window.threekit.player.tools.addTool({
+                            key: ruleName,
+                            label: 'wobble-animation',
+                            active: true,
+                            enabled: true,
+                            handlers: {
+                                mousedown: function () { return __awaiter(void 0, void 0, void 0, function () {
+                                    return __generator(this, function (_a) {
+                                        animationInProgress.current = false;
+                                        if (resumeDelay === undefined)
+                                            window.threekit.player.tools.removeTool(ruleName);
+                                        if (timeoutId.current) {
+                                            clearTimeout(timeoutId.current);
+                                            timeoutId.current = null;
+                                        }
+                                        return [2];
+                                    });
+                                }); },
+                                mouseup: function () { return __awaiter(void 0, void 0, void 0, function () {
+                                    return __generator(this, function (_a) {
+                                        if (resumeDelay === undefined)
+                                            return [2];
+                                        timeoutId.current = setTimeout(function () {
+                                            initialRotation.current = window.threekit.player.scene.get({
+                                                id: animationNodeId.current,
+                                                plug: types_1.PLUG_TYPES.TRANSFORM,
+                                                property: types_1.TRANSFORM_PROPERTY_TYPES.ROTATION,
+                                            });
+                                            initialTranslation.current = window.threekit.player.scene.get({
+                                                id: animationNodeId.current,
+                                                plug: types_1.PLUG_TYPES.TRANSFORM,
+                                                property: types_1.TRANSFORM_PROPERTY_TYPES.TRANSLATION,
+                                            });
+                                            startTime.current = null;
+                                            animationInProgress.current = true;
+                                            window.requestAnimationFrame(animateFrame);
+                                        }, resumeDelay * 1000);
+                                        return [2];
+                                    });
+                                }); },
+                            },
+                        });
+                        window.requestAnimationFrame(animateFrame);
+                        return [2];
+                }
+            });
+        }); })();
+        return function () {
+            window.threekit.player.tools.removeTool(ruleName);
+        };
+    }, [readyToAnimate]);
+    return null;
+};
+exports.default = BreatheAnimation;

package/dist/components/DraggableHint/draggableIndicator.styles.d.ts

@@ -0,0 +1,5 @@
+import { DraggableIndicatorProps } from './index';
+declare type HandWrapperProps = Pick<DraggableIndicatorProps, 'color' | 'duration'>;
+export declare const Wrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const HandWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, HandWrapperProps, never>;
+export {};

package/dist/components/DraggableHint/draggableIndicator.styles.js

@@ -0,0 +1,35 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HandWrapper = exports.Wrapper = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var bounce = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    0% {\n        transform: translateX(0);\n    }\n\n    50% {\n        transform: translateX(-100px);\n    }\n\n    100% {\n        transform: translateX(0);\n    }\n"], ["\n    0% {\n        transform: translateX(0);\n    }\n\n    50% {\n        transform: translateX(-100px);\n    }\n\n    100% {\n        transform: translateX(0);\n    }\n"])));
+exports.Wrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: max-content;\n  position: absolute;\n  z-index: 100;\n  top: 50%;\n  left: 50%;\n  transform: translateX(-50%) translateY(-50%);\n"], ["\n  width: max-content;\n  position: absolute;\n  z-index: 100;\n  top: 50%;\n  left: 50%;\n  transform: translateX(-50%) translateY(-50%);\n"])));
+exports.HandWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 56px;\n  width: 56px;\n  background: ", ";\n  margin: 0 auto;\n  border-radius: 50%;\n  z-index: 10;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n\n  animation: ", " ", "s ease infinite;\n\n  & > div {\n    height: max-content;\n    width: max-content;\n    margin: 0 auto;\n  }\n"], ["\n  height: 56px;\n  width: 56px;\n  background: ", ";\n  margin: 0 auto;\n  border-radius: 50%;\n  z-index: 10;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n\n  animation: ", " ", "s ease infinite;\n\n  & > div {\n    height: max-content;\n    width: max-content;\n    margin: 0 auto;\n  }\n"])), function (props) { return props.color || '#78c4a299'; }, bounce, function (props) { return props.duration || 2.5; });
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export interface DraggableIndicatorProps {
+    color?: string;
+    duration?: number;
+    timeout?: number;
+}
+export declare function DraggableIndicator(props: DraggableIndicatorProps): JSX.Element | null;
+export default DraggableIndicator;

package/dist/components/DraggableHint/index.js

@@ -0,0 +1,52 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DraggableIndicator = void 0;
+var react_1 = __importStar(require("react"));
+var draggableIndicator_styles_1 = require("./draggableIndicator.styles");
+var Draggable_1 = __importDefault(require("../../icons/Draggable"));
+var useFirstPlayerInteraction_1 = __importDefault(require("../../hooks/useFirstPlayerInteraction"));
+function DraggableIndicator(props) {
+    var awaitingFirstInteraction = (0, useFirstPlayerInteraction_1.default)();
+    var _a = (0, react_1.useState)(false), hasTimeoutExpired = _a[0], setHasTimeoutExpired = _a[1];
+    (0, react_1.useEffect)(function () {
+        var timeout;
+        if (awaitingFirstInteraction && props.timeout) {
+            timeout = setTimeout(function () { return setHasTimeoutExpired(true); }, props.timeout);
+        }
+        return function () { return timeout && clearTimeout(timeout); };
+    }, [awaitingFirstInteraction, props.timeout]);
+    if (!awaitingFirstInteraction || hasTimeoutExpired)
+        return null;
+    return (react_1.default.createElement(draggableIndicator_styles_1.Wrapper, null,
+        react_1.default.createElement(draggableIndicator_styles_1.HandWrapper, { color: props.color, duration: props.duration },
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(Draggable_1.default, null)))));
+}
+exports.DraggableIndicator = DraggableIndicator;
+exports.default = DraggableIndicator;

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface PlayerLoadingCircularProps {
+    size?: string;
+}
+export declare function PlayerLoadingCircular(props: PlayerLoadingCircularProps): JSX.Element | null;
+export default PlayerLoadingCircular;

package/dist/components/PlayerLoadingCircular/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PlayerLoadingCircular = void 0;
+var react_1 = __importDefault(require("react"));
+var playerLoadingCircular_styles_1 = require("./playerLoadingCircular.styles");
+var useLoadingProgress_1 = __importDefault(require("../../hooks/useLoadingProgress"));
+function PlayerLoadingCircular(props) {
+    var progress = (0, useLoadingProgress_1.default)();
+    if (progress === 100 || progress === undefined)
+        return null;
+    return (react_1.default.createElement(playerLoadingCircular_styles_1.Wrapper, { size: props.size },
+        react_1.default.createElement(playerLoadingCircular_styles_1.Progress, { size: props.size, progress: progress })));
+}
+exports.PlayerLoadingCircular = PlayerLoadingCircular;
+exports.default = PlayerLoadingCircular;

package/dist/components/PlayerLoadingCircular/playerLoadingCircular.styles.d.ts

@@ -0,0 +1,7 @@
+import { PlayerLoadingCircularProps } from './index';
+interface ProgressProps extends PlayerLoadingCircularProps {
+    progress: number;
+}
+export declare const Wrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<ProgressProps, "size">, never>;
+export declare const Progress: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ProgressProps, never>;
+export {};

package/dist/components/PlayerLoadingCircular/playerLoadingCircular.styles.js

@@ -0,0 +1,17 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Progress = exports.Wrapper = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var PRIMARY_COLOR = '#369';
+var SECONDARY_COLOR = '#adf';
+var SIZE = '120px';
+exports.Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: ", ";\n  width: ", ";\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translateX(-50%) translateY(-50%);\n"], ["\n  height: ", ";\n  width: ", ";\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translateX(-50%) translateY(-50%);\n"])), function (props) { return props.size || SIZE; }, function (props) { return props.size || SIZE; });
+exports.Progress = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  animation: progress 2s 0.5s forwards;\n  width: ", ";\n  aspect-ratio: 1;\n  border-radius: 50%;\n  position: relative;\n  overflow: hidden;\n  display: grid;\n  place-items: center;\n\n  &::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: conic-gradient(\n      ", " calc(", " * 1%),\n      ", " 0\n    );\n    mask: radial-gradient(#0000 55%, #000 0);\n    mask-mode: alpha;\n  }\n\n  &::after {\n    counter-reset: percentage ", ";\n    content: counter(percentage) '%';\n    font-family: Helvetica, Arial, sans-serif;\n    font-size: calc(", " / 5);\n    color: ", ";\n  }\n"], ["\n  animation: progress 2s 0.5s forwards;\n  width: ", ";\n  aspect-ratio: 1;\n  border-radius: 50%;\n  position: relative;\n  overflow: hidden;\n  display: grid;\n  place-items: center;\n\n  &::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: conic-gradient(\n      ", " calc(", " * 1%),\n      ", " 0\n    );\n    mask: radial-gradient(#0000 55%, #000 0);\n    mask-mode: alpha;\n  }\n\n  &::after {\n    counter-reset: percentage ", ";\n    content: counter(percentage) '%';\n    font-family: Helvetica, Arial, sans-serif;\n    font-size: calc(", " / 5);\n    color: ", ";\n  }\n"])), function (props) { return props.size || SIZE; }, PRIMARY_COLOR, function (props) { return props.progress; }, SECONDARY_COLOR, function (props) { return props.progress; }, function (props) { return props.size || SIZE; }, PRIMARY_COLOR);
+var templateObject_1, templateObject_2;

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface PlayerLoadingSpinnerProps {
+    duration?: number;
+    size?: string;
+}
+export declare function PlayerLoadingSpinner(props: PlayerLoadingSpinnerProps): JSX.Element | null;
+export default PlayerLoadingSpinner;

package/dist/components/PlayerLoadingSpinner/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PlayerLoadingSpinner = void 0;
+var react_1 = __importDefault(require("react"));
+var playerLoadingSpinner_styles_1 = require("./playerLoadingSpinner.styles");
+var useThreekitInitStatus_1 = __importDefault(require("../../hooks/useThreekitInitStatus"));
+function PlayerLoadingSpinner(props) {
+    var hide = (0, useThreekitInitStatus_1.default)();
+    if (hide)
+        return null;
+    return react_1.default.createElement(playerLoadingSpinner_styles_1.Wrapper, { size: props.size, duration: props.duration });
+}
+exports.PlayerLoadingSpinner = PlayerLoadingSpinner;
+exports.default = PlayerLoadingSpinner;

package/dist/components/PlayerLoadingSpinner/playerLoadingSpinner.styles.d.ts

@@ -0,0 +1,4 @@
+import { PlayerLoadingSpinnerProps } from './index';
+declare type WrapperProps = Pick<PlayerLoadingSpinnerProps, 'duration' | 'size'>;
+export declare const Wrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, WrapperProps, never>;
+export {};

package/dist/components/PlayerLoadingSpinner/playerLoadingSpinner.styles.js

@@ -0,0 +1,35 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Wrapper = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var SIZE = '36px';
+var spin = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\nto {\n  transform:  translateY(-50%) translateX(-50%) rotate(1turn);\n}\n"], ["\nto {\n  transform:  translateY(-50%) translateX(-50%) rotate(1turn);\n}\n"])));
+exports.Wrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translateY(-50%) translateX(-50%);\n  width: ", ";\n  aspect-ratio: 1;\n  display: grid;\n  mask: conic-gradient(from 22deg, #0001, #000);\n  animation: ", " ", "s steps(8) infinite;\n\n  &,\n  &:before {\n    background: linear-gradient(hsl(230deg 100% 20%) 0 0) 50%/34% 8% space no-repeat,\n    linear-gradient(hsl(230deg 100% 20%) 0 0) 50%/8% 34% no-repeat space;\n  }\n\n  &:before {\n    content: \"\";\n    transform: rotate(45deg);\n  }\n}\n\n"], ["\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translateY(-50%) translateX(-50%);\n  width: ", ";\n  aspect-ratio: 1;\n  display: grid;\n  mask: conic-gradient(from 22deg, #0001, #000);\n  animation: ", " ", "s steps(8) infinite;\n\n  &,\n  &:before {\n    background: linear-gradient(hsl(230deg 100% 20%) 0 0) 50%/34% 8% space no-repeat,\n    linear-gradient(hsl(230deg 100% 20%) 0 0) 50%/8% 34% no-repeat space;\n  }\n\n  &:before {\n    content: \"\";\n    transform: rotate(45deg);\n  }\n}\n\n"])), function (props) { return props.size || SIZE; }, spin, function (props) { return props.duration || 1; });
+var templateObject_1, templateObject_2;

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

@@ -0,0 +1,18 @@
+import React from 'react';
+interface SkeletonProps {
+    shimmer?: boolean;
+}
+interface ISkeleton extends React.FC<SkeletonProps> {
+    ColorSwatchSkeleton: React.FC<SkeletonProps>;
+    CardsSkeleton: React.FC<SkeletonProps>;
+    StripsSkeleton: React.FC<SkeletonProps>;
+    FormHeaderSkeleton: React.FC<SkeletonProps>;
+    FormDescriptionSkeleton: React.FC<SkeletonProps>;
+}
+export declare const FormHeaderSkeleton: React.FC<SkeletonProps>;
+export declare const FormDescriptionSkeleton: React.FC<SkeletonProps>;
+export declare const StripsSkeleton: React.FC<SkeletonProps>;
+export declare const CardsSkeleton: React.FC<SkeletonProps>;
+export declare const ColowSwatchSkeleton: React.FC<SkeletonProps>;
+declare const Skeleton: ISkeleton;
+export default Skeleton;

package/dist/components/Skeleton/index.js

@@ -0,0 +1,73 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColowSwatchSkeleton = exports.CardsSkeleton = exports.StripsSkeleton = exports.FormDescriptionSkeleton = exports.FormHeaderSkeleton = void 0;
+var react_1 = __importDefault(require("react"));
+var skeleton_styles_1 = require("./skeleton.styles");
+var FormHeaderSkeleton = function (props) {
+    var shimmer = props.shimmer;
+    return (react_1.default.createElement(skeleton_styles_1.FormHeaderWrapper, { shimmer: shimmer },
+        react_1.default.createElement(skeleton_styles_1.ShimmerDiv, null),
+        react_1.default.createElement(skeleton_styles_1.ShimmerDiv, null)));
+};
+exports.FormHeaderSkeleton = FormHeaderSkeleton;
+var FormDescriptionSkeleton = function (props) {
+    var shimmer = props.shimmer;
+    return react_1.default.createElement(skeleton_styles_1.FormDescriptionWrapper, { shimmer: shimmer });
+};
+exports.FormDescriptionSkeleton = FormDescriptionSkeleton;
+var StripsSkeleton = function (props) {
+    var shimmer = props.shimmer;
+    return (react_1.default.createElement(skeleton_styles_1.SkeletonWrapper, { shimmer: shimmer },
+        react_1.default.createElement(skeleton_styles_1.TitleWrapper, { shimmer: shimmer }),
+        react_1.default.createElement(skeleton_styles_1.DescriptionWrapper, { shimmer: shimmer }),
+        react_1.default.createElement("div", null, Array(3)
+            .fill(null)
+            .map(function (_, i) { return (react_1.default.createElement(skeleton_styles_1.StripsItem, { key: i },
+            react_1.default.createElement(skeleton_styles_1.ShimmerDiv, null),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(skeleton_styles_1.ShimmerDiv, null),
+                react_1.default.createElement(skeleton_styles_1.ShimmerDiv, null)),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(skeleton_styles_1.ShimmerDiv, null)))); }))));
+};
+exports.StripsSkeleton = StripsSkeleton;
+var CardsSkeleton = function (props) {
+    var shimmer = props.shimmer;
+    return (react_1.default.createElement(skeleton_styles_1.SkeletonWrapper, { shimmer: shimmer },
+        react_1.default.createElement(skeleton_styles_1.TitleWrapper, { shimmer: shimmer }),
+        react_1.default.createElement(skeleton_styles_1.DescriptionWrapper, { shimmer: shimmer }),
+        react_1.default.createElement(skeleton_styles_1.RowWrapper, null, Array(3)
+            .fill(null)
+            .map(function (_, i) { return (react_1.default.createElement(skeleton_styles_1.CardItem, { key: i },
+            react_1.default.createElement(skeleton_styles_1.ShimmerDiv, null),
+            react_1.default.createElement(skeleton_styles_1.ShimmerDiv, null),
+            react_1.default.createElement(skeleton_styles_1.ShimmerDiv, null))); }))));
+};
+exports.CardsSkeleton = CardsSkeleton;
+var ColowSwatchSkeleton = function (props) {
+    var shimmer = props.shimmer;
+    return (react_1.default.createElement(skeleton_styles_1.SkeletonWrapper, { shimmer: shimmer },
+        react_1.default.createElement(skeleton_styles_1.TitleWrapper, { shimmer: shimmer }),
+        react_1.default.createElement(skeleton_styles_1.DescriptionWrapper, { shimmer: shimmer }),
+        react_1.default.createElement(skeleton_styles_1.RowWrapper, null, Array(8)
+            .fill(null)
+            .map(function (_, i) { return (react_1.default.createElement(skeleton_styles_1.SwatchItem, { key: i })); }))));
+};
+exports.ColowSwatchSkeleton = ColowSwatchSkeleton;
+var Skeleton = function (props) {
+    var shimmer = props.shimmer;
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(exports.FormHeaderSkeleton, { shimmer: shimmer }),
+        react_1.default.createElement(exports.FormDescriptionSkeleton, { shimmer: shimmer }),
+        react_1.default.createElement(exports.StripsSkeleton, { shimmer: shimmer }),
+        react_1.default.createElement(exports.CardsSkeleton, { shimmer: shimmer })));
+};
+Skeleton.FormHeaderSkeleton = exports.FormHeaderSkeleton;
+Skeleton.FormDescriptionSkeleton = exports.FormDescriptionSkeleton;
+Skeleton.ColorSwatchSkeleton = exports.ColowSwatchSkeleton;
+Skeleton.CardsSkeleton = exports.CardsSkeleton;
+Skeleton.StripsSkeleton = exports.StripsSkeleton;
+exports.default = Skeleton;

package/dist/components/Skeleton/skeleton.styles.d.ts

@@ -0,0 +1,14 @@
+interface ShimmerProps {
+    shimmer?: boolean;
+}
+export declare const ShimmerDiv: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ShimmerProps, never>;
+export declare const SkeletonWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ShimmerProps, never>;
+export declare const FormHeaderWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ShimmerProps, never>;
+export declare const FormDescriptionWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ShimmerProps, never>;
+export declare const TitleWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ShimmerProps, never>;
+export declare const DescriptionWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ShimmerProps, never>;
+export declare const RowWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const SwatchItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ShimmerProps, never>;
+export declare const StripsItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const CardItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export {};

package/dist/components/Skeleton/skeleton.styles.js

@@ -0,0 +1,43 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardItem = exports.StripsItem = exports.SwatchItem = exports.RowWrapper = exports.DescriptionWrapper = exports.TitleWrapper = exports.FormDescriptionWrapper = exports.FormHeaderWrapper = exports.SkeletonWrapper = exports.ShimmerDiv = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var shimmer = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    0% {\n      background-position: -468px 0;\n    }\n    \n    100% {\n      background-position: 468px 0; \n    }\n"], ["\n    0% {\n      background-position: -468px 0;\n    }\n    \n    100% {\n      background-position: 468px 0; \n    }\n"])));
+exports.ShimmerDiv = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: #d9d9d9;\n  background-image: linear-gradient(\n    to right,\n    #d9d9d9 0%,\n    #c9c9c9 20%,\n    #d9d9d9 40%,\n    #d9d9d9 100%\n  );\n  background-repeat: no-repeat;\n  background-size: 800px 140px;\n\n  animation-duration: 1.4s;\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: ", ";\n  animation-timing-function: linear;\n"], ["\n  background: #d9d9d9;\n  background-image: linear-gradient(\n    to right,\n    #d9d9d9 0%,\n    #c9c9c9 20%,\n    #d9d9d9 40%,\n    #d9d9d9 100%\n  );\n  background-repeat: no-repeat;\n  background-size: 800px 140px;\n\n  animation-duration: 1.4s;\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: ", ";\n  animation-timing-function: linear;\n"])), shimmer);
+exports.SkeletonWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 32px 0 32px 0;\n\n  ", " {\n    ", "\n  }\n"], ["\n  margin: 32px 0 32px 0;\n\n  ", " {\n    ", "\n  }\n"])), exports.ShimmerDiv, function (props) { return (props.shimmer ? '' : "background: #d9d9d9;"); });
+exports.FormHeaderWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  & > div:nth-child(1) {\n    height: 32px;\n    width: 400px;\n    border-radius: 2px;\n    margin-bottom: 10px;\n    ", "\n  }\n\n  & > div:nth-child(2) {\n    height: 20px;\n    width: 250px;\n    border-radius: 2px;\n    ", "\n  }\n"], ["\n  & > div:nth-child(1) {\n    height: 32px;\n    width: 400px;\n    border-radius: 2px;\n    margin-bottom: 10px;\n    ", "\n  }\n\n  & > div:nth-child(2) {\n    height: 20px;\n    width: 250px;\n    border-radius: 2px;\n    ", "\n  }\n"])), function (props) { return (props.shimmer ? '' : "background: #d9d9d9;"); }, function (props) { return (props.shimmer ? '' : "background: #d9d9d9;"); });
+exports.FormDescriptionWrapper = (0, styled_components_1.default)(exports.ShimmerDiv)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 100%;\n  max-width: 440px;\n  height: 62px;\n  border-radius: 2px;\n  margin: 32px 0;\n\n  background-size: 800px 62px;\n  ", "\n"], ["\n  width: 100%;\n  max-width: 440px;\n  height: 62px;\n  border-radius: 2px;\n  margin: 32px 0;\n\n  background-size: 800px 62px;\n  ", "\n"])), function (props) { return (props.shimmer ? '' : "background: #d9d9d9;"); });
+exports.TitleWrapper = (0, styled_components_1.default)(exports.ShimmerDiv)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  border-radius: 2px;\n  margin-bottom: 8px;\n  height: 32px;\n  width: 200px;\n  ", "\n"], ["\n  border-radius: 2px;\n  margin-bottom: 8px;\n  height: 32px;\n  width: 200px;\n  ", "\n"])), function (props) { return (props.shimmer ? '' : "background: #d9d9d9;"); });
+exports.DescriptionWrapper = (0, styled_components_1.default)(exports.ShimmerDiv)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  border-radius: 2px;\n  margin-bottom: 8px;\n  height: 20px;\n  width: 250px;\n  ", "\n"], ["\n  border-radius: 2px;\n  margin-bottom: 8px;\n  height: 20px;\n  width: 250px;\n  ", "\n"])), function (props) { return (props.shimmer ? '' : "background: #d9d9d9;"); });
+exports.RowWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n\n  & > div {\n    margin-right: 12px;\n  }\n\n  & > div:last-child {\n    margin-right: 0;\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n\n  & > div {\n    margin-right: 12px;\n  }\n\n  & > div:last-child {\n    margin-right: 0;\n  }\n"])));
+exports.SwatchItem = (0, styled_components_1.default)(exports.ShimmerDiv)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  height: 40px;\n  width: 40px;\n  border-radius: 50%;\n"], ["\n  height: 40px;\n  width: 40px;\n  border-radius: 50%;\n"])));
+exports.StripsItem = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  height: max-content;\n  width: 440px;\n  border-radius: 2px;\n  background: #d9d9d94d;\n  padding: 8px;\n  margin-bottom: 10px;\n\n  display: grid;\n  grid-template-columns: max-content auto max-content;\n  grid-gap: 12px;\n\n  & > div:nth-child(1) {\n    height: 48px;\n    width: 48px;\n    border-radius: 2px;\n  }\n\n  & > div:nth-child(2) {\n    & > div:nth-child(1) {\n      height: 20px;\n      width: 220px;\n      margin-bottom: 6px;\n      border-radius: 2px;\n    }\n\n    & > div:nth-child(2) {\n      height: 20px;\n      width: 170px;\n      border-radius: 2px;\n    }\n  }\n\n  & > div:nth-child(3) {\n    height: 100%;\n    display: flex;\n    justify-content: space-around;\n    flex-direction: column;\n\n    & > div {\n      height: 20px;\n      width: 61px;\n      border-radius: 2px;\n    }\n  }\n"], ["\n  height: max-content;\n  width: 440px;\n  border-radius: 2px;\n  background: #d9d9d94d;\n  padding: 8px;\n  margin-bottom: 10px;\n\n  display: grid;\n  grid-template-columns: max-content auto max-content;\n  grid-gap: 12px;\n\n  & > div:nth-child(1) {\n    height: 48px;\n    width: 48px;\n    border-radius: 2px;\n  }\n\n  & > div:nth-child(2) {\n    & > div:nth-child(1) {\n      height: 20px;\n      width: 220px;\n      margin-bottom: 6px;\n      border-radius: 2px;\n    }\n\n    & > div:nth-child(2) {\n      height: 20px;\n      width: 170px;\n      border-radius: 2px;\n    }\n  }\n\n  & > div:nth-child(3) {\n    height: 100%;\n    display: flex;\n    justify-content: space-around;\n    flex-direction: column;\n\n    & > div {\n      height: 20px;\n      width: 61px;\n      border-radius: 2px;\n    }\n  }\n"])));
+exports.CardItem = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  height: max-content;\n  width: max-content;\n  border-radius: 2px;\n  background: #d9d9d94d;\n  padding: 22px 12px;\n\n  & > div:nth-child(1) {\n    height: 110px;\n    width: 110px;\n    margin-bottom: 6px;\n  }\n\n  & > div:nth-child(2) {\n    height: 20px;\n    width: 110px;\n    margin-bottom: 6px;\n    border-radius: 2px;\n  }\n\n  & > div:nth-child(3) {\n    height: 20px;\n    width: 72px;\n    border-radius: 2px;\n  }\n"], ["\n  height: max-content;\n  width: max-content;\n  border-radius: 2px;\n  background: #d9d9d94d;\n  padding: 22px 12px;\n\n  & > div:nth-child(1) {\n    height: 110px;\n    width: 110px;\n    margin-bottom: 6px;\n  }\n\n  & > div:nth-child(2) {\n    height: 20px;\n    width: 110px;\n    margin-bottom: 6px;\n    border-radius: 2px;\n  }\n\n  & > div:nth-child(3) {\n    height: 20px;\n    width: 72px;\n    border-radius: 2px;\n  }\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;