@toptal/picasso-tabs 2.0.3-alpha-feature-tailwind-w21-c853d19b7.47 → 2.0.3-alpha-feature-tailwind-w21-5438106d8.50

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

@@ -1,17 +1,18 @@
-import type { ReactNode } from 'react';
+import type { ReactNode, ForwardedRef } from 'react';
 import React from 'react';
+import { Tabs as MUITabs } from '@mui/base/Tabs';
 import type { BaseProps } from '@toptal/picasso-shared';
-declare type ValueType = string | number | null;
-export interface Props extends BaseProps {
+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<{}> | null, value: ValueType) => void;
+    onChange?: (event: React.ChangeEvent<{}> | null, value: V) => void;
     /**
      * The value of the currently selected Tab.
      * If you don't want any selected Tab, you can set this property to null.
      */
-    value: ValueType;
+    value: V;
     /** The tabs orientation (layout flow direction). */
     orientation?: 'horizontal' | 'vertical';
     /** Determines additional display behavior of the tabs */
@@ -21,6 +22,8 @@ export declare const TabsContext: React.Context<{
     orientation: 'horizontal' | 'vertical';
     variant: 'scrollable' | 'fullWidth';
 }>;
-export declare const Tabs: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+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,KAA8B,MAAM,OAAO,CAAA;AAGlD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAGvD,aAAK,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,CAAA;AAEvC,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,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,SAAS,KAAK,IAAI,CAAA;IAE1E;;;OAGG;IACH,KAAK,EAAE,SAAS,CAAA;IAEhB,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,8EAyDf,CAAA;AAIF,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

@@ -44,9 +44,8 @@ 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 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,
@@ -62,6 +61,5 @@ export const Tabs = forwardRef(function Tabs(props, ref) {
             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)))));
 });
-Tabs.displayName = 'Tabs';
 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,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,CAAwB,SAAS,IAAI,CACjE,KAAK,EACL,GAAG;IAEH,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,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,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,CAAC,CAAA;AAEF,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,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<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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-tabs",
-  "version": "2.0.3-alpha-feature-tailwind-w21-c853d19b7.47+c853d19b7",
+  "version": "2.0.3-alpha-feature-tailwind-w21-5438106d8.50+5438106d8",
   "description": "Toptal UI components library - Tabs",
   "publishConfig": {
     "access": "public"
@@ -23,13 +23,13 @@
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
     "@mui/base": "5.0.0-beta.40",
-    "@toptal/picasso-container": "1.0.4-alpha-feature-tailwind-w21-c853d19b7.47+c853d19b7",
-    "@toptal/picasso-icons": "1.1.2-alpha-feature-tailwind-w21-c853d19b7.47+c853d19b7",
-    "@toptal/picasso-shared": "15.0.1-alpha-feature-tailwind-w21-c853d19b7.47+c853d19b7",
-    "@toptal/picasso-typography": "2.0.2-alpha-feature-tailwind-w21-c853d19b7.47+c853d19b7",
-    "@toptal/picasso-typography-overflow": "2.0.2-alpha-feature-tailwind-w21-c853d19b7.47+c853d19b7",
-    "@toptal/picasso-user-badge": "2.0.3-alpha-feature-tailwind-w21-c853d19b7.47+c853d19b7",
-    "@toptal/picasso-utils": "1.0.4-alpha-feature-tailwind-w21-c853d19b7.47+c853d19b7",
+    "@toptal/picasso-container": "1.0.4-alpha-feature-tailwind-w21-5438106d8.50+5438106d8",
+    "@toptal/picasso-icons": "1.1.2-alpha-feature-tailwind-w21-5438106d8.50+5438106d8",
+    "@toptal/picasso-shared": "15.0.1-alpha-feature-tailwind-w21-5438106d8.50+5438106d8",
+    "@toptal/picasso-typography": "2.0.2-alpha-feature-tailwind-w21-5438106d8.50+5438106d8",
+    "@toptal/picasso-typography-overflow": "2.0.2-alpha-feature-tailwind-w21-5438106d8.50+5438106d8",
+    "@toptal/picasso-user-badge": "2.0.3-alpha-feature-tailwind-w21-5438106d8.50+5438106d8",
+    "@toptal/picasso-utils": "1.0.4-alpha-feature-tailwind-w21-5438106d8.50+5438106d8",
     "ap-style-title-case": "^1.1.2",
     "classnames": "^2.5.1"
   },
