@toptal/picasso-tabs 5.0.15-alpha-ff-7-tabs-17eb872bb.13 → 5.0.15-alpha-ff-7-tabs-2a3da7cea.16

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

@@ -1,15 +1,13 @@
-import type { ReactNode, HTMLAttributes, ReactElement } from 'react';
-import React from 'react';
+import type { ReactNode, HTMLAttributes, ReactElement, Ref } from 'react';
 import type { BaseProps, TextLabelProps } from '@toptal/picasso-shared';
-import { type TabsValueType } from '../Tabs/TabsContext';
-export interface Props extends BaseProps, TextLabelProps, Omit<HTMLAttributes<HTMLButtonElement>, 'onChange'> {
+export interface TabProps<T = number> extends BaseProps, TextLabelProps, Omit<HTMLAttributes<HTMLButtonElement>, 'onChange'> {
     /**
      * If true, the tab will be disabled
      * @default false
      */
     disabled?: boolean;
     /** The value of the tab */
-    value?: TabsValueType;
+    value?: T;
     /** The label element */
     label?: ReactNode;
     /** The Icon element */
@@ -19,6 +17,8 @@ export interface Props extends BaseProps, TextLabelProps, Omit<HTMLAttributes<HT
     /** Description */
     description?: string;
 }
-export declare const Tab: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement>>;
+export declare const Tab: <T = number>(props: TabProps<T> & {
+    ref?: Ref<HTMLButtonElement> | undefined;
+}) => ReactElement | null;
 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,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"}
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../src/Tab/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAEzE,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AASvE,MAAM,WAAW,QAAQ,CAAC,CAAC,GAAG,MAAM,CAClC,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,CAAC,CAAA;IAET,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;CACrB;AAwLD,eAAO,MAAM,GAAG;;MAEX,YAAY,GAAG,IAAI,CAAA;AAExB,eAAe,GAAG,CAAA"}

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

@@ -59,7 +59,25 @@ const classesByVariant = {
     scrollable: 'shrink-0 max-w-[264px]',
     fullWidth: 'shrink flex-grow basis-0',
 };
-export const Tab = forwardRef(function Tab(props, ref) {
+const getLabelComponent = ({ avatar, description, disabled, label, orientation, titleCase, }) => {
+    if (!label) {
+        return null;
+    }
+    const isHorizontal = orientation === 'horizontal';
+    const isCustomLabel = typeof label !== 'string';
+    const Label = () => (React.createElement(TabLabel, { titleCase: titleCase, label: label, orientation: orientation }));
+    if (isHorizontal || isCustomLabel) {
+        return React.createElement(Label, null);
+    }
+    if (typeof avatar === 'undefined') {
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Label, null),
+            description && (React.createElement(TabDescription, { disabled: disabled }, description))));
+    }
+    return (React.createElement(UserBadge, { renderName: Label, name: label, avatar: avatar }, description && (React.createElement(TabDescription, { disabled: disabled }, description))));
+};
+// eslint-disable-next-line func-style
+function TabInner(props, ref) {
     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 { value: selectedValue, onChange, orientation, variant, } = useTabsContext();
@@ -82,25 +100,9 @@ export const Tab = forwardRef(function Tab(props, ref) {
     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' }, icon))));
-});
-Tab.displayName = 'Tab';
-const getLabelComponent = ({ avatar, description, disabled, label, orientation, titleCase, }) => {
-    if (!label) {
-        return null;
-    }
-    const isHorizontal = orientation === 'horizontal';
-    const isCustomLabel = typeof label !== 'string';
-    const Label = () => (React.createElement(TabLabel, { titleCase: titleCase, label: label, orientation: orientation }));
-    if (isHorizontal || isCustomLabel) {
-        return React.createElement(Label, null);
-    }
-    if (typeof avatar === 'undefined') {
-        return (React.createElement(React.Fragment, null,
-            React.createElement(Label, null),
-            description && (React.createElement(TabDescription, { disabled: disabled }, description))));
-    }
-    return (React.createElement(UserBadge, { renderName: Label, name: label, avatar: avatar }, description && (React.createElement(TabDescription, { disabled: disabled }, description))));
-};
+            icon && (React.createElement("span", { className: 'absolute top-0 right-0 mb-0 flex items-center' }, icon)))));
+}
+TabInner.displayName = 'Tab';
+export const Tab = forwardRef(TabInner);
 export default Tab;
 //# sourceMappingURL=Tab.js.map

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/Tab/index.d.ts

