@toptal/picasso-tabs 5.0.15-alpha-ff-7-tabs-17eb872bb.13 → 5.0.15-alpha-bill-root-ref-context-42c3d2541.6

package/src/TabScrollButton/TabScrollButton.tsx

@@ -0,0 +1,59 @@
+import React, { forwardRef } from 'react'
+import { ButtonBase } from '@material-ui/core'
+import type { BaseProps } from '@toptal/picasso-shared'
+import { BackMinor16, ChevronMinor16 } from '@toptal/picasso-icons'
+import { Container } from '@toptal/picasso-container'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
+
+type DirectionType = 'left' | 'right'
+
+export interface Props extends BaseProps {
+  /** The direction the button should indicate. */
+  direction: DirectionType
+  /** If `true`, the component is disabled. */
+  disabled?: boolean
+}
+
+export const TabScrollButton = forwardRef<HTMLDivElement, Props>(
+  function TabScrollButton(props, ref) {
+    const { className, style, direction, disabled, ...rest } = props
+
+    if (disabled) {
+      return null
+    }
+
+    return (
+      <Container
+        {...rest}
+        ref={ref}
+        className={twMerge('relative', className)}
+        style={style}
+      >
+        <Container
+          className={twMerge(
+            'absolute w-10 h-full z-10',
+            direction === 'left'
+              ? 'bg-gradient-to-r from-white via-white to-transparent'
+              : 'bg-gradient-to-l from-white via-white to-transparent',
+            direction === 'left' ? 'left-0' : 'right-0'
+          )}
+        >
+          <ButtonBase
+            className={twMerge(
+              'absolute w-4 h-full',
+              direction === 'left' ? 'left-0' : 'right-0'
+            )}
+            aria-label={`${direction} button`}
+            data-testid={`tab-scroll-button-${direction}`}
+          >
+            {direction === 'left' ? <BackMinor16 /> : <ChevronMinor16 />}
+          </ButtonBase>
+        </Container>
+      </Container>
+    )
+  }
+)
+
+TabScrollButton.displayName = 'TabScrollButton'
+
+export default TabScrollButton

package/src/TabScrollButton/index.ts

@@ -0,0 +1,6 @@
+import type { OmitInternalProps } from '@toptal/picasso-shared'
+
+import type { Props } from './TabScrollButton'
+
+export { default as TabScrollButton } from './TabScrollButton'
+export type TabScrollButtonProps = OmitInternalProps<Props>

package/src/Tabs/Tabs.tsx

@@ -1,21 +1,24 @@
-import type { ReactNode, ChangeEvent } from 'react'
-import React, { forwardRef, useMemo, useCallback } from 'react'
+import type { ForwardedRef, ReactNode } from 'react'
+import React, { forwardRef } from 'react'
+import type { Theme } from '@material-ui/core/styles'
+import { makeStyles } from '@material-ui/core/styles'
+import { Tabs as MUITabs } from '@material-ui/core'
 import type { BaseProps } from '@toptal/picasso-shared'
-import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge'
 
