@toptal/picasso-tabs 2.0.9 → 3.0.1

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

@@ -1,8 +1,8 @@
 import type { ReactNode, HTMLAttributes, ReactElement } from 'react';
 import React from 'react';
-import type { TabProps } from '@material-ui/core';
+import type { TabProps } from '@mui/base/Tab';
 import type { BaseProps, TextLabelProps } from '@toptal/picasso-shared';
-export interface Props extends BaseProps, TextLabelProps, Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+export interface Props extends BaseProps, TextLabelProps, Omit<HTMLAttributes<HTMLButtonElement>, 'onChange'> {
     /**
      * If true, the tab will be disabled
      * @default false
@@ -22,6 +22,6 @@ export interface Props extends BaseProps, TextLabelProps, Omit<HTMLAttributes<HT
     onChange?: TabProps['onChange'];
     onClick?: TabProps['onClick'];
 }
-export declare const Tab: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export declare const Tab: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement>>;
 export default Tab;
 //# sourceMappingURL=Tab.d.ts.map

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;AAGrD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AASvE,MAAM,WAAW,KACf,SAAQ,SAAS,EACf,cAAc,EACd,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAClD;;;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;AAID,eAAO,MAAM,GAAG,8EA8Cd,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,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"}

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

@@ -10,21 +10,62 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { forwardRef, useContext } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import { Tab as MUITab } from '@material-ui/core';
+import { Tab as MUITab } from '@mui/base/Tab';
 import { useTitleCase } from '@toptal/picasso-shared';
 import { UserBadge } from '@toptal/picasso-user-badge';
-import styles from './styles';
-import { TabsOrientationContext } from '../Tabs/Tabs';
+import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge';
+import { TabsContext } from '../Tabs/Tabs';
 import { TabLabel } from '../TabLabel';
 import { TabDescription } from '../TabDescription';
-const useStyles = makeStyles(styles, { name: 'PicassoTab' });
+const getOpacityClass = (selected, disabled, orientation) => {
+    if (disabled) {
+        return 'opacity-50';
+    }
+    if (selected || orientation === 'vertical') {
+        return 'opacity-100 ';
+    }
+    return 'opacity-70';
+};
+const wrapperClassesByOrientation = {
+    horizontal: 'inline-flex items-center flex-col justify-center',
+    vertical: 'block',
+};
+const rootClassesByOrientation = (selected) => ({
+    horizontal: [
+        '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',
+        selected ? 'text-black' : 'text-inheritColor',
+        selected && 'shadow-blue-500 shadow-[inset_0_-2px_0]',
+    ],
+    vertical: [
+        ' first:mt-4 last:mb-4 my-1 mx-0 py-2 px-4',
+        'text-left rounded-l-sm rounded-r-none transition-all',
+        'w-full overflow-hidden',
+        selected && 'shadow-1',
+        selected && [
+            'before:absolute',
+            'before:content-[""]',
+            'before:bottom-0',
+            'before:left-0',
+            'before:top-0',
+            'before:w-[3px]',
+            'before:bg-blue-500',
+        ],
+        selected
+            ? 'bg-gray-50 text-black'
+            : 'bg-gray-100 hover:bg-gray-200 text-graphite-700 hover:text-black',
+    ],
+});
+const classesByVariant = {
+    scrollable: 'shrink-0 max-w-[264px]',
+    fullWidth: 'shrink flex-grow basis-0',
+};
 export const Tab = forwardRef(function Tab(props, ref) {
-    const { disabled, value, label, icon, selected, onChange, onClick, titleCase: propsTitleCase, description, avatar } = props, rest = __rest(props, ["disabled", "value", "label", "icon", "selected", "onChange", "onClick", "titleCase", "description", "avatar"]);
-    const classes = useStyles();
+    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 titleCase = useTitleCase(propsTitleCase);
-    const orientation = useContext(TabsOrientationContext);
-    const labelComponent = getLabelComponent({
+    const { orientation, variant } = useContext(TabsContext);
+    const isHorizontal = orientation === 'horizontal';
+    const renderLabel = getLabelComponent({
         avatar,
         description,
         disabled,
@@ -32,11 +73,18 @@ export const Tab = forwardRef(function Tab(props, ref) {
         orientation,
         titleCase,
     });
-    return (React.createElement(MUITab, Object.assign({}, rest, { ref: ref, tabIndex: 0, disabled: disabled, label: labelComponent, icon: icon, value: value, selected: selected, onChange: onChange, onClick: onClick, classes: {
-            root: classes[orientation],
-            selected: classes.selected,
-            wrapper: classes.wrapper,
-        } })));
+    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),
+                };
+            },
+        } }),
+        React.createElement("span", { className: twJoin('w-full', wrapperClassesByOrientation[orientation]) },
+            renderLabel,
+            icon && React.createElement("span", { className: 'absolute right-0 mb-0 h-4' }, icon))));
 });
 Tab.defaultProps = {};
 Tab.displayName = 'Tab';

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

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../src/Tab/Tab.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAErD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAErD,OAAO,EAAE,GAAG,IAAI,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AAEtD,OAAO,MAAM,MAAM,UAAU,CAAA;AAC7B,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAA;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAkClD,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,CAAA;AAEnE,MAAM,CAAC,MAAM,GAAG,GAAG,UAAU,CAAwB,SAAS,GAAG,CAAC,KAAK,EAAE,GAAG;IAC1E,MAAM,EACJ,QAAQ,EACR,KAAK,EACL,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,SAAS,EAAE,cAAc,EACzB,WAAW,EACX,MAAM,KAEJ,KAAK,EADJ,IAAI,UACL,KAAK,EAZH,+GAYL,CAAQ,CAAA;IACT,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAC3B,MAAM,SAAS,GAAG,YAAY,CAAC,cAAc,CAAC,CAAA;IAC9C,MAAM,WAAW,GAAG,UAAU,CAAC,sBAAsB,CAAC,CAAA;IAEtD,MAAM,cAAc,GAAG,iBAAiB,CAAC;QACvC,MAAM;QACN,WAAW;QACX,QAAQ;QACR,KAAK;QACL,WAAW;QACX,SAAS;KACV,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,MAAM,oBACD,IAAI,IACR,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,CAAC,EACX,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,cAAc,EACrB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE;YACP,IAAI,EAAE,OAAO,CAAC,WAAW,CAAC;YAC1B,QAAQ,EAAE,OAAO,CAAC,QAAQ;YAC1B,OAAO,EAAE,OAAO,CAAC,OAAO;SACzB,IACD,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,GAAG,CAAC,YAAY,GAAG,EAAE,CAAA;AAErB,GAAG,CAAC,WAAW,GAAG,KAAK,CAAA;AAUvB,MAAM,iBAAiB,GAAG,CAAC,EACzB,MAAM,EACN,WAAW,EACX,QAAQ,EACR,KAAK,EACL,WAAW,EACX,SAAS,GACc,EAAmB,EAAE;IAC5C,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,IAAI,CAAA;KACZ;IAED,MAAM,YAAY,GAAG,WAAW,KAAK,YAAY,CAAA;IACjD,MAAM,aAAa,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAA;IAE/C,MAAM,KAAK,GAAG,GAAG,EAAE,CAAC,CAClB,oBAAC,QAAQ,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,GAAI,CAC3E,CAAA;IAED,IAAI,YAAY,IAAI,aAAa,EAAE;QACjC,OAAO,oBAAC,KAAK,OAAG,CAAA;KACjB;IAED,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;QACjC,OAAO,CACL;YACE,oBAAC,KAAK,OAAG;YACR,WAAW,IAAI,CACd,oBAAC,cAAc,IAAC,QAAQ,EAAE,QAAQ,IAAG,WAAW,CAAkB,CACnE,CACA,CACJ,CAAA;KACF;IAED,OAAO,CACL,oBAAC,SAAS,IAAC,UAAU,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,IACtD,WAAW,IAAI,CACd,oBAAC,cAAc,IAAC,QAAQ,EAAE,QAAQ,IAAG,WAAW,CAAkB,CACnE,CACS,CACb,CAAA;AACH,CAAC,CAAA;AAED,eAAe,GAAG,CAAA"}
+{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../src/Tab/Tab.tsx"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"TabLabel.d.ts","sourceRoot":"","sources":["../../../src/TabLabel/TabLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,WAAW,EAAE,YAAY,GAAG,UAAU,CAAA;IACtC,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,QAAA,MAAM,QAAQ,sCAAuC,KAAK,gBAqBzD,CAAA;AAED,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"TabLabel.d.ts","sourceRoot":"","sources":["../../../src/TabLabel/TabLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,WAAW,EAAE,YAAY,GAAG,UAAU,CAAA;IACtC,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,QAAA,MAAM,QAAQ,sCAAuC,KAAK,gBA4BzD,CAAA;AAED,eAAe,QAAQ,CAAA"}

package/dist-package/src/TabLabel/TabLabel.js

@@ -1,12 +1,11 @@
 import React from 'react';
 import { TypographyOverflow } from '@toptal/picasso-typography-overflow';
 import { Typography } from '@toptal/picasso-typography';
-import { toTitleCase } from '@toptal/picasso-utils';
 const TabLabel = ({ label, orientation, titleCase }) => {
     if (orientation === 'horizontal') {
-        return (React.createElement(Typography, { as: 'div', size: 'small', weight: 'semibold', color: 'inherit' }, titleCase ? toTitleCase(label) : label));
+        return (React.createElement(Typography, { as: 'div', size: 'small', weight: 'semibold', color: 'inherit', titleCase: titleCase }, label));
     }
-    return (React.createElement(TypographyOverflow, { as: 'div', color: 'inherit', inline: true, size: 'medium', variant: 'body', weight: 'semibold' }, titleCase ? toTitleCase(label) : label));
+    return (React.createElement(TypographyOverflow, { as: 'div', color: 'inherit', inline: true, size: 'medium', variant: 'body', weight: 'semibold', titleCase: titleCase }, label));
 };
 export default TabLabel;
 //# sourceMappingURL=TabLabel.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TabLabel.js","sourceRoot":"","sources":["../../../src/TabLabel/TabLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAA;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAQnD,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAS,EAAE,EAAE;IAC5D,IAAI,WAAW,KAAK,YAAY,EAAE;QAChC,OAAO,CACL,oBAAC,UAAU,IAAC,EAAE,EAAC,KAAK,EAAC,IAAI,EAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,KAAK,EAAC,SAAS,IAChE,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAC5B,CACd,CAAA;KACF;IAED,OAAO,CACL,oBAAC,kBAAkB,IACjB,EAAE,EAAC,KAAK,EACR,KAAK,EAAC,SAAS,EACf,MAAM,QACN,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,MAAM,EACd,MAAM,EAAC,UAAU,IAEhB,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CACpB,CACtB,CAAA;AACH,CAAC,CAAA;AAED,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"TabLabel.js","sourceRoot":"","sources":["../../../src/TabLabel/TabLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAA;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AAQvD,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAS,EAAE,EAAE;IAC5D,IAAI,WAAW,KAAK,YAAY,EAAE;QAChC,OAAO,CACL,oBAAC,UAAU,IACT,EAAE,EAAC,KAAK,EACR,IAAI,EAAC,OAAO,EACZ,MAAM,EAAC,UAAU,EACjB,KAAK,EAAC,SAAS,EACf,SAAS,EAAE,SAAS,IAEnB,KAAK,CACK,CACd,CAAA;KACF;IAED,OAAO,CACL,oBAAC,kBAAkB,IACjB,EAAE,EAAC,KAAK,EACR,KAAK,EAAC,SAAS,EACf,MAAM,QACN,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,MAAM,EACd,MAAM,EAAC,UAAU,EACjB,SAAS,EAAE,SAAS,IAEnB,KAAK,CACa,CACtB,CAAA;AACH,CAAC,CAAA;AAED,eAAe,QAAQ,CAAA"}

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

@@ -1,20 +1,29 @@
-import type { ReactNode } from 'react';
+import type { ReactNode, ForwardedRef } from 'react';
 import React from 'react';
-import type { TabsProps } from '@material-ui/core';
-import type { ButtonOrAnchorProps, BaseProps } from '@toptal/picasso-shared';
-export interface Props extends BaseProps, Omit<ButtonOrAnchorProps, 'onChange'> {
+import { Tabs as MUITabs } from '@mui/base/Tabs';
+import type { BaseProps } from '@toptal/picasso-shared';
+export declare type TabsValueType = string | number | null;
+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<{}>, value: TabsProps['value']) => void;
-    /** The value of the currently selected Tab. If you don't want any selected Tab, you can set this property to false. */
-    value: TabsProps['value'];
+    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.
+     */
+    value: V;
     /** The tabs orientation (layout flow direction). */
     orientation?: 'horizontal' | 'vertical';
     /** Determines additional display behavior of the tabs */
-    variant?: Extract<TabsProps['variant'], 'scrollable' | 'fullWidth'>;
+    variant?: 'scrollable' | 'fullWidth';
 }
