@rango-dev/ui 0.0.0-experimental-936229e8-20251208

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

@@ -0,0 +1,30 @@
+import type { CSS } from '../../theme.js';
+import type { ReactNode } from 'react';
+
+export type Ref =
+  | ((instance: HTMLInputElement | null) => void)
+  | React.RefObject<HTMLInputElement>
+  | null
+  | undefined;
+
+type Side = 'top' | 'right' | 'bottom' | 'left';
+
+export interface ContentType {
+  side?: Side;
+  sideOffset?: number;
+  alignOffset?: number;
+  align?: 'center' | 'start' | 'end';
+  collisionBoundary?: Element | null | Array<Element | null>;
+  collisionPadding?: number | Partial<Record<Side, number>>;
+  container?: HTMLElement;
+  styles?: {
+    arrowStyles?: CSS;
+  };
+  hasArrow?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+export type PopoverPropTypes = ContentType & {
+  content: ReactNode;
+  open?: boolean;
+};

package/src/components/Popover/index.ts

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

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

@@ -0,0 +1,43 @@
+import { darkTheme, styled } from '../../theme.js';
+
+export const Container = styled('div', {
+  width: '100%',
+  display: 'flex',
+  justifyContent: 'end',
+  alignItems: 'center',
+  overflow: 'hidden',
+  minWidth: 0,
+});
+
+export const ValueTypography = styled('div', {
+  display: 'flex',
+  '& .output-usd-value': {
+    flex: '1 1 auto',
+    minWidth: 0,
+    flexShrink: 1,
+    maxWidth: '100%',
+  },
+  '& ._typography': {
+    $$color: '$colors$neutral600',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral700',
+    },
+    color: '$$color',
+  },
+  variants: {
+    hasWarning: {
+      true: {
+        '& ._typography': {
+          color: '$warning500',
+        },
+      },
+    },
+    hasError: {
+      true: {
+        '& ._typography': {
+          color: '$error500',
+        },
+      },
+    },
+  },
+});

package/src/components/PriceImpact/PriceImpact.tsx

@@ -0,0 +1,72 @@
+import type { PriceImpactPropTypes } from './PriceImpact.types.js';
+
+import React, { useRef } from 'react';
+import { useIsTruncated } from 'src/hooks/useIsTruncated.js';
+import { InfoIcon } from 'src/icons/index.js';
+
+import { Divider, NumericTooltip, Typography } from '../index.js';
+import { textTruncate } from '../TokenAmount/TokenAmount.styles.js';
+
+import { Container, ValueTypography } from './PriceImpact.styles.js';
+
+export function PriceImpact(props: PriceImpactPropTypes) {
+  const {
+    size = 'medium',
+    outputUsdValue,
+    outputColor,
+    realOutputUsdValue,
+    percentageChange,
+    warningLevel,
+    error,
+    tooltipProps,
+    ...rest
+  } = props;
+
+  const hasWarning = !outputUsdValue || warningLevel === 'low';
+  const hasError = warningLevel === 'high';
+  const realOutputUsdValueRef = useRef<HTMLSpanElement | null>(null);
+  const isRealOutputUsdValueTruncated = useIsTruncated(
+    realOutputUsdValue || '',
+    realOutputUsdValueRef
+  );
+  return (
+    <Container {...rest}>
+      {outputUsdValue && (
+        <ValueTypography className={textTruncate()}>
+          <Typography
+            className={`${textTruncate()} output-usd-value`}
+            size={size}
+            ref={realOutputUsdValueRef}
+            variant="body"
+            color={outputColor}>
+            {realOutputUsdValue === '0' ? '0.00' : `~$${realOutputUsdValue}`}
+          </Typography>
+          {isRealOutputUsdValueTruncated && (
+            <NumericTooltip
+              content={realOutputUsdValue}
+              container={tooltipProps?.container}
+              side={tooltipProps?.side}>
+              <InfoIcon size={12} color="gray" />
+            </NumericTooltip>
+          )}
+        </ValueTypography>
+      )}
+      {((outputUsdValue && percentageChange) || !outputUsdValue) && (
+        <ValueTypography hasError={hasError} hasWarning={hasWarning}>
+          <Divider direction="horizontal" size={4} />
+          <Typography size={size} variant="body">
+            {outputUsdValue &&
+              percentageChange &&
+              `(${
+                percentageChange.includes('-')
+                  ? percentageChange
+                  : `-${percentageChange}`
+              }${percentageChange ? '%' : '-'})`}
+
+            {!outputUsdValue && error}
+          </Typography>
+        </ValueTypography>
+      )}
+    </Container>
+  );
+}

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

