@rango-dev/ui 0.37.1-next.1 → 0.38.0

package/src/components/Modal/Modal.tsx

@@ -1,16 +1,15 @@
-import type { ModalPropTypes } from './Modal.types.js';
+import type { ModalPropTypes } from './Modal.types';
 import type { PropsWithChildren } from 'react';
 
 import React, { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 
-import { CloseIcon } from '../../icons/index.js';
-import { BottomLogo } from '../BottomLogo/index.js';
-import { Divider } from '../Divider/index.js';
-import { IconButton } from '../IconButton/index.js';
-import { Typography } from '../Typography/index.js';
+import { CloseIcon } from '../../icons';
+import { BottomLogo } from '../BottomLogo';
+import { Divider } from '../Divider';
+import { IconButton } from '../IconButton/IconButton';
+import { Typography } from '../Typography';
 
-import { forceReflow } from './Modal.helpers.js';
 import {
   BackDrop,
   Content,
@@ -18,14 +17,16 @@ import {
   Footer,
   ModalContainer,
   ModalHeader,
-} from './Modal.styles.js';
+} from './Modal.styles';
+
+const CLOSED_DELAY = 600;
+const OPEN_DELAY = 100;
 
 export function Modal(props: PropsWithChildren<ModalPropTypes>) {
   const {
     title,
     open,
     onClose,
-    onExit,
     styles,
     anchor = 'bottom',
     container = document.body,
@@ -39,14 +40,9 @@ export function Modal(props: PropsWithChildren<ModalPropTypes>) {
     hasCloseIcon = true,
   } = props;
 
-  const [status, setStatus] = useState<
-    'unmounted' | 'mounted' | 'activated' | 'deactivated'
-  >('unmounted');
-  const active = status === 'activated';
-  const isMount =
-    status == 'mounted' || status === 'activated' || status === 'deactivated';
-  const modalContainerRef = useRef<HTMLElement | null>(null);
-  const exitCallbackRef = useRef<ModalPropTypes['onExit']>();
+  const [active, setActive] = useState(false);
+  const [isMount, setIsMount] = useState(false);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const handleBackDropClick = (event: React.MouseEvent<HTMLDivElement>) => {
     event.stopPropagation();
@@ -55,97 +51,80 @@ export function Modal(props: PropsWithChildren<ModalPropTypes>) {
       onClose();
     }
   };
-
   useEffect(() => {
-    exitCallbackRef.current = onExit;
-  }, [onExit]);
-
-  useEffect(() => {
-    if (exitCallbackRef.current) {
-      modalContainerRef.current?.addEventListener(
-        'transitionend',
-        exitCallbackRef.current
-      );
-    }
-
-    if (!open) {
-      if (status === 'activated') {
-        setStatus('deactivated');
-        modalContainerRef.current?.addEventListener('transitionend', () => {
-          setStatus('unmounted');
-          container.style.removeProperty('overflow');
-        });
+    if (container) {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      if (open) {
+        setIsMount(true);
+        container.style.overflow = 'hidden';
+        timeoutRef.current = setTimeout(() => {
+          setActive(true);
+        }, OPEN_DELAY);
       } else {
-        setStatus('unmounted');
+        setActive(false);
+        timeoutRef.current = setTimeout(() => {
+          setIsMount(false);
+          container.style.removeProperty('overflow');
+        }, CLOSED_DELAY);
       }
-    } else {
-      setStatus('mounted');
-      container.style.overflow = 'hidden';
     }
-
     return () => {
-      if (exitCallbackRef.current) {
-        modalContainerRef.current?.removeEventListener(
-          'transitionend',
-          exitCallbackRef.current
-        );
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
       }
     };
-  }, [open]);
-
-  useEffect(() => {
-    if (!!container && isMount) {
-      if (modalContainerRef.current) {
-        forceReflow(modalContainerRef.current);
-      }
-      setStatus('activated');
-    }
-  }, [isMount, container]);
-
-  if (status === 'unmounted' || !container) {
-    return null;
-  }
-
-  return createPortal(
-    <BackDrop active={active} onClick={handleBackDropClick} css={styles?.root}>
-      <ModalContainer
-        active={active}
-        css={styles?.container}
-        anchor={anchor}
-        ref={(ref) => (modalContainerRef.current = ref)}>
-        {header ?? (
-          <ModalHeader noTitle={!title && dismissible && !prefix}>
-            {prefix}
-            {title && (
-              <Typography variant="title" size="small">
-                {title}
-              </Typography>
-            )}
-            <Flex>
-              {suffix}
-              {dismissible && hasCloseIcon && (
-                <IconButton onClick={onClose} variant="ghost">
-                  <CloseIcon color="gray" size={14} />
-                </IconButton>
+  }, [open, container]);
+
+  return (
+    <>
+      {isMount &&
+        container &&
+        createPortal(
+          <BackDrop
+            active={active}
+            onClick={handleBackDropClick}
+            css={styles?.root}>
+            <ModalContainer
+              active={active}
+              css={styles?.container}
+              anchor={anchor}>
+              {header ?? (
+                <ModalHeader noTitle={!title && dismissible && !prefix}>
+                  {prefix}
+                  {title && (
+                    <Typography variant="title" size="small">
+                      {title}
+                    </Typography>
+                  )}
+                  <Flex>
+                    {suffix}
+                    {dismissible && hasCloseIcon && (
+                      <IconButton onClick={onClose} variant="ghost">
+                        <CloseIcon color="gray" size={14} />
+                      </IconButton>
+                    )}
+                  </Flex>
+                </ModalHeader>
               )}
-            </Flex>
-          </ModalHeader>
+              <Content css={styles?.content}>{children}</Content>
+
+              <Footer css={styles?.footer}>
+                {footer && <div className="footer__content">{footer}</div>}
+
+                <div
+                  className={`footer__logo ${
+                    hasWatermark ? 'logo__show' : 'logo__hidden'
+                  }`}>
+                  <Divider size={12} />
+                  <BottomLogo />
+                </div>
+              </Footer>
+            </ModalContainer>
+          </BackDrop>,
+          container
         )}
-        <Content css={styles?.content}>{children}</Content>
-
-        <Footer css={styles?.footer}>
-          {footer && <div className="footer__content">{footer}</div>}
-
-          <div
-            className={`footer__logo ${
-              hasWatermark ? 'logo__show' : 'logo__hidden'
-            }`}>
-            <Divider size={12} />
-            <BottomLogo />
-          </div>
-        </Footer>
-      </ModalContainer>
-    </BackDrop>,
-    container
+    </>
   );
 }

package/src/components/Modal/Modal.types.ts

@@ -1,5 +1,5 @@
-import type { ModalContainer } from './Modal.styles.js';
-import type { config } from '../../theme.js';
+import type { ModalContainer } from './Modal.styles';
+import type { config } from '../../theme';
 import type * as Stitches from '@stitches/react';
 
 type BaseProps = Stitches.VariantProps<typeof ModalContainer>;
@@ -9,7 +9,6 @@ export interface ModalPropTypes {
   title?: string;
   open: boolean;
   onClose: () => void;
-  onExit?: () => void;
   anchor?: BaseAnchor;
   dismissible?: boolean;
   header?: React.ReactNode;

package/src/components/Modal/index.ts

@@ -1,3 +1,3 @@
-export { Modal } from './Modal.js';
-export { ModalHeader } from './Modal.styles.js';
-export type { ModalPropTypes } from './Modal.types.js';
+export { Modal } from './Modal';
+export { ModalHeader } from './Modal.styles';
+export type { ModalPropTypes } from './Modal.types';

package/src/components/NotFound/NotFound.styles.ts

@@ -1,4 +1,4 @@
-import { styled } from '../../theme.js';
+import { darkTheme, styled } from '../../theme';
 
 export const Container = styled('div', {
   display: 'flex',
@@ -6,4 +6,10 @@ export const Container = styled('div', {
   alignItems: 'center',
   flexDirection: 'column',
   textAlign: 'center',
+  '& .not-found-description': {
+    color: '$neutral700',
+    [`.${darkTheme} &`]: {
+      color: '$neutral900',
+    },
+  },
 });

package/src/components/NotFound/NotFound.tsx

@@ -1,24 +1,27 @@
-import type { NotFoundPropTypes } from './NotFound.types.js';
+import type { NotFoundPropTypes } from './NotFound.types';
 
 import React from 'react';
 
-import { SearchIcon } from '../../icons/index.js';
-import { Divider } from '../Divider/index.js';
-import { Typography } from '../Typography/index.js';
+import { SearchIcon } from '../../icons';
+import { Divider } from '../Divider';
+import { Typography } from '../Typography';
 
-import { Container } from './NotFound.styles.js';
+import { Container } from './NotFound.styles';
 
 export function NotFound(props: NotFoundPropTypes) {
-  const { hasIcon = true, titleColor } = props;
+  const { icon, titleColor, hasIcon = true } = props;
   return (
     <Container>
-      {hasIcon && <SearchIcon color="secondary" size={26} />}
+      {hasIcon && (icon || <SearchIcon color="secondary" size={26} />)}
       <Divider size={4} />
       <Typography variant="title" size="medium" color={titleColor}>
         {props.title}
       </Typography>
       <Divider size={10} />
-      <Typography variant="body" size="medium" color="neutral700">
+      <Typography
+        className="not-found-description"
+        variant="body"
+        size="medium">
         {props.description}
       </Typography>
     </Container>

package/src/components/NotFound/NotFound.types.ts

@@ -1,6 +1,9 @@
+import type { ReactNode } from 'react';
+
 export type NotFoundPropTypes = {
   title: string;
   description?: string;
-  hasIcon?: boolean;
   titleColor?: string;
+  icon?: ReactNode;
+  hasIcon?: boolean;
 };

package/src/components/NotFound/index.tsx

@@ -1,2 +1,2 @@
-export { NotFound } from './NotFound.js';
-export type { NotFoundPropTypes } from './NotFound.types.js';
+export { NotFound } from './NotFound';
+export type { NotFoundPropTypes } from './NotFound.types';

package/src/components/Popover/Popover.styles.ts

@@ -1,6 +1,6 @@
 import * as RadixPopover from '@radix-ui/react-popover';
 
-import { darkTheme, styled } from '../../theme.js';
+import { darkTheme, styled } from '../../theme';
 
 export const PopoverContainer = styled(RadixPopover.Content, {
   borderRadius: '$sm',

package/src/components/Popover/Popover.tsx

@@ -1,10 +1,10 @@
-import type { ContentType, PopoverPropTypes, Ref } from './Popover.types.js';
+import type { ContentType, PopoverPropTypes, Ref } from './Popover.types';
 import type { PropsWithChildren } from 'react';
 
 import * as RadixPopover from '@radix-ui/react-popover';
 import React from 'react';
 
-import { PopoverArrow, PopoverContainer } from './Popover.styles.js';
+import { PopoverArrow, PopoverContainer } from './Popover.styles';
 
 const DEFAULT_SIDE_OFFSET = 0;
 const DEFAULT_ALIGN_OFFSET = 0;

package/src/components/Popover/Popover.types.ts

@@ -1,4 +1,4 @@
-import type { CSS } from '../../theme.js';
+import type { CSS } from '../../theme';
 import type { ReactNode } from 'react';
 
 export type Ref =

package/src/components/Popover/index.ts

@@ -1,2 +1,2 @@
-export { Popover } from './Popover.js';
-export type { PopoverPropTypes } from './Popover.types.js';
+export { Popover } from './Popover';
+export type { PopoverPropTypes } from './Popover.types';

package/src/components/PriceImpact/PriceImpact.styles.ts

@@ -1,4 +1,4 @@
-import { darkTheme, styled } from '../../theme.js';
+import { darkTheme, styled } from '../../theme';
 
 export const Container = styled('div', {
   width: '100%',

package/src/components/PriceImpact/PriceImpact.tsx

@@ -1,10 +1,10 @@
-import type { PriceImpactPropTypes } from './PriceImpact.types.js';
+import type { PriceImpactPropTypes } from './PriceImpact.types';
 
 import React from 'react';
 
-import { Divider, NumericTooltip, Typography } from '../index.js';
+import { Divider, NumericTooltip, Typography } from '..';
 
-import { Container, ValueTypography } from './PriceImpact.styles.js';
+import { Container, ValueTypography } from './PriceImpact.styles';
 
 export function PriceImpact(props: PriceImpactPropTypes) {
   const {

package/src/components/PriceImpact/PriceImpact.types.ts

@@ -1,5 +1,5 @@
-import type { TooltipPropTypes } from '../Tooltip/Tooltip.types.js';
-import type { TypographyPropTypes } from '../Typography/index.js';
+import type { TooltipPropTypes } from '../Tooltip/Tooltip.types';
+import type { TypographyPropTypes } from '../Typography';
 
 export type PriceImpactWarningLevel = 'low' | 'high' | undefined;
 

package/src/components/PriceImpact/index.ts

@@ -1,5 +1,5 @@
-export { PriceImpact } from './PriceImpact.js';
+export { PriceImpact } from './PriceImpact';
 export type {
   PriceImpactWarningLevel,
   PriceImpactPropTypes,
-} from './PriceImpact.types.js';
+} from './PriceImpact.types';

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

@@ -1,4 +1,4 @@
-import { css, keyframes, styled } from '../../theme.js';
+import { css, keyframes, styled } from '../../theme';
 
 export const Container = styled('div', {
   borderRadius: '$xs',

package/src/components/QuoteCost/QuoteCost.tsx

@@ -1,18 +1,18 @@
-import type { PropTypes } from './QuoteCost.types.js';
+import type { PropTypes } from './QuoteCost.types';
 
 import React from 'react';
 
-import { GasIcon, NumberIcon, TimeIcon } from '../../icons/index.js';
-import { Divider } from '../Divider/index.js';
-import { Tooltip } from '../Tooltip/index.js';
-import { Typography } from '../Typography/index.js';
+import { GasIcon, NumberIcon, TimeIcon } from '../../icons';
+import { Divider } from '../Divider';
+import { Tooltip } from '../Tooltip';
+import { Typography } from '../Typography';
 
 import {
   Container,
   iconStyles,
   itemStyles,
   Separator,
-} from './QuoteCost.styles.js';
+} from './QuoteCost.styles';
 
 export function QuoteCost(props: PropTypes) {
   const {

package/src/components/QuoteCost/index.ts

@@ -1 +1 @@
-export { QuoteCost } from './QuoteCost.js';
+export { QuoteCost } from './QuoteCost';

package/src/components/QuoteTag/QuoteTag.styles.ts

@@ -1,4 +1,4 @@
-import { css, darkTheme, styled } from '../../theme.js';
+import { css, darkTheme, styled } from '../../theme';
 
 export const getLabelStyles = css({});
 

package/src/components/QuoteTag/QuoteTag.tsx

@@ -1,10 +1,10 @@
-import type { RouteTag, Tag } from 'rango-types/lib/api/main';
+import type { RouteTag, Tag } from 'rango-sdk';
 
 import React from 'react';
 
-import { Typography } from '../Typography/index.js';
+import { Typography } from '../Typography';
 
-import { getLabelStyles, TagContainer } from './QuoteTag.styles.js';
+import { getLabelStyles, TagContainer } from './QuoteTag.styles';
 
 export const QuoteTag = (props: RouteTag) => {
   const { value, label } = props;

package/src/components/QuoteTag/index.ts

@@ -1 +1 @@
-export { QuoteTag } from './QuoteTag.js';
+export { QuoteTag } from './QuoteTag';

package/src/components/Radio/Radio.styles.tsx

@@ -1,6 +1,6 @@
 import * as Radio from '@radix-ui/react-radio-group';
 
-import { darkTheme, styled } from '../../theme.js';
+import { darkTheme, styled } from '../../theme';
 
 export const StyledItem = styled(Radio.Item, {
   padding: '0',

package/src/components/Radio/Radio.tsx

@@ -1,8 +1,8 @@
-import type { RadioPropTypes } from './Radio.types.js';
+import type { RadioPropTypes } from './Radio.types';
 
 import React from 'react';
 
-import { StyledIndicator, StyledItem } from './Radio.styles.js';
+import { StyledIndicator, StyledItem } from './Radio.styles';
 
 export function Radio(props: RadioPropTypes) {
   const { value } = props;

package/src/components/Radio/index.ts

@@ -1,2 +1,2 @@
-export { Radio } from './Radio.js';
-export type { RadioPropTypes } from './Radio.types.js';
+export { Radio } from './Radio';
+export type { RadioPropTypes } from './Radio.types';

package/src/components/RadioGroup/RadioGroup.styles.tsx

@@ -1,6 +1,6 @@
 import * as RadioGroup from '@radix-ui/react-radio-group';
 
-import { styled } from '../../theme.js';
+import { styled } from '../../theme';
 
 export const RadioRoot = styled(RadioGroup.Root, {
   variants: {

package/src/components/RadioGroup/RadioGroup.tsx

@@ -1,16 +1,16 @@
-import type { RadioGroupPropTypes } from './RadioGroup.types.js';
+import type { RadioGroupPropTypes } from './RadioGroup.types';
 
 import React from 'react';
 
-import { Radio } from '../Radio/index.js';
-import { Typography } from '../Typography/index.js';
+import { Radio } from '../Radio/Radio';
+import { Typography } from '../Typography';
 
 import {
   Container,
   ItemContainer,
   Label,
   RadioRoot,
-} from './RadioGroup.styles.js';
+} from './RadioGroup.styles';
 
 export function RadioGroup(props: RadioGroupPropTypes) {
   const { value, onChange, direction = 'vertical', style, options } = props;

package/src/components/RadioGroup/RadioGroup.types.tsx

@@ -1,4 +1,4 @@
-import type { RadioPropTypes } from '../Radio/index.js';
+import type { RadioPropTypes } from '../Radio';
 import type { CSSProperties } from '@stitches/react';
 
 export interface RadioGroupPropTypes {

package/src/components/RadioGroup/index.ts

@@ -1,3 +1,3 @@
-export { RadioGroup } from './RadioGroup.js';
-export { RadioRoot } from './RadioGroup.styles.js';
-export type { RadioGroupPropTypes } from './RadioGroup.types.js';
+export { RadioGroup } from './RadioGroup';
+export { RadioRoot } from './RadioGroup.styles';
+export type { RadioGroupPropTypes } from './RadioGroup.types';

package/src/components/RefreshProgressButton/RefreshProgressButton.styles.ts

@@ -1,4 +1,4 @@
-import { styled } from '../../theme.js';
+import { styled } from '../../theme';
 
 export const StyledEllipse = styled('ellipse', {
   cx: '12.5px',

package/src/components/RefreshProgressButton/RefreshProgressButton.tsx

@@ -1,11 +1,11 @@
 /* eslint-disable @typescript-eslint/no-magic-numbers */
-import type { SvgIconPropsWithChildren } from '../SvgIcon/index.js';
+import type { SvgIconPropsWithChildren } from '../SvgIcon';
 
 import React, { createElement } from 'react';
 
-import { SvgIcon } from '../SvgIcon/index.js';
+import { SvgIcon } from '../SvgIcon';
 
-import { StyledEllipse, StyledPath } from './RefreshProgressButton.styles.js';
+import { StyledEllipse, StyledPath } from './RefreshProgressButton.styles';
 
 const DEFAULT_STROKE_DASHOFFSET = 59;
 const MAX_PERCENTAGE = 100;

package/src/components/RefreshProgressButton/index.ts

@@ -1 +1 @@
-export { RefreshProgressButton } from './RefreshProgressButton.js';
+export { RefreshProgressButton } from './RefreshProgressButton';

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

@@ -1,6 +1,6 @@
 import * as Select from '@radix-ui/react-select';
 
-import { darkTheme, styled } from '../../theme.js';
+import { darkTheme, styled } from '../../theme';
 
 export const EXPANDABLE_QUOTE_TRANSITION_DURATION = 300;
 

package/src/components/Select/Select.tsx

@@ -1,12 +1,12 @@
-import type { SelectPropTypes } from './Select.types.js';
+import type { SelectPropTypes } from './Select.types';
 
 import * as Select from '@radix-ui/react-select';
 import React, { useEffect, useRef, useState } from 'react';
 
-import { ChevronDownIcon, ChevronUpIcon, DoneIcon } from '../../icons/index.js';
-import { Typography } from '../Typography/index.js';
+import { ChevronDownIcon, ChevronUpIcon, DoneIcon } from '../../icons';
+import { Typography } from '../Typography';
 
-import { SelectContent, SelectItem, SelectTrigger } from './Select.styles.js';
+import { SelectContent, SelectItem, SelectTrigger } from './Select.styles';
 
 export function SelectComponent<T extends string>(props: SelectPropTypes<T>) {
   const [open, setOpen] = useState(false);

package/src/components/Select/index.ts

@@ -1,2 +1,2 @@
-export { SelectComponent as Select } from './Select.js';
-export type { SelectPropTypes } from './Select.types.js';
+export { SelectComponent as Select } from './Select';
+export type { SelectPropTypes } from './Select.types';

package/src/components/SelectableCategoryList/SelectableCategoryList.helpers.ts

@@ -1,13 +1,13 @@
-import { type BlockchainMeta, TransactionType } from 'rango-types';
+import { type BlockchainMeta, TransactionType } from 'rango-sdk';
 
 import {
   CosmosCategoryIcon,
   EvmCategoryIcon,
   OtherCategoryIcon,
   UtxoCategoryIcon,
-} from '../../icons/index.js';
+} from '../../icons';
 
-import { BlockchainCategories } from './SelectableCategoryList.types.js';
+import { BlockchainCategories } from './SelectableCategoryList.types';
 
 export const blockchainCategoryIcons = {
   [BlockchainCategories.EVM]: EvmCategoryIcon,

package/src/components/SelectableCategoryList/SelectableCategoryList.styles.ts

@@ -1,4 +1,4 @@
-import { styled } from '../../theme.js';
+import { styled } from '../../theme';
 
 export const Container = styled('div', {
   display: 'grid',