@@ -1,5 +1,2 @@
-import type { OmitInternalProps } from '@toptal/picasso-shared';
-import type { Props } from './Tab';
-export { default as Tab } from './Tab';
-export declare type TabProps = OmitInternalProps<Props>;
+export { default as Tab, type TabProps } from './Tab';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Tab/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAE/D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,OAAO,CAAA;AAElC,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAA;AACtC,oBAAY,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Tab/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAA"}

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

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

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

@@ -1,26 +1,26 @@
-import type { ReactNode, ChangeEvent } from 'react';
-import React from 'react';
+import type { ReactNode, ChangeEvent, Ref, ReactElement } from 'react';
 import type { BaseProps } from '@toptal/picasso-shared';
-import { type TabsValueType } from './TabsContext';
-export interface Props<V extends TabsValueType> extends BaseProps {
+export interface TabsProps<T = number> extends BaseProps {
     /** Tabs content containing Tab components */
     children: ReactNode;
     /** Callback fired when the value changes. */
-    onChange?: (event: ChangeEvent<{}>, value: V) => void;
+    onChange?: (event: ChangeEvent<{}>, value: T) => 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;
+    value: T;
     /** The tabs orientation (layout flow direction). */
     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;
+    defaultValue?: T;
     /** The direction of the text. */
     direction?: 'ltr' | 'rtl';
 }
-export declare const Tabs: React.ForwardRefExoticComponent<Props<TabsValueType> & React.RefAttributes<HTMLDivElement>>;
+export declare const Tabs: <T = number>(props: TabsProps<T> & {
+    ref?: Ref<HTMLDivElement> | undefined;
+}) => ReactElement | null;
 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,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"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAEtE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAOvD,MAAM,WAAW,SAAS,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,SAAS;IACtD,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;AA8HD,eAAO,MAAM,IAAI;;MAEZ,YAAY,GAAG,IAAI,CAAA;AAExB,eAAe,IAAI,CAAA"}

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

@@ -12,6 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { forwardRef, useMemo, useCallback } from 'react';
 import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge';
 import { TabsContext } from './TabsContext';
+import { Tab } from '../Tab';
 const indicatorClasses = [
     'after:absolute',
     'after:content-[""]',
@@ -42,9 +43,10 @@ const classesByVariant = {
         scroller: 'w-full overflow-hidden',
     },
 };
