@toptal/picasso-tabs 5.0.15-alpha-ff-7-tabs-19babbfd6.8 → 5.0.15-alpha-ff-7-tabs-17eb872bb.13

package/dist-package/src/Tab/Tab.d.ts

@@ -1,15 +1,15 @@
 import type { ReactNode, HTMLAttributes, ReactElement } from 'react';
 import React from 'react';
-import type { TabProps } from '@mui/base/Tab';
 import type { BaseProps, TextLabelProps } from '@toptal/picasso-shared';
+import { type TabsValueType } from '../Tabs/TabsContext';
 export interface Props extends BaseProps, TextLabelProps, Omit<HTMLAttributes<HTMLButtonElement>, 'onChange'> {
     /**
      * If true, the tab will be disabled
      * @default false
      */
     disabled?: boolean;
-    /** You can provide your own value. Otherwise, we fallback to the child position index */
-    value?: TabProps['value'];
+    /** The value of the tab */
+    value?: TabsValueType;
     /** The label element */
     label?: ReactNode;
     /** The Icon element */
@@ -18,9 +18,6 @@ export interface Props extends BaseProps, TextLabelProps, Omit<HTMLAttributes<HT
     avatar?: string | null;
     /** Description */
     description?: string;
-    selected?: boolean;
-    onChange?: TabProps['onChange'];
-    onClick?: TabProps['onClick'];
 }
 export declare const Tab: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement>>;
 export default Tab;

package/dist-package/src/Tab/Tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../src/Tab/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AACpE,OAAO,KAAiC,MAAM,OAAO,CAAA;AACrD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAE7C,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AASvE,MAAM,WAAW,KACf,SAAQ,SAAS,EACf,cAAc,EACd,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACrD;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB,yFAAyF;IACzF,KAAK,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAA;IAEzB,wBAAwB;IACxB,KAAK,CAAC,EAAE,SAAS,CAAA;IAEjB,uBAAuB;IACvB,IAAI,CAAC,EAAE,YAAY,CAAA;IAEnB,gBAAgB;IAChB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAEtB,kBAAkB;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IAIpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAA;IAC/B,OAAO,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAA;CAC9B;AAuDD,eAAO,MAAM,GAAG,iFA4Ed,CAAA;AAyDF,eAAe,GAAG,CAAA"}
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../src/Tab/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AACpE,OAAO,KAAqB,MAAM,OAAO,CAAA;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAKvE,OAAO,EAAkB,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAIxE,MAAM,WAAW,KACf,SAAQ,SAAS,EACf,cAAc,EACd,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACrD;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,aAAa,CAAA;IAErB,wBAAwB;IACxB,KAAK,CAAC,EAAE,SAAS,CAAA;IAEjB,uBAAuB;IACvB,IAAI,CAAC,EAAE,YAAY,CAAA;IAEnB,gBAAgB;IAChB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAEtB,kBAAkB;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;CAOrB;AAsDD,eAAO,MAAM,GAAG,iFA6Ed,CAAA;AAmDF,eAAe,GAAG,CAAA"}

package/dist-package/src/Tab/Tab.js

@@ -9,12 +9,11 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef, useContext } from 'react';
-import { Tab as MUITab } from '@mui/base/Tab';
+import React, { forwardRef } from 'react';
 import { useTitleCase } from '@toptal/picasso-shared';
 import { UserBadge } from '@toptal/picasso-user-badge';
 import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge';
