@cube-dev/ui-kit 0.8.5 → 0.9.0

package/dist/cjs/components/status/LoadingAnimation/LoadingAnimation.js

@@ -0,0 +1,139 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadingAnimation = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Block_1 = require("../../Block");
+const styled_components_1 = __importDefault(require("styled-components"));
+const POSITIONS = [
+    [49, 0.5],
+    [0, 25],
+    [49, 49],
+    [98, 25],
+];
+const cubeImage = 'data:image/svg+xml,%3Csvg width=\'36\' height=\'41\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M35.899 10.351l-18 10.25L.1 10.25l18-10.25L35.9 10.351z\' fill=\'%23FAFAFF\'/%3E%3Cpath d=\'M18 41L0 30.75l.101-20.5L18 20.5\' fill=\'%23E5E5F6\'/%3E%3Cpath d=\'M36 30.75L18 41V20.6l17.899-10.25L36 30.75z\' fill=\'%23C0C0EA\'/%3E%3C/svg%3E';
+function pos(index) {
+    return `transform: translate(${POSITIONS[index][0]}%, ${POSITIONS[index][1]}%);`;
+}
+const RawImg = styled_components_1.default.img(({ index }) => `
+  display: block;
+  position: absolute;
+  width: 50%;
+  height: 50%;
+
+  ${index != null
+    ? `
+  animation-name: dice${index};
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+  animation-timing-function: ease;
+  z-index: 0;
+
+  @keyframes dice${index} {
+    ${index === 0
+        ? `
+    from {
+      ${pos(0)}
+      z-index: 0;
+    }
+
+    25% {
+      ${pos(0)}
+      z-index: 0;
+    }
+
+    50% {
+      ${pos(1)}
+      z-index: 0;
+    }
+
+    51% {
+      z-index: 1;
+    }
+
+    75% {
+      z-index: 1;
+    }
+
+    to {
+      ${pos(1)}
+      z-index: 1;
+    }
+    `
+        : ''}
+
+    ${index === 1
+        ? `
+    from {
+      ${pos(1)}
+      z-index: 3;
+    }
+
+    25% {
+      ${pos(2)}
+      z-index: 3;
+    }
+
+    75% {
+      ${pos(2)}
+      z-index: 2;
+    }
+
+    to {
+      ${pos(3)}
+      z-index: 1;
+    }
+    `
+        : ''}
+
+    ${index === 2
+        ? `
+    from {
+      ${pos(3)}
+      z-index: 1;
+    }
+
+    50% {
+      ${pos(3)}
+      z-index: 0;
+    }
+
+    75% {
+      ${pos(0)}
+      z-index: 0;
+    }
+
+    to {
+      ${pos(0)}
+      z-index: 0;
+    }
+    `
+        : ''}
+  }
+  `
+    : ''}
+`);
+const Cube = (props) => {
+    return (0, jsx_runtime_1.jsx)(RawImg, { role: "presentation", src: cubeImage, alt: "", ...props }, void 0);
+};
+const SIZE_MAP = {
+    small: 32,
+    medium: 64,
+    large: 96,
+};
+function LoadingAnimation({ size = 'medium', ...props }) {
+    const numSize = SIZE_MAP[size] || size || SIZE_MAP.medium;
+    return ((0, jsx_runtime_1.jsxs)(Block_1.Block, { role: "img", "aria-label": "Loading animation", width: numSize, height: numSize * 1.1388888889, style: { position: 'relative' }, ...props, children: [(0, jsx_runtime_1.jsx)(Cube, { style: { transform: 'translate(0%, 72.5%)' } }, void 0), (0, jsx_runtime_1.jsx)(Cube, { style: { transform: 'translate(98%, 72.5%)' } }, void 0), (0, jsx_runtime_1.jsx)(Cube, { style: { transform: 'translate(49%, 96.5%)' } }, void 0), (0, jsx_runtime_1.jsx)(Cube, { index: 0 }, void 0), (0, jsx_runtime_1.jsx)(Cube, { index: 1 }, void 0), (0, jsx_runtime_1.jsx)(Cube, { index: 2 }, void 0)] }, void 0));
+}
+exports.LoadingAnimation = LoadingAnimation;
+
+        

