@cube-dev/ui-kit 0.98.9 → 0.99.1

package/es/components/overlays/Tooltip/TooltipTrigger.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.1
  * Released under the MIT license.
  */
 
@@ -10,11 +10,11 @@ import { FocusableProvider } from '@react-aria/focus';
 import { isValidElement, useRef, } from 'react';
 import { useOverlayPosition, useTooltipTrigger, } from 'react-aria';
 import { useTooltipTriggerState } from 'react-stately';
-import { Block } from '../../Block';
-import { ActiveZone } from '../../content/ActiveZone/ActiveZone';
-import { DisplayTransition } from '../../helpers/DisplayTransition/DisplayTransition';
-import { Portal } from '../../portal';
-import { TooltipContext } from './context';
+import { Block } from '../../Block.js';
+import { ActiveZone } from '../../content/ActiveZone/ActiveZone.js';
+import { DisplayTransition } from '../../helpers/DisplayTransition/DisplayTransition.js';
+import { Portal } from '../../portal/index.js';
+import { TooltipContext } from './context.js';
 const DEFAULT_OFFSET = 8; // Offset needed to reach 4px/5px (med/large) distance between tooltip and trigger button
 const DEFAULT_CROSS_OFFSET = 0;
 // Type guards

package/es/components/overlays/Tooltip/context.js

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

package/es/components/overlays/Tooltip/index.js

@@ -1,12 +1,12 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.1
  * Released under the MIT license.
  */
 
-export * from './Tooltip';
-export * from './TooltipTrigger';
-export * from './TooltipProvider';
+export * from './Tooltip.js';
+export * from './TooltipTrigger.js';
+export * from './TooltipProvider.js';
 
         

package/es/components/portal/Portal.js

@@ -1,13 +1,13 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.1
  * Released under the MIT license.
  */
 
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { createPortal } from 'react-dom';
-import { usePortal } from './usePortal';
+import { usePortal } from './usePortal.js';
 /**
  * This component renders its children outside the current DOM hierarchy.
  *

package/es/components/portal/PortalProvider.js

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

package/es/components/portal/index.js

@@ -1,11 +1,11 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.1
  * Released under the MIT license.
  */
 
-export { PortalProvider } from './PortalProvider';
-export * from './Portal';
+export { PortalProvider } from './PortalProvider.js';
+export * from './Portal.js';
 
         

package/es/components/portal/types.js

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

package/es/components/portal/usePortal.js

@@ -1,13 +1,13 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.1
  * Released under the MIT license.
  */
 
 import { useEffect, useRef, useState } from 'react';
 import invariant from 'tiny-invariant';
-import { usePortalContext } from './PortalProvider';
+import { usePortalContext } from './PortalProvider.js';
 /**
  * @internal Do not use it
  */

package/es/components/shared/InvalidIcon.js

@@ -1,12 +1,12 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.1
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
-import { WarningIcon } from '../../icons';
+import { WarningIcon } from '../../icons/index.js';
 export const InvalidIcon = (_jsx(WarningIcon, { "data-element": "ValidationIcon", color: "#danger" }));
 
         

package/es/components/shared/ValidIcon.js

@@ -1,12 +1,12 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.1
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
-import { CheckIcon } from '../../icons';
+import { CheckIcon } from '../../icons/index.js';
 export const ValidIcon = (_jsx(CheckIcon, { "data-element": "ValidationIcon", color: "#success" }));
 
         

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