-export declare const TabsOrientationContext: React.Context<"horizontal" | "vertical">;
-export declare const Tabs: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement>>;
+export declare const TabsContext: React.Context<{
+    orientation: 'horizontal' | 'vertical';
+    variant: 'scrollable' | 'fullWidth';
+}>;
+declare const Tabs: <V extends TabsValueType = TabsValueType>(props: Props<V> & {
+    ref?: ForwardedRef<HTMLDivElement> | undefined;
+}) => ReturnType<typeof MUITabs>;
 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,KAAqB,MAAM,OAAO,CAAA;AAGzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAElD,OAAO,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAM5E,MAAM,WAAW,KACf,SAAQ,SAAS,EACf,IAAI,CAAC,mBAAmB,EAAE,UAAU,CAAC;IACvC,6CAA6C;IAC7C,QAAQ,EAAE,SAAS,CAAA;IAEnB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,KAAK,IAAI,CAAA;IAE5E,uHAAuH;IACvH,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,CAAA;IAEzB,oDAAoD;IACpD,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IAEvC,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,SAAS,CAAC,EAAE,YAAY,GAAG,WAAW,CAAC,CAAA;CACpE;AAMD,eAAO,MAAM,sBAAsB,0CAEpB,CAAA;AAGf,eAAO,MAAM,IAAI,iFAiCf,CAAA;AAOF,eAAe,IAAI,CAAA"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,KAA8B,MAAM,OAAO,CAAA;AAClD,OAAO,EAAE,IAAI,IAAI,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAEhD,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;AAmCxD,QAAA,MAAM,IAAI;;MAgEL,WAAW,cAAc,CAAC,CAAA;AAE/B,eAAe,IAAI,CAAA"}

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

