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

package/src/components/Alert/Alert.styles.ts

@@ -1,4 +1,4 @@
-import { css, darkTheme, styled } from '../../theme';
+import { darkTheme, styled } from '../../theme';
 
 export const Container = styled('div', {
   display: 'flex',
@@ -34,7 +34,6 @@ export const Container = styled('div', {
       },
       alarm: {
         padding: '$5 $10',
-        alignItems: 'center',
         '.title_typography': {
           fontWeight: '$medium',
         },
@@ -106,6 +105,12 @@ export const Main = styled('div', {
   },
 });
 
+export const TitleContainer = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  flex: '1 0 0',
+});
+
 export const IconHighlight = styled('div', {
   borderRadius: '$lg',
   width: '$20',
@@ -160,9 +165,3 @@ export const IconHighlight = styled('div', {
     },
   },
 });
-
-export const titleStyles = css({
-  display: 'flex',
-  alignItems: 'center',
-  flex: '1 0 0',
-});

package/src/components/Alert/Alert.tsx

@@ -6,8 +6,8 @@ import React from 'react';
 import { Divider } from '../Divider';
 import { Typography } from '../Typography';
 
-import { getColor } from './Alert.helpers';
-import { Container, IconHighlight, Main, titleStyles } from './Alert.styles';
+import { getColor, mapVariantToSize } from './Alert.helpers';
+import { Container, IconHighlight, Main, TitleContainer } from './Alert.styles';
 import AlertIcon from './AlertIcon';
 
 export function Alert(props: PropsWithChildren<PropTypes>) {
@@ -25,11 +25,11 @@ export function Alert(props: PropsWithChildren<PropTypes>) {
   return (
     <Container
       className="_alert"
-      style={containerStyles}
+      css={containerStyles}
       type={type}
       variant={variant}>
       <Main variant={variant}>
-        <div className={titleStyles()}>
+        <TitleContainer>
           <IconHighlight type={type}>
             <AlertIcon type={type} />
           </IconHighlight>
@@ -40,11 +40,11 @@ export function Alert(props: PropsWithChildren<PropTypes>) {
               align={titleAlign}
               variant="body"
               className="title_typography"
-              size={variant === 'regular' ? 'xsmall' : 'small'}>
+              size={mapVariantToSize(variant)}>
               {title}
             </Typography>
           )}
-        </div>
+        </TitleContainer>
         {action ? <div>{action}</div> : null}
       </Main>
       {footer ? (

package/src/components/Alert/Alert.types.ts

@@ -1,5 +1,6 @@
 import type { BaseAlign } from '../Typography/Typography.types';
-import type { CSSProperties, ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import type { CSS } from 'src/theme';
 
 export type Type = 'success' | 'warning' | 'error' | 'info' | 'loading';
 
@@ -9,6 +10,6 @@ export interface PropTypes {
   footer?: ReactNode;
   action?: ReactNode;
   variant?: 'alarm' | 'regular';
-  containerStyles?: CSSProperties;
+  containerStyles?: CSS;
   titleAlign?: BaseAlign;
 }

package/src/components/Flags/Portuguese.tsx

@@ -0,0 +1,34 @@
+import type { FlagPropTypes } from './Flags.types';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants';
+
+export default function Portuguese(props: FlagPropTypes) {
+  const { size = DEFAULT_SIZE } = props;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512">
+      <mask id="a">
+        <circle cx="256" cy="256" r="256" fill="#fff" />
+      </mask>
+      <g mask="url(#a)">
+        <path fill="#6da544" d="M0 512h167l37.9-260.3L167 0H0z" />
+        <path fill="#d80027" d="M512 0H167v512h345z" />
+        <circle cx="167" cy="256" r="89" fill="#ffda44" />
+        <path
+          fill="#d80027"
+          d="M116.9 211.5V267a50 50 0 1 0 100.1 0v-55.6H117z"
+        />
+        <path
+          fill="#eee"
+          d="M167 283.8c-9.2 0-16.7-7.5-16.7-16.7V245h33.4v22c0 9.2-7.5 16.7-16.7 16.7z"
+        />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/index.ts

@@ -1,8 +1,9 @@
 import English from './English';
 import French from './French';
 import Japanese from './Japanese';
+import Portuguese from './Portuguese';
 import Spanish from './Spanish';
 
 export type { FlagPropTypes } from './Flags.types';
 
-export { English, Spanish, Japanese, French };
+export { English, Spanish, Japanese, French, Portuguese };

package/src/components/I18nManager/I18nManager.tsx

@@ -15,12 +15,14 @@ import { messages as enMessages } from '../../../../../translations/en';
 import { messages as esMessages } from '../../../../../translations/es';
 import { messages as frMessages } from '../../../../../translations/fr';
 import { messages as jaMessages } from '../../../../../translations/ja';
+import { messages as ptMessages } from '../../../../../translations/pt';
 
 const messages = {
   en: enMessages,
   es: esMessages,
   ja: jaMessages,
   fr: frMessages,
+  pt: ptMessages,
 };
 
 i18n.load(messages);

package/src/components/Modal/Modal.tsx

@@ -46,6 +46,8 @@ export function Modal(props: PropsWithChildren<PropTypes>) {
   const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const handleBackDropClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    event.stopPropagation();
+
     if (event.target === event.currentTarget && dismissible) {
       onClose();
     }
@@ -58,15 +60,25 @@ export function Modal(props: PropsWithChildren<PropTypes>) {
       if (open) {
         setIsMount(true);
         container.style.overflow = 'hidden';
-        timeoutRef.current = setTimeout(() => {
-          setActive(true);
-        }, transitionDuration?.enter || OPEN_DELAY);
+        timeoutRef.current = setTimeout(
+          () => {
+            setActive(true);
+          },
+          typeof transitionDuration?.enter !== 'undefined'
+            ? transitionDuration?.enter
+            : OPEN_DELAY
+        );
       } else {
         setActive(false);
-        timeoutRef.current = setTimeout(() => {
-          setIsMount(false);
-          container.style.removeProperty('overflow');
-        }, transitionDuration?.exit || CLOSED_DELAY);
+        timeoutRef.current = setTimeout(
+          () => {
+            setIsMount(false);
+            container.style.removeProperty('overflow');
+          },
+          typeof transitionDuration?.exit !== 'undefined'
+            ? transitionDuration?.exit
+            : CLOSED_DELAY
+        );
       }
     }
     return () => {

package/src/components/QuoteCost/QuoteCost.styles.ts

@@ -5,7 +5,6 @@ export const Container = styled('div', {
   display: 'flex',
   justifyContent: 'start',
   alignItems: 'center',
-  paddingBottom: '$10',
 });
 
 export const Separator = styled('div', {

package/src/components/QuoteCost/QuoteCost.types.ts

@@ -2,7 +2,7 @@ export type PropTypes = {
   fee: string;
   time: string | number;
   steps: number;
-  onClickFee?: () => void;
+  onClickFee?: React.MouseEventHandler<HTMLDivElement>;
   tooltipGas?: string;
   feeWarning?: boolean;
   tooltipContainer?: HTMLElement;

package/src/components/Select/Select.tsx

@@ -0,0 +1,85 @@
+import type { PropTypes } from './Select.types';
+
+import * as Select from '@radix-ui/react-select';
+import React, { useEffect, useRef, useState } from 'react';
+
+import { ChevronDownIcon, ChevronUpIcon } from '../../icons';
+import { Typography } from '../Typography';
+
+import { SelectContent, SelectItem, SelectTrigger } from './select.styles';
+
+export function SelectComponent(props: PropTypes) {
+  const [open, setOpen] = useState(false);
+  const selectRef = useRef<HTMLDivElement>(null);
+  const { options, value, container, handleItemClick } = props;
+  const handleToggle = () => {
+    setOpen((prev) => !prev);
+  };
+
+  const handleClickOutside = (e: MouseEvent) => {
+    if (selectRef.current && !selectRef.current.contains(e.target as Node)) {
+      setOpen(false);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('click', handleClickOutside);
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <div ref={selectRef}>
+      <Select.Root value={value.value} open={open}>
+        <SelectTrigger
+          onKeyDown={(event) => event.key === 'Enter' && handleToggle()}
+          onClick={handleToggle}
+          open={open}
+          aria-label={value.label}>
+          <Select.Value>
+            <Typography variant="body" size="small">
+              {value.label}
+            </Typography>
+          </Select.Value>
+
+          <Select.Icon className="SelectIcon">
+            <ChevronDownIcon size={12} />
+          </Select.Icon>
+        </SelectTrigger>
+        <Select.Portal container={container}>
+          <SelectContent>
+            <Select.ScrollUpButton className="SelectScrollButton">
+              <ChevronUpIcon />
+            </Select.ScrollUpButton>
+            <Select.Viewport className="SelectViewport">
+              <Select.Group>
+                {options.map(
+                  (option) =>
+                    option.value !== value?.value && (
+                      <SelectItem
+                        onClick={() => {
+                          handleItemClick && handleItemClick(option);
+                          handleToggle();
+                        }}
+                        key={option.value}
+                        value={option.value}>
+                        <Select.ItemText>
+                          <Typography variant="body" size="small">
+                            {option.label}
+                          </Typography>
+                        </Select.ItemText>
+                      </SelectItem>
+                    )
+                )}
+              </Select.Group>
+            </Select.Viewport>
+            <Select.ScrollDownButton className="SelectScrollButton">
+              <ChevronDownIcon />
+            </Select.ScrollDownButton>
+          </SelectContent>
+        </Select.Portal>
+      </Select.Root>
+    </div>
+  );
+}

package/src/components/Select/Select.types.ts

@@ -0,0 +1,10 @@
+type Item = {
+  value: string;
+  label: string;
+};
+export type PropTypes = {
+  options: Item[];
+  handleItemClick?: (item: Item) => void;
+  value: Item;
+  container?: HTMLElement;
+};

package/src/components/Select/index.ts

@@ -0,0 +1 @@
+export { SelectComponent as Select } from './Select';

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/TextField/TextField.styles.ts

@@ -91,6 +91,7 @@ export const Input = styled('input', {
   border: 'none',
   outline: 'none',
   fontFamily: 'inherit',
+  maxWidth: '100%',
   variants: {
     suffix: {
       true: { marginRight: '$10' },

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',
       },
     },
   },