@@ -47,14 +47,14 @@
     ".": "./dist-package/src/index.js"
   },
   "devDependencies": {
-    "@toptal/picasso-provider": "4.2.2-alpha-feature-tailwind-w21-c853d19b7.55+c853d19b7",
-    "@toptal/picasso-tailwind-merge": "1.1.1-alpha-feature-tailwind-w21-c853d19b7.4266+c853d19b7",
-    "@toptal/picasso-test-utils": "1.1.2-alpha-feature-tailwind-w21-c853d19b7.47+c853d19b7"
+    "@toptal/picasso-provider": "4.2.2-alpha-feature-tailwind-w21-5438106d8.58+5438106d8",
+    "@toptal/picasso-tailwind-merge": "1.1.1-alpha-feature-tailwind-w21-5438106d8.4269+5438106d8",
+    "@toptal/picasso-test-utils": "1.1.2-alpha-feature-tailwind-w21-5438106d8.50+5438106d8"
   },
   "files": [
     "dist-package/**",
     "!dist-package/tsconfig.tsbuildinfo",
     "src"
   ],
-  "gitHead": "c853d19b738f210c81c5a1148ceae81984bd10f3"
+  "gitHead": "5438106d866ac55337e99db14c41fa58a140abce"
 }

package/src/Tabs/Tabs.tsx

@@ -1,24 +1,24 @@
-import type { ReactNode } from 'react'
+import type { ReactNode, ForwardedRef } from 'react'
 import React, { forwardRef, useMemo } from 'react'
 import { Tabs as MUITabs } from '@mui/base/Tabs'
 import { TabsList } from '@mui/base/TabsList'
 import type { BaseProps } from '@toptal/picasso-shared'
 import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge'
 
-type ValueType = string | number | null
+export type TabsValueType = string | number | null
 
-export interface Props extends BaseProps {
+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: ValueType) => void
+  onChange?: (event: React.ChangeEvent<{}> | null, value: V) => void
 
   /**
    * The value of the currently selected Tab.
    * If you don't want any selected Tab, you can set this property to null.
    */
-  value: ValueType
+  value: V
 
   /** The tabs orientation (layout flow direction). */
   orientation?: 'horizontal' | 'vertical'
@@ -52,7 +52,7 @@ const classesByOrientation = {
     root: '',
     scroller: indicatorClasses,
   },
-}
+} as const
 
 const classesByVariant = {
   scrollable: {
@@ -63,68 +63,72 @@ const classesByVariant = {
     root: '',
     scroller: 'w-full overflow-hidden',
   },
-}
-
-// eslint-disable-next-line react/display-name
-export const Tabs = forwardRef<HTMLDivElement, Props>(function Tabs(
-  props,
-  ref
-) {
-  const {
-    children,
-    orientation = 'horizontal',
-    onChange,
-    value,
-    variant = 'scrollable',
-    className,
-    ...rest
-  } = props
-
-  const contextValue = useMemo(
-    () => ({
-      orientation,
-      variant,
-    }),
-    [orientation, variant]
-  )
-
-  const isVertical = orientation === 'vertical'
-
-  return (
-    <TabsContext.Provider value={contextValue}>
-      <MUITabs
-        {...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}
-      >
-        <div
-          className={twJoin(
-            classesByVariant[variant].scroller,
-            classesByOrientation[orientation].scroller,
-            'flex-auto inline-block relative whitespace-nowrap'
-          )}
+} as const
+
+const Tabs = forwardRef(
+  <V extends TabsValueType = TabsValueType>(
+    {
+      children,
+      orientation = 'horizontal',
+      onChange,
+      value,
+      variant = 'scrollable',
+      className,
+      ...rest
+    }: Props<V>,
+    ref: ForwardedRef<HTMLDivElement>
+  ) => {
+    const contextValue = useMemo(
+      () => ({
+        orientation,
+        variant,
+      }),
+      [orientation, variant]
+    )
+
+    const isVertical = orientation === 'vertical'
+
+    return (
+      <TabsContext.Provider value={contextValue}>
+        <MUITabs
+          {...rest}
+          slotProps={{
+            root: {
+              ref,
+              className: twMerge(
+                'relative min-h-0 flex overflow-hidden',
+                classesByOrientation[orientation].root,
+                classesByVariant[variant].root,
+                className
+              ),
+            },
+          }}
+          onChange={
+            onChange as (
+              event: React.ChangeEvent<{}> | null,
+              value: TabsValueType
+            ) => void
+          }
+          value={value}
+          orientation={orientation}
         >
-          <TabsList className={twJoin('flex', isVertical && 'flex-col')}>
-            {children}
-          </TabsList>
-        </div>
-      </MUITabs>
-    </TabsContext.Provider>
-  )
-})
-
-Tabs.displayName = 'Tabs'
+          <div
+            className={twJoin(
+              classesByVariant[variant].scroller,
+              classesByOrientation[orientation].scroller,
+              'flex-auto inline-block relative whitespace-nowrap'
+            )}
+          >
+            <TabsList className={twJoin('flex', isVertical && 'flex-col')}>
+              {children}
+            </TabsList>
+          </div>
+        </MUITabs>
+      </TabsContext.Provider>
+    )
+  }
+) as <V extends TabsValueType = TabsValueType>(
+  props: Props<V> & { ref?: ForwardedRef<HTMLDivElement> }
+) => ReturnType<typeof MUITabs>
 
 export default Tabs