@@ -9,27 +9,57 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import { Tabs as MUITabs } from '@material-ui/core';
-import { TabScrollButton } from '../TabScrollButton';
-import styles from './styles';
-import useTabAction from './use-tab-action';
-const useStyles = makeStyles(styles, {
-    name: 'Tabs',
-});
-export const TabsOrientationContext = React.createContext('horizontal');
-// eslint-disable-next-line react/display-name
-export const Tabs = forwardRef(function Tabs(props, ref) {
-    const { children, orientation, onChange, value, variant = 'scrollable' } = props, rest = __rest(props, ["children", "orientation", "onChange", "value", "variant"]);
-    const classes = useStyles(props);
-    const action = useTabAction();
-    return (React.createElement(TabsOrientationContext.Provider, { value: orientation },
-        React.createElement(MUITabs, Object.assign({}, rest, { classes: { root: classes[orientation] }, ref: ref, onChange: onChange, value: value, action: action, scrollButtons: 'auto', ScrollButtonComponent: TabScrollButton, orientation: orientation, variant: variant }), children)));
-});
-Tabs.displayName = 'Tabs';
-Tabs.defaultProps = {
-    orientation: 'horizontal',
+import React, { forwardRef, useMemo } from 'react';
+import { Tabs as MUITabs } from '@mui/base/Tabs';
+import { TabsList } from '@mui/base/TabsList';
+import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge';
+export const TabsContext = React.createContext({ orientation: 'horizontal', variant: 'scrollable' });
+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 classesByVariant = {
+    scrollable: {
+        root: 'overflow-x-auto',
+        scroller: '',
+    },
+    fullWidth: {
+        root: '',
+        scroller: 'w-full overflow-hidden',
+    },
+};
+const Tabs = forwardRef((_a, ref) => {
+    var { children, orientation = 'horizontal', onChange, value, variant = 'scrollable', className } = _a, rest = __rest(_a, ["children", "orientation", "onChange", "value", "variant", "className"]);
+    const contextValue = useMemo(() => ({
+        orientation,
+        variant,
+    }), [orientation, variant]);
+    const isVertical = orientation === 'vertical';
+    return (React.createElement(TabsContext.Provider, { value: contextValue },
+        React.createElement(MUITabs, Object.assign({}, rest, { 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", { 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)))));
+});
 export default Tabs;
 //# sourceMappingURL=Tabs.js.map

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,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAErD,OAAO,EAAE,IAAI,IAAI,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAGnD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AACpD,OAAO,MAAM,MAAM,UAAU,CAAA;AAC7B,OAAO,YAAY,MAAM,kBAAkB,CAAA;AAqB3C,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,MAAM;CACb,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,KAAK,CAAC,aAAa,CAEvD,YAAY,CAAC,CAAA;AAEf,8CAA8C;AAC9C,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAA2B,SAAS,IAAI,CACpE,KAAK,EACL,GAAG;IAEH,MAAM,EACJ,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,KAAK,EACL,OAAO,GAAG,YAAY,KAEpB,KAAK,EADJ,IAAI,UACL,KAAK,EAPH,2DAOL,CAAQ,CAAA;IACT,MAAM,OAAO,GAAG,SAAS,CAAC,KAAK,CAAC,CAAA;IAChC,MAAM,MAAM,GAAG,YAAY,EAAE,CAAA;IAE7B,OAAO,CACL,oBAAC,sBAAsB,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAY;QAClD,oBAAC,OAAO,oBACF,IAAI,IACR,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,WAAY,CAAC,EAAE,EACxC,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,aAAa,EAAC,MAAM,EACpB,qBAAqB,EAAE,eAAe,EACtC,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,KAEf,QAAQ,CACD,CACsB,CACnC,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM,CAAA;AACzB,IAAI,CAAC,YAAY,GAAG;IAClB,WAAW,EAAE,YAAY;CAC1B,CAAA;AAED,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,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;CACO,CAAA;AAEV,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;CACO,CAAA;AAEV,MAAM,IAAI,GAAG,UAAU,CACrB,CACE,EAQW,EACX,GAAiC,EACjC,EAAE;QAVF,EACE,QAAQ,EACR,WAAW,GAAG,YAAY,EAC1B,QAAQ,EACR,KAAK,EACL,OAAO,GAAG,YAAY,EACtB,SAAS,OAEA,EADN,IAAI,cAPT,wEAQC,CADQ;IAIT,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,IACR,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,EACN,QAGS,EAEX,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,CAG4B,CAAA;AAE/B,eAAe,IAAI,CAAA"}

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

@@ -1,5 +1,6 @@
 import type { OmitInternalProps } from '@toptal/picasso-shared';
-import type { Props } from './Tabs';
+import type { Props, TabsValueType } from './Tabs';
 export { default as Tabs } from './Tabs';
-export declare type TabsProps = OmitInternalProps<Props>;
+export declare type TabsProps = OmitInternalProps<Props<TabsValueType>>;
+export type { TabsValueType } from './Tabs';
 //# 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,MAAM,QAAQ,CAAA;AAEnC,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAA;AACxC,oBAAY,SAAS,GAAG,iBAAiB,CAAC,KAAK,CAAC,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,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"}

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

@@ -1,5 +1,7 @@
 /// <reference types="react" />
-export declare const TabsCompound: import("react").ForwardRefExoticComponent<import("../Tabs/Tabs").Props & import("react").RefAttributes<HTMLButtonElement>> & {
-    Tab: import("react").ForwardRefExoticComponent<import("../Tab/Tab").Props & import("react").RefAttributes<HTMLDivElement>>;
+export declare const TabsCompound: (<V extends import("../Tabs").TabsValueType = import("../Tabs").TabsValueType>(props: import("../Tabs/Tabs").Props<V> & {
+    ref?: import("react").ForwardedRef<HTMLDivElement> | undefined;
+}) => JSX.Element | null) & {
+    Tab: import("react").ForwardRefExoticComponent<import("../Tab/Tab").Props & import("react").RefAttributes<HTMLButtonElement>>;
 };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TabsCompound/index.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,YAAY;;CAEvB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TabsCompound/index.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,YAAY;;;;CAEvB,CAAA"}

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

@@ -1,4 +1,3 @@
-export * from './TabScrollButton';
 export * from './Tabs';
 export * from './Tab';
 export * from './TabDescription';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AACjC,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA"}

package/dist-package/src/index.js

@@ -1,4 +1,3 @@
-export * from './TabScrollButton';
 export * from './Tabs';
 export * from './Tab';
 export * from './TabDescription';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AACjC,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-tabs",
-  "version": "2.0.9",
+  "version": "3.0.1",
   "description": "Toptal UI components library - Tabs",
   "publishConfig": {
     "access": "public"
@@ -22,12 +22,13 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@toptal/picasso-container": "1.0.3",
-    "@toptal/picasso-icons": "1.5.0",
+    "@mui/base": "5.0.0-beta.40",
+    "@toptal/picasso-container": "2.0.0",
+    "@toptal/picasso-icons": "1.6.0",
     "@toptal/picasso-shared": "15.0.0",
-    "@toptal/picasso-typography": "2.0.2",
-    "@toptal/picasso-typography-overflow": "2.0.3",
-    "@toptal/picasso-user-badge": "2.0.8",
+    "@toptal/picasso-typography": "3.0.0",
+    "@toptal/picasso-typography-overflow": "2.0.4",
+    "@toptal/picasso-user-badge": "3.0.1",
     "@toptal/picasso-utils": "1.0.3",
     "ap-style-title-case": "^1.1.2",
     "classnames": "^2.5.1"
@@ -37,16 +38,16 @@
     "**/styles.js"
   ],
   "peerDependencies": {
-    "@material-ui/core": "4.12.4",
-    "@toptal/picasso-provider": "*",
-    "tailwindcss": ">=3",
+    "@toptal/picasso-tailwind-merge": "1.2.0",
+    "@toptal/picasso-tailwind": ">=2.7",
     "react": ">=16.12.0 < 19.0.0"
   },
   "exports": {
     ".": "./dist-package/src/index.js"
   },
   "devDependencies": {
-    "@toptal/picasso-provider": "4.2.1",
+    "@toptal/picasso-provider": "5.0.0",
+    "@toptal/picasso-tailwind-merge": "1.2.0",
     "@toptal/picasso-test-utils": "1.1.1"
   },
   "files": [

package/src/Tab/Tab.tsx

@@ -1,22 +1,20 @@
 import type { ReactNode, HTMLAttributes, ReactElement } from 'react'
 import React, { forwardRef, useContext } from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
-import type { TabProps } from '@material-ui/core'
-import { Tab as MUITab } from '@material-ui/core'
+import type { TabProps } from '@mui/base/Tab'
+import { Tab as MUITab } from '@mui/base/Tab'
 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 styles from './styles'
-import { TabsOrientationContext } from '../Tabs/Tabs'
+import { TabsContext } from '../Tabs/Tabs'
 import { TabLabel } from '../TabLabel'
 import { TabDescription } from '../TabDescription'
 
 export interface Props
   extends BaseProps,
     TextLabelProps,
-    Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    Omit<HTMLAttributes<HTMLButtonElement>, 'onChange'> {
   /**
    * If true, the tab will be disabled
    * @default false
@@ -45,27 +43,81 @@ export interface Props
   onClick?: TabProps['onClick']
 }
 
-const useStyles = makeStyles<Theme>(styles, { name: 'PicassoTab' })
+const getOpacityClass = (
+  selected: boolean,
+  disabled: boolean,
+  orientation: 'horizontal' | 'vertical'
+) => {
+  if (disabled) {
+    return 'opacity-50'
+  }
+
+  if (selected || orientation === 'vertical') {
+    return 'opacity-100 '
+  }
 
-export const Tab = forwardRef<HTMLDivElement, Props>(function Tab(props, ref) {
+  return 'opacity-70'
+}
+
+const wrapperClassesByOrientation = {
+  horizontal: 'inline-flex items-center flex-col justify-center',
+  vertical: 'block',
+}
+
+const rootClassesByOrientation = (selected: boolean) => ({
+  horizontal: [
+    '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',
+    selected ? 'text-black' : 'text-inheritColor',
+    selected && 'shadow-blue-500 shadow-[inset_0_-2px_0]',
+  ],
+  vertical: [
+    ' first:mt-4 last:mb-4 my-1 mx-0 py-2 px-4',
+    'text-left rounded-l-sm rounded-r-none transition-all',
+    'w-full overflow-hidden',
+    selected && 'shadow-1',
+    selected && [
+      'before:absolute',
+      'before:content-[""]',
+      'before:bottom-0',
+      'before:left-0',
+      'before:top-0',
+      'before:w-[3px]',
+      'before:bg-blue-500',
+    ],
+    selected
+      ? 'bg-gray-50 text-black'
+      : 'bg-gray-100 hover:bg-gray-200 text-graphite-700 hover:text-black',
+  ],
+})
+
+const classesByVariant = {
+  scrollable: 'shrink-0 max-w-[264px]',
+  fullWidth: 'shrink flex-grow basis-0',
+}
+
+export const Tab = forwardRef<HTMLButtonElement, Props>(function Tab(
+  props,
+  ref
+) {
   const {
     disabled,
     value,
     label,
     icon,
-    selected,
     onChange,
     onClick,
     titleCase: propsTitleCase,
     description,
     avatar,
+    className,
     ...rest
   } = props
-  const classes = useStyles()
   const titleCase = useTitleCase(propsTitleCase)
-  const orientation = useContext(TabsOrientationContext)
+  const { orientation, variant } = useContext(TabsContext)
+  const isHorizontal = orientation === 'horizontal'
 
-  const labelComponent = getLabelComponent({
+  const renderLabel = getLabelComponent({
     avatar,
     description,
     disabled,
@@ -76,22 +128,49 @@ export const Tab = forwardRef<HTMLDivElement, Props>(function Tab(props, ref) {
 
   return (
     <MUITab
+      className=''
       {...rest}
       ref={ref}
       tabIndex={0}
       disabled={disabled}
-      label={labelComponent}
-      icon={icon}
       value={value}
-      selected={selected}
       onChange={onChange}
       onClick={onClick}
-      classes={{
-        root: classes[orientation],
-        selected: classes.selected,
-        wrapper: classes.wrapper,
+      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
+            ),
+          }
+        },
       }}
-    />
+    >
+      <span
+        className={twJoin('w-full', wrapperClassesByOrientation[orientation])}
+      >
+        {renderLabel}
+        {icon && <span className='absolute right-0 mb-0 h-4'>{icon}</span>}
+      </span>
+    </MUITab>
   )
 })