@rango-dev/ui 0.29.1-next.12 → 0.29.1-next.14

package/dist/widget/ui/src/components/ListItem/ListItem.types.d.ts

@@ -6,6 +6,8 @@ export type ListItemProps = {
     end?: React.ReactNode;
     as?: 'div' | 'li';
     onClick?: () => void;
+    onKeyUp?: React.KeyboardEventHandler<HTMLLIElement>;
     hasDivider?: boolean;
+    tabIndex?: number;
 };
 //# sourceMappingURL=ListItem.types.d.ts.map

package/dist/widget/ui/src/components/ListItem/ListItem.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ListItem/ListItem.types.ts"],"names":[],"mappings":";AAAA,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,YAAY,CAAC;IACpC,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,YAAY,CAAC;IAC1C,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC"}
+{"version":3,"file":"ListItem.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ListItem/ListItem.types.ts"],"names":[],"mappings":";AAAA,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,YAAY,CAAC;IACpC,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,YAAY,CAAC;IAC1C,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,aAAa,CAAC,CAAC;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC"}

package/dist/widget/ui/src/components/ListItemButton/ListItemButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemButton.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ListItemButton/ListItemButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAElE,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,iBAAS,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBAgBjD;AAED,OAAO,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"ListItemButton.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ListItemButton/ListItemButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAElE,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,iBAAS,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBAoBjD;AAED,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/widget/ui/src/components/ListItemButton/ListItemButton.styles.d.ts

