@cube-dev/ui-kit 0.0.0-canary-2b1396c → 0.0.0-canary-e7b4f4a

package/types/components/status/Spin/Spin.d.ts

@@ -1,3 +1,8 @@
 /// <reference types="react" />
-import { CubeSpinProps } from './types';
-export declare function Spin(props: CubeSpinProps): JSX.Element;
+import { CubeBlockProps } from '../../Block';
+export interface CubeSpinProps extends CubeBlockProps {
+    size?: 'small' | 'default' | 'large' | number;
+    spinning?: boolean;
+}
+declare const _Spin: import("react").ForwardRefExoticComponent<CubeSpinProps & import("react").RefAttributes<unknown>>;
+export { _Spin as Spin };

package/types/index.d.ts

@@ -40,7 +40,10 @@ export { Result } from './components/content/Result/Result';
 export type { CubeResultProps, CubeResultStatus, } from './components/content/Result/Result';
 export { FieldWrapper } from './components/forms/FieldWrapper';
 export type { CubeFieldWrapperProps } from './components/forms/FieldWrapper';
-export * from './components/status';
+export { LoadingAnimation } from './components/status/LoadingAnimation/LoadingAnimation';
+export type { CubeLoadingAnimationProps } from './components/status/LoadingAnimation/LoadingAnimation';
+export { Spin } from './components/status/Spin/Spin';
+export type { CubeSpinProps } from './components/status/Spin/Spin';
 export { Base64Upload } from './components/other/Base64Upload/Base64Upload';
 export type { CubeBase64UploadProps } from './components/other/Base64Upload/Base64Upload';
 export { Card } from './components/content/Card/Card';

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

@@ -1,14 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b1396c
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LoadingAnimation = void 0;
-var LoadingAnimation_1 = require("./LoadingAnimation");
-Object.defineProperty(exports, "LoadingAnimation", { enumerable: true, get: function () { return LoadingAnimation_1.LoadingAnimation; } });
-
-        

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

@@ -1,196 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b1396c
- * 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.Cube = void 0;
-const react_1 = require("react");
-const styled_components_1 = __importDefault(require("styled-components"));
-const fillByPosition = {
-    top: '#7a77ff',
-    right: '#727290',
-    bottom: '#ff6492',
-};
-exports.Cube = (0, react_1.memo)(styled_components_1.default.div.attrs(({ position }) => ({
-    role: 'presentation',
-    style: {
-        '--cube-spin-animation-name': `cube-spin-${position}`,
-        '--cube-spin-fill': fillByPosition[position],
-    },
-})) `
-  --cube-spin-cube-border-width: calc(4 / 100 * var(--cube-spin-size));
-  --cube-spin-cube-border-compensation: calc(
-    -1 * (var(--cube-spin-cube-border-width))
-  );
-  --cube-spin-cube-size: calc(
-    (100% - 2 * var(--cube-spin-cube-border-width)) / 2
-  );
-
-  box-sizing: content-box;
-  position: absolute;
-  top: var(--cube-spin-cube-border-compensation);
-  left: var(--cube-spin-cube-border-compensation);
-  width: var(--cube-spin-cube-size);
-  height: var(--cube-spin-cube-size);
-  border: var(--cube-spin-cube-border-width) solid transparent;
-  overflow: hidden;
-  contain: size layout style paint;
-  pointer-events: none;
-  user-select: none;
-
-  animation-name: var(--cube-spin-animation-name);
-  animation-duration: 2.2s;
-  animation-iteration-count: infinite;
-  animation-timing-function: cubic-bezier(0.5, 0.05, 0.3, 0.95);
-
-  @media (prefers-reduced-motion) {
-    animation-play-state: paused;
-  }
-
-  &::before {
-    --cube-spin-cube-round-radius: calc((4 / 100) * var(--cube-spin-size));
-
-    content: '';
-    display: block;
-    width: 100%;
-    height: 100%;
-    border-radius: var(--cube-spin-cube-round-radius);
-
-    background-color: var(--cube-spin-fill);
-  }
-
-  @keyframes cube-spin-top {
-    0% {
-      transform: translate(0%, 0);
-    }
-    8% {
-      transform: translate(100%, 0);
-    }
-    17% {
-      transform: translate(100%, 0);
-    }
-    25% {
-      transform: translate(100%, 0);
-    }
-    33% {
-      transform: translate(100%, 100%);
-    }
-    42% {
-      transform: translate(100%, 100%);
-    }
-    50% {
-      transform: translate(100%, 100%);
-    }
-    58% {
-      transform: translate(0, 100%);
-    }
-    67% {
-      transform: translate(0, 100%);
-    }
-    75% {
-      transform: translate(0, 100%);
-    }
-    83% {
-      transform: translate(0, 0);
-    }
-    92% {
-      transform: translate(0, 0);
-    }
-    100% {
-      transform: translate(0, 0);
-    }
-  }
-
-  @keyframes cube-spin-right {
-    0% {
-      transform: translate(100%, 100%);
-    }
-    8% {
-      transform: translate(100%, 100%);
-    }
-    17% {
-      transform: translate(100%, 100%);
-    }
-    25% {
-      transform: translate(0, 100%);
-    }
-    33% {
-      transform: translate(0, 100%);
-    }
-    42% {
-      transform: translate(0, 100%);
-    }
-    50% {
-      transform: translate(0, 0);
-    }
-    58% {
-      transform: translate(0, 0);
-    }
-    67% {
-      transform: translate(0, 0);
-    }
-    75% {
-      transform: translate(100%, 0);
-    }
-    83% {
-      transform: translate(100%, 0);
-    }
-    92% {
-      transform: translate(100%, 0);
-    }
-    100% {
-      transform: translate(100%, 100%);
-    }
-  }
-
-  @keyframes cube-spin-bottom {
-    0% {
-      transform: translate(0, 100%);
-    }
-    8% {
-      transform: translate(0, 100%);
-    }
-    17% {
-      transform: translate(0, 0);
-    }
-    25% {
-      transform: translate(0, 0);
-    }
-    33% {
-      transform: translate(0, 0);
-    }
-    42% {
-      transform: translate(100%, 0);
-    }
-    50% {
-      transform: translate(100%, 0);
-    }
-    58% {
-      transform: translate(100%, 0);
-    }
-    67% {
-      transform: translate(100%, 100%);
-    }
-    75% {
-      transform: translate(100%, 100%);
-    }
-    83% {
-      transform: translate(100%, 100%);
-    }
-    92% {
-      transform: translate(0, 100%);
-    }
-    100% {
-      transform: translate(0, 100%);
-    }
-  }
-`);
-
-        

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

