@rango-dev/ui 0.15.1-next.8 → 0.16.0

package/src/components/Button/Button.styles.tsx

@@ -9,40 +9,35 @@ export const ButtonBase = styled('button', {
   fontSize: '$16',
   fontWeight: '$400',
   border: '0',
-  borderRadius: '$xs',
+  borderRadius: '$secondary',
   cursor: 'pointer',
   transition: 'all 0.35s',
-
+  fontFamily: 'inherit',
   variants: {
     size: {
       xxsmall: {
-        borderRadius: '$xm',
         fontSize: '$10',
         lineHeight: '12px',
         padding: '$4',
       },
       xsmall: {
-        borderRadius: '$xm',
         fontSize: '$12',
         lineHeight: '12px',
         padding: '$0 $4',
       },
       small: {
-        borderRadius: '$xm',
         fontSize: '$14',
         fontWeight: '$medium',
         lineHeight: '20px',
         padding: '$4 $4',
       },
       medium: {
-        borderRadius: '$md',
         fontSize: '$16',
         lineHeight: '24px',
         fontWeight: '$medium',
         padding: '$8 $8',
       },
       large: {
-        borderRadius: '$md',
         fontSize: '$18',
         lineHeight: '26px',
         padding: '$12 $24',
@@ -57,22 +52,18 @@ export const ButtonBase = styled('button', {
         '&:hover': {
           backgroundColor: '$neutral300',
         },
-        '&:disabled': {
-          $$color: '$colors$background',
-          [`.${darkTheme} &`]: {
-            $$color: '$colors$foreground',
-          },
-          backgroundColor: '$neutral800',
-          color: '$$color',
+        '&:focus-visible': {
+          backgroundColor: '$neutral500',
+          outline: 0,
         },
-        '&:disabled:hover': {
+        '&:disabled': {
           $$color: '$colors$background',
           [`.${darkTheme} &`]: {
             $$color: '$colors$foreground',
           },
           backgroundColor: '$neutral800',
           color: '$$color',
-          transform: 'unset',
+          pointerEvents: 'none',
         },
       },
       outlined: {
@@ -84,13 +75,14 @@ export const ButtonBase = styled('button', {
         '&:hover': {
           borderColor: '$neutral300',
         },
+        '&:focus-visible': {
+          borderColor: '$neutral500',
+          outline: 0,
+        },
         '&:disabled': {
           borderColor: '$neutral800',
           color: '$neutral800',
-        },
-        '&:disabled:hover': {
-          borderColor: '$neutral800',
-          transform: 'unset',
+          pointerEvents: 'none',
         },
       },
       ghost: {
@@ -98,6 +90,11 @@ export const ButtonBase = styled('button', {
         color: '$neutral900',
         '&:disabled': {
           color: '$neutral800',
+          pointerEvents: 'none',
+        },
+        '&:focus-visible': {
+          backgroundColor: '$neutral500',
+          outline: 0,
         },
         '&:hover': {
           color: '$secondary500',
@@ -145,6 +142,7 @@ export const ButtonBase = styled('button', {
           },
           background: '$neutral800',
           color: '$$color',
+          pointerEvents: 'none',
         },
         '&:visited': {
           background: '$primary500',
@@ -154,6 +152,10 @@ export const ButtonBase = styled('button', {
           backgroundSize: '100%',
           transition: 'background 0s',
         },
+        '&:focus-visible': {
+          background: '$primary600',
+          outline: 0,
+        },
       },
     },
     {
@@ -166,6 +168,11 @@ export const ButtonBase = styled('button', {
           color: '$primary600',
           borderColor: '$primary600',
         },
+        '&:focus-visible': {
+          color: '$primary600',
+          borderColor: '$primary600',
+          outline: 0,
+        },
       },
     },
     {
@@ -176,6 +183,10 @@ export const ButtonBase = styled('button', {
         '&:hover': {
           color: '$primary600',
         },
+        '&:focus-visible': {
+          color: '$primary600',
+          outline: 0,
+        },
       },
     },
     {
@@ -189,7 +200,7 @@ export const ButtonBase = styled('button', {
         },
         color: '$$color',
         '&:hover': {
-          background: '$secondary500',
+          background: '$secondary600',
           $$color: '$colors$background',
           [`.${darkTheme} &`]: {
             $$color: '$colors$foreground',
@@ -200,7 +211,12 @@ export const ButtonBase = styled('button', {
           background: '$secondary500',
         },
         '&:focus': {
-          background: '$secondary500',
+          background: '$secondary600',
+          outline: 0,
+        },
+        '&:focus-visible': {
+          background: '$secondary600',
+          outline: 0,
         },
       },
     },
@@ -211,16 +227,22 @@ export const ButtonBase = styled('button', {
         color: '$secondary500',
         borderColor: '$secondary500',
         '&:hover': {
-          color: '$secondary500',
-          borderColor: '$secondary500',
+          color: '$secondary600',
+          borderColor: '$secondary600',
         },
         '&:visited': {
           color: '$secondary500',
           borderColor: '$secondary500',
         },
         '&:focus': {
-          color: '$secondary500',
+          color: '$secondary600',
+          borderColor: '$secondary500',
+          outline: 0,
+        },
+        '&:focus-visible': {
+          color: '$secondary600',
           borderColor: '$secondary500',
+          outline: 0,
         },
       },
     },
@@ -230,13 +252,18 @@ export const ButtonBase = styled('button', {
       css: {
         color: '$secondary500',
         '&:hover': {
-          color: '$secondary500',
+          color: '$secondary600',
         },
         '&:visited': {
           color: '$secondary500',
         },
         '&:focus': {
-          color: '$secondary500',
+          color: '$secondary600',
+          outline: 0,
+        },
+        '&:focus-visible': {
+          color: '$secondary600',
+          outline: 0,
         },
       },
     },
@@ -252,11 +279,6 @@ export const ButtonBase = styled('button', {
         color: '$$color',
         '&:hover': {
           background: '$error500',
-          $$color: '$colors$background',
-          [`.${darkTheme} &`]: {
-            $$color: '$colors$foreground',
-          },
-          color: '$$color',
         },
         '&:visited': {
           background: '$error500',
@@ -264,6 +286,13 @@ export const ButtonBase = styled('button', {
         '&:focus': {
           background: '$error500',
         },
+        '&:focus-visible': {
+          $$outline: '$colors$error600',
+          [`.${darkTheme} &`]: {
+            $$outline: '$colors$error300',
+          },
+          outlineColor: '$$outline',
+        },
       },
     },
     {
@@ -284,6 +313,14 @@ export const ButtonBase = styled('button', {
           color: '$error500',
           borderColor: '$error500',
         },
+        '&:focus-visible': {
+          $$outline: '$colors$error600',
+          [`.${darkTheme} &`]: {
+            $$outline: '$colors$error300',
+          },
+          color: '$$outline',
+          outlineColor: '$$outline',
+        },
       },
     },
     {
@@ -300,6 +337,14 @@ export const ButtonBase = styled('button', {
         '&:focus': {
           color: '$error500',
         },
+        '&:focus-visible': {
+          $$outline: '$colors$error600',
+          [`.${darkTheme} &`]: {
+            $$outline: '$colors$error300',
+          },
+          color: '$$outline',
+          outline: 0,
+        },
       },
     },
     {
@@ -326,6 +371,13 @@ export const ButtonBase = styled('button', {
         '&:focus': {
           background: '$warning500',
         },
+        '&:focus-visible': {
+          $$outline: '$colors$warning600',
+          [`.${darkTheme} &`]: {
+            $$outline: '$colors$warning300',
+          },
+          outlineColor: '$$outline',
+        },
       },
     },
     {
@@ -346,6 +398,14 @@ export const ButtonBase = styled('button', {
           color: '$warning500',
           borderColor: '$warning500',
         },
+        '&:focus-visible': {
+          $$outline: '$colors$warning600',
+          [`.${darkTheme} &`]: {
+            $$outline: '$colors$warning300',
+          },
+          outlineColor: '$$outline',
+          color: '$$outline',
+        },
       },
     },
     {
@@ -362,6 +422,13 @@ export const ButtonBase = styled('button', {
         '&:focus': {
           color: '$warning500',
         },
+        '&:focus-visible': {
+          $$outline: '$colors$warning600',
+          [`.${darkTheme} &`]: {
+            $$outline: '$colors$warning300',
+          },
+          color: '$$outline',
+        },
       },
     },
     {
@@ -388,6 +455,13 @@ export const ButtonBase = styled('button', {
         '&:focus': {
           background: '$success500',
         },
+        '&:focus-visible': {
+          $$outline: '$colors$success600',
+          [`.${darkTheme} &`]: {
+            $$outline: '$colors$success300',
+          },
+          outlineColor: '$$outline',
+        },
       },
     },
     {
@@ -408,6 +482,14 @@ export const ButtonBase = styled('button', {
           color: '$success500',
           borderColor: '$success500',
         },
+        '&:focus-visible': {
+          $$outline: '$colors$success600',
+          [`.${darkTheme} &`]: {
+            $$outline: '$colors$success300',
+          },
+          outlineColor: '$$outline',
+          color: '$$outline',
+        },
       },
     },
     {
@@ -424,6 +506,14 @@ export const ButtonBase = styled('button', {
         '&:focus': {
           color: '$success500',
         },
+        '&:focus-visible': {
+          $$outline: '$colors$success600',
+          [`.${darkTheme} &`]: {
+            $$outline: '$colors$success300',
+          },
+          outline: 0,
+          color: '$$outline',
+        },
       },
     },
   ],

package/src/components/ChainToken/ChainToken.tsx

@@ -31,7 +31,7 @@ export const ChainToken: React.FC<PropTypes> = (props) => {
           size={tokenChainSizeMap[size].token}
           src={tokenImage}
           type="circular"
-          {...(useAsPlaceholder && { useAsPlaceholder })}
+          {...((useAsPlaceholder || !tokenImage) && { useAsPlaceholder: true })}
         />
       )}
       <ChainImageContainer size={size}>
@@ -46,8 +46,8 @@ export const ChainToken: React.FC<PropTypes> = (props) => {
             size={tokenChainSizeMap[size].chain}
             src={chainImage}
             type="circular"
-            {...(useAsPlaceholder && {
-              useAsPlaceholder,
+            {...((useAsPlaceholder || !chainImage) && {
+              useAsPlaceholder: true,
               backgroundColor: '$secondary300',
             })}
           />

package/src/components/Checkbox/Checkbox.styles.ts

@@ -1,6 +1,6 @@
 import * as RadixCheckbox from '@radix-ui/react-checkbox';
 
-import { styled } from '../../theme';
+import { darkTheme, styled } from '../../theme';
 
 export const CheckboxContainer = styled('div', {
   display: 'flex',
@@ -16,12 +16,13 @@ export const CheckboxRoot = styled(RadixCheckbox.Root, {
   border: '1px solid $neutral800',
   backgroundColor: 'transparent',
   cursor: 'pointer',
-  '&:hover': {
-    borderColor: '$secondary600',
-  },
   '&[data-state="checked"]': {
-    backgroundColor: '$secondary600',
-    borderColor: '$secondary600',
+    $$color: '$colors$secondary500',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$secondary400',
+    },
+    backgroundColor: '$$color',
+    borderColor: '$$color',
   },
 });
 

package/src/components/Checkbox/Checkbox.types.ts

@@ -7,7 +7,7 @@ type RadixCheckboxProps = Pick<
 
 interface WithLabelProps {
   id: string;
-  label: string;
+  label: React.ReactNode;
 }
 interface ComponentProps {
   id?: never;

package/src/components/Chip/Chip.styles.ts

@@ -8,19 +8,29 @@ export const ChipContainer = styled('button', {
   padding: '$5 $15',
   cursor: 'pointer',
   transition: 'all 0.35s',
-  backgroundColor: '$neutral100',
   border: '1px solid transparent',
+  fontFamily: 'inherit',
+  $$color: '$colors$neutral100',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral300',
+  },
+  backgroundColor: '$$color',
 
   '&:hover': {
     $$color: '$colors$info100',
     [`.${darkTheme} &`]: {
-      $$color: '$colors$neutral400',
+      $$color: '$colors$neutral100',
     },
     backgroundColor: '$$color',
   },
 
-  '&:focus': {
-    outline: '1px solid gray',
+  '&:focus-visible': {
+    $$color: '$colors$info100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$info700',
+    },
+    backgroundColor: '$$color',
+    outline: 0,
   },
 
   variants: {

package/src/components/Collapsible/Collapsible.stories.tsx

@@ -0,0 +1,46 @@
+import type { CollapsibleProps } from './Collapsible.types';
+
+import React, { useState } from 'react';
+
+import { ChevronUpIcon } from '../../icons';
+import { Typography } from '../Typography';
+
+import { CollapsibleComponent as Collapsible } from './Collapsible';
+
+export default {
+  title: 'Components/Collapsible',
+  component: Collapsible,
+  args: {
+    open: false,
+    trigger: (
+      <>
+        <Typography size="medium" variant="title">
+          Trigger
+        </Typography>
+        <ChevronUpIcon size={10} color="gray" />
+      </>
+    ),
+  },
+  argTypes: {
+    open: {
+      name: 'open',
+      defaultValue: false,
+      control: { type: 'boolean' },
+    },
+  },
+};
+
+export const Main = (args: CollapsibleProps) => {
+  const [open, setOpen] = useState<boolean>(false);
+
+  return (
+    <Collapsible
+      {...args}
+      open={open || args.open}
+      onOpenChange={() => setOpen(!open)}>
+      <Typography size="medium" variant="title">
+        Content
+      </Typography>
+    </Collapsible>
+  );
+};

package/src/components/Collapsible/Collapsible.styles.ts

@@ -0,0 +1,9 @@
+import * as Collapsible from '@radix-ui/react-collapsible';
+
+import { styled } from '../../theme';
+
+export const Trigger = styled(Collapsible.Trigger, {
+  border: 'none',
+  background: 'transparent',
+  width: '100%',
+});

package/src/components/Collapsible/Collapsible.tsx

@@ -0,0 +1,21 @@
+import type { CollapsibleProps } from './Collapsible.types';
+import type { PropsWithChildren } from 'react';
+
+import * as Collapsible from '@radix-ui/react-collapsible';
+import React from 'react';
+
+import { CollapsibleContent } from '../common/styles';
+
+import { Trigger } from './Collapsible.styles';
+
+export function CollapsibleComponent(
+  props: PropsWithChildren<CollapsibleProps>
+) {
+  const { open, onOpenChange, trigger, children, ...otherProps } = props;
+  return (
+    <Collapsible.Root open={open} onOpenChange={onOpenChange} {...otherProps}>
+      <Trigger asChild>{trigger}</Trigger>
+      <CollapsibleContent open={open}>{children}</CollapsibleContent>
+    </Collapsible.Root>
+  );
+}

package/src/components/Collapsible/Collapsible.types.ts

@@ -0,0 +1,7 @@
+import type React from 'react';
+
+export interface CollapsibleProps {
+  trigger: React.ReactNode;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}

package/src/components/Collapsible/index.ts

@@ -0,0 +1 @@
+export { CollapsibleComponent as Collapsible } from './Collapsible';

package/src/components/Header/Header.styles.ts

@@ -1,14 +1,18 @@
-import { styled } from '../../theme';
+import { darkTheme, styled } from '../../theme';
 
 export const Container = styled('div', {
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
   padding: '$15 $20',
-  backgroundColor: '$neutral100',
+  $$color: '$colors$neutral100',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral300',
+  },
+  backgroundColor: '$$color',
   position: 'relative',
-  borderTopRightRadius: '$md',
-  borderTopLeftRadius: '$md',
+  borderTopRightRadius: '$primary',
+  borderTopLeftRadius: '$primary',
 });
 
 export const Suffix = styled('div', {

package/src/components/IconButton/IconButton.tsx

@@ -1,16 +1,20 @@
 import type { PropTypes } from './IconButton.types';
-import type { PropsWithChildren } from 'react';
+import type { PropsWithChildren, Ref } from 'react';
 
 import React from 'react';
 
 import { Button } from '../Button';
 
 // border-radius: 100% + overflow: hidden
-function IconButton(props: PropsWithChildren<PropTypes>) {
+function IconButtonComponent(
+  props: PropsWithChildren<PropTypes>,
+  ref: Ref<HTMLButtonElement>
+) {
   const { style, ...otherProps } = props;
   return (
     <Button
       className="_icon-button"
+      ref={ref}
       {...otherProps}
       style={{
         borderRadius: '100%',
@@ -22,6 +26,8 @@ function IconButton(props: PropsWithChildren<PropTypes>) {
   );
 }
 
+const IconButton = React.forwardRef(IconButtonComponent);
+IconButton.displayName = 'IconButton';
 IconButton.toString = () => '._icon-button';
 
 export { IconButton };

package/src/components/ListItem/ListItem.styles.ts

@@ -1,4 +1,4 @@
-import { styled } from '../../theme';
+import { darkTheme, styled } from '../../theme';
 
 export const BaseListItem = styled('li', {
   width: '100%',
@@ -38,7 +38,12 @@ export const BaseListItem = styled('li', {
   variants: {
     hasDivider: {
       true: {
-        borderBottom: '1px solid $neutral300',
+        borderBottom: '1px solid',
+        $$color: '$colors$neutral300',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$neutral400',
+        },
+        borderColor: '$$color',
         borderBottomRightRadius: 0,
         borderBottomLeftRadius: 0,
       },

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

@@ -5,13 +5,14 @@ export const BaseListItemButton = styled('button', {
   border: 0,
   width: '100%',
   backgroundColor: 'transparent',
+  fontFamily: 'inherit',
   '&:focus-visible': {
     borderRadius: '$xs',
 
     outline: 0,
     $$color: '$colors$info100',
     [`.${darkTheme} &`]: {
-      $$color: '$colors$neutral400',
+      $$color: '$colors$info700',
     },
     backgroundColor: '$$color',
   },
@@ -20,7 +21,7 @@ export const BaseListItemButton = styled('button', {
     borderRadius: '$xs',
 
     [`.${darkTheme} &`]: {
-      $$color: '$colors$neutral400',
+      $$color: '$colors$neutral100',
     },
     backgroundColor: '$$color',
     cursor: 'pointer',
@@ -31,7 +32,12 @@ export const BaseListItemButton = styled('button', {
   variants: {
     hasDivider: {
       true: {
-        borderBottom: '1px solid $neutral300',
+        borderBottom: '1px solid',
+        $$color: '$colors$neutral300',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$neutral400',
+        },
+        borderColor: '$$color',
         borderBottomRightRadius: 0,
         borderBottomLeftRadius: 0,
       },

package/src/components/MessageBox/CollapsibleMessageBox.styles.tsx

@@ -7,15 +7,27 @@ export const Trigger = styled(Collapsible.Trigger, {
   paddingBottom: '$5',
   borderRadius: '$xm',
   cursor: 'pointer',
-  backgroundColor: '$neutral200',
+  $$backgroundColor: '$colors$neutral200',
+  [`.${darkTheme} &`]: {
+    $$backgroundColor: '$colors$neutral500',
+  },
+  backgroundColor: '$$backgroundColor',
   textAlign: 'center',
   border: 0,
   width: '100%',
   '&:hover': {
     $$color: '$colors$info100',
     [`.${darkTheme} &`]: {
-      $$color: '$colors$neutral400',
+      $$color: '$colors$neutral100',
+    },
+    backgroundColor: '$$color',
+  },
+  '&:focus-visible': {
+    $$color: '$colors$info100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$info700',
     },
     backgroundColor: '$$color',
+    outline: 0,
   },
 });