@rango-dev/ui 0.39.1-next.3 → 0.39.1-next.5

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Tabs/Tabs.styles.tsx"],"names":[],"mappings":";;;AAGA,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAuCf,CAAC;AAEH,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEA4Gd,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAmCtB,CAAC"}
+{"version":3,"file":"Tabs.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Tabs/Tabs.styles.tsx"],"names":[],"mappings":";;;AAIA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEASpB,CAAC;AAEH,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAYhB,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAErB,CAAC;AAEH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAEpB,CAAC;AAEH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAiDf,CAAC;AAEH,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEA8Gd,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAqCtB,CAAC"}

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

@@ -25,6 +25,8 @@ export interface TabsPropTypes {
     type: BaseType;
     borderRadius?: BaseBorderRadius;
     className?: string;
+    scrollable?: boolean;
+    scrollButtons?: boolean;
 }
 export {};
 //# sourceMappingURL=Tabs.types.d.ts.map

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

@@ -1 +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,kBAAkB,CAAC;AAC7C,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,aAAa;IAC5B,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"}
+{"version":3,"file":"Tabs.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Tabs/Tabs.types.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC7C,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,aAAa;IAC5B,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;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.39.1-next.3",
+  "version": "0.39.1-next.5",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -53,7 +53,7 @@
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-tooltip": "^1.0.2",
-    "@rango-dev/wallets-shared": "^0.37.1-next.1",
+    "@rango-dev/wallets-shared": "^0.37.1-next.2",
     "@stitches/react": "^1.2.8",
     "copy-to-clipboard": "^3.3.3",
     "rango-types": "^0.1.69",
@@ -62,4 +62,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

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

@@ -1,5 +1,39 @@
 import { darkTheme, styled } from '../../theme.js';
 import { Button } from '../Button/index.js';
+import { IconButton } from '../IconButton/IconButton.js';
+
+export const Container = styled('div', {
+  position: 'relative',
+  variants: {
+    hasPadding: {
+      true: {
+        padding: '0 $32',
+      },
+    },
+  },
+});
+
+export const Arrow = styled(IconButton, {
+  position: 'absolute',
+  height: '100%',
+  zIndex: 20,
+  borderRadius: '$xs !important',
+  variants: {
+    hidden: {
+      true: {
+        visibility: 'hidden',
+      },
+    },
+  },
+});
+
+export const ArrowRight = styled(Arrow, {
+  right: 0,
+});
+
+export const ArrowLeft = styled(Arrow, {
+  left: 0,
+});
 
 export const Tabs = styled('div', {
   display: 'flex',
@@ -23,7 +57,7 @@ export const Tabs = styled('div', {
         borderStyle: 'solid',
         backgroundColor: '$$color',
       },
-      bordered: { backgroundColor: 'inherit' },
+      bordered: {},
     },
     borderRadius: {
       small: {
@@ -39,6 +73,16 @@ export const Tabs = styled('div', {
         borderRadius: 'unset',
       },
     },
+    scrollable: {
+      true: {
+        overflowX: 'auto',
+        scrollBehavior: 'smooth',
+        scrollbarWidth: 'none',
+        '&::webkit-scrollbar': {
+          display: 'none',
+        },
+      },
+    },
   },
 });
 
@@ -75,7 +119,9 @@ export const Tab = styled(Button, {
         height: '100%',
       },
       secondary: {},
-      bordered: {},
+      bordered: {
+        padding: '$10 $20',
+      },
     },
     isActive: {
       true: {
@@ -154,6 +200,7 @@ export const Tab = styled(Button, {
 
 export const BackdropTab = styled('div', {
   padding: '$4',
+  boxSizing: 'border-box',
   position: 'absolute',
   inset: 0,
   transition: 'transform 0.2s cubic-bezier(0, 0, 0.86, 1.2)',
@@ -169,6 +216,7 @@ export const BackdropTab = styled('div', {
         backgroundColor: '$background',
       },
       bordered: {
+        borderRadius: '0 !important',
         borderBottom: '$secondary500 solid 2px',
       },
     },

package/src/components/Tabs/Tabs.tsx

@@ -1,11 +1,19 @@
 import type { TabsPropTypes } from './Tabs.types.js';
 
 import React, { useEffect, useRef, useState } from 'react';
+import { ChevronLeftIcon, ChevronRightIcon } from 'src/icons/index.js';
 
 import { Divider } from '../Divider/index.js';
 import { Tooltip } from '../Tooltip/index.js';
 
-import { BackdropTab, Tab, Tabs } from './Tabs.styles.js';
+import {
+  ArrowLeft,
+  ArrowRight,
+  BackdropTab,
+  Container,
+  Tab,
+  Tabs,
+} from './Tabs.styles.js';
 
 const INITIAL_RENDER_DELAY = 100;
 export function TabsComponent(props: TabsPropTypes) {
@@ -16,34 +24,68 @@ export function TabsComponent(props: TabsPropTypes) {
     value,
     type,
     className,
+    scrollable,
+    scrollButtons = true,
   } = props;
   const [tabWidth, setTabWidth] = useState(0);
-  const tabRef: React.Ref<HTMLButtonElement> = useRef(null);
+  const tabRef = useRef<HTMLButtonElement | null>(null);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const leftArrowRef = useRef<HTMLButtonElement | null>(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;
+  const [transformPosition, setTransformPosition] = useState(0);
+  const [leftArrowDisabled, setLeftArrowDisabled] = useState(true);
+  const [rightArrowDisabled, setRightArrowDisabled] = useState(false);
+  const [showArrows, setShowArrows] = useState(false);
+
   let borderRadius: TabsPropTypes['borderRadius'] = 'medium';
   if (type === 'bordered') {
     borderRadius = 'none';
-  } else if (props.borderRadius) {
+  } else if (type && props.borderRadius) {
     borderRadius = props.borderRadius;
   }
 
-  useEffect(() => {
-    const updateTabWidth = () => {
-      if (tabRef.current) {
-        const tabRect = tabRef.current.getBoundingClientRect();
-        setTabWidth(tabRect.width);
+  const handleScroll = (to: 'right' | 'left') => {
+    if (!containerRef.current) {
+      return;
+    }
+    const SCROLL_MULTIPLIER = 1.5;
+    const scrollWidth =
+      (containerRef.current.scrollWidth / tabItems.length) * SCROLL_MULTIPLIER;
+
+    if (to === 'right') {
+      containerRef.current.scrollLeft -= scrollWidth;
+    } else {
+      containerRef.current.scrollLeft += scrollWidth;
+    }
+  };
+
+  const updateIndicator = (currentIndex: number) => {
+    if (tabRef.current && containerRef.current) {
+      const tabRect = tabRef.current.getBoundingClientRect();
+      const containerRect = containerRef.current.getBoundingClientRect();
+      setTabWidth(tabRect.width);
+      setTransformPosition(
+        scrollable ? tabRef.current.offsetLeft : currentIndex * tabWidth
+      );
+      const itemPartiallyVisibleOnLeft = tabRect.left < containerRect.left;
+      const itemPartiallyVisibleOnRight = tabRect.right > containerRect.right;
+
+      if (itemPartiallyVisibleOnLeft) {
+        containerRef.current.scrollLeft = tabRef.current.offsetLeft;
+      } else if (itemPartiallyVisibleOnRight) {
+        const containerComputedStyles = window.getComputedStyle(
+          containerRef.current
+        );
+        containerRef.current.scrollLeft =
+          containerRef.current.scrollLeft +
+          tabRect.right -
+          containerRect.right +
+          parseFloat(containerComputedStyles.borderRightWidth);
       }
-    };
-    updateTabWidth();
-    window.addEventListener('resize', updateTabWidth);
-    return () => {
-      window.removeEventListener('resize', updateTabWidth);
-    };
-  }, []);
+    }
+  };
 
   useEffect(() => {
     // Set initialRender to false after a short delay
@@ -53,48 +95,126 @@ export function TabsComponent(props: TabsPropTypes) {
     }, INITIAL_RENDER_DELAY);
   }, []);
 
+  useEffect(() => {
+    updateIndicator(currentIndex);
+
+    const updateArrowsVisibility = () => {
+      if (scrollable && containerRef.current) {
+        const startOfTheScroll = containerRef.current.scrollLeft === 0;
+        const endOfTheScroll =
+          containerRef.current.scrollLeft + containerRef.current.clientWidth ===
+          containerRef.current.scrollWidth;
+
+        if (startOfTheScroll) {
+          setLeftArrowDisabled(true);
+        } else {
+          setLeftArrowDisabled(false);
+        }
+        if (endOfTheScroll) {
+          setRightArrowDisabled(true);
+        } else {
+          setRightArrowDisabled(false);
+        }
+      }
+    };
+
+    const resizeHandler: ResizeObserverCallback = (event) => {
+      if (scrollable && containerRef.current) {
+        const TOTAL_WIDTH_OF_ARROWS = 64;
+        updateIndicator(currentIndex);
+        updateArrowsVisibility();
+        const element = event[0].target;
+        if (showArrows) {
+          const tabsContainerOverflown =
+            element.scrollWidth - TOTAL_WIDTH_OF_ARROWS > element.clientWidth;
+          if (!tabsContainerOverflown) {
+            setShowArrows(false);
+          }
+        } else if (element.scrollWidth > element.clientWidth) {
+          setShowArrows(true);
+        }
+      }
+    };
+
+    containerRef.current?.addEventListener('scroll', updateArrowsVisibility);
+
+    const resizeObserver = new ResizeObserver(resizeHandler);
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+    }
+
+    return () => {
+      if (containerRef.current) {
+        resizeObserver.unobserve(containerRef.current);
+        containerRef.current.removeEventListener(
+          'scroll',
+          updateArrowsVisibility
+        );
+      }
+    };
+  }, [containerRef.current, showArrows, currentIndex]);
+
   return (
-    <Tabs
-      className={`_tabs ${className || ''}`}
-      type={type}
-      borderRadius={borderRadius}>
-      {tabItems.map((item, index) => (
-        <Tooltip
-          key={item.id}
-          styles={{ root: { 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
+    <Container hasPadding={scrollButtons && showArrows}>
+      {scrollable && showArrows && scrollButtons && (
+        <>
+          <ArrowLeft
+            ref={leftArrowRef}
+            hidden={leftArrowDisabled}
+            onClick={() => handleScroll('right')}>
+            <ChevronLeftIcon size={16} color="secondary" />
+          </ArrowLeft>
+          <ArrowRight
+            hidden={rightArrowDisabled}
+            onClick={() => handleScroll('left')}>
+            <ChevronRightIcon size={16} color="secondary" />
+          </ArrowRight>
+        </>
+      )}
+      <Tabs
+        ref={containerRef}
+        className={`_tabs ${className || ''}`}
         type={type}
         borderRadius={borderRadius}
-        className={`_backdrop-tab ${initialRender ? 'no-transition' : ''}`}
-        css={{
-          width: tabWidth,
-          transform: `translateX(${transformPosition}px)`,
-        }}
-      />
-    </Tabs>
+        scrollable={scrollable}>
+        {tabItems.map((item, index) => (
+          <Tooltip
+            key={item.id}
+            styles={{ root: { width: '100%' } }}
+            container={container}
+            side="bottom"
+            sideOffset={2}
+            content={item.tooltip}
+            open={!item.tooltip ? false : undefined}>
+            <Tab
+              className="_tab"
+              ref={index === currentIndex ? tabRef : null}
+              type={type}
+              fullWidth={scrollable ? false : true}
+              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>
+    </Container>
   );
 }

package/src/components/Tabs/Tabs.types.tsx

@@ -29,4 +29,6 @@ export interface TabsPropTypes {
   type: BaseType;
   borderRadius?: BaseBorderRadius;
   className?: string;
+  scrollable?: boolean;
+  scrollButtons?: boolean;
 }