-import { TabsContext, type TabsValueType } from './TabsContext'
+import { TabScrollButton } from '../TabScrollButton'
+import styles from './styles'
+import useTabAction from './use-tab-action'
+
+export type TabsValueType = string | number | false
 
 export interface Props<V extends TabsValueType> extends BaseProps {
   /** Tabs content containing Tab components */
   children: ReactNode
 
   /** Callback fired when the value changes. */
-  onChange?: (event: ChangeEvent<{}>, value: V) => void
+  onChange?: (event: React.ChangeEvent<{}> | null, value: V) => void
 
-  /**
-   * The value of the currently selected Tab.
-   * If you don't want any selected Tab, you can set this property to null.
-   */
+  /** The value of the currently selected Tab. If you don't want any selected Tab, you can set this property to false. */
   value: V
 
   /** The tabs orientation (layout flow direction). */
@@ -23,140 +26,54 @@ export interface Props<V extends TabsValueType> extends BaseProps {
 
   /** Determines additional display behavior of the tabs */
   variant?: 'scrollable' | 'fullWidth'
-
-  /** The default value. Use when the component is not controlled. */
-  defaultValue?: V
-
-  /** The direction of the text. */
-  direction?: 'ltr' | 'rtl'
 }
 
-const indicatorClasses = [
-  'after:absolute',
-  'after:content-[""]',
-  'after:bottom-0',
-  'after:left-0',
-  'after:right-0',
-  'after:h-[1px]',
-  'after:bg-gray-500',
-  'after:z-0',
-]
-
-const classesByOrientation = {
-  vertical: {
-    root: 'w-[200px] m-0 flex-col',
-    scroller: 'pl-2',
-  },
-  horizontal: {
-    root: '',
-    scroller: indicatorClasses,
-  },
-}
+const useStyles = makeStyles<Theme>(styles, {
+  name: 'Tabs',
+})
 
-const classesByVariant = {
-  scrollable: {
-    root: 'overflow-x-auto',
-    scroller: '',
-  },
-  fullWidth: {
-    root: '',
-    scroller: 'w-full overflow-hidden',
-  },
-}
+export const TabsOrientationContext = React.createContext<
+  'horizontal' | 'vertical'
+>('horizontal')
 
-export const Tabs = forwardRef<HTMLDivElement, Props<TabsValueType>>(
-  function Tabs(props, ref) {
+export const Tabs = forwardRef(
+  <V extends TabsValueType = TabsValueType>(
+    props: Props<V>,
+    ref: ForwardedRef<HTMLButtonElement>
+  ) => {
     const {
       children,
       orientation = 'horizontal',
       onChange,
-      value: valueProp,
-      defaultValue,
+      value,
       variant = 'scrollable',
-      direction = 'ltr',
-      className,
       ...rest
     } = props
-
-    const [value, setValue] = React.useState<TabsValueType>(
-      defaultValue ?? null
-    )
-    const isControlled = valueProp !== undefined
-    const currentValue = isControlled ? valueProp : value
-
-    const handleChange = useCallback(
-      (event: ChangeEvent<{}>, newValue: TabsValueType) => {
-        if (!isControlled) {
-          setValue(newValue)
-        }
-        onChange?.(event, newValue as TabsValueType)
-      },
-      [isControlled, onChange]
-    )
-
-    const contextValue = useMemo(
-      () => ({
-        value: currentValue,
-        onChange: handleChange,
-        orientation,
-        variant,
-        direction,
-      }),
-      [currentValue, handleChange, orientation, variant, direction]
-    )
-
-    const isVertical = orientation === 'vertical'
-
-    const childrenWithIndex = React.Children.map(children, (child, idx) => {
-      if (
-        React.isValidElement(child) &&
-        // @ts-expect-error: type check for Picasso Tab
-        (child.type.displayName === 'Tab' || child.type.name === 'Tab') &&
-        child.props.value === undefined
-      ) {
-        return React.cloneElement(child as React.ReactElement<any>, {
-          value: idx,
-        })
-      }
-
-      return child
-    })
+    const classes = useStyles(props)
+    const action = useTabAction()
 
     return (
-      <TabsContext.Provider value={contextValue}>
-        <div
+      <TabsOrientationContext.Provider value={orientation}>
+        <MUITabs
           {...rest}
+          classes={{ root: classes[orientation] }}
           ref={ref}
+          onChange={onChange}
+          value={value}
+          action={action}
+          scrollButtons='auto'
+          ScrollButtonComponent={TabScrollButton}
+          orientation={orientation}
+          variant={variant}
           data-component-type='tabs'
-          className={twMerge(
-            'relative min-h-0 flex overflow-hidden',
-            classesByOrientation[orientation].root,
-            classesByVariant[variant].root,
-            className
-          )}
-          aria-orientation={orientation}
         >
-          <div
-            className={twJoin(
-              classesByVariant[variant].scroller,
-              classesByOrientation[orientation].scroller,
-              'flex-auto inline-block relative whitespace-nowrap'
-            )}
-          >
-            <div
-              className={twJoin('flex', isVertical && 'flex-col')}
-              role='tablist'
-              tabIndex={-1}
-            >
-              {childrenWithIndex}
-            </div>
-          </div>
-        </div>
-      </TabsContext.Provider>
+          {children}
+        </MUITabs>
+      </TabsOrientationContext.Provider>
     )
   }
-)
-
-Tabs.displayName = 'Tabs'
+) as <V extends TabsValueType = TabsValueType>(
+  props: Props<V> & { ref?: ForwardedRef<HTMLDivElement> }
+) => ReturnType<typeof MUITabs>
 
 export default Tabs

package/src/Tabs/__snapshots__/test.tsx.snap

@@ -6,28 +6,31 @@ exports[`Tabs renders 1`] = `
     class="Picasso-root"
   >
     <div
-      aria-orientation="horizontal"
-      class="relative min-h flex overflow-hidden overflow-x"
+      class="MuiTabs-root Tabs-horizontal"
       data-component-type="tabs"
     >
       <div
-        class="after:absolute after:content-[""] after:bottom-0 after:left-0 after:right-0 after:h-[1px] after:bg-gray after:z-0 flex-auto inline-block relative whitespace-nowrap"
+        class="MuiTabs-scrollable"
+        style="width: 99px; height: 99px; position: absolute; top: -9999px; overflow: scroll;"
+      />
+      <div
+        class="MuiTabs-scroller MuiTabs-scrollable"
+        style="margin-bottom: 0px;"
       >
         <div
-          class="flex"
+          class="MuiTabs-flexContainer"
           role="tablist"
-          tabindex="-1"
         >
           <button
             aria-selected="false"
-            class="opacity-70 m-0 [&:not(:last-child)]:mr-8 pt-0 pb-[0.4375rem] px-0 text-center bg-transparent transition-shadow z-10 rounded-none text-black shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit"
             data-testid="tab-1"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="w-full inline-flex flex-row items-center justify-center"
+              class="MuiTab-wrapper PicassoTab-wrapper"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold leading-[1.1rem]"
@@ -38,14 +41,14 @@ exports[`Tabs renders 1`] = `
           </button>
           <button
             aria-selected="false"
-            class="opacity-70 m-0 [&:not(:last-child)]:mr-8 pt-0 pb-[0.4375rem] px-0 text-center bg-transparent transition-shadow z-10 rounded-none text-black shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit"
             data-testid="tab-2"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="w-full inline-flex flex-row items-center justify-center"
+              class="MuiTab-wrapper PicassoTab-wrapper"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold leading-[1.1rem]"
@@ -55,6 +58,10 @@ exports[`Tabs renders 1`] = `
             </span>
           </button>
         </div>
+        <span
+          class="PrivateTabIndicator-root PrivateTabIndicator-colorSecondary MuiTabs-indicator"
+          style="left: 0px; width: 0px;"
+        />
       </div>
     </div>
   </div>
@@ -67,28 +74,27 @@ exports[`Tabs renders in full width 1`] = `
     class="Picasso-root"
   >
     <div
-      aria-orientation="horizontal"
-      class="relative min-h flex overflow-hidden"
+      class="MuiTabs-root Tabs-horizontal"
       data-component-type="tabs"
     >
       <div
-        class="w-full overflow-hidden after:absolute after:content-[""] after:bottom-0 after:left-0 after:right-0 after:h-[1px] after:bg-gray after:z-0 flex-auto inline-block relative whitespace-nowrap"
+        class="MuiTabs-scroller MuiTabs-fixed"
+        style="overflow: hidden;"
       >
         <div
-          class="flex"
+          class="MuiTabs-flexContainer"
           role="tablist"
-          tabindex="-1"
         >
           <button
             aria-selected="false"
-            class="opacity-70 m-0 [&:not(:last-child)]:mr-8 pt-0 pb-[0.4375rem] px-0 text-center bg-transparent transition-shadow z-10 rounded-none text-black shrink flex-grow basis-0 min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit MuiTab-fullWidth"
             data-testid="tab-1"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="w-full inline-flex flex-row items-center justify-center"
+              class="MuiTab-wrapper PicassoTab-wrapper"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold leading-[1.1rem]"
@@ -99,14 +105,14 @@ exports[`Tabs renders in full width 1`] = `
           </button>
           <button
             aria-selected="false"
-            class="opacity-70 m-0 [&:not(:last-child)]:mr-8 pt-0 pb-[0.4375rem] px-0 text-center bg-transparent transition-shadow z-10 rounded-none text-black shrink flex-grow basis-0 min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit MuiTab-fullWidth"
             data-testid="tab-2"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="w-full inline-flex flex-row items-center justify-center"
+              class="MuiTab-wrapper PicassoTab-wrapper"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold leading-[1.1rem]"
@@ -116,6 +122,10 @@ exports[`Tabs renders in full width 1`] = `
             </span>
           </button>
         </div>
+        <span
+          class="PrivateTabIndicator-root PrivateTabIndicator-colorSecondary MuiTabs-indicator"
+          style="left: 0px; width: 0px;"
+        />
       </div>
     </div>
   </div>
@@ -128,28 +138,31 @@ exports[`Tabs renders in vertical orientation 1`] = `
     class="Picasso-root"
   >
     <div
-      aria-orientation="vertical"
-      class="relative min-h flex overflow-hidden w-[200px] m-0 flex-col overflow-x"
+      class="MuiTabs-root Tabs-vertical MuiTabs-vertical"
       data-component-type="tabs"
     >
       <div
-        class="pl-2 flex-auto inline-block relative whitespace-nowrap"
+        class="MuiTabs-scrollable"
+        style="width: 99px; height: 99px; position: absolute; top: -9999px; overflow: scroll;"
+      />
+      <div
+        class="MuiTabs-scroller MuiTabs-scrollable"
+        style="margin-bottom: 0px;"
       >
         <div
-          class="flex flex-col"
+          class="MuiTabs-flexContainer MuiTabs-flexContainerVertical"
           role="tablist"
-          tabindex="-1"
         >
           <button
             aria-selected="false"
-            class="opacity-100 first:mt-4 last:mb-4 my-1 mx-0 py-2 px-4 text-left rounded-l rounded-r transition-all w-full overflow-hidden bg-gray hover:bg-gray text-graphite hover:text-black shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="MuiButtonBase-root MuiTab-root PicassoTab-vertical MuiTab-textColorInherit"
             data-testid="tab-1"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="w-full block"
+              class="MuiTab-wrapper PicassoTab-wrapper"
             >
               <div
                 class="m-0 text-md text-inherit font-semibold whitespace-nowrap overflow-ellipsis [-webkit-box overflow-hidden text-ellipsis pr-[0.9px] block"
@@ -160,14 +173,14 @@ exports[`Tabs renders in vertical orientation 1`] = `
           </button>
           <button
             aria-selected="false"
-            class="opacity-100 first:mt-4 last:mb-4 my-1 mx-0 py-2 px-4 text-left rounded-l rounded-r transition-all w-full overflow-hidden bg-gray hover:bg-gray text-graphite hover:text-black shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="MuiButtonBase-root MuiTab-root PicassoTab-vertical MuiTab-textColorInherit"
             data-testid="tab-2"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="w-full block"
+              class="MuiTab-wrapper PicassoTab-wrapper"
             >
               <div
                 class="m-0 text-md text-inherit font-semibold whitespace-nowrap overflow-ellipsis [-webkit-box overflow-hidden text-ellipsis pr-[0.9px] block"
@@ -177,6 +190,10 @@ exports[`Tabs renders in vertical orientation 1`] = `
             </span>
           </button>
         </div>
+        <span
+          class="PrivateTabIndicator-root PrivateTabIndicator-colorSecondary MuiTabs-indicator PrivateTabIndicator-vertical"
+          style="top: 0px; height: 0px;"
+        />
       </div>
     </div>
   </div>
@@ -189,28 +206,31 @@ exports[`Tabs renders with a pre-selected option 1`] = `
     class="Picasso-root"
   >
     <div
-      aria-orientation="horizontal"
-      class="relative min-h flex overflow-hidden overflow-x"
+      class="MuiTabs-root Tabs-horizontal"
       data-component-type="tabs"
     >
       <div
-        class="after:absolute after:content-[""] after:bottom-0 after:left-0 after:right-0 after:h-[1px] after:bg-gray after:z-0 flex-auto inline-block relative whitespace-nowrap"
+        class="MuiTabs-scrollable"
+        style="width: 99px; height: 99px; position: absolute; top: -9999px; overflow: scroll;"
+      />
+      <div
+        class="MuiTabs-scroller MuiTabs-scrollable"
+        style="margin-bottom: 0px;"
       >
         <div
-          class="flex"
+          class="MuiTabs-flexContainer"
           role="tablist"
-          tabindex="-1"
         >
           <button
             aria-selected="false"
-            class="opacity-70 m-0 [&:not(:last-child)]:mr-8 pt-0 pb-[0.4375rem] px-0 text-center bg-transparent transition-shadow z-10 rounded-none text-black shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit"
             data-testid="tab-1"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="w-full inline-flex flex-row items-center justify-center"
+              class="MuiTab-wrapper PicassoTab-wrapper"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold leading-[1.1rem]"
@@ -221,14 +241,14 @@ exports[`Tabs renders with a pre-selected option 1`] = `
           </button>
           <button
             aria-selected="true"
-            class="opacity-100 m-0 [&:not(:last-child)]:mr-8 pt-0 pb-[0.4375rem] px-0 text-center bg-transparent transition-shadow z-10 rounded-none text-black shadow-blue shadow-[inset_0_-2px_0] shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit Mui-selected PicassoTab-selected"
             data-testid="tab-2"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="w-full inline-flex flex-row items-center justify-center"
+              class="MuiTab-wrapper PicassoTab-wrapper"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold leading-[1.1rem]"
@@ -238,6 +258,10 @@ exports[`Tabs renders with a pre-selected option 1`] = `
             </span>
           </button>
         </div>
+        <span
+          class="PrivateTabIndicator-root PrivateTabIndicator-colorSecondary MuiTabs-indicator"
+          style="left: 0px; width: 0px;"
+        />
       </div>
     </div>
     <div
@@ -257,28 +281,31 @@ exports[`Tabs renders with a pre-selected option using custom value 1`] = `
     class="Picasso-root"
   >
     <div
-      aria-orientation="horizontal"
-      class="relative min-h flex overflow-hidden overflow-x"
+      class="MuiTabs-root Tabs-horizontal"
       data-component-type="tabs"
     >
       <div
-        class="after:absolute after:content-[""] after:bottom-0 after:left-0 after:right-0 after:h-[1px] after:bg-gray after:z-0 flex-auto inline-block relative whitespace-nowrap"
+        class="MuiTabs-scrollable"
+        style="width: 99px; height: 99px; position: absolute; top: -9999px; overflow: scroll;"
+      />
+      <div
+        class="MuiTabs-scroller MuiTabs-scrollable"
+        style="margin-bottom: 0px;"
       >
         <div
-          class="flex"
+          class="MuiTabs-flexContainer"
           role="tablist"
-          tabindex="-1"
         >
           <button
             aria-selected="true"
-            class="opacity-100 m-0 [&:not(:last-child)]:mr-8 pt-0 pb-[0.4375rem] px-0 text-center bg-transparent transition-shadow z-10 rounded-none text-black shadow-blue shadow-[inset_0_-2px_0] shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit Mui-selected PicassoTab-selected"
             data-testid="tab-1"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="w-full inline-flex flex-row items-center justify-center"
+              class="MuiTab-wrapper PicassoTab-wrapper"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold leading-[1.1rem]"
@@ -289,14 +316,14 @@ exports[`Tabs renders with a pre-selected option using custom value 1`] = `
           </button>
           <button
             aria-selected="false"
-            class="opacity-70 m-0 [&:not(:last-child)]:mr-8 pt-0 pb-[0.4375rem] px-0 text-center bg-transparent transition-shadow z-10 rounded-none text-black shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit"
             data-testid="tab-2"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="w-full inline-flex flex-row items-center justify-center"
+              class="MuiTab-wrapper PicassoTab-wrapper"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold leading-[1.1rem]"
@@ -306,6 +333,10 @@ exports[`Tabs renders with a pre-selected option using custom value 1`] = `
             </span>
           </button>
         </div>
+        <span
+          class="PrivateTabIndicator-root PrivateTabIndicator-colorSecondary MuiTabs-indicator"
+          style="left: 0px; width: 0px;"
+        />
       </div>
     </div>
     <div

package/src/Tabs/index.ts

@@ -1,8 +1,7 @@
 import type { OmitInternalProps } from '@toptal/picasso-shared'
 
-import type { Props } from './Tabs'
-import type { TabsValueType } from './TabsContext'
+import type { Props, TabsValueType } from './Tabs'
 
 export { default as Tabs } from './Tabs'
 export type TabsProps = OmitInternalProps<Props<TabsValueType>>
-export type { TabsValueType } from './TabsContext'
+export type { TabsValueType } from './Tabs'

package/src/Tabs/story/Default.example.tsx

@@ -2,12 +2,10 @@ import React from 'react'
 import { Container, Tabs } from '@toptal/picasso'
 import { SPACING_4 } from '@toptal/picasso-utils'
 
-import type { TabsValueType } from '../TabsContext'
-
 const Example = () => {
-  const [value, setValue] = React.useState<TabsValueType>(0)
+  const [value, setValue] = React.useState(0)
 
-  const handleChange = (_: React.ChangeEvent<{}>, newValue: TabsValueType) => {
+  const handleChange = (_: React.ChangeEvent<{}> | null, newValue: number) => {
     setValue(newValue)
   }