@@ -0,0 +1,20 @@
+import type { TooltipPropTypes } from '../Tooltip/Tooltip.types.js';
+import type { TypographyPropTypes } from '../Typography/index.js';
+
+export type PriceImpactWarningLevel = 'low' | 'high' | undefined;
+
+export type PriceImpactPropTypes = {
+  size: TypographyPropTypes['size'];
+  outputUsdValue?: string;
+  outputColor?: string;
+  realOutputUsdValue?: string;
+  error?: string;
+  percentageChange?: string | null;
+  warningLevel?: PriceImpactWarningLevel;
+  style?: React.CSSProperties;
+  className?: string;
+  tooltipProps?: {
+    container?: TooltipPropTypes['container'];
+    side?: TooltipPropTypes['side'];
+  };
+};

package/src/components/PriceImpact/index.ts

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

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

@@ -0,0 +1,57 @@
+import { css, keyframes, styled } from '../../theme.js';
+
+export const Container = styled('div', {
+  borderRadius: '$xs',
+  display: 'flex',
+  justifyContent: 'start',
+  alignItems: 'center',
+});
+
+export const Separator = styled('div', {
+  height: '$12',
+  marginLeft: '$10',
+  marginRight: '$10',
+  borderLeft: '1px solid $foreground',
+});
+
+export const iconStyles = css({
+  width: '$16',
+  height: '$16',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+const blinker = keyframes({
+  '50%': {
+    opacity: 0.2,
+  },
+});
+
+export const itemStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+  cursor: 'default',
+
+  '&.feeSection': {
+    cursor: 'pointer',
+    '&:hover': {
+      svg: {
+        color: '$secondary',
+      },
+      '._typography': {
+        color: '$secondary',
+      },
+    },
+  },
+  '&.warning': {
+    animation: `${blinker} 2s linear infinite`,
+
+    svg: {
+      color: '$warning500',
+    },
+    '._typography': {
+      color: '$warning500',
+    },
+  },
+});

package/src/components/QuoteCost/QuoteCost.tsx

@@ -0,0 +1,76 @@
+import type { PropTypes } from './QuoteCost.types.js';
+
+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 {
+  Container,
+  iconStyles,
+  itemStyles,
+  Separator,
+} from './QuoteCost.styles.js';
+
+export function QuoteCost(props: PropTypes) {
+  const {
+    fee,
+    time,
+    steps,
+    onClickFee,
+    tooltipGas,
+    feeWarning,
+    timeWarning,
+    tooltipContainer,
+  } = props;
+  return (
+    <Container>
+      <Tooltip
+        container={tooltipContainer}
+        content={tooltipGas}
+        open={!onClickFee && !tooltipGas ? false : undefined}
+        side="bottom">
+        <div
+          className={`${itemStyles()} ${onClickFee ? 'feeSection' : ''} ${
+            feeWarning ? 'warning' : ''
+          }`}
+          onClick={onClickFee}>
+          <div className={iconStyles()}>
+            <GasIcon size={12} color={'gray'} />
+          </div>
+          <Divider direction="horizontal" size={2} />
+          <Typography align="center" variant="body" size="small">
+            ${fee}
+          </Typography>
+        </div>
+      </Tooltip>
+
+      <Separator />
+      <div className={`${itemStyles()} ${timeWarning ? 'warning' : ''}`}>
+        <div className={iconStyles()}>
+          <TimeIcon size={12} color="gray" />
+        </div>
+        <Divider direction="horizontal" size={2} />
+        <Typography align="center" variant="body" size="small">
+          {time}
+        </Typography>
+      </div>
+      {!!steps && (
+        <>
+          <Separator />
+          <div className={itemStyles()}>
+            <div className={iconStyles()}>
+              <NumberIcon size={16} color="gray" />
+            </div>
+            <Divider direction="horizontal" size={2} />
+            <Typography align="center" variant="body" size="small">
+              {steps}
+            </Typography>
+          </div>
+        </>
+      )}
+    </Container>
+  );
+}

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

@@ -0,0 +1,10 @@
+export type PropTypes = {
+  fee: string;
+  time: string | number;
+  steps?: number;
+  onClickFee?: React.MouseEventHandler<HTMLDivElement>;
+  tooltipGas?: string;
+  feeWarning?: boolean;
+  timeWarning?: boolean;
+  tooltipContainer?: HTMLElement;
+};

package/src/components/QuoteCost/index.ts

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

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