-export const Tabs = forwardRef(function Tabs(props, ref) {
+// eslint-disable-next-line func-style
+function TabsInner(props, ref) {
     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 [value, setValue] = React.useState(defaultValue);
     const isControlled = valueProp !== undefined;
     const currentValue = isControlled ? valueProp : value;
     const handleChange = useCallback((event, newValue) => {
@@ -63,8 +65,7 @@ export const Tabs = forwardRef(function Tabs(props, ref) {
     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.type === Tab &&
             child.props.value === undefined) {
             return React.cloneElement(child, {
                 value: idx,
@@ -76,7 +77,8 @@ export const Tabs = forwardRef(function Tabs(props, ref) {
         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("div", { className: twJoin('flex', isVertical && 'flex-col'), role: 'tablist', tabIndex: -1 }, childrenWithIndex)))));
-});
-Tabs.displayName = 'Tabs';
+}
+TabsInner.displayName = 'Tabs';
+export const Tabs = forwardRef(TabsInner);
 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":"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"}
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/Tabs/Tabs.tsx"],"names":[],"mappings":"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"}

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

@@ -1,11 +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;
+export interface TabsContextValue<T> {
+    value: T;
+    onChange: (event: React.ChangeEvent<{}>, value: T) => void;
     orientation: 'horizontal' | 'vertical';
     variant: 'scrollable' | 'fullWidth';
+    direction?: 'ltr' | 'rtl';
 }
-export declare const TabsContext: React.Context<TabsContextValue>;
-export declare const useTabsContext: () => TabsContextValue;
+export declare const TabsContext: React.Context<TabsContextValue<any>>;
+export declare const useTabsContext: () => TabsContextValue<any>;
 //# sourceMappingURL=TabsContext.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"TabsContext.d.ts","sourceRoot":"","sources":["../../../src/Tabs/TabsContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,WAAW,gBAAgB,CAAC,CAAC;IACjC,KAAK,EAAE,CAAC,CAAA;IACR,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,KAAK,IAAI,CAAA;IAC1D,WAAW,EAAE,YAAY,GAAG,UAAU,CAAA;IACtC,OAAO,EAAE,YAAY,GAAG,WAAW,CAAA;IACnC,SAAS,CAAC,EAAE,KAAK,GAAG,KAAK,CAAA;CAC1B;AAED,eAAO,MAAM,WAAW,sCAMtB,CAAA;AAEF,eAAO,MAAM,cAAc,6BAQ1B,CAAA"}

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

@@ -1,9 +1,10 @@
 import React from 'react';
 export const TabsContext = React.createContext({
-    value: null,
+    value: undefined,
     onChange: () => { },
     orientation: 'horizontal',
     variant: 'scrollable',
+    direction: 'ltr',
 });
 export const useTabsContext = () => {
     const context = React.useContext(TabsContext);

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

@@ -1 +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"}
+{"version":3,"file":"TabsContext.js","sourceRoot":"","sources":["../../../src/Tabs/TabsContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAAwB;IACpE,KAAK,EAAE,SAAS;IAChB,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC;IAClB,WAAW,EAAE,YAAY;IACzB,OAAO,EAAE,YAAY;IACrB,SAAS,EAAE,KAAK;CACjB,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,7 +1,2 @@
-import type { OmitInternalProps } from '@toptal/picasso-shared';
-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 './TabsContext';
+export { default as Tabs, type TabsProps } 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;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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAA"}

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

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

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

@@ -1,5 +1,9 @@
 /// <reference types="react" />
-export declare const TabsCompound: import("react").ForwardRefExoticComponent<import("../Tabs/Tabs").Props<import("../Tabs").TabsValueType> & import("react").RefAttributes<HTMLDivElement>> & {
-    Tab: import("react").ForwardRefExoticComponent<import("../Tab/Tab").Props & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const TabsCompound: (<T = number>(props: import("../Tabs").TabsProps<T> & {
+    ref?: import("react").Ref<HTMLDivElement> | undefined;
+}) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null) & {
+    Tab: <T_1 = number>(props: import("../Tab").TabProps<T_1> & {
+        ref?: import("react").Ref<HTMLButtonElement> | undefined;
+    }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
 };
 //# 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": "5.0.15-alpha-ff-7-tabs-17eb872bb.13+17eb872bb",
+  "version": "5.0.15-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea",
   "description": "Toptal UI components library - Tabs",
   "publishConfig": {
     "access": "public"
@@ -22,13 +22,13 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@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",
+    "@toptal/picasso-container": "3.1.3-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea",
+    "@toptal/picasso-icons": "1.12.2-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea",
+    "@toptal/picasso-shared": "15.0.1-alpha-ff-7-tabs-2a3da7cea.362+2a3da7cea",
+    "@toptal/picasso-typography": "4.0.4-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea",
+    "@toptal/picasso-typography-overflow": "4.0.4-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea",
+    "@toptal/picasso-user-badge": "5.1.12-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea",
+    "@toptal/picasso-utils": "3.1.1-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea",
     "ap-style-title-case": "^1.1.2"
   },
   "sideEffects": [
@@ -45,14 +45,14 @@
     ".": "./dist-package/src/index.js"
   },
   "devDependencies": {
-    "@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"
+    "@toptal/picasso-provider": "5.0.1-alpha-ff-7-tabs-2a3da7cea.283+2a3da7cea",
+    "@toptal/picasso-tailwind-merge": "2.0.4-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea",
+    "@toptal/picasso-test-utils": "1.1.2-alpha-ff-7-tabs-2a3da7cea.362+2a3da7cea"
   },
   "files": [
     "dist-package/**",
     "!dist-package/tsconfig.tsbuildinfo",
     "src"
   ],
-  "gitHead": "17eb872bb0410897243666d7cc7a58eb1479ed78"
+  "gitHead": "2a3da7cea3ba840b0a702d9efc91380d60ee2fe6"
 }

package/src/Tab/Tab.tsx

@@ -1,15 +1,15 @@
-import type { ReactNode, HTMLAttributes, ReactElement } from 'react'
+import type { ReactNode, HTMLAttributes, ReactElement, Ref } from 'react'
 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 { useTabsContext, type TabsValueType } from '../Tabs/TabsContext'
+import { useTabsContext } from '../Tabs/TabsContext'
 import { TabLabel } from '../TabLabel'
 import { TabDescription } from '../TabDescription'
 
-export interface Props
+export interface TabProps<T = number>
   extends BaseProps,
     TextLabelProps,
     Omit<HTMLAttributes<HTMLButtonElement>, 'onChange'> {
@@ -20,7 +20,7 @@ export interface Props
   disabled?: boolean
 
   /** The value of the tab */
-  value?: TabsValueType
+  value?: T
 
   /** The label element */
   label?: ReactNode
@@ -33,12 +33,6 @@ export interface Props
 
   /** Description */
   description?: string
-
-  // Properties below are managed by Tabs component
-
-  // selected?: boolean
-  // onChange?: TabProps['onChange']
-  // onClick?: TabProps['onClick']
 }
 
 const getOpacityClass = (
@@ -93,10 +87,55 @@ const classesByVariant = {
   fullWidth: 'shrink flex-grow basis-0',
 }
 
-export const Tab = forwardRef<HTMLButtonElement, Props>(function Tab(
-  props,
-  ref
-) {
+const getLabelComponent = ({
+  avatar,
+  description,
+  disabled,
+  label,
+  orientation,
+  titleCase,
+}: {
+  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} />
+  )
+
+  if (isHorizontal || isCustomLabel) {
+    return <Label />
+  }
+  if (typeof avatar === 'undefined') {
+    return (
+      <>
+        <Label />
+        {description && (
+          <TabDescription disabled={disabled}>{description}</TabDescription>
+        )}
+      </>
+    )
+  }
+
+  return (
+    <UserBadge renderName={Label} name={label} avatar={avatar}>
+      {description && (
+        <TabDescription disabled={disabled}>{description}</TabDescription>
+      )}
+    </UserBadge>
+  )
+}
+
+// eslint-disable-next-line func-style
+function TabInner<T = number>(props: TabProps<T>, ref: Ref<HTMLButtonElement>) {
   const {
     disabled,
     value,
@@ -121,7 +160,7 @@ export const Tab = forwardRef<HTMLButtonElement, Props>(function Tab(
 
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     if (!disabled && onChange) {
-      onChange(event, value as TabsValueType)
+      onChange(event, value as T)
     }
     onClick?.(event)
   }
@@ -166,59 +205,20 @@ export const Tab = forwardRef<HTMLButtonElement, Props>(function Tab(
         className={twJoin('w-full', wrapperClassesByOrientation[orientation])}
       >
         {renderLabel}
-        {icon && <span className='absolute right-0 mb-0'>{icon}</span>}
+        {icon && (
+          <span className='absolute top-0 right-0 mb-0 flex items-center'>
+            {icon}
+          </span>
+        )}
       </span>
     </button>
   )
-})
-
-Tab.displayName = 'Tab'
-
-const getLabelComponent = ({
-  avatar,
-  description,
-  disabled,
-  label,
-  orientation,
-  titleCase,
-}: {
-  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} />
-  )
+}
 
-  if (isHorizontal || isCustomLabel) {
-    return <Label />
-  }
-  if (typeof avatar === 'undefined') {
-    return (
-      <>
-        <Label />
-        {description && (
-          <TabDescription disabled={disabled}>{description}</TabDescription>
-        )}
-      </>
-    )
-  }
+TabInner.displayName = 'Tab'
 
-  return (
-    <UserBadge renderName={Label} name={label} avatar={avatar}>
-      {description && (
-        <TabDescription disabled={disabled}>{description}</TabDescription>
-      )}
-    </UserBadge>
-  )
-}
+export const Tab = forwardRef(TabInner) as <T = number>(
+  props: TabProps<T> & { ref?: Ref<HTMLButtonElement> }
+) => ReactElement | null
 
 export default Tab

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

@@ -120,7 +120,7 @@ exports[`Tab Tab tab with icon 1`] = `
                 Tab Label
               </div>
               <span
-                class="absolute right-0 mb-0"
+                class="absolute top-0 right-0 mb-0 flex items-center"
               >
                 <div
                   id="Icon"

package/src/Tab/index.ts

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

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

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

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

@@ -3,12 +3,10 @@ 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<TabsValueType>(0)
+  const [value, setValue] = React.useState<number>(0)
 
-  const handleChange = (_: React.ChangeEvent<{}>, newValue: TabsValueType) => {
+  const handleChange = (_: React.ChangeEvent<{}>, newValue: number) => {
     setValue(newValue)
   }
 
@@ -19,17 +17,14 @@ const Example = () => {
           label='Label'
           icon={
             <Tooltip content='Some content...' placement='top'>
-              <span>
+              <div>
                 <Exclamation16 color='red' />
-              </span>
+              </div>
             </Tooltip>
           }
         />
         <Tabs.Tab label='Label' />
-        <Tabs.Tab
-          label='Label'
-          icon={<Badge content={10} variant='white' className='mt-[1px]' />}
-        />
+        <Tabs.Tab label='Label' icon={<Badge content={10} variant='white' />} />
       </Tabs>
 
       {value === 0 && (

package/src/Tabs/Tabs.tsx

@@ -1,22 +1,24 @@
-import type { ReactNode, ChangeEvent } from 'react'
+import type { ReactNode, ChangeEvent, Ref, ReactElement } from 'react'
 import React, { forwardRef, useMemo, useCallback } from 'react'
 import type { BaseProps } from '@toptal/picasso-shared'
 import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge'
 
-import { TabsContext, type TabsValueType } from './TabsContext'
+import { TabsContext } from './TabsContext'
+import type { TabProps } from '../Tab'
+import { Tab } from '../Tab'
 
-export interface Props<V extends TabsValueType> extends BaseProps {
+export interface TabsProps<T = number> extends BaseProps {
   /** Tabs content containing Tab components */
   children: ReactNode
 
   /** Callback fired when the value changes. */
-  onChange?: (event: ChangeEvent<{}>, value: V) => void
+  onChange?: (event: ChangeEvent<{}>, value: T) => 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
+  value: T
 
   /** The tabs orientation (layout flow direction). */
   orientation?: 'horizontal' | 'vertical'
@@ -25,7 +27,7 @@ export interface Props<V extends TabsValueType> extends BaseProps {
   variant?: 'scrollable' | 'fullWidth'
 
   /** The default value. Use when the component is not controlled. */
-  defaultValue?: V
+  defaultValue?: T
 
   /** The direction of the text. */
   direction?: 'ltr' | 'rtl'
@@ -64,99 +66,99 @@ const classesByVariant = {
   },
 }
 
-export const Tabs = forwardRef<HTMLDivElement, Props<TabsValueType>>(
-  function Tabs(props, ref) {
-    const {
-      children,
-      orientation = 'horizontal',
-      onChange,
-      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,
-      }),
-      [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,
-        })
+// eslint-disable-next-line func-style
+function TabsInner<T = number>(props: TabsProps<T>, ref: Ref<HTMLDivElement>) {
+  const {
+    children,
+    orientation = 'horizontal',
+    onChange,
+    value: valueProp,
+    defaultValue,
+    variant = 'scrollable',
+    direction = 'ltr',
+    className,
+    ...rest
+  } = props
+
+  const [value, setValue] = React.useState<T>(defaultValue as T)
+  const isControlled = valueProp !== undefined
+  const currentValue = isControlled ? valueProp : value
+
+  const handleChange = useCallback(
+    (event: ChangeEvent<{}>, newValue: T) => {
+      if (!isControlled) {
+        setValue(newValue)
       }
-
-      return child
-    })
-
-    return (
-      <TabsContext.Provider value={contextValue}>
+      onChange?.(event, newValue)
+    },
+    [isControlled, onChange]
+  )
+
+  const contextValue = useMemo(
+    () => ({
+      value: currentValue,
+      onChange: handleChange,
+      orientation,
+      variant,
+      direction,
+    }),
+    [currentValue, handleChange, orientation, variant, direction]
+  )
+
+  const isVertical = orientation === 'vertical'
+
+  const childrenWithIndex = React.Children.map(children, (child, idx) => {
+    if (
+      React.isValidElement(child) &&
+      child.type === Tab &&
+      child.props.value === undefined
+    ) {
+      return React.cloneElement(child as React.ReactElement<TabProps<number>>, {
+        value: idx,
+      })
+    }
+
+    return child
+  })
+
+  return (
+    <TabsContext.Provider value={contextValue}>
+      <div
+        {...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}
+      >
         <div
-          {...rest}
-          ref={ref}
-          data-component-type='tabs'
-          className={twMerge(
-            'relative min-h-0 flex overflow-hidden',
-            classesByOrientation[orientation].root,
-            classesByVariant[variant].root,
-            className
+          className={twJoin(
+            classesByVariant[variant].scroller,
+            classesByOrientation[orientation].scroller,
+            'flex-auto inline-block relative whitespace-nowrap'
           )}
-          aria-orientation={orientation}
         >
           <div
-            className={twJoin(
-              classesByVariant[variant].scroller,
-              classesByOrientation[orientation].scroller,
-              'flex-auto inline-block relative whitespace-nowrap'
-            )}
+            className={twJoin('flex', isVertical && 'flex-col')}
+            role='tablist'
+            tabIndex={-1}
           >
-            <div
-              className={twJoin('flex', isVertical && 'flex-col')}
-              role='tablist'
-              tabIndex={-1}
-            >
-              {childrenWithIndex}
-            </div>
+            {childrenWithIndex}
           </div>
         </div>
-      </TabsContext.Provider>
-    )
-  }
-)
+      </div>
+    </TabsContext.Provider>
+  )
+}
+
+TabsInner.displayName = 'Tabs'
 
-Tabs.displayName = 'Tabs'
+export const Tabs = forwardRef(TabsInner) as <T = number>(
+  props: TabsProps<T> & { ref?: Ref<HTMLDivElement> }
+) => ReactElement | null
 
 export default Tabs

package/src/Tabs/TabsContext.tsx

@@ -1,19 +1,19 @@
 import React from 'react'
 
-export type TabsValueType = string | number | null
-
-export interface TabsContextValue {
-  value: TabsValueType
-  onChange: (event: React.ChangeEvent<{}>, value: TabsValueType) => void
+export interface TabsContextValue<T> {
+  value: T
+  onChange: (event: React.ChangeEvent<{}>, value: T) => void
   orientation: 'horizontal' | 'vertical'
   variant: 'scrollable' | 'fullWidth'
+  direction?: 'ltr' | 'rtl'
 }
 
-export const TabsContext = React.createContext<TabsContextValue>({
-  value: null,
+export const TabsContext = React.createContext<TabsContextValue<any>>({
+  value: undefined,
   onChange: () => {},
   orientation: 'horizontal',
   variant: 'scrollable',
+  direction: 'ltr',
 })
 
 export const useTabsContext = () => {

package/src/Tabs/index.ts

@@ -1,8 +1 @@
-import type { OmitInternalProps } from '@toptal/picasso-shared'
-
-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 './TabsContext'
+export { default as Tabs, type TabsProps } from './Tabs'

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

@@ -1,22 +1,21 @@
 import React from 'react'
-import { Container, Tabs } from '@toptal/picasso'
+import { Container } from '@toptal/picasso'
+import { Tabs, Tab } from '@toptal/picasso-tabs'
 import { SPACING_4 } from '@toptal/picasso-utils'
 
-import type { TabsValueType } from '../TabsContext'
-
 const Example = () => {
-  const [value, setValue] = React.useState<TabsValueType>(0)
+  const [value, setValue] = React.useState<number>(0)
 
-  const handleChange = (_: React.ChangeEvent<{}>, newValue: TabsValueType) => {
+  const handleChange = (_: React.ChangeEvent<{}>, newValue: number) => {
     setValue(newValue)
   }
 
   return (
     <div>
       <Tabs value={value} onChange={handleChange}>
-        <Tabs.Tab label='Label' />
-        <Tabs.Tab label='Label' />
-        <Tabs.Tab label='Label' />
+        <Tab label='Label' />
+        <Tab label='Label' />
+        <Tab label='Label' />
       </Tabs>
 
       {value === 0 && (

package/src/Tabs/test.tsx

@@ -4,14 +4,15 @@ import { render, fireEvent } from '@testing-library/react'
 import { TestingPicasso } from '@toptal/picasso-test-utils'
 
 import type { TabProps } from '../Tab'
-import type { Props, TabsValueType } from './Tabs'
+import type { TabsProps } from './Tabs'
 import { TabsCompound as Tabs } from '../TabsCompound'
 
-const renderTabContent = (
-  tab: TabProps,
+// eslint-disable-next-line func-style
+function renderTabContent<T = number>(
+  tab: TabProps<T>,
   index: number,
-  value: TabsValueType
-) => {
+  value: T
+) {
   const isTabActive = index + 1 === value || tab.value === value
   const testId = `tab-${index + 1}-content`
 
@@ -26,11 +27,12 @@ const renderTabContent = (
   return null
 }
 
-const renderTabs = (
-  tabs: TabProps[],
-  { value, onChange, variant }: Omit<Props<TabsValueType>, 'children'>,
+// eslint-disable-next-line func-style
+function renderTabs<T = number>(
+  tabs: TabProps<T>[],
+  { value, onChange, variant }: Omit<TabsProps<T>, 'children'>,
   orientation: 'horizontal' | 'vertical' = 'horizontal'
-) => {
+) {
   return render(
     <TestingPicasso>
       <Tabs
@@ -50,7 +52,7 @@ const renderTabs = (
         ))}
       </Tabs>
 
-      {tabs.map((tab, index) => renderTabContent(tab, index, value))}
+      {tabs.map((tab, index) => renderTabContent<T>(tab, index, value))}
     </TestingPicasso>
   )
 }