@@ -1,123 +1,67 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.1
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled from 'styled-components';
-import { Block } from '../../Block';
-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 ImgElement = styled.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;
-    }
-    `
-        : ''}
-  }
-  `
-    : ''}
-`);
-function Cube(props) {
-    return _jsx(ImgElement, { role: "presentation", src: cubeImage, alt: "", ...props });
+import { tasty } from '../../../tasty/index.js';
+import { Block } from '../../Block.js';
+const CUBE_IMAGE = "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";
+const CubeElement = tasty({
+    as: 'img',
+    role: 'presentation',
+    src: CUBE_IMAGE,
+    alt: '',
+    styles: {
+        display: 'block',
+        position: 'absolute',
+        width: '50%',
+        height: '50%',
+        animationName: {
+            'index=0': 'dice0',
+            'index=1': 'dice1',
+            'index=2': 'dice2',
+        },
+        animationDuration: {
+            'index=0 | index=1 | index=2': '2s',
+        },
+        animationIterationCount: {
+            'index=0 | index=1 | index=2': 'infinite',
+        },
+        animationTimingFunction: {
+            'index=0 | index=1 | index=2': 'ease',
+        },
+        zIndex: {
+            'index=0 | index=1 | index=2': 0,
+        },
+        '@keyframes': {
+            dice0: {
+                from: 'transform: translate(49%, 0.5%); z-index: 0;',
+                '25%': 'transform: translate(49%, 0.5%); z-index: 0;',
+                '50%': 'transform: translate(0%, 25%); z-index: 0;',
+                '51%': 'z-index: 1;',
+                '75%': 'z-index: 1;',
+                to: 'transform: translate(0%, 25%); z-index: 1;',
+            },
+            dice1: {
+                from: 'transform: translate(0%, 25%); z-index: 3;',
+                '25%': 'transform: translate(49%, 49%); z-index: 3;',
+                '75%': 'transform: translate(49%, 49%); z-index: 2;',
+                to: 'transform: translate(98%, 25%); z-index: 1;',
+            },
+            dice2: {
+                from: 'transform: translate(98%, 25%); z-index: 1;',
+                '50%': 'transform: translate(98%, 25%); z-index: 0;',
+                '75%': 'transform: translate(49%, 0.5%); z-index: 0;',
+                to: 'transform: translate(49%, 0.5%); z-index: 0;',
+            },
+        },
+    },
+});
+function Cube({ index, style }) {
+    return (_jsx(CubeElement, { mods: index != null ? { index } : undefined, style: style }));
 }
 const SIZE_MAP = {
     small: 32,
@@ -126,7 +70,7 @@ const SIZE_MAP = {
 };
 export function LoadingAnimation({ size = 'medium', ...props }) {
     const numSize = SIZE_MAP[size] || size || SIZE_MAP.medium;
-    return (_jsxs(Block, { role: "img", "aria-label": "Loading animation", width: numSize, height: numSize * 1.1388888889, style: { position: 'relative' }, ...props, children: [_jsx(Cube, { style: { transform: 'translate(0%, 72.5%)' } }), _jsx(Cube, { style: { transform: 'translate(98%, 72.5%)' } }), _jsx(Cube, { style: { transform: 'translate(49%, 96.5%)' } }), _jsx(Cube, { "$index": 0 }), _jsx(Cube, { "$index": 1 }), _jsx(Cube, { "$index": 2 })] }));
+    return (_jsxs(Block, { role: "img", "aria-label": "Loading animation", width: numSize, height: numSize * 1.1388888889, style: { position: 'relative' }, ...props, children: [_jsx(Cube, { style: { transform: 'translate(0%, 72.5%)' } }), _jsx(Cube, { style: { transform: 'translate(98%, 72.5%)' } }), _jsx(Cube, { style: { transform: 'translate(49%, 96.5%)' } }), _jsx(Cube, { index: 0 }), _jsx(Cube, { index: 1 }), _jsx(Cube, { index: 2 })] }));
 }
 
         

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

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

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

@@ -1,190 +1,106 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.1
  * Released under the MIT license.
  */
 
+import { jsx as _jsx } from "react/jsx-runtime";
 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 }) => ({
+import { tasty } from '../../../tasty/index.js';
+const CubeElement = tasty({
     role: 'presentation',
-    style: {
-        '--cube-spin-animation-name': `cube-spin-${$position}`,
-        '--cube-spin-fill': fillByPosition[$position],
+    styles: {
+        '$cube-border-width': '(4 / 100 * $cube-spin-size)',
+        '$cube-border-compensation': '(-1 * $cube-border-width)',
+        '$cube-size': '((100% - 2 * $cube-border-width) / 2)',
+        boxSizing: 'content-box',
+        position: 'absolute',
+        top: '$cube-border-compensation',
+        left: '$cube-border-compensation',
+        width: '$cube-size',
+        height: '$cube-size',
+        border: '$cube-border-width solid transparent',
+        overflow: 'hidden',
+        contain: 'size layout style paint',
+        pointerEvents: 'none',
+        userSelect: 'none',
+        animationName: {
+            'position=top': 'cube-spin-top',
+            'position=right': 'cube-spin-right',
+            'position=bottom': 'cube-spin-bottom',
+        },
+        animationDuration: '2.2s',
+        animationIterationCount: 'infinite',
+        animationTimingFunction: 'cubic-bezier(0.5, 0.05, 0.3, 0.95)',
+        animationPlayState: {
+            '': 'running',
+            '@media(prefers-reduced-motion)': 'paused',
+        },
+        '&::before': {
+            '$cube-round-radius': '(4 / 100 * $cube-spin-size)',
+            content: '""',
+            display: 'block',
+            width: '100%',
+            height: '100%',
+            radius: '$cube-round-radius',
+            fill: {
+                'position=top': '#7a77ff',
+                'position=right': '#727290',
+                'position=bottom': '#ff6492',
+            },
+        },
+        '@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);',
+            },
+            '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%);',
+            },
+            '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%);',
+            },
+        },
     },
-})) `
-  --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%);
-    }
-  }
-`);
+});
+export const Cube = memo(function Cube({ $position }) {
+    return _jsx(CubeElement, { mods: { position: $position } });
+});
 
         

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

@@ -1,21 +1,21 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.1
  * 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';
+import { tasty } from '../../../tasty/index.js';
+import { Cube } from './Cube.js';
+import { SpinsContainer } from './SpinsContainer.js';
 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" }), _jsx(Cube, { "$position": "right" }), _jsx(Cube, { "$position": "bottom" })] }) }, size));
+    _jsx(SpinsContainer, { ownSize: CUBE_SIZE_MAP[size], children: _jsxs(SpinsBox, { children: [_jsx(Cube, { "$position": "top" }), _jsx(Cube, { "$position": "right" }), _jsx(Cube, { "$position": "bottom" })] }) }, size));
 });
 const CUBE_SIZE_MAP = {
     small: 24,