@@ -0,0 +1,44 @@
+import { css, darkTheme, styled } from '../../theme.js';
+
+export const getLabelStyles = css({});
+
+export const TagContainer = styled('div', {
+  backgroundColor: '$neutral400',
+  borderRadius: '$xs',
+  padding: '$2 $5',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  variants: {
+    type: {
+      RECOMMENDED: {
+        [`& .${getLabelStyles}`]: {
+          color: '$secondary500',
+          [`.${darkTheme} &`]: {
+            color: '$secondary250',
+          },
+        },
+      },
+      FASTEST: {
+        [`& .${getLabelStyles}`]: {
+          color: '$success500',
+        },
+      },
+      HIGH_IMPACT: {
+        [`& .${getLabelStyles}`]: {
+          color: '$error500',
+        },
+      },
+      LOWEST_FEE: {
+        [`& .${getLabelStyles}`]: {
+          color: '#FF4DAD',
+        },
+      },
+      CENTRALIZED: {
+        [`& .${getLabelStyles}`]: {
+          color: '$warning500',
+        },
+      },
+    },
+  },
+});

package/src/components/QuoteTag/QuoteTag.tsx

@@ -0,0 +1,19 @@
+import type { RouteTag, Tag } from 'rango-types/lib/api/main';
+
+import React from 'react';
+
+import { Typography } from '../Typography/index.js';
+
+import { getLabelStyles, TagContainer } from './QuoteTag.styles.js';
+
+export const QuoteTag = (props: RouteTag) => {
+  const { value, label } = props;
+
+  return (
+    <TagContainer type={value as Tag}>
+      <Typography variant="body" size="small" className={getLabelStyles()}>
+        {label}
+      </Typography>
+    </TagContainer>
+  );
+};

package/src/components/QuoteTag/index.ts

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

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

@@ -0,0 +1,42 @@
+import * as Radio from '@radix-ui/react-radio-group';
+
+import { darkTheme, styled } from '../../theme.js';
+
+export const StyledItem = styled(Radio.Item, {
+  padding: '0',
+  width: '16px',
+  height: '16px',
+  borderRadius: '100%',
+  cursor: 'pointer',
+  backgroundColor: 'transparent',
+  $$borderColor: '$colors$neutral600',
+  [`.${darkTheme} &`]: {
+    $$borderColor: '$colors$neutral700',
+  },
+  border: '1px solid $$borderColor',
+  '&[data-state="checked"]': {
+    $$color: '$colors$secondary500',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$secondary250',
+    },
+    backgroundColor: '$$color',
+    borderColor: '$$color',
+  },
+});
+
+export const StyledIndicator = styled(Radio.Indicator, {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '100%',
+  height: '100%',
+  position: 'relative',
+  '&::after': {
+    content: '',
+    display: 'block',
+    width: '8px',
+    height: '8px',
+    borderRadius: '50%',
+    backgroundColor: '$background',
+  },
+});

package/src/components/Radio/Radio.tsx

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

package/src/components/Radio/Radio.types.tsx

@@ -0,0 +1,3 @@
+export interface RadioPropTypes {
+  value: string;
+}

package/src/components/Radio/index.ts

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

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

@@ -0,0 +1,38 @@
+import * as RadioGroup from '@radix-ui/react-radio-group';
+
+import { styled } from '../../theme.js';
+
+export const RadioRoot = styled(RadioGroup.Root, {
+  variants: {
+    direction: {
+      horizontal: {
+        display: 'flex',
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+      },
+      vertical: {
+        display: 'grid',
+        gridGap: '$24',
+      },
+    },
+  },
+});
+
+export const ItemContainer = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  marginRight: '$8',
+});
+
+export const Container = styled('div', {
+  display: 'flex',
+});
+
+export const Label = styled('label', {
+  paddingLeft: '$8',
+  cursor: 'pointer',
+  color: '$foreground',
+  '& > span': {
+    display: 'block',
+  },
+});

package/src/components/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,37 @@
+import type { RadioGroupPropTypes } from './RadioGroup.types.js';
+
+import React from 'react';
+
+import { Radio } from '../Radio/index.js';
+import { Typography } from '../Typography/index.js';
+
+import {
+  Container,
+  ItemContainer,
+  Label,
+  RadioRoot,
+} from './RadioGroup.styles.js';
+
+export function RadioGroup(props: RadioGroupPropTypes) {
+  const { value, onChange, direction = 'vertical', style, options } = props;
+  return (
+    <Container>
+      <RadioRoot
+        onValueChange={onChange}
+        value={value}
+        direction={direction}
+        style={style}>
+        {options.map((option) => (
+          <ItemContainer key={option.value}>
+            <Radio value={option.value} />
+            <Label className="_text" htmlFor={option.value}>
+              <Typography variant="body" size="small">
+                {option.label}
+              </Typography>
+            </Label>
+          </ItemContainer>
+        ))}
+      </RadioRoot>
+    </Container>
+  );
+}

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

@@ -0,0 +1,13 @@
+import type { RadioPropTypes } from '../Radio/index.js';
+import type { CSSProperties } from '@stitches/react';
+
+export interface RadioGroupPropTypes {
+  options: {
+    label: string;
+    value: RadioPropTypes['value'];
+  }[];
+  value: RadioPropTypes['value'];
+  onChange: (value: string) => void;
+  direction?: 'vertical' | 'horizontal';
+  style?: CSSProperties;
+}