@@ -1,5 +1,5 @@
-export declare const BaseListItemButton: import("@stitches/react/types/styled-component").StyledComponent<"button", {
-    hasDivider?: boolean | "true" | undefined;
+import { ListItem } from '../ListItem/ListItem';
+export declare const BaseListItemButton: import("@stitches/react/types/styled-component").StyledComponent<typeof ListItem, {
     selected?: boolean | "true" | "false" | undefined;
 }, {
     xs: string;

package/dist/widget/ui/src/components/ListItemButton/ListItemButton.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemButton.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ListItemButton/ListItemButton.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAgD7B,CAAC"}
+{"version":3,"file":"ListItemButton.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ListItemButton/ListItemButton.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DA+B7B,CAAC"}

package/dist/widget/ui/src/components/ListItemButton/ListItemButton.types.d.ts

@@ -4,7 +4,6 @@ export type ListItemButtonProps = Omit<ListItemProps, 'onClick'> & {
     id: string;
     onClick: (id: string) => void;
     style?: CSSProperties;
-    hasDivider?: boolean;
     selected?: boolean;
 };
 //# sourceMappingURL=ListItemButton.types.d.ts.map

package/dist/widget/ui/src/components/ListItemButton/ListItemButton.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemButton.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ListItemButton/ListItemButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,aAAa,EAAE,SAAS,CAAC,GAAG;IACjE,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC"}
+{"version":3,"file":"ListItemButton.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ListItemButton/ListItemButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,aAAa,EAAE,SAAS,CAAC,GAAG;IACjE,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC"}

package/dist/widget/ui/src/components/Popover/Popover.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Popover/Popover.styles.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,YAAY,MAAM,yBAAyB,CAAC;AAIxD,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAI3B,CAAC;AAEH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAIvB,CAAC"}
+{"version":3,"file":"Popover.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Popover/Popover.styles.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,YAAY,MAAM,yBAAyB,CAAC;AAIxD,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAO3B,CAAC;AAEH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAOvB,CAAC"}

package/dist/widget/ui/src/containers/SwapInput/SwapInput.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SwapInput.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/SwapInput/SwapInput.styles.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"SwapInput.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/SwapInput/SwapInput.styles.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.29.1-next.12",
+  "version": "0.29.1-next.14",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",

package/src/components/ListItem/ListItem.types.ts

@@ -5,5 +5,7 @@ export type ListItemProps = {
   end?: React.ReactNode;
   as?: 'div' | 'li';
   onClick?: () => void;
+  onKeyUp?: React.KeyboardEventHandler<HTMLLIElement>;
   hasDivider?: boolean;
+  tabIndex?: number;
 };

package/src/components/ListItemButton/ListItemButton.styles.ts

@@ -1,26 +1,10 @@
 import { darkTheme, styled } from '../../theme';
+import { ListItem } from '../ListItem/ListItem';
 
-export const BaseListItemButton = styled('button', {
+export const BaseListItemButton = styled(ListItem, {
   transition: 'all 0.35s',
-  border: 0,
-  width: '100%',
-  backgroundColor: 'transparent',
-  fontFamily: 'inherit',
-  padding: 'unset',
-  '&:focus-visible': {
-    borderRadius: '$xs',
-
-    outline: 0,
-    $$color: '$colors$info100',
-    [`.${darkTheme} &`]: {
-      $$color: '$colors$info700',
-    },
-    backgroundColor: '$$color',
-  },
   '&:hover': {
     $$color: '$colors$info100',
-    borderRadius: '$xs',
-
     [`.${darkTheme} &`]: {
       $$color: '$colors$neutral100',
     },
@@ -30,19 +14,19 @@ export const BaseListItemButton = styled('button', {
   '&:active': {
     transform: 'scale(0.99)',
   },
-  variants: {
-    hasDivider: {
-      true: {
-        borderBottom: '1px solid',
-        $$color: '$colors$neutral300',
-        [`.${darkTheme} &`]: {
-          $$color: '$colors$neutral400',
-        },
-        borderColor: '$$color',
-        borderBottomRightRadius: 0,
-        borderBottomLeftRadius: 0,
-      },
+
+  '&:focus-visible': {
+    borderRadius: '$xs',
+
+    outline: 0,
+    $$color: '$colors$info100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$info700',
     },
+    backgroundColor: '$$color',
+  },
+
+  variants: {
     selected: {
       true: { outline: '1px solid $secondary500' },
       false: { outline: 0 },

package/src/components/ListItemButton/ListItemButton.tsx

@@ -2,25 +2,27 @@ import type { ListItemButtonProps } from './ListItemButton.types';
 
 import React from 'react';
 
-import { ListItem } from '../ListItem/ListItem';
-
 import { BaseListItemButton } from './ListItemButton.styles';
 
 function ListItemButton(props: ListItemButtonProps) {
-  const { onClick, id, style, hasDivider, selected, ...restProps } = props;
+  const { onClick, id, selected, ...restProps } = props;
   const onClickWithKey = () => {
     if (onClick) {
       onClick(id);
     }
   };
+
   return (
     <BaseListItemButton
-      hasDivider={hasDivider}
-      selected={selected}
       onClick={onClickWithKey}
-      style={style}>
-      <ListItem {...restProps} />
-    </BaseListItemButton>
+      aria-label="button"
+      selected={selected}
+      onKeyUp={(e: { key: string }) => {
+        e.key === 'Enter' && onClickWithKey();
+      }}
+      tabIndex={0}
+      {...restProps}
+    />
   );
 }
 

package/src/components/ListItemButton/ListItemButton.types.ts

@@ -5,6 +5,5 @@ export type ListItemButtonProps = Omit<ListItemProps, 'onClick'> & {
   id: string;
   onClick: (id: string) => void;
   style?: CSSProperties;
-  hasDivider?: boolean;
   selected?: boolean;
 };

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

@@ -1,15 +1,21 @@
 import * as RadixPopover from '@radix-ui/react-popover';
 
-import { styled } from '../../theme';
+import { darkTheme, styled } from '../../theme';
 
 export const PopoverContainer = styled(RadixPopover.Content, {
   borderRadius: '$sm',
   filter: 'drop-shadow(0px 5px 20px rgba(130, 130, 130, 0.20))',
   backgroundColor: '$neutral100',
+  [`.${darkTheme} &`]: {
+    backgroundColor: '$neutral300',
+  },
 });
 
 export const PopoverArrow = styled(RadixPopover.Arrow, {
   fill: '$neutral100',
+  [`.${darkTheme} &`]: {
+    fill: '$neutral300',
+  },
   width: '$16',
   height: '$8',
 });

package/src/components/StepDetails/StepDetails.styles.ts

@@ -69,7 +69,7 @@ export const Alerts = styled('div', {
 });
 
 export const DashedLine = styled('div', {
-  borderLeft: '1px dashed black',
+  borderLeft: '1px dashed $foreground',
   minHeight: '64px',
   margin: '0 11.5px',
   alignSelf: 'stretch',

package/src/containers/SwapInput/SwapInput.styles.ts

@@ -45,6 +45,12 @@ export const MaxButton = styled(Button, {
     $$color: '$colors$secondary800',
   },
   backgroundColor: '$$color',
+  '& ._typography': {
+    color: '$colors$secondary500',
+    [`.${darkTheme} &`]: {
+      color: '$colors$secondary400',
+    },
+  },
 });
 
 export const ValueTypography = styled('div', {

package/src/containers/SwapInput/SwapInput.tsx

@@ -58,7 +58,7 @@ export function SwapInput(props: SwapInputProps) {
                 variant="default"
                 size="xsmall"
                 onClick={props.onSelectMaxBalance}>
-                <Typography variant="body" size="xsmall" color="secondary500">
+                <Typography variant="body" size="xsmall">
                   {i18n.t('Max')}
                 </Typography>
               </MaxButton>

package/src/containers/SwapInput/TokenSection.styles.ts

@@ -24,7 +24,7 @@ export const Container = styled(Button, {
   '&:hover': {
     $$color: '$colors$info100',
     [`.${darkTheme} &`]: {
-      $$color: '$colors$neutral400',
+      $$color: '$colors$neutral100',
     },
     backgroundColor: '$$color !important',
   },