@rango-dev/ui 0.29.1-next.1 → 0.29.1-next.4

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Tabs/Tabs.styles.tsx"],"names":[],"mappings":";;;AAGA,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAmCf,CAAC;AAEH,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAqFd,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DA6BtB,CAAC"}

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

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import type { Tabs } from './Tabs.styles';
+import type * as Stitches from '@stitches/react';
+type BaseItem = {
+    id: string | number;
+    tooltip?: React.ReactNode;
+};
+type ItemWithTitle = BaseItem & {
+    title: string;
+    icon?: React.ReactNode;
+};
+type ItemWithIcon = BaseItem & {
+    icon: React.ReactNode;
+    title?: string;
+};
+type Item = ItemWithTitle | ItemWithIcon;
+type BaseProps = Stitches.VariantProps<typeof Tabs>;
+type BaseType = Exclude<BaseProps['type'], object>;
+type BaseBorderRadius = Exclude<BaseProps['borderRadius'], object>;
+export interface PropTypes {
+    items: Item[];
+    container?: HTMLElement;
+    onChange: (item: Item) => void;
+    value: string;
+    type: BaseType;
+    borderRadius?: BaseBorderRadius;
+    className?: string;
+}
+export {};
+//# sourceMappingURL=Tabs.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Tabs/Tabs.types.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,KAAK,KAAK,QAAQ,MAAM,iBAAiB,CAAC;AAEjD,KAAK,QAAQ,GAAG;IACd,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,KAAK,aAAa,GAAG,QAAQ,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB,CAAC;AAEF,KAAK,YAAY,GAAG,QAAQ,GAAG;IAC7B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,KAAK,IAAI,GAAG,aAAa,GAAG,YAAY,CAAC;AACzC,KAAK,SAAS,GAAG,QAAQ,CAAC,YAAY,CAAC,OAAO,IAAI,CAAC,CAAC;AACpD,KAAK,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC;AACnD,KAAK,gBAAgB,GAAG,OAAO,CAAC,SAAS,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC,CAAC;AAEnE,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,QAAQ,CAAC;IACf,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/widget/ui/src/components/Tabs/index.d.ts

@@ -0,0 +1,2 @@
+export { TabsComponent as Tabs } from './Tabs';
+//# sourceMappingURL=index.d.ts.map

package/dist/widget/ui/src/components/Tabs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC"}

package/dist/widget/ui/src/components/index.d.ts

@@ -53,4 +53,6 @@ export * from './Popover';
 export * from './Flags';
 export * from './Select';
 export * from './QuoteTag';
+export * from './Tabs';
+export type { SvgIconProps } from './SvgIcon';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC;AACvC,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,0BAA0B,CAAC;AACzC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC;AACvC,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,0BAA0B,CAAC;AACzC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC"}

package/dist/widget/ui/src/icons/Bridges.d.ts

@@ -0,0 +1,5 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+import React from 'react';
+declare function SvgBridges(props: SvgIconPropsWithChildren): React.FunctionComponentElement<SvgIconPropsWithChildren>;
+export default SvgBridges;
+//# sourceMappingURL=Bridges.d.ts.map

package/dist/widget/ui/src/icons/Bridges.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Bridges.d.ts","sourceRoot":"","sources":["../../../../../src/icons/Bridges.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAEtE,OAAO,KAAwB,MAAM,OAAO,CAAC;AAI7C,iBAAS,UAAU,CAAC,KAAK,EAAE,wBAAwB,4DAWlD;AACD,eAAe,UAAU,CAAC"}

package/dist/widget/ui/src/icons/Exchange.d.ts

@@ -0,0 +1,5 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+import React from 'react';
+declare function SvgExchange(props: SvgIconPropsWithChildren): React.FunctionComponentElement<SvgIconPropsWithChildren>;
+export default SvgExchange;
+//# sourceMappingURL=Exchange.d.ts.map

package/dist/widget/ui/src/icons/Exchange.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Exchange.d.ts","sourceRoot":"","sources":["../../../../../src/icons/Exchange.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAEtE,OAAO,KAAwB,MAAM,OAAO,CAAC;AAI7C,iBAAS,WAAW,CAAC,KAAK,EAAE,wBAAwB,4DAcnD;AACD,eAAe,WAAW,CAAC"}

package/dist/widget/ui/src/icons/index.d.ts

@@ -2,6 +2,7 @@ export { default as AddIcon } from './Add';
 export { default as AutoThemeIcon } from './AutoTheme';
 export { default as AutorenewIcon } from './Autorenew';
 export { default as BorderRadiusIcon } from './BorderRadius';