package/src/Tabs/index.ts

@@ -1,6 +1,7 @@
 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 type TabsProps = OmitInternalProps<Props>
+export type TabsProps = OmitInternalProps<Props<TabsValueType>>
+export type { TabsValueType } from './Tabs'

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

@@ -5,7 +5,7 @@ import { SPACING_4 } from '@toptal/picasso-utils'
 const Example = () => {
   const [value, setValue] = React.useState(0)
 
-  const handleChange = (_: React.ChangeEvent<{}>, newValue: number) => {
+  const handleChange = (_: React.ChangeEvent<{}> | null, newValue: number) => {
     setValue(newValue)
   }
 

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

@@ -8,7 +8,7 @@ const TAB_COUNT = 2
 const Example = () => {
   const [value, setValue] = React.useState(0)
 
-  const handleChange = (_: React.ChangeEvent<{}>, newValue: number) => {
+  const handleChange = (_: React.ChangeEvent<{}> | null, newValue: number) => {
     setValue(newValue)
   }
 

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

@@ -8,7 +8,7 @@ const TAB_COUNT = 10
 const Example = () => {
   const [value, setValue] = React.useState(0)
 
-  const handleChange = (_: React.ChangeEvent<{}>, newValue: number) => {
+  const handleChange = (_: React.ChangeEvent<{}> | null, newValue: number) => {
     setValue(newValue)
   }
 

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

@@ -33,7 +33,7 @@ const TabsContent = ({ children }: { children: React.ReactNode }) => {
 const Example = () => {
   const [value, setValue] = React.useState(0)
 
-  const handleChange = (_: React.ChangeEvent<{}>, newValue: number) => {
+  const handleChange = (_: React.ChangeEvent<{}> | null, newValue: number) => {
     setValue(newValue)
   }
 

package/src/Tabs/test.tsx

@@ -1,14 +1,17 @@
 /* eslint-disable react/no-array-index-key */
 import React from 'react'
 import { render, fireEvent } from '@testing-library/react'
-import type { OmitInternalProps } from '@toptal/picasso-shared'
 import { TestingPicasso } from '@toptal/picasso-test-utils'
 
 import type { TabProps } from '../Tab'
-import type { Props } from './Tabs'
+import type { Props, TabsValueType } from './Tabs'
 import { TabsCompound as Tabs } from '../TabsCompound'
 
-const renderTabContent = (tab: TabProps, index: number, value: any) => {
+const renderTabContent = (
+  tab: TabProps,
+  index: number,
+  value: TabsValueType
+) => {
   const isTabActive = index + 1 === value || tab.value === value
   const testId = `tab-${index + 1}-content`
 
@@ -25,7 +28,7 @@ const renderTabContent = (tab: TabProps, index: number, value: any) => {
 
 const renderTabs = (
   tabs: TabProps[],
-  { value, onChange, variant }: OmitInternalProps<Props, 'children'>,
+  { value, onChange, variant }: Omit<Props<TabsValueType>, 'children'>,
   orientation: 'horizontal' | 'vertical' = 'horizontal'
 ) => {
   return render(