@cube-dev/ui-kit 0.10.11 → 0.11.0

package/es/components/portal/storybook/templates/basic.js

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

package/es/components/portal/storybook/templates/index.js

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

package/es/components/portal/types.js

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

package/es/components/portal/usePortal.js

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

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

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

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

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

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

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

package/es/icons/Attention.js

@@ -0,0 +1,13 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Attention() {
+    return (_jsx("svg", { fill: "currentColor", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M7.94 11.04c-.82 0-1.49.67-1.49 1.49.08 1.96 2.9 1.96 2.97 0 0-.82-.67-1.49-1.48-1.49ZM9.42 2.68a1.93 1.93 0 0 0-3.39 1.58l.9 5.13c.2 1.12 1.8 1.12 2.02 0l.9-5.13c.1-.56-.06-1.14-.43-1.58Z" }, void 0) }, void 0));
+}
+
+        

package/es/icons/Cross.js

@@ -0,0 +1,13 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Cross() {
+    return (_jsx("svg", { viewBox: "0 0 16 16", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "m9.1 8 4.67-4.67a.78.78 0 1 0-1.1-1.1L8 6.9 3.33 2.23a.78.78 0 1 0-1.1 1.1L6.9 8l-4.67 4.67a.78.78 0 1 0 1.1 1.1L8 9.1l4.67 4.67a.78.78 0 0 0 1.1 0c.3-.3.3-.8 0-1.1L9.1 8Z" }, void 0) }, void 0));
+}
+
+        

package/es/icons/Danger.js

@@ -0,0 +1,13 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Danger() {
+    return (_jsxs("svg", { fill: "currentColor", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M13.58 15.5H2.42a2.4 2.4 0 0 1-2.1-1.21 2.4 2.4 0 0 1 0-2.42l5.59-9.66A2.4 2.4 0 0 1 8 1c.87 0 1.66.45 2.1 1.2l5.57 9.67a2.4 2.4 0 0 1 0 2.42 2.4 2.4 0 0 1-2.09 1.2ZM8 2.6a.8.8 0 0 0-.7.4l-5.58 9.67a.8.8 0 0 0 0 .8c.07.12.28.4.7.4h11.16a.8.8 0 0 0 .7-.4.8.8 0 0 0 0-.8L8.7 3a.8.8 0 0 0-.7-.4Zm0 9.67a.8.8 0 1 1 0-1.62.8.8 0 1 1 0 1.62Zm0-3.23a.8.8 0 0 1-.8-.8V6.64a.8.8 0 1 1 1.6 0v1.6a.8.8 0 0 1-.8.81Z" }, void 0), _jsx("path", { d: "M7.2 6.8a.8.8 0 1 1 1.6 0v2.4a.8.8 0 0 1-1.6 0V6.8Z" }, void 0)] }, void 0));
+}
+
+        

package/es/icons/Success.js

@@ -0,0 +1,13 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Success() {
+    return (_jsx("svg", { fill: "currentColor", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "m13.67 5.88-5.8 5.8a1.1 1.1 0 0 1-1.55 0l-3-3a1.1 1.1 0 0 1 1.56-1.55l2.21 2.21 5.03-5.02a1.1 1.1 0 0 1 1.55 1.56Z" }, void 0) }, void 0));
+}
+
+        

package/es/icons/index.js

@@ -0,0 +1,13 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.0
+ * Released under the MIT license.
+ */
+
+export * from './Danger';
+export * from './Attention';
+export * from './Success';
+export * from './Cross';
+
+        

package/es/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.11
+ * @cube-dev/ui-kit v0.11.0
  * 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';
@@ -90,5 +89,7 @@ export * from './tasty';
 export { default as copy } from 'clipboard-copy';
 export * from '@react-aria/ssr';
 export * from './components/forms/Form';
+export * from './components/overlays/NewNotifications';
+export * from './components/overlays/Toasts';
 
         

package/es/provider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.11
+ * @cube-dev/ui-kit v0.11.0
  * 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.11
+ * @cube-dev/ui-kit v0.11.0
  * 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.11
+ * @cube-dev/ui-kit v0.11.0
  * Released under the MIT license.
  */
 
@@ -10,6 +10,9 @@ import ReactDOM from 'react-dom';
 import { Notification, } from '../components/overlays/Notification/Notification';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 let ID = 0;
+/**
+ * @deprecated consider using `useNotificationsApi` instead
+ */
 export const notification = {
     root: null,
     defaultOptions: {

package/es/shared/form.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.11
+ * @cube-dev/ui-kit v0.11.0
  * 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.11
+ * @cube-dev/ui-kit v0.11.0
  * 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.11
+ * @cube-dev/ui-kit v0.11.0
  * 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.11
+ * @cube-dev/ui-kit v0.11.0
  * 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.11
+ * @cube-dev/ui-kit v0.11.0
  * 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.11
+ * @cube-dev/ui-kit v0.11.0
  * 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.11
+ * @cube-dev/ui-kit v0.11.0
  * 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.11
+ * @cube-dev/ui-kit v0.11.0
  * Released under the MIT license.
  */