+export { default as BridgeIcon } from './Bridges';
 export { default as ChevronDownIcon } from './ChevronDown';
 export { default as ChevronLeftIcon } from './ChevronLeft';
 export { default as ChevronRightIcon } from './ChevronRight';
@@ -18,6 +19,7 @@ export { default as DoneIcon } from './Done';
 export { default as EvmCategoryIcon } from './EvmCategory';
 export { default as ErrorIcon } from './Error';
 export { default as ExitIcon } from './Exit';
+export { default as ExchangeIcon } from './Exchange';
 export { default as ExternalLinkIcon } from './ExternalLink';
 export { default as FontIcon } from './Font';
 export { default as GasIcon } from './Gas';

package/dist/widget/ui/src/icons/index.d.ts.map

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

package/package.json

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

package/readme.md

@@ -5,3 +5,4 @@ Rango UI design system components
 ### Icons
 
 Add your svg icon to `svgs/resources/` then run `yarn build:icons`.
+

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

@@ -4,7 +4,9 @@ export const Container = styled('div', {
   display: 'flex',
   flexDirection: 'column',
   borderRadius: '$xs',
-
+  '.title_typography': {
+    width: '100%',
+  },
   '.title_typography:first-letter': {
     textTransform: 'uppercase',
   },

package/src/components/List/List.tsx

@@ -7,12 +7,11 @@ import { ListItem } from '../ListItem';
 import { BaseList } from './List.styles';
 
 function List(props: ListPropTypes) {
-  const container = props.type;
-
   return (
     <BaseList as={props.as}>
       {props.items.map((item) => {
-        const { id, ...itemProps } = item;
+        const { id, type, ...itemProps } = item;
+        const container = type || props.type;
 
         if (!!container) {
           return React.cloneElement(container, {

package/src/components/List/List.types.ts

@@ -6,6 +6,7 @@ export interface ListPropTypes {
   type?: React.ReactElement;
   items: (ListItemProps & {
     id: string;
+    type?: React.ReactElement;
   })[];
   as?: 'div' | 'ul';
   css?: Stitches.CSS;

package/src/components/List/index.ts

@@ -1 +1,2 @@
 export { List } from './List';
+export type { ListPropTypes } from './List.types';

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

@@ -35,6 +35,7 @@ export const BaseListItem = styled('li', {
       fontWeight: 'bold',
       display: 'flex',
       alignItems: 'center',
+      color: '$foreground',
     },
   },
   '.item-end-container': {

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

@@ -31,6 +31,8 @@ const blinker = keyframes({
 export const itemStyles = css({
   display: 'flex',
   alignItems: 'center',
+  cursor: 'default',
+
   '&.feeSection': {
     cursor: 'pointer',
     '&:hover': {

package/src/components/Select/Select.tsx

@@ -3,7 +3,7 @@ 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 { ChevronDownIcon, ChevronUpIcon, DoneIcon } from '../../icons';
 import { Typography } from '../Typography';
 
 import { SelectContent, SelectItem, SelectTrigger } from './select.styles';
@@ -31,47 +31,47 @@ export function SelectComponent(props: PropTypes) {
 
   return (
     <div ref={selectRef}>
-      <Select.Root value={value.value} open={open}>
+      <Select.Root value={value?.value} open={open}>
         <SelectTrigger
           onKeyDown={(event) => event.key === 'Enter' && handleToggle()}
           onClick={handleToggle}
           open={open}
-          aria-label={value.label}>
+          aria-label={value?.label}>
           <Select.Value>
             <Typography variant="body" size="small">
-              {value.label}
+              {value?.label}
             </Typography>
           </Select.Value>
 
           <Select.Icon className="SelectIcon">
-            <ChevronDownIcon size={12} />
+            <ChevronDownIcon size={12} color="black" />
           </Select.Icon>
         </SelectTrigger>
         <Select.Portal container={container}>
-          <SelectContent>
+          <SelectContent position="popper" sideOffset={5}>
             <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>
-                    )
-                )}
+                {options.map((option) => (
+                  <SelectItem
+                    onClick={() => {
+                      handleItemClick && handleItemClick(option);
+                      handleToggle();
+                    }}
+                    key={option.value}
+                    value={option.value}>
+                    <Select.ItemText>
+                      <Typography variant="body" size="small">
+                        {option.label}
+                      </Typography>
+                    </Select.ItemText>
+                    {option.value === value?.value && (
+                      <DoneIcon size={14} color="secondary" />
+                    )}
+                  </SelectItem>
+                ))}
               </Select.Group>
             </Select.Viewport>
             <Select.ScrollDownButton className="SelectScrollButton">

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

@@ -9,92 +9,68 @@ export const SelectTrigger = styled(Select.Trigger, {
   justifyContent: 'space-between',
   alignItems: 'center',
   cursor: 'pointer',
-  backgroundColor: '$secondary',
   padding: '$5 $10',
   border: 0,
+  outline: 0,
   whiteSpace: 'nowrap',
-
+  borderRadius: '$sm',
+  backgroundColor: '$neutral300',
+  [`.${darkTheme} &`]: {
+    backgroundColor: '$neutral400',
+  },
+  width: '100%',
+  '&:hover': {
+    backgroundColor: '$info100',
+    [`.${darkTheme} &`]: {
+      backgroundColor: '$neutral',
+    },
+  },
   '& svg': {
     transition: `all ${EXPANDABLE_QUOTE_TRANSITION_DURATION}ms ease`,
   },
-
+  '& ._typography': {
+    whiteSpace: 'nowrap',
+  },
   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',
+  width: 'var(--radix-select-trigger-width)',
+  maxHeight: 'var(--radix-select-content-available-height)',
   overflowY: 'auto',
-  borderBottomLeftRadius: '$sm',
-  borderBottomRightRadius: '$sm',
+  borderRadius: '$sm',
   boxShadow: '-5px 5px 10px 0px rgba(86, 86, 86, 0.10)',
-  backgroundColor: '$neutral100',
-  [`.${darkTheme} &`]: {
-    backgroundColor: '$neutral300',
-  },
+  backgroundColor: '$background',
 });
 
 export const SelectItem = styled(Select.Item, {
-  padding: '$10 0',
-  borderTop: '1px solid',
-  borderColor: '$neutral300',
-  [`.${darkTheme} &`]: {
-    borderColor: '$neutral400',
-  },
+  padding: '$10',
   listStyleType: 'none',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
   cursor: 'pointer',
-  '&:hover': {
-    '& ._typography': {
-      color: '$colors$secondary',
-    },
-  },
   '&:focus': {
     outline: 'none',
-    '& ._typography': {
-      color: '$colors$secondary',
+  },
+
+  '&:hover': {
+    backgroundColor: '$info100',
+    [`.${darkTheme} &`]: {
+      backgroundColor: '$neutral',
     },
   },
 });

package/src/components/Tabs/Tabs.stories.tsx

@@ -0,0 +1,12 @@
+import type { PropTypes } from './Tabs.types';
+import type { Meta } from '@storybook/react';
+
+import React from 'react';
+
+import { Tabs } from '.';
+
+export default { title: 'Components/Tabs', component: Tabs } as Meta<
+  typeof Tabs
+>;
+
+export const Main = (args: PropTypes) => <Tabs {...args} />;

package/src/components/Tabs/Tabs.styles.tsx

@@ -0,0 +1,157 @@
+import { darkTheme, styled } from '../../theme';
+import { Button } from '../Button';
+
+export const Tabs = styled('div', {
+  display: 'flex',
+  flexDirection: 'row',
+  position: 'relative',
+  justifyContent: 'space-between',
+  height: '100%',
+  variants: {
+    type: {
+      secondary: {
+        border: '3px solid $neutral100',
+        backgroundColor: '$neutral100',
+      },
+      primary: {
+        $$color: '$colors$neutral200',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$neutral500',
+        },
+        borderColor: '$$color',
+        borderWidth: '5px',
+        borderStyle: 'solid',
+        backgroundColor: '$$color',
+      },
+    },
+    borderRadius: {
+      small: {
+        borderRadius: '$xs',
+      },
+      medium: {
+        borderRadius: '$sm',
+      },
+      full: {
+        borderRadius: '$xm',
+      },
+    },
+  },
+});
+
+export const Tab = styled(Button, {
+  color: '$neutral700',
+  backgroundColor: 'transparent',
+  height: '100%',
+  zIndex: 10,
+  '& ._text': {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  variants: {
+    borderRadius: {
+      small: {
+        borderRadius: '$xs',
+      },
+      medium: {
+        borderRadius: '$sm',
+      },
+      full: {
+        borderRadius: '$xm',
+      },
+    },
+    type: {
+      primary: {
+        padding: '$5 $10',
+        height: '100%',
+      },
+      secondary: {},
+    },
+    isActive: {
+      true: {
+        transition: 'color 0.8s linear',
+      },
+      false: {},
+    },
+  },
+
+  compoundVariants: [
+    {
+      type: 'secondary',
+      isActive: true,
+      css: {
+        $$color: '$colors$background',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$foreground',
+        },
+        color: '$$color',
+      },
+    },
+    {
+      type: 'secondary',
+      isActive: false,
+      css: {
+        '&:hover': {
+          backgroundColor: '$info100',
+          color: '$secondary500',
+          [`.${darkTheme} &`]: {
+            backgroundColor: 'transparent',
+            color: '$neutral700',
+          },
+        },
+      },
+    },
+
+    {
+      type: 'primary',
+      isActive: true,
+      css: {
+        color: '$secondary',
+        '& svg': {
+          color: '$secondary',
+        },
+      },
+    },
+    {
+      type: 'primary',
+      isActive: false,
+      css: {
+        '&:hover': {
+          backgroundColor: 'transparent',
+        },
+      },
+    },
+  ],
+});
+
+export const BackdropTab = styled('div', {
+  padding: '$4',
+  position: 'absolute',
+  inset: 0,
+  transition: 'transform 0.2s cubic-bezier(0, 0, 0.86, 1.2)',
+  '&.no-transition': {
+    transition: 'none',
+  },
+  variants: {
+    type: {
+      secondary: {
+        backgroundColor: '$secondary500',
+      },
+      primary: {
+        backgroundColor: '$background',
+      },
+    },
+    borderRadius: {
+      small: {
+        borderRadius: '$xs',
+      },
+      medium: {
+        borderRadius: '$sm',
+      },
+      full: {
+        borderRadius: '$xm',
+      },
+    },
+  },
+});

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,95 @@
+import type { PropTypes } from './Tabs.types';
+
+import React, { useEffect, useRef, useState } from 'react';
+
+import { Divider } from '../Divider';
+import { Tooltip } from '../Tooltip';
+
+import { BackdropTab, Tab, Tabs } from './Tabs.styles';
+
+const INITIAL_RENDER_DELAY = 100;
+export function TabsComponent(props: PropTypes) {
+  const {
+    items: tabItems,
+    onChange,
+    container = document.body,
+    value,
+    type,
+    borderRadius = 'medium',
+    className,
+  } = props;
+  const [tabWidth, setTabWidth] = useState(0);
+  const tabRef: React.Ref<HTMLButtonElement> = useRef(null);
+  const currentIndex = tabItems.findIndex((item) => item.id === value);
+
+  // State variable to track the initial render
+  const [initialRender, setInitialRender] = useState(true);
+  const transformPosition = currentIndex * tabWidth;
+
+  useEffect(() => {
+    const updateTabWidth = () => {
+      if (tabRef.current) {
+        const tabRect = tabRef.current.getBoundingClientRect();
+        setTabWidth(tabRect.width);
+      }
+    };
+    updateTabWidth();
+    window.addEventListener('resize', updateTabWidth);
+    return () => {
+      window.removeEventListener('resize', updateTabWidth);
+    };
+  }, []);
+
+  useEffect(() => {
+    // Set initialRender to false after a short delay
+    const timeout = setTimeout(() => {
+      setInitialRender(false);
+      clearTimeout(timeout);
+    }, INITIAL_RENDER_DELAY);
+  }, []);
+
+  return (
+    <Tabs
+      className={`_tabs ${className || ''}`}
+      type={type}
+      borderRadius={borderRadius}>
+      {tabItems.map((item, index) => (
+        <Tooltip
+          key={item.id}
+          style={{ width: '100%' }}
+          container={container}
+          side="bottom"
+          sideOffset={2}
+          content={item.tooltip}
+          open={!item.tooltip ? false : undefined}>
+          <Tab
+            className="_tab"
+            ref={index === 0 ? tabRef : null} // Set ref on the first tab
+            type={type}
+            fullWidth
+            disableRipple={true}
+            borderRadius={borderRadius}
+            onClick={() => onChange(item)}
+            size="small"
+            isActive={item.id === value}
+            variant="default">
+            {item.icon}
+            {!!item.icon && !!item.title && (
+              <Divider direction="horizontal" size="2" />
+            )}
+            {item.title}
+          </Tab>
+        </Tooltip>
+      ))}
+      <BackdropTab
+        type={type}
+        borderRadius={borderRadius}
+        className={`_backdrop-tab ${initialRender ? 'no-transition' : ''}`}
+        css={{
+          width: tabWidth,
+          transform: `translateX(${transformPosition}px)`,
+        }}
+      />
+    </Tabs>
+  );
+}