@rango-dev/ui 0.28.2-next.5 → 0.28.2-next.7

package/src/components/Select/select.styles.ts

@@ -0,0 +1,100 @@
+import * as Select from '@radix-ui/react-select';
+
+import { darkTheme, styled } from '../../theme';
+
+export const EXPANDABLE_QUOTE_TRANSITION_DURATION = 300;
+
+export const SelectTrigger = styled(Select.Trigger, {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  cursor: 'pointer',
+  backgroundColor: '$secondary',
+  padding: '$5 $10',
+  border: 0,
+  whiteSpace: 'nowrap',
+
+  '& svg': {
+    transition: `all ${EXPANDABLE_QUOTE_TRANSITION_DURATION}ms ease`,
+  },
+
+  variants: {
+    open: {
+      true: {
+        borderTopLeftRadius: '$sm',
+        borderTopRightRadius: '$sm',
+        '& ._typography, & svg': {
+          color: '$secondary',
+        },
+
+        '& svg': {
+          transform: 'rotate(180deg)',
+        },
+        backgroundColor: '$neutral100',
+        [`.${darkTheme} &`]: {
+          backgroundColor: '$neutral300',
+        },
+      },
+      false: {
+        borderRadius: '$md',
+        '& ._typography, & svg': {
+          color: '$background',
+          [`.${darkTheme} &`]: {
+            color: '$foreground',
+          },
+        },
+        '& svg': {
+          transform: 'rotate(0)',
+        },
+      },
+    },
+  },
+  width: '100%',
+  '& ._typography': {
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    width: '52px',
+    '@xs': {
+      width: 'auto',
+    },
+  },
+});
+
+export const SelectContent = styled(Select.Content, {
+  padding: '$5 $10',
+  width: '100%',
+  position: 'absolute',
+  top: '38px',
+  maxHeight: '146px',
+  overflowY: 'auto',
+  borderBottomLeftRadius: '$sm',
+  borderBottomRightRadius: '$sm',
+  boxShadow: '-5px 5px 10px 0px rgba(86, 86, 86, 0.10)',
+  backgroundColor: '$neutral100',
+  [`.${darkTheme} &`]: {
+    backgroundColor: '$neutral300',
+  },
+});
+
+export const SelectItem = styled(Select.Item, {
+  padding: '$10 0',
+  borderTop: '1px solid',
+  borderColor: '$neutral300',
+  [`.${darkTheme} &`]: {
+    borderColor: '$neutral400',
+  },
+  listStyleType: 'none',
+  cursor: 'pointer',
+  '&:hover': {
+    '& ._typography': {
+      color: '$colors$secondary',
+    },
+  },
+  '&:focus': {
+    outline: 'none',
+    '& ._typography': {
+      color: '$colors$secondary',
+    },
+  },
+});

package/src/components/Toast/Toast.helpers.ts

@@ -5,3 +5,8 @@ export function idGenerator() {
     return id;
   };
 }
+
+export const TOAST_UNMOUNT_DELAY = 500; // the delay before the toast is unmounted
+export const TOAST_TRANSITION_DURATION = 300; // the duration of the toast transition
+export const HOVER_TRANSITION_DURATION = 200; // the duration of the toast transition hover
+export const TOAST_HIDE_DELAY = 200; // the delay before the toast is invisible to shift remained toast smoothly

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/index.ts

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

package/src/theme.ts

@@ -153,6 +153,7 @@ export const theme = {
     18: '18px',
     20: '20px',
     24: '24px',
+    26: '26px',
     28: '28px',
     30: '30px',
     32: '32px',