@@ -1,29 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b1396c
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InternalSpinner = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const tasty_1 = require("../../../tasty");
-const Cube_1 = require("./Cube");
-const SpinsContainer_1 = require("./SpinsContainer");
-const SpinsBox = (0, tasty_1.tasty)({ styles: { position: 'relative', blockSize: '100%' } });
-exports.InternalSpinner = (0, react_1.memo)(function InternalSpinner(props) {
-    const { size } = props;
-    return (
-    // Even though using size as a key resets the animation, it helps safari to resize the cubes.
-    (0, jsx_runtime_1.jsx)(SpinsContainer_1.SpinsContainer, { ownSize: CUBE_SIZE_MAP[size], children: (0, jsx_runtime_1.jsxs)(SpinsBox, { children: [(0, jsx_runtime_1.jsx)(Cube_1.Cube, { position: "top" }, void 0), (0, jsx_runtime_1.jsx)(Cube_1.Cube, { position: "right" }, void 0), (0, jsx_runtime_1.jsx)(Cube_1.Cube, { position: "bottom" }, void 0)] }, void 0) }, size));
-});
-const CUBE_SIZE_MAP = {
-    small: 24,
-    default: 32,
-    large: 48,
-};
-
-        

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

@@ -1,45 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b1396c
- * 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.SpinsContainer = void 0;
-const styled_components_1 = __importDefault(require("styled-components"));
-exports.SpinsContainer = styled_components_1.default.div.attrs(({ ownSize }) => ({
-    role: 'presentation',
-    style: { '--cube-spin-size': `${ownSize}px` },
-})) `
-  box-sizing: border-box;
-
-  display: inline-block;
-  padding: calc(10 / 100 * var(--cube-spin-size));
-  width: var(--cube-spin-size);
-  height: var(--cube-spin-size);
-  opacity: 0.8;
-  contain: size layout style paint;
-
-  @media (prefers-reduced-motion) {
-    animation: cube-spin-reduced-motion 2s infinite ease-in-out;
-  }
-
-  @keyframes cube-spin-reduced-motion {
-    0% {
-      opacity: 0.4;
-    }
-    50% {
-      opacity: 0.8;
-    }
-    100% {
-      opacity: 0.4;
-    }
-  }
-`;
-
-        

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

