@cube-dev/ui-kit 0.10.12 → 0.10.13

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

@@ -0,0 +1,190 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.10.13
+ * 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

@@ -0,0 +1,26 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.10.13
+ * 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/Spin.js

@@ -1,35 +1,21 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.12
+ * @cube-dev/ui-kit v0.10.13
  * Released under the MIT license.
  */
 
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { InternalSpinner } from './InternalSpinner';
+import { tasty } from '../../../tasty';
 import { Block } from '../../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) {
+const SpinContainer = tasty(Block, { styles: { lineHeight: '0' } });
+export function Spin(props) {
+    const { size = 'default', spinning = true, children, styles } = props;
+    if (!spinning) {
         return _jsx(_Fragment, { children: children }, void 0);
     }
-    return (_jsx(Block, { ref: ref, role: "img", "aria-label": "Loading animation", height: "1em 1em", opacity: ".8", style: {
-            fontSize: localSize * 8,
-            position: 'relative',
-            ...(style || {}),
-        }, ...props, children: _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: [_jsxs("rect", { fill: "#7a77ff", x: "14", y: "14", width: "32", height: "32", rx: "4", ry: "4", children: [_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), _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), _jsxs("rect", { fill: "#ff6492", x: "14", y: "14", width: "32", height: "32", rx: "4", ry: "4", children: [_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), _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), _jsxs("rect", { fill: "#727290", x: "14", y: "14", width: "32", height: "32", rx: "4", ry: "4", children: [_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), _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 = forwardRef(Spin);
-export { _Spin as Spin };
+    return (_jsx(SpinContainer, { styles: styles, children: _jsx(InternalSpinner, { size: size }, void 0) }, void 0));
+}
 
         

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

@@ -0,0 +1,39 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.10.13
+ * 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

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

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

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

package/es/components/status/index.js

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

package/es/data/themes.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.12
+ * @cube-dev/ui-kit v0.10.13
  * Released under the MIT license.
  */
 

package/es/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.12
+ * @cube-dev/ui-kit v0.10.13
  * Released under the MIT license.
  */
 
@@ -31,8 +31,7 @@ export { Footer } from './components/content/Footer';
 export { Result } from './components/content/Result/Result';
 export { FieldWrapper } from './components/forms/FieldWrapper';
 // atoms
-export { LoadingAnimation } from './components/status/LoadingAnimation/LoadingAnimation';
-export { Spin } from './components/status/Spin/Spin';
+export * from './components/status';
 export { Base64Upload } from './components/other/Base64Upload/Base64Upload';
 export { Card } from './components/content/Card/Card';
 export * from './components/actions';

package/es/provider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.12
+ * @cube-dev/ui-kit v0.10.13
  * Released under the MIT license.
  */
 

package/es/providers/StyleProvider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.12
+ * @cube-dev/ui-kit v0.10.13
  * Released under the MIT license.
  */
 

package/es/services/notification.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.12
+ * @cube-dev/ui-kit v0.10.13
  * Released under the MIT license.
  */
 

package/es/shared/form.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.12
+ * @cube-dev/ui-kit v0.10.13
  * Released under the MIT license.
  */
 

package/es/shared/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.12
+ * @cube-dev/ui-kit v0.10.13
  * Released under the MIT license.
  */
 

package/es/stories/FormFieldArgs.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.12
+ * @cube-dev/ui-kit v0.10.13
  * Released under the MIT license.
  */
 

package/es/stories/components/ConfirmDeletionDialogForm.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.12
+ * @cube-dev/ui-kit v0.10.13
  * Released under the MIT license.
  */
 

package/es/stories/components/DialogFormApp.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.12
+ * @cube-dev/ui-kit v0.10.13
  * Released under the MIT license.
  */
 

package/es/stories/components/StyledButton.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.12
+ * @cube-dev/ui-kit v0.10.13
  * Released under the MIT license.
  */
 

package/es/stories/lists/baseProps.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.12
+ * @cube-dev/ui-kit v0.10.13
  * Released under the MIT license.
  */
 

package/es/styled/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.12
+ * @cube-dev/ui-kit v0.10.13
  * Released under the MIT license.
  */
 

package/es/styled/styled.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.12
+ * @cube-dev/ui-kit v0.10.13
  * Released under the MIT license.
  */
 

package/es/tasty/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.12
+ * @cube-dev/ui-kit v0.10.13
  * Released under the MIT license.
  */
 

package/es/tasty/providers/BreakpointsProvider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.12
+ * @cube-dev/ui-kit v0.10.13
  * Released under the MIT license.
  */
 

package/es/tasty/styles/align.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.12
+ * @cube-dev/ui-kit v0.10.13
  * Released under the MIT license.
  */
 

package/es/tasty/styles/border.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.12
+ * @cube-dev/ui-kit v0.10.13
  * Released under the MIT license.
  */
 

package/es/tasty/styles/boxShadow.combinator.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.12
+ * @cube-dev/ui-kit v0.10.13
  * Released under the MIT license.
  */
 

package/es/tasty/styles/color.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.12
+ * @cube-dev/ui-kit v0.10.13
  * Released under the MIT license.
  */
 

package/es/tasty/styles/createStyle.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.12
+ * @cube-dev/ui-kit v0.10.13
  * Released under the MIT license.
  */
 

package/es/tasty/styles/dimension.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.12
+ * @cube-dev/ui-kit v0.10.13
  * Released under the MIT license.
  */
 

package/es/tasty/styles/display.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.12
+ * @cube-dev/ui-kit v0.10.13
  * Released under the MIT license.
  */
 

package/es/tasty/styles/fill.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.12
+ * @cube-dev/ui-kit v0.10.13
  * Released under the MIT license.
  */
 

package/es/tasty/styles/flow.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.12
+ * @cube-dev/ui-kit v0.10.13
  * Released under the MIT license.
  */
 

package/es/tasty/styles/font.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.12
+ * @cube-dev/ui-kit v0.10.13
  * Released under the MIT license.
  */
 

package/es/tasty/styles/fontStyle.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.12
+ * @cube-dev/ui-kit v0.10.13
  * Released under the MIT license.
  */
 

package/es/tasty/styles/gap.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.12
+ * @cube-dev/ui-kit v0.10.13
  * Released under the MIT license.
  */
 

package/es/tasty/styles/groupRadius.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.12
+ * @cube-dev/ui-kit v0.10.13
  * Released under the MIT license.
  */
 

package/es/tasty/styles/height.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.12
+ * @cube-dev/ui-kit v0.10.13
  * Released under the MIT license.
  */
 

package/es/tasty/styles/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.12
+ * @cube-dev/ui-kit v0.10.13
  * Released under the MIT license.
  */
 

package/es/tasty/styles/justify.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.12
+ * @cube-dev/ui-kit v0.10.13
  * Released under the MIT license.
  */