package/dist/cjs/components/status/Spin/Spin.js

@@ -0,0 +1,38 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spin = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Block_1 = require("../../Block");
+const SIZE_MAP = {
+    small: 3,
+    default: 4,
+    large: 6,
+};
+const Spin = ({ size, spinning, style, children, ...props }, ref) => {
+    const localSize = (size && SIZE_MAP[size]) || size || SIZE_MAP.default;
+    if (spinning === false) {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }, void 0);
+    }
+    return ((0, jsx_runtime_1.jsx)(Block_1.Block, { ref: ref, role: "img", "aria-label": "Loading animation", height: "1em", opacity: ".8", style: {
+            fontSize: localSize * 8,
+            position: 'relative',
+            ...(style || {}),
+        }, ...props, children: (0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
+                margin: 'auto',
+                display: 'inline-block',
+                width: '1em',
+                height: '1em',
+            }, viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid", children: [(0, jsx_runtime_1.jsxs)("rect", { fill: "#7a77ff", x: "14", y: "14", width: "32", height: "32", rx: "4", ry: "4", children: [(0, jsx_runtime_1.jsx)("animate", { attributeName: "x", dur: "2.272727272727273s", repeatCount: "indefinite", keyTimes: "0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1", values: "14;54;54;54;54;14;14;14;14", begin: "-2.083333333333333s" }, void 0), (0, jsx_runtime_1.jsx)("animate", { attributeName: "y", dur: "2.272727272727273s", repeatCount: "indefinite", keyTimes: "0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1", values: "14;54;54;54;54;14;14;14;14", begin: "-1.5151515151515151s" }, void 0)] }, void 0), (0, jsx_runtime_1.jsxs)("rect", { fill: "#ff6492", x: "14", y: "14", width: "32", height: "32", rx: "4", ry: "4", children: [(0, jsx_runtime_1.jsx)("animate", { attributeName: "x", dur: "2.272727272727273s", repeatCount: "indefinite", keyTimes: "0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1", values: "14;54;54;54;54;14;14;14;14", begin: "-1.325757575757576s" }, void 0), (0, jsx_runtime_1.jsx)("animate", { attributeName: "y", dur: "2.272727272727273s", repeatCount: "indefinite", keyTimes: "0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1", values: "14;54;54;54;54;14;14;14;14", begin: "-0.7575757575757576s" }, void 0)] }, void 0), (0, jsx_runtime_1.jsxs)("rect", { fill: "#727290", x: "14", y: "14", width: "32", height: "32", rx: "4", ry: "4", children: [(0, jsx_runtime_1.jsx)("animate", { attributeName: "x", dur: "2.272727272727273s", repeatCount: "indefinite", keyTimes: "0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1", values: "14;54;54;54;54;14;14;14;14", begin: "-0.5681818181818182s" }, void 0), (0, jsx_runtime_1.jsx)("animate", { attributeName: "y", dur: "2.272727272727273s", repeatCount: "indefinite", keyTimes: "0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1", values: "14;54;54;54;54;14;14;14;14", begin: "0s" }, void 0)] }, void 0)] }, void 0) }, void 0));
+};
+const _Spin = (0, react_1.forwardRef)(Spin);
+exports.Spin = _Spin;
+
+        

package/dist/cjs/components/types.js

@@ -0,0 +1,11 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+
+        

package/dist/cjs/data/themes.js

@@ -0,0 +1,33 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    success: {
+        fill: '#success-bg',
+        color: '#success-text',
+        border: '#success.40',
+    },
+    danger: {
+        fill: '#danger-bg',
+        color: '#danger-text',
+        border: '#danger.40',
+    },
+    note: {
+        fill: '#note-bg',
+        color: '#note-text',
+        border: '#note.40',
+    },
+    disabled: {
+        fill: '#dark.10',
+        color: '#dark.40',
+        border: '#dark.20',
+    },
+};
+
+