@@ -1,22 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b1396c
- * Released under the MIT license.
- */
-
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __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("./Spin"), exports);
-
-        

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

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

package/cjs/components/status/index.js

@@ -1,23 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b1396c
- * Released under the MIT license.
- */
-
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __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("./Spin"), exports);
-__exportStar(require("./LoadingAnimation"), exports);
-
-        

package/es/components/status/LoadingAnimation/index.js

@@ -1,10 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b1396c
- * Released under the MIT license.
- */
-
-export { LoadingAnimation } from './LoadingAnimation';
-
-        

package/es/components/status/Spin/Cube.js

@@ -1,190 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b1396c
- * Released under the MIT license.
- */
-
-import { memo } from 'react';
-import styled from 'styled-components';
-const fillByPosition = {
-    top: '#7a77ff',
-    right: '#727290',
-    bottom: '#ff6492',
-};
-export const Cube = memo(styled.div.attrs(({ position }) => ({
-    role: 'presentation',
-    style: {
-        '--cube-spin-animation-name': `cube-spin-${position}`,
-        '--cube-spin-fill': fillByPosition[position],
-    },
-})) `
-  --cube-spin-cube-border-width: calc(4 / 100 * var(--cube-spin-size));
-  --cube-spin-cube-border-compensation: calc(
-    -1 * (var(--cube-spin-cube-border-width))
-  );
-  --cube-spin-cube-size: calc(
-    (100% - 2 * var(--cube-spin-cube-border-width)) / 2
-  );
-
-  box-sizing: content-box;
-  position: absolute;
-  top: var(--cube-spin-cube-border-compensation);
-  left: var(--cube-spin-cube-border-compensation);
-  width: var(--cube-spin-cube-size);
-  height: var(--cube-spin-cube-size);
-  border: var(--cube-spin-cube-border-width) solid transparent;
-  overflow: hidden;
-  contain: size layout style paint;
-  pointer-events: none;
-  user-select: none;
-
-  animation-name: var(--cube-spin-animation-name);
-  animation-duration: 2.2s;
-  animation-iteration-count: infinite;
-  animation-timing-function: cubic-bezier(0.5, 0.05, 0.3, 0.95);
-
-  @media (prefers-reduced-motion) {
-    animation-play-state: paused;
-  }
-
-  &::before {
-    --cube-spin-cube-round-radius: calc((4 / 100) * var(--cube-spin-size));
-
-    content: '';
-    display: block;
-    width: 100%;
-    height: 100%;
-    border-radius: var(--cube-spin-cube-round-radius);
-
-    background-color: var(--cube-spin-fill);
-  }
-
-  @keyframes cube-spin-top {
-    0% {
-      transform: translate(0%, 0);
-    }
-    8% {
-      transform: translate(100%, 0);
-    }
-    17% {
-      transform: translate(100%, 0);
-    }
-    25% {
-      transform: translate(100%, 0);
-    }
-    33% {
-      transform: translate(100%, 100%);
-    }
-    42% {
-      transform: translate(100%, 100%);
-    }
-    50% {
-      transform: translate(100%, 100%);
-    }
-    58% {
-      transform: translate(0, 100%);
-    }
-    67% {
-      transform: translate(0, 100%);
-    }
-    75% {
-      transform: translate(0, 100%);
-    }
-    83% {
-      transform: translate(0, 0);
-    }
-    92% {
-      transform: translate(0, 0);
-    }
-    100% {
-      transform: translate(0, 0);
-    }
-  }
-
-  @keyframes cube-spin-right {
-    0% {
-      transform: translate(100%, 100%);
-    }
-    8% {
-      transform: translate(100%, 100%);
-    }
-    17% {
-      transform: translate(100%, 100%);
-    }
-    25% {
-      transform: translate(0, 100%);
-    }
-    33% {
-      transform: translate(0, 100%);
-    }
-    42% {
-      transform: translate(0, 100%);
-    }
-    50% {
-      transform: translate(0, 0);
-    }
-    58% {
-      transform: translate(0, 0);
-    }
-    67% {
-      transform: translate(0, 0);
-    }
-    75% {
-      transform: translate(100%, 0);
-    }
-    83% {
-      transform: translate(100%, 0);
-    }
-    92% {
-      transform: translate(100%, 0);
-    }
-    100% {
-      transform: translate(100%, 100%);
-    }
-  }
-
-  @keyframes cube-spin-bottom {
-    0% {
-      transform: translate(0, 100%);
-    }
-    8% {
-      transform: translate(0, 100%);
-    }
-    17% {
-      transform: translate(0, 0);
-    }
-    25% {
-      transform: translate(0, 0);
-    }
-    33% {
-      transform: translate(0, 0);
-    }
-    42% {
-      transform: translate(100%, 0);
-    }
-    50% {
-      transform: translate(100%, 0);
-    }
-    58% {
-      transform: translate(100%, 0);
-    }
-    67% {
-      transform: translate(100%, 100%);
-    }
-    75% {
-      transform: translate(100%, 100%);
-    }
-    83% {
-      transform: translate(100%, 100%);
-    }
-    92% {
-      transform: translate(0, 100%);
-    }
-    100% {
-      transform: translate(0, 100%);
-    }
-  }
-`);
-
-        

