@rango-dev/ui 0.28.2-next.1 → 0.28.2-next.11

package/src/components/Toast/Toast.styles.ts

@@ -1,16 +1,217 @@
-import { darkTheme, keyframes, lightTheme, styled } from '../../theme';
+import { css, darkTheme, lightTheme, styled } from '../../theme';
 import { Typography } from '../Typography';
 
-const toastOpacity = keyframes({
-  from: { opacity: 0 },
-  to: { opacity: 1 },
+import {
+  HOVER_TRANSITION_DURATION,
+  TOAST_TRANSITION_DURATION,
+} from './Toast.helpers';
+
+export const toastContentStyles = css({
+  transition: `transform ${HOVER_TRANSITION_DURATION}ms ease-in-out`,
+  '&:hover': {
+    transform: 'scale(0.99)',
+  },
 });
 
 export const ToastContentContainer = styled('div', {
-  animation: `${toastOpacity} .7s`,
+  transition: `transform ${TOAST_TRANSITION_DURATION}ms cubic-bezier(0, 0, 0.75, 1.25)`,
+  cursor: 'pointer',
+  variants: {
+    isActive: {
+      true: {},
+    },
+    isVisible: {
+      true: {},
+    },
+    position: {
+      'right-top': {},
+      'right-bottom': {},
+      'left-top': {},
+      'left-bottom': {},
+      'center-top': {},
+      'center-bottom': {},
+    },
+  },
+  compoundVariants: [
+    {
+      position: 'right-top',
+      isActive: true,
+      isVisible: true,
+      css: {
+        transform: 'translateX(0)',
+        maxHeight: '200px',
+      },
+    },
+    {
+      position: 'right-top',
+      isActive: false,
+      isVisible: true,
+      css: {
+        maxHeight: '200px',
+        transform: 'translateX(100%)',
+      },
+    },
+    {
+      position: 'right-top',
+      isActive: false,
+      isVisible: false,
+      css: {
+        maxHeight: '0px',
+        transform: 'translateX(100%)',
+        transition: `max-height ${TOAST_TRANSITION_DURATION}ms ease-in-out`,
+      },
+    },
+    {
+      position: 'right-bottom',
+      isActive: true,
+      isVisible: true,
+      css: {
+        transform: 'translateX(0)',
+        maxHeight: '200px',
+      },
+    },
+    {
+      position: 'right-bottom',
+      isActive: false,
+      isVisible: true,
+      css: {
+        transform: 'translateX(100%)',
+        maxHeight: '200px',
+      },
+    },
+    {
+      position: 'right-bottom',
+      isActive: false,
+      isVisible: false,
+      css: {
+        transform: 'translateX(100%)',
+        maxHeight: '0px',
+        transition: `max-height ${TOAST_TRANSITION_DURATION}ms ease-in-out`,
+      },
+    },
+    {
+      position: 'left-top',
+      isActive: true,
+      isVisible: true,
+      css: {
+        transform: 'translateX(0)',
+        maxHeight: '200px',
+      },
+    },
+    {
+      position: 'left-top',
+      isActive: false,
+      isVisible: true,
+      css: {
+        transform: 'translateX(-100%)',
+        maxHeight: '200px',
+      },
+    },
+    {
+      position: 'left-top',
+      isActive: false,
+      isVisible: false,
+      css: {
+        transform: 'translateX(-100%)',
+        maxHeight: '0px',
+        transition: `max-height ${TOAST_TRANSITION_DURATION}ms ease-in-out`,
+      },
+    },
+    {
+      position: 'left-bottom',
+      isActive: true,
+      isVisible: true,
+      css: {
+        transform: 'translateX(0)',
+        maxHeight: '200px',
+      },
+    },
+    {
+      position: 'left-bottom',
+      isActive: false,
+      isVisible: true,
+      css: {
+        transform: 'translateX(-100%)',
+        maxHeight: '200px',
+      },
+    },
+    {
+      position: 'left-bottom',
+      isActive: false,
+      isVisible: false,
+      css: {
+        transform: 'translateX(-100%)',
+        maxHeight: '0px',
+        transition: `max-height ${TOAST_TRANSITION_DURATION}ms ease-in-out`,
+      },
+    },
+    {
+      position: 'center-top',
+      isActive: true,
+      isVisible: true,
+      css: {
+        maxHeight: '200px',
+        transform: 'translateY(0)',
+        opacity: 1,
+      },
+    },
+    {
+      position: 'center-top',
+      isActive: false,
+      isVisible: true,
+      css: {
+        maxHeight: '200px',
+        transform: 'translateY(-1000%)',
+        opacity: 0,
+      },
+    },
+    {
+      position: 'center-top',
+      isActive: false,
+      isVisible: false,
+      css: {
+        maxHeight: '0px',
+        opacity: 0,
+        transform: 'translateY(-1000%)',
+        transition: `max-height ${TOAST_TRANSITION_DURATION}ms ease-in-out`,
+      },
+    },
+    {
+      position: 'center-bottom',
+      isActive: true,
+      isVisible: true,
+      css: {
+        transform: 'translateY(0)',
+        maxHeight: '200px',
+        opacity: 1,
+      },
+    },
+    {
+      position: 'center-bottom',
+      isActive: false,
+      isVisible: true,
+      css: {
+        transform: 'translateY(1000%)',
+        maxHeight: '200px',
+        opacity: 0,
+      },
+    },
+    {
+      position: 'center-bottom',
+      isActive: false,
+      isVisible: false,
+      css: {
+        transform: 'translateY(1000%)',
+        maxHeight: '0px',
+        opacity: 0,
+        transition: `max-height ${TOAST_TRANSITION_DURATION}ms ease-in-out`,
+      },
+    },
+  ],
 });
 
 export const ToastContainer = styled('div', {
+  overflow: 'hidden',
   position: 'absolute',
   zIndex: 9999,
   display: 'flex',
@@ -25,6 +226,7 @@ export const ToastContainer = styled('div', {
       'right-bottom': {
         right: 12,
         bottom: 2,
+        flexDirection: 'column-reverse',
       },
       'left-top': {
         left: 12,
@@ -33,6 +235,7 @@ export const ToastContainer = styled('div', {
       'left-bottom': {
         left: 12,
         bottom: 2,
+        flexDirection: 'column-reverse',
       },
       'center-top': {
         left: '50%',
@@ -43,6 +246,7 @@ export const ToastContainer = styled('div', {
         left: '50%',
         transform: 'translateX(-50%)',
         bottom: 2,
+        flexDirection: 'column-reverse',
       },
     },
   },

package/src/components/Toast/Toast.tsx

@@ -1,6 +1,6 @@
 import type { ToastProps } from './Toast.types';
 
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { CloseIcon } from '../../icons';
 import { Alert } from '../Alert';
@@ -9,12 +9,14 @@ import AlertIcon from '../Alert/AlertIcon';
 import { Divider } from '../Divider';
 import { IconButton } from '../IconButton';
 
+import { TOAST_HIDE_DELAY, TOAST_UNMOUNT_DELAY } from './Toast.helpers';
 import { useToast } from './Toast.Provider';
 import {
   AlertBox,
   AlertFlexContainer,
   StyledTypography,
   ToastContentContainer,
+  toastContentStyles,
 } from './Toast.styles';
 
 export const Toast = (props: ToastProps) => {
@@ -29,6 +31,8 @@ export const Toast = (props: ToastProps) => {
     hideOnTap = true,
     variant = 'standard',
   } = props;
+  const [isActive, setIsActive] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
   const { removeToast } = useToast();
   useEffect(() => {
     let cleanup;
@@ -45,42 +49,63 @@ export const Toast = (props: ToastProps) => {
   }, [id]);
 
   const handleClose = () => {
-    removeToast(id, position);
-    onClose?.();
+    setIsActive(false);
+    setTimeout(() => {
+      setIsVisible(false);
+    }, TOAST_HIDE_DELAY);
+    setTimeout(() => {
+      removeToast(id, position);
+      onClose?.();
+    }, TOAST_UNMOUNT_DELAY);
   };
 
+  useEffect(() => {
+    setIsVisible(true);
+    setTimeout(() => {
+      setIsActive(true);
+    }, 0);
+  }, []);
+
   return (
-    <ToastContentContainer>
-      <AlertBox
-        onClick={hideOnTap ? handleClose : undefined}
-        variant={variant}
-        type={type}>
-        {variant === 'custom' ? (
-          <AlertFlexContainer>
-            <IconHighlight type={type} align="center">
-              <AlertIcon type={type} />
-            </IconHighlight>
-            <Divider direction="horizontal" size={10} />
-            <StyledTypography variant="body" size="small" align="left">
-              {props.title}
-            </StyledTypography>
-          </AlertFlexContainer>
-        ) : (
-          <Alert
-            title={title}
-            type={type}
-            variant="alarm"
-            titleAlign="left"
-            action={
-              hasCloseIcon ? (
-                <IconButton variant="ghost" size="xsmall" onClick={handleClose}>
-                  <CloseIcon size={12} />
-                </IconButton>
-              ) : undefined
-            }
-          />
-        )}
-      </AlertBox>
+    <ToastContentContainer
+      isActive={isActive}
+      position={position}
+      isVisible={isVisible}>
+      <div className={toastContentStyles()}>
+        <AlertBox
+          onClick={hideOnTap ? handleClose : undefined}
+          variant={variant}
+          type={type}>
+          {variant === 'custom' ? (
+            <AlertFlexContainer>
+              <IconHighlight type={type} align="center">
+                <AlertIcon type={type} />
+              </IconHighlight>
+              <Divider direction="horizontal" size={10} />
+              <StyledTypography variant="body" size="small" align="left">
+                {props.title}
+              </StyledTypography>
+            </AlertFlexContainer>
+          ) : (
+            <Alert
+              title={title}
+              type={type}
+              variant="alarm"
+              titleAlign="left"
+              action={
+                hasCloseIcon ? (
+                  <IconButton
+                    variant="ghost"
+                    size="xsmall"
+                    onClick={handleClose}>
+                    <CloseIcon size={12} />
+                  </IconButton>
+                ) : undefined
+              }
+            />
+          )}
+        </AlertBox>
+      </div>
     </ToastContentContainer>
   );
 };

package/src/components/Typography/NotSelectableTypography.ts

@@ -0,0 +1,7 @@
+import { styled } from '../../theme';
+
+import { Typography } from './Typography';
+
+export const NotSelectableTypography = styled(Typography, {
+  userSelect: 'none',
+});

package/src/components/Typography/index.ts

@@ -1,2 +1,3 @@
 export { Typography } from './Typography';
+export { NotSelectableTypography } from './NotSelectableTypography';
 export type { PropTypes as TypographyPropTypes } from './Typography.types';

package/src/components/index.ts

@@ -51,3 +51,4 @@ export * from './TokenAmount';
 export * from './StepDetails';
 export * from './Popover';
 export * from './Flags';
+export * from './Select';

package/src/icons/Tune.tsx

@@ -0,0 +1,51 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgTune(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 24 25" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.3143 10.9429C11.7029 10.9429 12.8286 9.81717 12.8286 8.42857C12.8286 7.03997 11.7029 5.91429 10.3143 5.91429C8.92568 5.91429 7.8 7.03997 7.8 8.42857C7.8 9.81717 8.92568 10.9429 10.3143 10.9429ZM10.3143 11.8571C12.2078 11.8571 13.7429 10.3221 13.7429 8.42857C13.7429 6.53502 12.2078 5 10.3143 5C8.42074 5 6.88571 6.53502 6.88571 8.42857C6.88571 10.3221 8.42074 11.8571 10.3143 11.8571Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M13.7429 20.0857C15.1315 20.0857 16.2571 18.96 16.2571 17.5714C16.2571 16.1828 15.1315 15.0571 13.7429 15.0571C12.3543 15.0571 11.2286 16.1828 11.2286 17.5714C11.2286 18.96 12.3543 20.0857 13.7429 20.0857ZM13.7429 21C15.6364 21 17.1714 19.465 17.1714 17.5714C17.1714 15.6779 15.6364 14.1429 13.7429 14.1429C11.8493 14.1429 10.3143 15.6779 10.3143 17.5714C10.3143 19.465 11.8493 21 13.7429 21Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3 8.42857C3 8.1761 3.20467 7.97143 3.45714 7.97143H6.88571C7.13819 7.97143 7.34286 8.1761 7.34286 8.42857C7.34286 8.68104 7.13819 8.88571 6.88571 8.88571H3.45714C3.20467 8.88571 3 8.68104 3 8.42857Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16.7143 17.5714C16.7143 17.319 16.919 17.1143 17.1714 17.1143H20.6C20.8525 17.1143 21.0571 17.319 21.0571 17.5714C21.0571 17.8239 20.8525 18.0286 20.6 18.0286H17.1714C16.919 18.0286 16.7143 17.8239 16.7143 17.5714Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14.4286 8.42857C14.4286 8.1761 14.6332 7.97143 14.8857 7.97143H20.6C20.8525 7.97143 21.0571 8.1761 21.0571 8.42857C21.0571 8.68104 20.8525 8.88571 20.6 8.88571H14.8857C14.6332 8.88571 14.4286 8.68104 14.4286 8.42857Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3 17.5714C3 17.319 3.20467 17.1143 3.45714 17.1143H9.17143C9.4239 17.1143 9.62857 17.319 9.62857 17.5714C9.62857 17.8239 9.4239 18.0286 9.17143 18.0286H3.45714C3.20467 18.0286 3 17.8239 3 17.5714Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+export default SvgTune;

package/src/icons/index.ts

@@ -46,6 +46,7 @@ export { default as SearchIcon } from './Search';
 export { default as SwapIcon } from './Swap';
 export { default as TimeIcon } from './Time';
 export { default as TransactionIcon } from './Transaction';
+export { default as TuneIcon } from './Tune';
 export { default as UtxoCategoryIcon } from './UtxoCategory';
 export { default as WalletIcon } from './Wallet';
 export { default as WarningIcon } from './Warning';

package/src/theme.ts

@@ -1,6 +1,6 @@
 // TSDX + stiches doesn't work with import statement and has a bug.
 
-import type { PropertyValue } from '@stitches/react';
+import type { PropertyValue, CSS as StitchesCSS } from '@stitches/react';
 import type { DefaultThemeMap } from '@stitches/react/types/config';
 
 import { createStitches } from '@stitches/react';
@@ -153,6 +153,7 @@ export const theme = {
     18: '18px',
     20: '20px',
     24: '24px',
+    26: '26px',
     28: '28px',
     30: '30px',
     32: '32px',
@@ -217,6 +218,8 @@ export const { styled, css, createTheme, keyframes, globalCss, config } =
     utils,
   });
 
+export type CSS = StitchesCSS<typeof config>;
+
 export const lightTheme = createTheme('light-theme-ui', {});
 
 export const darkTheme = createTheme('dark-theme-ui', {