package/src/components/RadioGroup/index.ts

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

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

@@ -0,0 +1,28 @@
+import { styled } from '../../theme.js';
+
+export const StyledEllipse = styled('ellipse', {
+  cx: '12.5px',
+  cy: '12.5px',
+  rx: '7.7px',
+  ry: '7.7px',
+  strokeLinecap: 'round',
+  fill: 'none',
+  strokeDasharray: 100,
+  transform: `rotate(20deg)`,
+  transformOrigin: 'center',
+  variants: {
+    type: {
+      'in-progress': {
+        stroke: '$info500',
+        strokeWidth: 2,
+      },
+      basic: {
+        strokeWidth: 1.8,
+      },
+    },
+  },
+});
+
+export const StyledPath = styled('path', {
+  fill: '$info500',
+});

package/src/components/RefreshProgressButton/RefreshProgressButton.tsx

@@ -0,0 +1,70 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import type { SvgIconPropsWithChildren } from '../SvgIcon/index.js';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../SvgIcon/index.js';
+
+import { StyledEllipse, StyledPath } from './RefreshProgressButton.styles.js';
+
+const DEFAULT_STROKE_DASHOFFSET = 59;
+const MAX_PERCENTAGE = 100;
+const MAX_PROGRESS = 41;
+const MIN_PROGRESS = 0;
+const NORMALIZE_FACTOR = 10;
+const OPACITY_THRESHOLD = 82;
+const DIVISION_FACTOR = 2;
+
+const Ellipse = (props: { fill?: string; progress?: number }) => {
+  const type = props.progress ? 'in-progress' : 'basic';
+  return (
+    <StyledEllipse
+      type={type}
+      stroke="currentColor"
+      strokeDashoffset={props.progress || DEFAULT_STROKE_DASHOFFSET}
+    />
+  );
+};
+
+function RefreshProgressButton(
+  props: SvgIconPropsWithChildren & { progress: number }
+) {
+  const normalizeValue = (value: number) => {
+    return (value - OPACITY_THRESHOLD) / NORMALIZE_FACTOR;
+  };
+  const normalizedProgress = Math.min(
+    props.progress / DIVISION_FACTOR,
+    MAX_PROGRESS
+  );
+  const opacity =
+    normalizedProgress !== MAX_PROGRESS
+      ? MIN_PROGRESS
+      : normalizeValue(props.progress);
+
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <Ellipse />
+      <Ellipse progress={MAX_PERCENTAGE - normalizedProgress} />
+
+      <path
+        d="M19.2696 9.6089C19.1207 9.49207 19.0218 9.31141 19.01 9.10738L18.807 5.14476C18.788 4.77467 19.0763 4.45089 19.4464 4.43183C19.8165 4.41278 20.1402 4.70108 20.1593 5.07117L20.3622 9.0338C20.3813 9.40389 20.093 9.72767 19.7229 9.74672C19.5584 9.76661 19.3973 9.70903 19.2696 9.6089Z"
+        fill="currentColor"
+      />
+      <StyledPath
+        d="M19.2696 9.6089C19.1207 9.49207 19.0218 9.31141 19.01 9.10738L18.807 5.14476C18.788 4.77467 19.0763 4.45089 19.4464 4.43183C19.8165 4.41278 20.1402 4.70108 20.1593 5.07117L20.3622 9.0338C20.3813 9.40389 20.093 9.72767 19.7229 9.74672C19.5584 9.76661 19.3973 9.70903 19.2696 9.6089Z"
+        fillOpacity={opacity}
+      />
+      <path
+        d="M15.5108 9.47903C15.3476 9.35108 15.2457 9.14511 15.2505 8.9198C15.2639 8.55221 15.575 8.25778 15.9482 8.26404L19.707 8.3939C20.0802 8.40016 20.3691 8.71837 20.3628 9.09152C20.3565 9.46466 20.0383 9.75353 19.6652 9.74728L15.9007 9.62451C15.7529 9.62312 15.6243 9.56804 15.5108 9.47903Z"
+        fill="currentColor"
+      />
+      <StyledPath
+        d="M15.5108 9.47903C15.3476 9.35108 15.2457 9.14511 15.2505 8.9198C15.2639 8.55221 15.575 8.25778 15.9482 8.26404L19.707 8.3939C20.0802 8.40016 20.3691 8.71837 20.3628 9.09152C20.3565 9.46466 20.0383 9.75353 19.6652 9.74728L15.9007 9.62451C15.7529 9.62312 15.6243 9.56804 15.5108 9.47903Z"
+        fillOpacity={opacity}
+      />
+    </svg>
+  );
+}
+export { RefreshProgressButton };

package/src/components/RefreshProgressButton/index.ts

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