package/es/components/status/Spin/InternalSpinner.js

@@ -1,26 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b1396c
- * Released under the MIT license.
- */
-
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo } from 'react';
-import { tasty } from '../../../tasty';
-import { Cube } from './Cube';
-import { SpinsContainer } from './SpinsContainer';
-const SpinsBox = tasty({ styles: { position: 'relative', blockSize: '100%' } });
-export const InternalSpinner = memo(function InternalSpinner(props) {
-    const { size } = props;
-    return (
-    // Even though using size as a key resets the animation, it helps safari to resize the cubes.
-    _jsx(SpinsContainer, { ownSize: CUBE_SIZE_MAP[size], children: _jsxs(SpinsBox, { children: [_jsx(Cube, { position: "top" }, void 0), _jsx(Cube, { position: "right" }, void 0), _jsx(Cube, { position: "bottom" }, void 0)] }, void 0) }, size));
-});
-const CUBE_SIZE_MAP = {
-    small: 24,
-    default: 32,
-    large: 48,
-};
-
-        

package/es/components/status/Spin/SpinsContainer.js

@@ -1,39 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b1396c
- * Released under the MIT license.
- */
-
-import styled from 'styled-components';
-export const SpinsContainer = styled.div.attrs(({ ownSize }) => ({
-    role: 'presentation',
-    style: { '--cube-spin-size': `${ownSize}px` },
-})) `
-  box-sizing: border-box;
-
-  display: inline-block;
-  padding: calc(10 / 100 * var(--cube-spin-size));
-  width: var(--cube-spin-size);
-  height: var(--cube-spin-size);
-  opacity: 0.8;
-  contain: size layout style paint;
-
-  @media (prefers-reduced-motion) {
-    animation: cube-spin-reduced-motion 2s infinite ease-in-out;
-  }
-
-  @keyframes cube-spin-reduced-motion {
-    0% {
-      opacity: 0.4;
-    }
-    50% {
-      opacity: 0.8;
-    }
-    100% {
-      opacity: 0.4;
-    }
-  }
-`;
-
-        

package/es/components/status/Spin/index.js

@@ -1,10 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b1396c
- * Released under the MIT license.
- */
-
-export * from './Spin';
-
-        

package/es/components/status/Spin/types.js

@@ -1,10 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b1396c
- * Released under the MIT license.
- */
-
-export {};
-
-        

package/es/components/status/index.js

@@ -1,11 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b1396c
- * Released under the MIT license.
- */
-
-export * from './Spin';
-export * from './LoadingAnimation';
-
-        

package/types/components/status/LoadingAnimation/index.d.ts

@@ -1,2 +0,0 @@
-export { LoadingAnimation } from './LoadingAnimation';
-export type { CubeLoadingAnimationProps } from './LoadingAnimation';

package/types/components/status/Spin/Cube.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare const Cube: import("react").MemoExoticComponent<any>;

package/types/components/status/Spin/InternalSpinner.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { InternalSpinnerProps } from './types';
-export declare const InternalSpinner: import("react").NamedExoticComponent<InternalSpinnerProps>;

package/types/components/status/Spin/SpinsContainer.d.ts

@@ -1 +0,0 @@
-export declare const SpinsContainer: any;

package/types/components/status/Spin/index.d.ts

@@ -1,2 +0,0 @@
-export * from './Spin';
-export type { CubeSpinProps } from './types';