-import { TabsContext } from '../Tabs/Tabs';
+import { useTabsContext } from '../Tabs/TabsContext';
 import { TabLabel } from '../TabLabel';
 import { TabDescription } from '../TabDescription';
 const getOpacityClass = (selected, disabled, orientation) => {
@@ -27,12 +26,12 @@ const getOpacityClass = (selected, disabled, orientation) => {
     return 'opacity-70';
 };
 const wrapperClassesByOrientation = {
-    horizontal: 'inline-flex items-center flex-col justify-center',
+    horizontal: 'inline-flex flex-row items-center justify-center',
     vertical: 'block',
 };
 const rootClassesByOrientation = (selected) => ({
     horizontal: [
-        'm-0 [&:not(:last-child)]:mr-8 pt-[0.5625rem] pb-[0.4375rem] px-0',
+        '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',
         selected && 'shadow-blue-500 shadow-[inset_0_-2px_0]',
@@ -61,10 +60,17 @@ const classesByVariant = {
     fullWidth: 'shrink flex-grow basis-0',
 };
 export const Tab = forwardRef(function Tab(props, ref) {
-    const { disabled, value, label, icon, onChange, onClick, titleCase: propsTitleCase, description, avatar, className } = props, rest = __rest(props, ["disabled", "value", "label", "icon", "onChange", "onClick", "titleCase", "description", "avatar", "className"]);
+    const { disabled, value, label, icon, titleCase: propsTitleCase, description, avatar, className, onClick } = props, rest = __rest(props, ["disabled", "value", "label", "icon", "titleCase", "description", "avatar", "className", "onClick"]);
     const titleCase = useTitleCase(propsTitleCase);
-    const { orientation, variant } = useContext(TabsContext);
+    const { value: selectedValue, onChange, orientation, variant, } = useTabsContext();
     const isHorizontal = orientation === 'horizontal';
+    const selected = value === selectedValue;
+    const handleClick = (event) => {
+        if (!disabled && onChange) {
+            onChange(event, value);
+        }
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    };
     const renderLabel = getLabelComponent({
         avatar,
         description,
@@ -73,20 +79,11 @@ export const Tab = forwardRef(function Tab(props, ref) {
         orientation,
         titleCase,
     });
-    return (React.createElement(MUITab, Object.assign({ className: '' }, rest, { ref: ref, tabIndex: 0, disabled: disabled, value: value, onChange: onChange, onClick: onClick, slotProps: {
-            root: ownerState => {
-                return {
-                    className: twMerge(getOpacityClass(ownerState.selected, ownerState.disabled, orientation), rootClassesByOrientation(ownerState.selected)[orientation], classesByVariant[variant], ownerState.disabled
-                        ? 'cursor-default text-gray-500'
-                        : 'cursor-pointer', ownerState.disabled && 'pointer-events-none', icon && isHorizontal && 'min-h-0 pt-[0.5625rem] pr-6', 'min-w-0 sm:min-w-[160px] md:min-w-[auto]', 'border-0 cursor-pointer inline-flex outline-none', 'items-center select-none align-middle appearance-none', 'justify-center no-underline [-webkit-tap-highlight-color:transparent]', 'normal-case whitespace-normal leading-4', 'relative ', className),
-                };
-            },
-        } }),
+    return (React.createElement("button", Object.assign({ className: twMerge(getOpacityClass(selected, !!disabled, orientation), rootClassesByOrientation(selected)[orientation], classesByVariant[variant], disabled ? 'cursor-default text-gray-500' : 'cursor-pointer', disabled && 'pointer-events-none', icon && isHorizontal && 'min-h-0 pt-0 pr-6', 'min-w-0 sm:min-w-[160px] md:min-w-[auto]', 'border-0 cursor-pointer inline-flex outline-none', 'items-center select-none align-middle appearance-none', 'justify-center no-underline [-webkit-tap-highlight-color:transparent]', 'normal-case whitespace-normal leading-4', 'relative ', className), ref: ref, tabIndex: disabled ? -1 : 0, disabled: disabled, onClick: handleClick, role: 'tab', "aria-selected": selected, "aria-disabled": disabled, type: 'button' }, rest),
         React.createElement("span", { className: twJoin('w-full', wrapperClassesByOrientation[orientation]) },
             renderLabel,
-            icon && React.createElement("span", { className: 'absolute right-0 mb-0 h-4' }, icon))));
+            icon && React.createElement("span", { className: 'absolute right-0 mb-0' }, icon))));
 });
-Tab.defaultProps = {};
 Tab.displayName = 'Tab';
 const getLabelComponent = ({ avatar, description, disabled, label, orientation, titleCase, }) => {
     if (!label) {

package/dist-package/src/Tab/Tab.js.map

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

package/dist-package/src/Tabs/Tabs.d.ts

@@ -1,12 +1,12 @@
-import type { ReactNode } from 'react';
+import type { ReactNode, ChangeEvent } from 'react';
 import React from 'react';
 import type { BaseProps } from '@toptal/picasso-shared';
-export declare type TabsValueType = string | number | null;
+import { type TabsValueType } from './TabsContext';
 export interface Props<V extends TabsValueType> extends BaseProps {
     /** Tabs content containing Tab components */
     children: ReactNode;
     /** Callback fired when the value changes. */
-    onChange?: (event: React.ChangeEvent<{}> | null, value: V) => void;
+    onChange?: (event: ChangeEvent<{}>, 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.
@@ -16,11 +16,11 @@ export interface Props<V extends TabsValueType> extends BaseProps {
     orientation?: 'horizontal' | 'vertical';
     /** 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';
 }
-export declare const TabsContext: React.Context<{
-    orientation: 'horizontal' | 'vertical';
-    variant: 'scrollable' | 'fullWidth';
-}>;
 export declare const Tabs: React.ForwardRefExoticComponent<Props<TabsValueType> & React.RefAttributes<HTMLDivElement>>;
 export default Tabs;
 //# sourceMappingURL=Tabs.d.ts.map

package/dist-package/src/Tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAA8B,MAAM,OAAO,CAAA;AAGlD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAGvD,oBAAY,aAAa,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,CAAA;AAElD,MAAM,WAAW,KAAK,CAAC,CAAC,SAAS,aAAa,CAAE,SAAQ,SAAS;IAC/D,6CAA6C;IAC7C,QAAQ,EAAE,SAAS,CAAA;IAEnB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,KAAK,EAAE,CAAC,KAAK,IAAI,CAAA;IAElE;;;OAGG;IACH,KAAK,EAAE,CAAC,CAAA;IAER,oDAAoD;IACpD,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IAEvC,yDAAyD;IACzD,OAAO,CAAC,EAAE,YAAY,GAAG,WAAW,CAAA;CACrC;AAED,eAAO,MAAM,WAAW;iBACT,YAAY,GAAG,UAAU;aAC7B,YAAY,GAAG,WAAW;EACmB,CAAA;AAoCxD,eAAO,MAAM,IAAI,6FAyDhB,CAAA;AAID,eAAe,IAAI,CAAA"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AACnD,OAAO,KAA2C,MAAM,OAAO,CAAA;AAC/D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAGvD,OAAO,EAAe,KAAK,aAAa,EAAE,MAAM,eAAe,CAAA;AAE/D,MAAM,WAAW,KAAK,CAAC,CAAC,SAAS,aAAa,CAAE,SAAQ,SAAS;IAC/D,6CAA6C;IAC7C,QAAQ,EAAE,SAAS,CAAA;IAEnB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,KAAK,IAAI,CAAA;IAErD;;;OAGG;IACH,KAAK,EAAE,CAAC,CAAA;IAER,oDAAoD;IACpD,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IAEvC,yDAAyD;IACzD,OAAO,CAAC,EAAE,YAAY,GAAG,WAAW,CAAA;IAEpC,mEAAmE;IACnE,YAAY,CAAC,EAAE,CAAC,CAAA;IAEhB,iCAAiC;IACjC,SAAS,CAAC,EAAE,KAAK,GAAG,KAAK,CAAA;CAC1B;AAmCD,eAAO,MAAM,IAAI,6FA2FhB,CAAA;AAID,eAAe,IAAI,CAAA"}

package/dist-package/src/Tabs/Tabs.js

@@ -9,11 +9,9 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef, useMemo } from 'react';
-import { Tabs as MUITabs } from '@mui/base/Tabs';
-import { TabsList } from '@mui/base/TabsList';
+import React, { forwardRef, useMemo, useCallback } from 'react';
 import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge';
-export const TabsContext = React.createContext({ orientation: 'horizontal', variant: 'scrollable' });
+import { TabsContext } from './TabsContext';
 const indicatorClasses = [
     'after:absolute',
     'after:content-[""]',
@@ -44,23 +42,40 @@ const classesByVariant = {
         scroller: 'w-full overflow-hidden',
     },
 };
-// eslint-disable-next-line react/display-name
 export const Tabs = forwardRef(function Tabs(props, ref) {
-    const { children, orientation = 'horizontal', onChange, value, variant = 'scrollable', className } = props, rest = __rest(props, ["children", "orientation", "onChange", "value", "variant", "className"]);
+    const { children, orientation = 'horizontal', onChange, value: valueProp, defaultValue, variant = 'scrollable', direction = 'ltr', className } = props, rest = __rest(props, ["children", "orientation", "onChange", "value", "defaultValue", "variant", "direction", "className"]);
+    const [value, setValue] = React.useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : null);
+    const isControlled = valueProp !== undefined;
+    const currentValue = isControlled ? valueProp : value;
+    const handleChange = useCallback((event, newValue) => {
+        if (!isControlled) {
+            setValue(newValue);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(event, newValue);
+    }, [isControlled, onChange]);
     const contextValue = useMemo(() => ({
+        value: currentValue,
+        onChange: handleChange,
         orientation,
         variant,
-    }), [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, {
+                value: idx,
+            });
+        }
+        return child;
+    });
     return (React.createElement(TabsContext.Provider, { value: contextValue },
-        React.createElement(MUITabs, Object.assign({}, rest, { "data-component-type": 'tabs', slotProps: {
-                root: {
-                    ref,
-                    className: twMerge('relative min-h-0 flex overflow-hidden', classesByOrientation[orientation].root, classesByVariant[variant].root, className),
-                },
-            }, onChange: onChange, value: value, orientation: orientation }),
+        React.createElement("div", Object.assign({}, rest, { ref: ref, "data-component-type": 'tabs', className: twMerge('relative min-h-0 flex overflow-hidden', classesByOrientation[orientation].root, classesByVariant[variant].root, className), "aria-orientation": orientation }),
             React.createElement("div", { className: twJoin(classesByVariant[variant].scroller, classesByOrientation[orientation].scroller, 'flex-auto inline-block relative whitespace-nowrap') },
-                React.createElement(TabsList, { className: twJoin('flex', isVertical && 'flex-col') }, children)))));
+                React.createElement("div", { className: twJoin('flex', isVertical && 'flex-col'), role: 'tablist', tabIndex: -1 }, childrenWithIndex)))));
 });
 Tabs.displayName = 'Tabs';
 export default Tabs;

package/dist-package/src/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/Tabs/Tabs.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAClD,OAAO,EAAE,IAAI,IAAI,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAE7C,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAwBhE,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAG3C,EAAE,WAAW,EAAE,YAAY,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC,CAAA;AAExD,MAAM,gBAAgB,GAAG;IACvB,gBAAgB;IAChB,oBAAoB;IACpB,gBAAgB;IAChB,cAAc;IACd,eAAe;IACf,eAAe;IACf,mBAAmB;IACnB,WAAW;CACZ,CAAA;AAED,MAAM,oBAAoB,GAAG;IAC3B,QAAQ,EAAE;QACR,IAAI,EAAE,wBAAwB;QAC9B,QAAQ,EAAE,MAAM;KACjB;IACD,UAAU,EAAE;QACV,IAAI,EAAE,EAAE;QACR,QAAQ,EAAE,gBAAgB;KAC3B;CACF,CAAA;AAED,MAAM,gBAAgB,GAAG;IACvB,UAAU,EAAE;QACV,IAAI,EAAE,iBAAiB;QACvB,QAAQ,EAAE,EAAE;KACb;IACD,SAAS,EAAE;QACT,IAAI,EAAE,EAAE;QACR,QAAQ,EAAE,wBAAwB;KACnC;CACF,CAAA;AAED,8CAA8C;AAC9C,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,SAAS,IAAI,CAAC,KAAK,EAAE,GAAG;IACtB,MAAM,EACJ,QAAQ,EACR,WAAW,GAAG,YAAY,EAC1B,QAAQ,EACR,KAAK,EACL,OAAO,GAAG,YAAY,EACtB,SAAS,KAEP,KAAK,EADJ,IAAI,UACL,KAAK,EARH,wEAQL,CAAQ,CAAA;IAET,MAAM,YAAY,GAAG,OAAO,CAC1B,GAAG,EAAE,CAAC,CAAC;QACL,WAAW;QACX,OAAO;KACR,CAAC,EACF,CAAC,WAAW,EAAE,OAAO,CAAC,CACvB,CAAA;IAED,MAAM,UAAU,GAAG,WAAW,KAAK,UAAU,CAAA;IAE7C,OAAO,CACL,oBAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY;QACvC,oBAAC,OAAO,oBACF,IAAI,2BACY,MAAM,EAC1B,SAAS,EAAE;gBACT,IAAI,EAAE;oBACJ,GAAG;oBACH,SAAS,EAAE,OAAO,CAChB,uCAAuC,EACvC,oBAAoB,CAAC,WAAW,CAAC,CAAC,IAAI,EACtC,gBAAgB,CAAC,OAAO,CAAC,CAAC,IAAI,EAC9B,SAAS,CACV;iBACF;aACF,EACD,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW;YAExB,6BACE,SAAS,EAAE,MAAM,CACf,gBAAgB,CAAC,OAAO,CAAC,CAAC,QAAQ,EAClC,oBAAoB,CAAC,WAAW,CAAC,CAAC,QAAQ,EAC1C,mDAAmD,CACpD;gBAED,oBAAC,QAAQ,IAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,IAAI,UAAU,CAAC,IAC1D,QAAQ,CACA,CACP,CACE,CACW,CACxB,CAAA;AACH,CAAC,CACF,CAAA;AAED,IAAI,CAAC,WAAW,GAAG,MAAM,CAAA;AAEzB,eAAe,IAAI,CAAA"}
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/Tabs/Tabs.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAE/D,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAEhE,OAAO,EAAE,WAAW,EAAsB,MAAM,eAAe,CAAA;AA4B/D,MAAM,gBAAgB,GAAG;IACvB,gBAAgB;IAChB,oBAAoB;IACpB,gBAAgB;IAChB,cAAc;IACd,eAAe;IACf,eAAe;IACf,mBAAmB;IACnB,WAAW;CACZ,CAAA;AAED,MAAM,oBAAoB,GAAG;IAC3B,QAAQ,EAAE;QACR,IAAI,EAAE,wBAAwB;QAC9B,QAAQ,EAAE,MAAM;KACjB;IACD,UAAU,EAAE;QACV,IAAI,EAAE,EAAE;QACR,QAAQ,EAAE,gBAAgB;KAC3B;CACF,CAAA;AAED,MAAM,gBAAgB,GAAG;IACvB,UAAU,EAAE;QACV,IAAI,EAAE,iBAAiB;QACvB,QAAQ,EAAE,EAAE;KACb;IACD,SAAS,EAAE;QACT,IAAI,EAAE,EAAE;QACR,QAAQ,EAAE,wBAAwB;KACnC;CACF,CAAA;AAED,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,SAAS,IAAI,CAAC,KAAK,EAAE,GAAG;IACtB,MAAM,EACJ,QAAQ,EACR,WAAW,GAAG,YAAY,EAC1B,QAAQ,EACR,KAAK,EAAE,SAAS,EAChB,YAAY,EACZ,OAAO,GAAG,YAAY,EACtB,SAAS,GAAG,KAAK,EACjB,SAAS,KAEP,KAAK,EADJ,IAAI,UACL,KAAK,EAVH,qGAUL,CAAQ,CAAA;IAET,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CACtC,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,IAAI,CACrB,CAAA;IACD,MAAM,YAAY,GAAG,SAAS,KAAK,SAAS,CAAA;IAC5C,MAAM,YAAY,GAAG,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAA;IAErD,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,KAAsB,EAAE,QAAuB,EAAE,EAAE;QAClD,IAAI,CAAC,YAAY,EAAE;YACjB,QAAQ,CAAC,QAAQ,CAAC,CAAA;SACnB;QACD,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,KAAK,EAAE,QAAyB,CAAC,CAAA;IAC9C,CAAC,EACD,CAAC,YAAY,EAAE,QAAQ,CAAC,CACzB,CAAA;IAED,MAAM,YAAY,GAAG,OAAO,CAC1B,GAAG,EAAE,CAAC,CAAC;QACL,KAAK,EAAE,YAAY;QACnB,QAAQ,EAAE,YAAY;QACtB,WAAW;QACX,OAAO;QACP,SAAS;KACV,CAAC,EACF,CAAC,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,CAAC,CAC9D,CAAA;IAED,MAAM,UAAU,GAAG,WAAW,KAAK,UAAU,CAAA;IAE7C,MAAM,iBAAiB,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;QACpE,IACE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;YAC3B,+CAA+C;YAC/C,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,KAAK,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,KAAK,KAAK,CAAC;YAC/D,KAAK,CAAC,KAAK,CAAC,KAAK,KAAK,SAAS,EAC/B;YACA,OAAO,KAAK,CAAC,YAAY,CAAC,KAAgC,EAAE;gBAC1D,KAAK,EAAE,GAAG;aACX,CAAC,CAAA;SACH;QAED,OAAO,KAAK,CAAA;IACd,CAAC,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY;QACvC,6CACM,IAAI,IACR,GAAG,EAAE,GAAG,yBACY,MAAM,EAC1B,SAAS,EAAE,OAAO,CAChB,uCAAuC,EACvC,oBAAoB,CAAC,WAAW,CAAC,CAAC,IAAI,EACtC,gBAAgB,CAAC,OAAO,CAAC,CAAC,IAAI,EAC9B,SAAS,CACV,sBACiB,WAAW;YAE7B,6BACE,SAAS,EAAE,MAAM,CACf,gBAAgB,CAAC,OAAO,CAAC,CAAC,QAAQ,EAClC,oBAAoB,CAAC,WAAW,CAAC,CAAC,QAAQ,EAC1C,mDAAmD,CACpD;gBAED,6BACE,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,IAAI,UAAU,CAAC,EACnD,IAAI,EAAC,SAAS,EACd,QAAQ,EAAE,CAAC,CAAC,IAEX,iBAAiB,CACd,CACF,CACF,CACe,CACxB,CAAA;AACH,CAAC,CACF,CAAA;AAED,IAAI,CAAC,WAAW,GAAG,MAAM,CAAA;AAEzB,eAAe,IAAI,CAAA"}

package/dist-package/src/Tabs/TabsContext.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export declare type TabsValueType = string | number | null;
+export interface TabsContextValue {
+    value: TabsValueType;
+    onChange: (event: React.ChangeEvent<{}>, value: TabsValueType) => void;
+    orientation: 'horizontal' | 'vertical';
+    variant: 'scrollable' | 'fullWidth';
+}
+export declare const TabsContext: React.Context<TabsContextValue>;
+export declare const useTabsContext: () => TabsContextValue;
+//# sourceMappingURL=TabsContext.d.ts.map

package/dist-package/src/Tabs/TabsContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsContext.d.ts","sourceRoot":"","sources":["../../../src/Tabs/TabsContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,oBAAY,aAAa,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,CAAA;AAElD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,aAAa,CAAA;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IACtE,WAAW,EAAE,YAAY,GAAG,UAAU,CAAA;IACtC,OAAO,EAAE,YAAY,GAAG,WAAW,CAAA;CACpC;AAED,eAAO,MAAM,WAAW,iCAKtB,CAAA;AAEF,eAAO,MAAM,cAAc,wBAQ1B,CAAA"}

package/dist-package/src/Tabs/TabsContext.js

@@ -0,0 +1,15 @@
+import React from 'react';
+export const TabsContext = React.createContext({
+    value: null,
+    onChange: () => { },
+    orientation: 'horizontal',
+    variant: 'scrollable',
+});
+export const useTabsContext = () => {
+    const context = React.useContext(TabsContext);
+    if (!context) {
+        throw new Error('useTabsContext must be used within a TabsProvider');
+    }
+    return context;
+};
+//# sourceMappingURL=TabsContext.js.map

package/dist-package/src/Tabs/TabsContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsContext.js","sourceRoot":"","sources":["../../../src/Tabs/TabsContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAWzB,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAAmB;IAC/D,KAAK,EAAE,IAAI;IACX,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC;IAClB,WAAW,EAAE,YAAY;IACzB,OAAO,EAAE,YAAY;CACtB,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAA;IAE7C,IAAI,CAAC,OAAO,EAAE;QACZ,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAA;KACrE;IAED,OAAO,OAAO,CAAA;AAChB,CAAC,CAAA"}

package/dist-package/src/Tabs/index.d.ts

@@ -1,6 +1,7 @@
 import type { OmitInternalProps } from '@toptal/picasso-shared';
-import type { Props, TabsValueType } from './Tabs';
+import type { Props } from './Tabs';
+import type { TabsValueType } from './TabsContext';
 export { default as Tabs } from './Tabs';
 export declare type TabsProps = OmitInternalProps<Props<TabsValueType>>;
-export type { TabsValueType } from './Tabs';
+export type { TabsValueType } from './TabsContext';
 //# sourceMappingURL=index.d.ts.map

package/dist-package/src/Tabs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAE/D,OAAO,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAA;AAElD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAA;AACxC,oBAAY,SAAS,GAAG,iBAAiB,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAA;AAC/D,YAAY,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAE/D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAA;AACnC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAElD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAA;AACxC,oBAAY,SAAS,GAAG,iBAAiB,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAA;AAC/D,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA"}

package/dist-package/src/Tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Tabs/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Tabs/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-tabs",
-  "version": "5.0.15-alpha-ff-7-tabs-19babbfd6.8+19babbfd6",
+  "version": "5.0.15-alpha-ff-7-tabs-17eb872bb.13+17eb872bb",
   "description": "Toptal UI components library - Tabs",
   "publishConfig": {
     "access": "public"
@@ -22,14 +22,13 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@mui/base": "5.0.0-beta.58",
-    "@toptal/picasso-container": "3.1.3-alpha-ff-7-tabs-19babbfd6.8+19babbfd6",
-    "@toptal/picasso-icons": "1.12.2-alpha-ff-7-tabs-19babbfd6.8+19babbfd6",
-    "@toptal/picasso-shared": "15.0.1-alpha-ff-7-tabs-19babbfd6.354+19babbfd6",
-    "@toptal/picasso-typography": "4.0.4-alpha-ff-7-tabs-19babbfd6.8+19babbfd6",
-    "@toptal/picasso-typography-overflow": "4.0.4-alpha-ff-7-tabs-19babbfd6.8+19babbfd6",
-    "@toptal/picasso-user-badge": "5.1.12-alpha-ff-7-tabs-19babbfd6.8+19babbfd6",
-    "@toptal/picasso-utils": "3.1.1-alpha-ff-7-tabs-19babbfd6.8+19babbfd6",
+    "@toptal/picasso-container": "3.1.3-alpha-ff-7-tabs-17eb872bb.13+17eb872bb",
+    "@toptal/picasso-icons": "1.12.2-alpha-ff-7-tabs-17eb872bb.13+17eb872bb",
+    "@toptal/picasso-shared": "15.0.1-alpha-ff-7-tabs-17eb872bb.359+17eb872bb",
+    "@toptal/picasso-typography": "4.0.4-alpha-ff-7-tabs-17eb872bb.13+17eb872bb",
+    "@toptal/picasso-typography-overflow": "4.0.4-alpha-ff-7-tabs-17eb872bb.13+17eb872bb",
+    "@toptal/picasso-user-badge": "5.1.12-alpha-ff-7-tabs-17eb872bb.13+17eb872bb",
+    "@toptal/picasso-utils": "3.1.1-alpha-ff-7-tabs-17eb872bb.13+17eb872bb",
     "ap-style-title-case": "^1.1.2"
   },
   "sideEffects": [
@@ -46,14 +45,14 @@
     ".": "./dist-package/src/index.js"
   },
   "devDependencies": {
-    "@toptal/picasso-provider": "5.0.1-alpha-ff-7-tabs-19babbfd6.275+19babbfd6",
-    "@toptal/picasso-tailwind-merge": "2.0.4-alpha-ff-7-tabs-19babbfd6.8+19babbfd6",
-    "@toptal/picasso-test-utils": "1.1.2-alpha-ff-7-tabs-19babbfd6.354+19babbfd6"
+    "@toptal/picasso-provider": "5.0.1-alpha-ff-7-tabs-17eb872bb.280+17eb872bb",
+    "@toptal/picasso-tailwind-merge": "2.0.4-alpha-ff-7-tabs-17eb872bb.13+17eb872bb",
+    "@toptal/picasso-test-utils": "1.1.2-alpha-ff-7-tabs-17eb872bb.359+17eb872bb"
   },
   "files": [
     "dist-package/**",
     "!dist-package/tsconfig.tsbuildinfo",
     "src"
   ],
-  "gitHead": "19babbfd627b4461663b6782aa7493f16f4181bc"
+  "gitHead": "17eb872bb0410897243666d7cc7a58eb1479ed78"
 }

package/src/Tab/Tab.tsx

@@ -1,13 +1,11 @@
 import type { ReactNode, HTMLAttributes, ReactElement } from 'react'
-import React, { forwardRef, useContext } from 'react'
-import type { TabProps } from '@mui/base/Tab'
-import { Tab as MUITab } from '@mui/base/Tab'
+import React, { forwardRef } from 'react'
 import type { BaseProps, TextLabelProps } from '@toptal/picasso-shared'
 import { useTitleCase } from '@toptal/picasso-shared'
 import { UserBadge } from '@toptal/picasso-user-badge'
 import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge'
 
-import { TabsContext } from '../Tabs/Tabs'
+import { useTabsContext, type TabsValueType } from '../Tabs/TabsContext'
 import { TabLabel } from '../TabLabel'
 import { TabDescription } from '../TabDescription'
 
@@ -21,8 +19,8 @@ export interface Props
    */
   disabled?: boolean
 
-  /** You can provide your own value. Otherwise, we fallback to the child position index */
-  value?: TabProps['value']
+  /** The value of the tab */
+  value?: TabsValueType
 
   /** The label element */
   label?: ReactNode
@@ -38,9 +36,9 @@ export interface Props
 
   // Properties below are managed by Tabs component
 
-  selected?: boolean
-  onChange?: TabProps['onChange']
-  onClick?: TabProps['onClick']
+  // selected?: boolean
+  // onChange?: TabProps['onChange']
+  // onClick?: TabProps['onClick']
 }
 
 const getOpacityClass = (
@@ -51,7 +49,6 @@ const getOpacityClass = (
   if (disabled) {
     return 'opacity-50'
   }
-
   if (selected || orientation === 'vertical') {
     return 'opacity-100 '
   }
@@ -60,13 +57,13 @@ const getOpacityClass = (
 }
 
 const wrapperClassesByOrientation = {
-  horizontal: 'inline-flex items-center flex-col justify-center',
+  horizontal: 'inline-flex flex-row items-center justify-center',
   vertical: 'block',
 }
 
 const rootClassesByOrientation = (selected: boolean) => ({
   horizontal: [
-    'm-0 [&:not(:last-child)]:mr-8 pt-[0.5625rem] pb-[0.4375rem] px-0',
+    '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',
     selected && 'shadow-blue-500 shadow-[inset_0_-2px_0]',
@@ -105,17 +102,29 @@ export const Tab = forwardRef<HTMLButtonElement, Props>(function Tab(
     value,
     label,
     icon,
-    onChange,
-    onClick,
     titleCase: propsTitleCase,
     description,
     avatar,
     className,
+    onClick,
     ...rest
   } = props
   const titleCase = useTitleCase(propsTitleCase)
-  const { orientation, variant } = useContext(TabsContext)
+  const {
+    value: selectedValue,
+    onChange,
+    orientation,
+    variant,
+  } = useTabsContext()
   const isHorizontal = orientation === 'horizontal'
+  const selected = value === selectedValue
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    if (!disabled && onChange) {
+      onChange(event, value as TabsValueType)
+    }
+    onClick?.(event)
+  }
 
   const renderLabel = getLabelComponent({
     avatar,
@@ -127,65 +136,44 @@ export const Tab = forwardRef<HTMLButtonElement, Props>(function Tab(
   })
 
   return (
-    <MUITab
-      className=''
-      {...rest}
+    <button
+      className={twMerge(
+        getOpacityClass(selected, !!disabled, orientation),
+        rootClassesByOrientation(selected)[orientation],
+        classesByVariant[variant],
+        disabled ? 'cursor-default text-gray-500' : 'cursor-pointer',
+        disabled && 'pointer-events-none',
+        icon && isHorizontal && 'min-h-0 pt-0 pr-6',
+        'min-w-0 sm:min-w-[160px] md:min-w-[auto]',
+        'border-0 cursor-pointer inline-flex outline-none',
+        'items-center select-none align-middle appearance-none',
+        'justify-center no-underline [-webkit-tap-highlight-color:transparent]',
+        'normal-case whitespace-normal leading-4',
+        'relative ',
+        className
+      )}
       ref={ref}
-      tabIndex={0}
+      tabIndex={disabled ? -1 : 0}
       disabled={disabled}
-      value={value}
-      onChange={onChange}
-      onClick={onClick}
-      slotProps={{
-        root: ownerState => {
-          return {
-            className: twMerge(
-              getOpacityClass(
-                ownerState.selected,
-                ownerState.disabled,
-                orientation
-              ),
-              rootClassesByOrientation(ownerState.selected)[orientation],
-              classesByVariant[variant],
-              ownerState.disabled
-                ? 'cursor-default text-gray-500'
-                : 'cursor-pointer',
-              ownerState.disabled && 'pointer-events-none',
-              icon && isHorizontal && 'min-h-0 pt-[0.5625rem] pr-6',
-              'min-w-0 sm:min-w-[160px] md:min-w-[auto]',
-              'border-0 cursor-pointer inline-flex outline-none',
-              'items-center select-none align-middle appearance-none',
-              'justify-center no-underline [-webkit-tap-highlight-color:transparent]',
-              'normal-case whitespace-normal leading-4',
-              'relative ',
-              className
-            ),
-          }
-        },
-      }}
+      onClick={handleClick}
+      role='tab'
+      aria-selected={selected}
+      aria-disabled={disabled}
+      type='button'
+      {...rest}
     >
       <span
         className={twJoin('w-full', wrapperClassesByOrientation[orientation])}
       >
         {renderLabel}
-        {icon && <span className='absolute right-0 mb-0 h-4'>{icon}</span>}
+        {icon && <span className='absolute right-0 mb-0'>{icon}</span>}
       </span>
-    </MUITab>
+    </button>
   )
 })
 
-Tab.defaultProps = {}
-
 Tab.displayName = 'Tab'
 
-type GetLabelComponentProps = {
-  avatar?: string | null
-  description?: string
-  disabled?: boolean
-  label?: React.ReactNode
-  orientation: 'horizontal' | 'vertical'
-  titleCase?: boolean
-}
 const getLabelComponent = ({
   avatar,
   description,
@@ -193,14 +181,19 @@ const getLabelComponent = ({
   label,
   orientation,
   titleCase,
-}: GetLabelComponentProps): React.ReactNode => {
+}: {
+  avatar?: string | null
+  description?: string
+  disabled?: boolean
+  label?: React.ReactNode
+  orientation: 'horizontal' | 'vertical'
+  titleCase?: boolean
+}): React.ReactNode => {
   if (!label) {
     return null
   }
-
   const isHorizontal = orientation === 'horizontal'
   const isCustomLabel = typeof label !== 'string'
-
   const Label = () => (
     <TabLabel titleCase={titleCase} label={label} orientation={orientation} />
   )
@@ -208,7 +201,6 @@ const getLabelComponent = ({
   if (isHorizontal || isCustomLabel) {
     return <Label />
   }
-
   if (typeof avatar === 'undefined') {
     return (
       <>

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

@@ -6,31 +6,29 @@ exports[`Tab Tab disabled tab 1`] = `
     class="Picasso-root"
   >
     <div
-      class="MuiTabs-root Tabs-horizontal"
+      aria-orientation="horizontal"
+      class="relative min-h flex overflow-hidden overflow-x"
       data-component-type="tabs"
     >
       <div
-        class="MuiTabs-scrollable"
-        style="width: 99px; height: 99px; position: absolute; top: -9999px; overflow: scroll;"
-      />
-      <div
-        class="MuiTabs-scroller MuiTabs-scrollable"
-        style="margin-bottom: 0px;"
+        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"
       >
         <div
-          class="MuiTabs-flexContainer"
+          class="flex"
           role="tablist"
+          tabindex="-1"
         >
           <button
+            aria-disabled="true"
             aria-selected="false"
-            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit Mui-disabled Mui-disabled"
+            class="opacity-50 m-0 [&:not(:last-child)]:mr-8 pt-0 pb-[0.4375rem] px-0 text-center bg-transparent transition-shadow z-10 rounded-none shrink-0 max-w text-gray pointer-events 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"
             disabled=""
             role="tab"
             tabindex="-1"
             type="button"
           >
             <span
-              class="MuiTab-wrapper PicassoTab-wrapper"
+              class="w-full inline-flex flex-row items-center justify-center"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold leading-[1.1rem]"
@@ -40,10 +38,6 @@ exports[`Tab Tab disabled tab 1`] = `
             </span>
           </button>
         </div>
-        <span
-          class="PrivateTabIndicator-root PrivateTabIndicator-colorSecondary MuiTabs-indicator"
-          style="left: 0px; width: 0px;"
-        />
       </div>
     </div>
   </div>
@@ -56,30 +50,27 @@ exports[`Tab Tab renders 1`] = `
     class="Picasso-root"
   >
     <div
-      class="MuiTabs-root Tabs-horizontal"
+      aria-orientation="horizontal"
+      class="relative min-h flex overflow-hidden overflow-x"
       data-component-type="tabs"
     >
       <div
-        class="MuiTabs-scrollable"
-        style="width: 99px; height: 99px; position: absolute; top: -9999px; overflow: scroll;"
-      />
-      <div
-        class="MuiTabs-scroller MuiTabs-scrollable"
-        style="margin-bottom: 0px;"
+        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"
       >
         <div
-          class="MuiTabs-flexContainer"
+          class="flex"
           role="tablist"
+          tabindex="-1"
         >
           <button
             aria-selected="false"
-            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit"
+            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"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="MuiTab-wrapper PicassoTab-wrapper"
+              class="w-full inline-flex flex-row items-center justify-center"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold leading-[1.1rem]"
@@ -89,10 +80,6 @@ exports[`Tab Tab renders 1`] = `
             </span>
           </button>
         </div>
-        <span
-          class="PrivateTabIndicator-root PrivateTabIndicator-colorSecondary MuiTabs-indicator"
-          style="left: 0px; width: 0px;"
-        />
       </div>
     </div>
   </div>
@@ -105,46 +92,43 @@ exports[`Tab Tab tab with icon 1`] = `
     class="Picasso-root"
   >
     <div
-      class="MuiTabs-root Tabs-horizontal"
+      aria-orientation="horizontal"
+      class="relative min-h flex overflow-hidden overflow-x"
       data-component-type="tabs"
     >
       <div
-        class="MuiTabs-scrollable"
-        style="width: 99px; height: 99px; position: absolute; top: -9999px; overflow: scroll;"
-      />
-      <div
-        class="MuiTabs-scroller MuiTabs-scrollable"
-        style="margin-bottom: 0px;"
+        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"
       >
         <div
-          class="MuiTabs-flexContainer"
+          class="flex"
           role="tablist"
+          tabindex="-1"
         >
           <button
             aria-selected="false"
-            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit MuiTab-labelIcon"
+            class="opacity-70 m-0 [&:not(:last-child)]:mr-8 pb-[0.4375rem] px-0 text-center bg-transparent transition-shadow z-10 rounded-none text-black shrink-0 max-w min-h pt-0 pr-6 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"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="MuiTab-wrapper PicassoTab-wrapper"
+              class="w-full inline-flex flex-row items-center justify-center"
             >
-              <div
-                id="Icon"
-              />
               <div
                 class="m-0 text-sm text-inherit font-semibold leading-[1.1rem]"
               >
                 Tab Label
               </div>
+              <span
+                class="absolute right-0 mb-0"
+              >
+                <div
+                  id="Icon"
+                />
+              </span>
             </span>
           </button>
         </div>
-        <span
-          class="PrivateTabIndicator-root PrivateTabIndicator-colorSecondary MuiTabs-indicator"
-          style="left: 0px; width: 0px;"
-        />
       </div>
     </div>
   </div>

package/src/Tab/story/IconOrBadge.example.tsx

@@ -3,10 +3,12 @@ import { Container, Tabs, Tooltip, Badge } from '@toptal/picasso'
 import { SPACING_4 } from '@toptal/picasso-utils'
 import { Exclamation16 } from '@toptal/picasso-icons'
 
+import type { TabsValueType } from '../../Tabs/TabsContext'
+
 const Example = () => {
-  const [value, setValue] = React.useState(0)
+  const [value, setValue] = React.useState<TabsValueType>(0)
 
-  const handleChange = (_: React.ChangeEvent<{}>, newValue: number) => {
+  const handleChange = (_: React.ChangeEvent<{}>, newValue: TabsValueType) => {
     setValue(newValue)
   }
 
@@ -24,7 +26,10 @@ const Example = () => {
           }
         />
         <Tabs.Tab label='Label' />
-        <Tabs.Tab label='Label' icon={<Badge content={10} variant='white' />} />
+        <Tabs.Tab
+          label='Label'
+          icon={<Badge content={10} variant='white' className='mt-[1px]' />}
+        />
       </Tabs>
 
       {value === 0 && (

package/src/Tabs/Tabs.tsx

@@ -1,18 +1,16 @@
-import type { ReactNode } from 'react'
-import React, { forwardRef, useMemo } from 'react'
-import { Tabs as MUITabs } from '@mui/base/Tabs'
-import { TabsList } from '@mui/base/TabsList'
+import type { ReactNode, ChangeEvent } from 'react'
+import React, { forwardRef, useMemo, useCallback } from 'react'
 import type { BaseProps } from '@toptal/picasso-shared'
 import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge'
 
-export type TabsValueType = string | number | null
+import { TabsContext, type TabsValueType } from './TabsContext'
 
 export interface Props<V extends TabsValueType> extends BaseProps {
   /** Tabs content containing Tab components */
   children: ReactNode
 
   /** Callback fired when the value changes. */
-  onChange?: (event: React.ChangeEvent<{}> | null, value: V) => void
+  onChange?: (event: ChangeEvent<{}>, value: V) => void
 
   /**
    * The value of the currently selected Tab.
@@ -25,12 +23,13 @@ export interface Props<V extends TabsValueType> extends BaseProps {
 
   /** Determines additional display behavior of the tabs */
   variant?: 'scrollable' | 'fullWidth'
-}
 
-export const TabsContext = React.createContext<{
-  orientation: 'horizontal' | 'vertical'
-  variant: 'scrollable' | 'fullWidth'
-}>({ orientation: 'horizontal', variant: 'scrollable' })
+  /** The default value. Use when the component is not controlled. */
+  defaultValue?: V
+
+  /** The direction of the text. */
+  direction?: 'ltr' | 'rtl'
+}
 
 const indicatorClasses = [
   'after:absolute',
@@ -65,48 +64,77 @@ const classesByVariant = {
   },
 }
 
-// eslint-disable-next-line react/display-name
 export const Tabs = forwardRef<HTMLDivElement, Props<TabsValueType>>(
   function Tabs(props, ref) {
     const {
       children,
       orientation = 'horizontal',
       onChange,
-      value,
+      value: valueProp,
+      defaultValue,
       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,
       }),
-      [orientation, variant]
+      [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
+    })
+
     return (
       <TabsContext.Provider value={contextValue}>
-        <MUITabs
+        <div
           {...rest}
+          ref={ref}
           data-component-type='tabs'
-          slotProps={{
-            root: {
-              ref,
-              className: twMerge(
-                'relative min-h-0 flex overflow-hidden',
-                classesByOrientation[orientation].root,
-                classesByVariant[variant].root,
-                className
-              ),
-            },
-          }}
-          onChange={onChange}
-          value={value}
-          orientation={orientation}
+          className={twMerge(
+            'relative min-h-0 flex overflow-hidden',
+            classesByOrientation[orientation].root,
+            classesByVariant[variant].root,
+            className
+          )}
+          aria-orientation={orientation}
         >
           <div
             className={twJoin(
@@ -115,11 +143,15 @@ export const Tabs = forwardRef<HTMLDivElement, Props<TabsValueType>>(
               'flex-auto inline-block relative whitespace-nowrap'
             )}
           >
-            <TabsList className={twJoin('flex', isVertical && 'flex-col')}>
-              {children}
-            </TabsList>
+            <div
+              className={twJoin('flex', isVertical && 'flex-col')}
+              role='tablist'
+              tabIndex={-1}
+            >
+              {childrenWithIndex}
+            </div>
           </div>
-        </MUITabs>
+        </div>
       </TabsContext.Provider>
     )
   }

package/src/Tabs/TabsContext.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+export type TabsValueType = string | number | null
+
+export interface TabsContextValue {
+  value: TabsValueType
+  onChange: (event: React.ChangeEvent<{}>, value: TabsValueType) => void
+  orientation: 'horizontal' | 'vertical'
+  variant: 'scrollable' | 'fullWidth'
+}
+
+export const TabsContext = React.createContext<TabsContextValue>({
+  value: null,
+  onChange: () => {},
+  orientation: 'horizontal',
+  variant: 'scrollable',
+})
+
+export const useTabsContext = () => {
+  const context = React.useContext(TabsContext)
+
+  if (!context) {
+    throw new Error('useTabsContext must be used within a TabsProvider')
+  }
+
+  return context
+}

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

@@ -6,29 +6,28 @@ exports[`Tabs renders 1`] = `
     class="Picasso-root"
   >
     <div
-      class="MuiTabs-root Tabs-horizontal"
+      aria-orientation="horizontal"
+      class="relative min-h flex overflow-hidden overflow-x"
       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"
       >
         <div
-          class="base-TabsList base-TabsList flex"
+          class="flex"
           role="tablist"
           tabindex="-1"
         >
           <button
-            aria-disabled="false"
             aria-selected="false"
-            class="base-Tab opacity-70 m-0 [&:not(:last-child)]:mr-8 pt-[0.5625rem] 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="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"
             data-testid="tab-1"
-            id=":r0:"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="w-full inline-flex items-center flex-col justify-center"
+              class="w-full inline-flex flex-row items-center justify-center"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold leading-[1.1rem]"
@@ -38,17 +37,15 @@ exports[`Tabs renders 1`] = `
             </span>
           </button>
           <button
-            aria-disabled="false"
             aria-selected="false"
-            class="base-Tab opacity-70 m-0 [&:not(:last-child)]:mr-8 pt-[0.5625rem] 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="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"
             data-testid="tab-2"
-            id=":r1:"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="w-full inline-flex items-center flex-col justify-center"
+              class="w-full inline-flex flex-row items-center justify-center"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold leading-[1.1rem]"
@@ -70,29 +67,28 @@ exports[`Tabs renders in full width 1`] = `
     class="Picasso-root"
   >
     <div
-      class="MuiTabs-root Tabs-horizontal"
+      aria-orientation="horizontal"
+      class="relative min-h flex overflow-hidden"
       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"
       >
         <div
-          class="base-TabsList base-TabsList flex"
+          class="flex"
           role="tablist"
           tabindex="-1"
         >
           <button
-            aria-disabled="false"
             aria-selected="false"
-            class="base-Tab opacity-70 m-0 [&:not(:last-child)]:mr-8 pt-[0.5625rem] 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="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"
             data-testid="tab-1"
-            id=":re:"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="w-full inline-flex items-center flex-col justify-center"
+              class="w-full inline-flex flex-row items-center justify-center"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold leading-[1.1rem]"
@@ -102,17 +98,15 @@ exports[`Tabs renders in full width 1`] = `
             </span>
           </button>
           <button
-            aria-disabled="false"
             aria-selected="false"
-            class="base-Tab opacity-70 m-0 [&:not(:last-child)]:mr-8 pt-[0.5625rem] 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="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"
             data-testid="tab-2"
-            id=":rf:"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="w-full inline-flex items-center flex-col justify-center"
+              class="w-full inline-flex flex-row items-center justify-center"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold leading-[1.1rem]"
@@ -134,24 +128,22 @@ exports[`Tabs renders in vertical orientation 1`] = `
     class="Picasso-root"
   >
     <div
-      class="MuiTabs-root Tabs-vertical MuiTabs-vertical"
+      aria-orientation="vertical"
+      class="relative min-h flex overflow-hidden w-[200px] m-0 flex-col overflow-x"
       data-component-type="tabs"
     >
       <div
         class="pl-2 flex-auto inline-block relative whitespace-nowrap"
       >
         <div
-          aria-orientation="vertical"
-          class="base-TabsList base-TabsList flex flex-col"
+          class="flex flex-col"
           role="tablist"
           tabindex="-1"
         >
           <button
-            aria-disabled="false"
             aria-selected="false"
-            class="base-Tab 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="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"
             data-testid="tab-1"
-            id=":r2:"
             role="tab"
             tabindex="0"
             type="button"
@@ -167,11 +159,9 @@ exports[`Tabs renders in vertical orientation 1`] = `
             </span>
           </button>
           <button
-            aria-disabled="false"
             aria-selected="false"
-            class="base-Tab 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="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"
             data-testid="tab-2"
-            id=":r3:"
             role="tab"
             tabindex="0"
             type="button"
@@ -199,29 +189,28 @@ exports[`Tabs renders with a pre-selected option 1`] = `
     class="Picasso-root"
   >
     <div
-      class="MuiTabs-root Tabs-horizontal"
+      aria-orientation="horizontal"
+      class="relative min-h flex overflow-hidden overflow-x"
       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"
       >
         <div
-          class="base-TabsList base-TabsList flex"
+          class="flex"
           role="tablist"
           tabindex="-1"
         >
           <button
-            aria-disabled="false"
             aria-selected="false"
-            class="base-Tab opacity-70 m-0 [&:not(:last-child)]:mr-8 pt-[0.5625rem] 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="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"
             data-testid="tab-1"
-            id=":r4:"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="w-full inline-flex items-center flex-col justify-center"
+              class="w-full inline-flex flex-row items-center justify-center"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold leading-[1.1rem]"
@@ -231,17 +220,15 @@ exports[`Tabs renders with a pre-selected option 1`] = `
             </span>
           </button>
           <button
-            aria-disabled="false"
             aria-selected="true"
-            class="base-Tab base- opacity-100 m-0 [&:not(:last-child)]:mr-8 pt-[0.5625rem] 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="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"
             data-testid="tab-2"
-            id=":r5:"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="w-full inline-flex items-center flex-col justify-center"
+              class="w-full inline-flex flex-row items-center justify-center"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold leading-[1.1rem]"
@@ -270,29 +257,28 @@ exports[`Tabs renders with a pre-selected option using custom value 1`] = `
     class="Picasso-root"
   >
     <div
-      class="MuiTabs-root Tabs-horizontal"
+      aria-orientation="horizontal"
+      class="relative min-h flex overflow-hidden overflow-x"
       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"
       >
         <div
-          class="base-TabsList base-TabsList flex"
+          class="flex"
           role="tablist"
           tabindex="-1"
         >
           <button
-            aria-disabled="false"
             aria-selected="true"
-            class="base-Tab base- opacity-100 m-0 [&:not(:last-child)]:mr-8 pt-[0.5625rem] 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="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"
             data-testid="tab-1"
-            id=":r6:"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="w-full inline-flex items-center flex-col justify-center"
+              class="w-full inline-flex flex-row items-center justify-center"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold leading-[1.1rem]"
@@ -302,17 +288,15 @@ exports[`Tabs renders with a pre-selected option using custom value 1`] = `
             </span>
           </button>
           <button
-            aria-disabled="false"
             aria-selected="false"
-            class="base-Tab opacity-70 m-0 [&:not(:last-child)]:mr-8 pt-[0.5625rem] 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="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"
             data-testid="tab-2"
-            id=":r7:"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="w-full inline-flex items-center flex-col justify-center"
+              class="w-full inline-flex flex-row items-center justify-center"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold leading-[1.1rem]"

package/src/Tabs/index.ts

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

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

@@ -2,10 +2,12 @@ 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(0)
+  const [value, setValue] = React.useState<TabsValueType>(0)
 
-  const handleChange = (_: React.ChangeEvent<{}> | null, newValue: number) => {
+  const handleChange = (_: React.ChangeEvent<{}>, newValue: TabsValueType) => {
     setValue(newValue)
   }