@toptal/picasso-tabs 100.0.4-alpha-pf-react-19-improvements-970580a42.0 → 100.0.5

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

@@ -1,6 +1,6 @@
-import type { ReactNode, HTMLAttributes } from 'react';
+import type { ReactNode, HTMLAttributes, ReactElement } from 'react';
 import React from 'react';
-import type { BaseProps, TextLabelProps, IconElement } from '@toptal/picasso-shared';
+import type { BaseProps, TextLabelProps } from '@toptal/picasso-shared';
 import type { TabsValueType } from '../Tabs/Tabs';
 export interface Props extends BaseProps, TextLabelProps, Omit<HTMLAttributes<HTMLButtonElement>, 'onChange'> {
     /**
@@ -13,7 +13,7 @@ export interface Props extends BaseProps, TextLabelProps, Omit<HTMLAttributes<HT
     /** The label element */
     label?: ReactNode;
     /** The Icon element */
-    icon?: IconElement;
+    icon?: ReactElement;
     /** Image URL */
     avatar?: string | null;
     /** Description */

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,MAAM,OAAO,CAAA;AACtD,OAAO,KAAiC,MAAM,OAAO,CAAA;AAErD,OAAO,KAAK,EACV,SAAS,EACT,cAAc,EACd,WAAW,EACZ,MAAM,wBAAwB,CAAA;AAK/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAKjD,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,aAAa,CAAA;IAErB,wBAAwB;IACxB,KAAK,CAAC,EAAE,SAAS,CAAA;IAEjB,uBAAuB;IACvB,IAAI,CAAC,EAAE,WAAW,CAAA;IAElB,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,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,GAAG,IAAI,EAAE,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IAC7E,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAA;CACrD;AAwDD,eAAO,MAAM,GAAG,iFAsEd,CAAA;AAuDF,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;AAErD,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAKvE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAKjD,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,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;IAIpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,GAAG,IAAI,EAAE,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IAC7E,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAA;CACrD;AAyED,eAAO,MAAM,GAAG,iFAuEd,CAAA;AAuDF,eAAe,GAAG,CAAA"}

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

@@ -57,6 +57,18 @@ const rootClassesByOrientation = (selected) => ({
             : 'bg-gray-100 hover:bg-gray-200 text-graphite-700 hover:text-black',
     ],
 });
+// Tabs root clips overflow, so horizontal focus uses a widened `::after`
+const getFocusClasses = (orientation, variant) => orientation === 'vertical'
+    ? 'focus-visible:inset-shadow-[0_0_0_0.1875rem] focus-visible:inset-shadow-blue-500/48'
+    : [
+        'after:absolute after:content-[""] after:top-0 after:bottom-1 after:-z-1',
+        'after:rounded-t-sm after:pointer-events-none',
+        variant === 'fullWidth'
+            ? 'after:inset-x-0'
+            : 'after:-inset-x-1 first-of-type:after:left-0 last-of-type:after:right-0',
+        'focus-visible:not-data-disabled:opacity-100 focus-visible:after:bg-gray-100',
+        'focus-visible:after:inset-shadow-[0_-0.125rem_0_0] focus-visible:after:inset-shadow-gray-500',
+    ];
 const classesByVariant = {
     scrollable: 'shrink-0 max-w-[264px]',
     fullWidth: 'shrink grow basis-0',
@@ -78,7 +90,7 @@ export const Tab = forwardRef(function Tab(props, ref) {
         orientation,
         titleCase,
     });
-    return (React.createElement(BaseUITabs.Tab, Object.assign({}, rest, { ref: ref, disabled: disabled, value: value, onClick: onClick, className: state => twMerge(getOpacityClass(state.active, state.disabled, orientation), rootClassesByOrientation(state.active)[orientation], classesByVariant[variant], state.disabled ? 'cursor-default text-gray-500' : 'cursor-pointer', state.disabled && 'pointer-events-none', icon && isHorizontal && 'min-h-0 pr-6', 'min-w-0 sm:min-w-[160px] md:min-w-[auto]', 'border-0 cursor-pointer inline-flex outline-hidden', 'items-center select-none align-middle appearance-none', 'justify-center no-underline [-webkit-tap-highlight-color:transparent]', 'normal-case whitespace-normal leading-4', 'relative ', className) }),
+    return (React.createElement(BaseUITabs.Tab, Object.assign({}, rest, { ref: ref, disabled: disabled, value: value, onClick: onClick, className: state => twMerge(getOpacityClass(state.active, state.disabled, orientation), rootClassesByOrientation(state.active)[orientation], classesByVariant[variant], state.disabled ? 'cursor-default text-gray-500' : 'cursor-pointer', state.disabled && 'pointer-events-none', icon && isHorizontal && 'min-h-0 pr-6', 'min-w-0 sm:min-w-[160px] md:min-w-[auto]', 'border-0 cursor-pointer inline-flex outline-hidden', getFocusClasses(orientation, variant), '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 h-4 leading-none flex items-center justify-center' }, icon)))));

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

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

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

@@ -23,6 +23,6 @@ export declare const TabsContext: React.Context<{
 }>;
 declare const Tabs: <V extends TabsValueType = TabsValueType>(props: Props<V> & {
     ref?: ForwardedRef<HTMLDivElement>;
-}) => React.ReactElement;
+}) => JSX.Element;
 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,YAAY,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,KAA8B,MAAM,OAAO,CAAA;AAElD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAIvD,MAAM,MAAM,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;AA8DxD,QAAA,MAAM,IAAI,EAiEL,CAAC,CAAuC,SAA7B,aAAa,GAAG,aAAa,EAC3C,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAA;CAAE,KACrD,KAAK,CAAC,YAAY,CAAA;AAEvB,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;AAElD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAIvD,MAAM,MAAM,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;AA8DxD,QAAA,MAAM,IAAI,EAiEL,CAAC,CAAuC,SAA7B,aAAa,GAAG,aAAa,EAC3C,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAA;CAAE,KACrD,GAAG,CAAC,OAAO,CAAA;AAEhB,eAAe,IAAI,CAAA"}

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,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAExD,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AACrD,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,0BAA0B,GAAG;IACjC,mDAAmD;IACnD,6BAA6B;IAC7B,sCAAsC;IACtC,mEAAmE;IACnE,iEAAiE;IACjE,uDAAuD;CACxD,CAAA;AAED,MAAM,iBAAiB,GAAG,CAAC,QAAmB,EAAa,EAAE;IAC3D,IAAI,KAAK,GAAG,CAAC,CAAC,CAAA;IAEd,OAAO,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAE;QAC1C,IAAI,CAAC,KAAK,CAAC,cAAc,CAA4B,KAAK,CAAC,EAAE,CAAC;YAC5D,OAAO,KAAK,CAAA;QACd,CAAC;QAED,KAAK,IAAI,CAAC,CAAA;QAEV,IAAI,KAAK,CAAC,KAAK,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;YACpC,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAA;QACpD,CAAC;QAED,OAAO,KAAK,CAAA;IACd,CAAC,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,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,UAAU,CAAC,IAAI,oBACV,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,CAChB,uCAAuC,EACvC,oBAAoB,CAAC,WAAW,CAAC,CAAC,IAAI,EACtC,gBAAgB,CAAC,OAAO,CAAC,CAAC,IAAI,EAC9B,SAAS,CACV,EACD,aAAa,EAAE,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAChC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CACN,YAAY,CAAuC,KAAK,CAAC,EACzD,GAAQ,CACT,EAEH,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,UAAU,CAAC,IAAI,IACd,SAAS,EAAE,MAAM,CAAC,eAAe,EAAE,UAAU,IAAI,UAAU,CAAC;oBAE3D,iBAAiB,CAAC,QAAQ,CAAC;oBAC3B,CAAC,UAAU,IAAI,CACd,oBAAC,UAAU,CAAC,SAAS,IACnB,SAAS,EAAE,MAAM,CAAC,0BAA0B,CAAC,GAC7C,CACH,CACe,CACd,CACU,CACG,CACxB,CAAA;AACH,CAAC,CAGoB,CAAA;AAEvB,eAAe,IAAI,CAAA"}
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/Tabs/Tabs.tsx"],"names":[],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 export declare const TabsCompound: (<V extends import("../Tabs").TabsValueType = import("../Tabs").TabsValueType>(props: import("../Tabs/Tabs").Props<V> & {
     ref?: import("react").ForwardedRef<HTMLDivElement>;
-}) => import("react").ReactElement) & {
+}) => JSX.Element) & {
     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;OAGmkI,CAAC;;;CAD3lI,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TabsCompound/index.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY;OAGmkI,CAAC;MAAqC,IAAK,OAAO;;CAD5oI,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-tabs",
-  "version": "100.0.4-alpha-pf-react-19-improvements-970580a42.0",
+  "version": "100.0.5",
   "description": "Toptal UI components library - Tabs",
   "publishConfig": {
     "access": "public"
@@ -20,35 +20,36 @@
   "dependencies": {
     "@base-ui/react": "^1.6.0",
     "ap-style-title-case": "^1.1.2",
-    "@toptal/picasso-container": "100.0.2-alpha-pf-react-19-improvements-970580a42.0",
-    "@toptal/picasso-icons": "100.0.2-alpha-pf-react-19-improvements-970580a42.0",
-    "@toptal/picasso-shared": "100.1.1-alpha-pf-react-19-improvements-970580a42.0",
-    "@toptal/picasso-typography": "100.0.2-alpha-pf-react-19-improvements-970580a42.0",
-    "@toptal/picasso-typography-overflow": "100.0.3-alpha-pf-react-19-improvements-970580a42.0",
-    "@toptal/picasso-user-badge": "100.0.3-alpha-pf-react-19-improvements-970580a42.0",
-    "@toptal/picasso-utils": "100.0.2-alpha-pf-react-19-improvements-970580a42.0"
+    "@toptal/picasso-container": "100.0.1",
+    "@toptal/picasso-icons": "100.0.1",
+    "@toptal/picasso-shared": "100.1.0",
+    "@toptal/picasso-typography": "100.0.1",
+    "@toptal/picasso-typography-overflow": "100.1.0",
+    "@toptal/picasso-user-badge": "100.0.2",
+    "@toptal/picasso-utils": "100.0.1"
   },
   "sideEffects": [
     "**/styles.ts",
     "**/styles.js"
   ],
   "peerDependencies": {
-    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-    "@toptal/picasso-tailwind-merge": "^100.0.1-alpha-pf-react-19-improvements-970580a42.0",
-    "@toptal/picasso-tailwind": "^100.0.1-alpha-pf-react-19-improvements-970580a42.0"
+    "react": ">=17.0.0 < 19.0.0",
+    "@toptal/picasso-tailwind-merge": "^100.0.0",
+    "@toptal/picasso-tailwind": "^100.0.0"
   },
   "exports": {
     ".": "./dist-package/src/index.js"
   },
   "devDependencies": {
-    "@toptal/picasso-provider": "100.2.1-alpha-pf-react-19-improvements-970580a42.0",
-    "@toptal/picasso-tailwind-merge": "100.0.1-alpha-pf-react-19-improvements-970580a42.0",
-    "@toptal/picasso-test-utils": "100.1.1-alpha-pf-react-19-improvements-970580a42.0"
+    "@toptal/picasso-provider": "100.2.0",
+    "@toptal/picasso-tailwind-merge": "100.0.0",
+    "@toptal/picasso-test-utils": "100.1.0"
   },
   "files": [
     "dist-package/**",
     "!dist-package/tsconfig.tsbuildinfo",
-    "src"
+    "src",
+    "!src/**/*.figma.ts"
   ],
   "scripts": {
     "build:package": "tsc -b tsconfig.json"

package/src/Tab/Tab.tsx

@@ -1,11 +1,7 @@
-import type { ReactNode, HTMLAttributes } from 'react'
+import type { ReactNode, HTMLAttributes, ReactElement } from 'react'
 import React, { forwardRef, useContext } from 'react'
 import { Tabs as BaseUITabs } from '@base-ui/react/tabs'
-import type {
-  BaseProps,
-  TextLabelProps,
-  IconElement,
-} from '@toptal/picasso-shared'
+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'
@@ -32,7 +28,7 @@ export interface Props
   label?: ReactNode
 
   /** The Icon element */
-  icon?: IconElement
+  icon?: ReactElement
 
   /** Image URL */
   avatar?: string | null
@@ -96,6 +92,23 @@ const rootClassesByOrientation = (selected: boolean) => ({
   ],
 })
 
+// Tabs root clips overflow, so horizontal focus uses a widened `::after`
+const getFocusClasses = (
+  orientation: 'horizontal' | 'vertical',
+  variant: 'scrollable' | 'fullWidth'
+) =>
+  orientation === 'vertical'
+    ? 'focus-visible:inset-shadow-[0_0_0_0.1875rem] focus-visible:inset-shadow-blue-500/48'
+    : [
+        'after:absolute after:content-[""] after:top-0 after:bottom-1 after:-z-1',
+        'after:rounded-t-sm after:pointer-events-none',
+        variant === 'fullWidth'
+          ? 'after:inset-x-0'
+          : 'after:-inset-x-1 first-of-type:after:left-0 last-of-type:after:right-0',
+        'focus-visible:not-data-disabled:opacity-100 focus-visible:after:bg-gray-100',
+        'focus-visible:after:inset-shadow-[0_-0.125rem_0_0] focus-visible:after:inset-shadow-gray-500',
+      ]
+
 const classesByVariant = {
   scrollable: 'shrink-0 max-w-[264px]',
   fullWidth: 'shrink grow basis-0',
@@ -151,6 +164,7 @@ export const Tab = forwardRef<HTMLButtonElement, Props>(function Tab(
           icon && isHorizontal && 'min-h-0 pr-6',
           'min-w-0 sm:min-w-[160px] md:min-w-[auto]',
           'border-0 cursor-pointer inline-flex outline-hidden',
+          getFocusClasses(orientation, variant),
           'items-center select-none align-middle appearance-none',
           'justify-center no-underline [-webkit-tap-highlight-color:transparent]',
           'normal-case whitespace-normal leading-4',

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

@@ -22,7 +22,7 @@ exports[`Tab Tab disabled tab 1`] = `
           <button
             aria-disabled="true"
             aria-selected="false"
-            class="opacity-50 m-0 [&:not(:last-of-type)]:mr p-0 pb-[0.4375rem] text-center bg-transparent z-10 rounded-none shrink-0 max-w text-gray pointer-events min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="opacity-50 m-0 [&:not(:last-of-type)]:mr p-0 pb-[0.4375rem] text-center bg-transparent z-10 rounded-none shrink-0 max-w text-gray pointer-events min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden after:absolute after:content-[""] after:top-0 after:bottom-1 after:-z after:rounded-t after:pointer-events after:-inset-x first-of-type:after:left last-of-type:after:right focus-visible:not-data-disabled:opacity focus-visible:after:bg-gray focus-visible:after:inset-shadow-[0_ focus-visible:after:inset-shadow-gray items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
             data-activation-direction="none"
             data-disabled=""
             data-orientation="horizontal"
@@ -70,7 +70,7 @@ exports[`Tab Tab renders 1`] = `
           <button
             aria-disabled="false"
             aria-selected="false"
-            class="opacity-70 m-0 [&:not(:last-of-type)]:mr p-0 pb-[0.4375rem] text-center bg-transparent z-10 rounded-none text-inheritColor shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="opacity-70 m-0 [&:not(:last-of-type)]:mr p-0 pb-[0.4375rem] text-center bg-transparent z-10 rounded-none text-inheritColor shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden after:absolute after:content-[""] after:top-0 after:bottom-1 after:-z after:rounded-t after:pointer-events after:-inset-x first-of-type:after:left last-of-type:after:right focus-visible:not-data-disabled:opacity focus-visible:after:bg-gray focus-visible:after:inset-shadow-[0_ focus-visible:after:inset-shadow-gray items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
             data-activation-direction="none"
             data-orientation="horizontal"
             id="base-ui-:r0:"
@@ -117,7 +117,7 @@ exports[`Tab Tab tab with icon 1`] = `
           <button
             aria-disabled="false"
             aria-selected="false"
-            class="opacity-70 m-0 [&:not(:last-of-type)]:mr p-0 pb-[0.4375rem] text-center bg-transparent z-10 rounded-none text-inheritColor shrink-0 max-w min-h pr-6 min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="opacity-70 m-0 [&:not(:last-of-type)]:mr p-0 pb-[0.4375rem] text-center bg-transparent z-10 rounded-none text-inheritColor shrink-0 max-w min-h pr-6 min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden after:absolute after:content-[""] after:top-0 after:bottom-1 after:-z after:rounded-t after:pointer-events after:-inset-x first-of-type:after:left last-of-type:after:right focus-visible:not-data-disabled:opacity focus-visible:after:bg-gray focus-visible:after:inset-shadow-[0_ focus-visible:after:inset-shadow-gray items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
             data-activation-direction="none"
             data-orientation="horizontal"
             id="base-ui-:r2:"

package/src/Tabs/Tabs.tsx

@@ -159,6 +159,6 @@ const Tabs = forwardRef(
   }
 ) as <V extends TabsValueType = TabsValueType>(
   props: Props<V> & { ref?: ForwardedRef<HTMLDivElement> }
-) => React.ReactElement
+) => JSX.Element
 
 export default Tabs

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

@@ -22,7 +22,7 @@ exports[`Tabs renders 1`] = `
           <button
             aria-disabled="false"
             aria-selected="false"
-            class="opacity-70 m-0 [&:not(:last-of-type)]:mr p-0 pb-[0.4375rem] text-center bg-transparent z-10 rounded-none text-inheritColor shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="opacity-70 m-0 [&:not(:last-of-type)]:mr p-0 pb-[0.4375rem] text-center bg-transparent z-10 rounded-none text-inheritColor shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden after:absolute after:content-[""] after:top-0 after:bottom-1 after:-z after:rounded-t after:pointer-events after:-inset-x first-of-type:after:left last-of-type:after:right focus-visible:not-data-disabled:opacity focus-visible:after:bg-gray focus-visible:after:inset-shadow-[0_ focus-visible:after:inset-shadow-gray items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
             data-activation-direction="none"
             data-orientation="horizontal"
             data-testid="tab-1"
@@ -44,7 +44,7 @@ exports[`Tabs renders 1`] = `
           <button
             aria-disabled="false"
             aria-selected="false"
-            class="opacity-70 m-0 [&:not(:last-of-type)]:mr p-0 pb-[0.4375rem] text-center bg-transparent z-10 rounded-none text-inheritColor shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="opacity-70 m-0 [&:not(:last-of-type)]:mr p-0 pb-[0.4375rem] text-center bg-transparent z-10 rounded-none text-inheritColor shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden after:absolute after:content-[""] after:top-0 after:bottom-1 after:-z after:rounded-t after:pointer-events after:-inset-x first-of-type:after:left last-of-type:after:right focus-visible:not-data-disabled:opacity focus-visible:after:bg-gray focus-visible:after:inset-shadow-[0_ focus-visible:after:inset-shadow-gray items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
             data-activation-direction="none"
             data-orientation="horizontal"
             data-testid="tab-2"
@@ -92,7 +92,7 @@ exports[`Tabs renders in full width 1`] = `
           <button
             aria-disabled="false"
             aria-selected="false"
-            class="opacity-70 m-0 [&:not(:last-of-type)]:mr p-0 pb-[0.4375rem] text-center bg-transparent z-10 rounded-none text-inheritColor shrink grow basis-0 min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="opacity-70 m-0 [&:not(:last-of-type)]:mr p-0 pb-[0.4375rem] text-center bg-transparent z-10 rounded-none text-inheritColor shrink grow basis-0 min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden after:absolute after:content-[""] after:top-0 after:bottom-1 after:-z after:rounded-t after:pointer-events after:inset-x focus-visible:not-data-disabled:opacity focus-visible:after:bg-gray focus-visible:after:inset-shadow-[0_ focus-visible:after:inset-shadow-gray items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
             data-activation-direction="none"
             data-orientation="horizontal"
             data-testid="tab-1"
@@ -114,7 +114,7 @@ exports[`Tabs renders in full width 1`] = `
           <button
             aria-disabled="false"
             aria-selected="false"
-            class="opacity-70 m-0 [&:not(:last-of-type)]:mr p-0 pb-[0.4375rem] text-center bg-transparent z-10 rounded-none text-inheritColor shrink grow basis-0 min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="opacity-70 m-0 [&:not(:last-of-type)]:mr p-0 pb-[0.4375rem] text-center bg-transparent z-10 rounded-none text-inheritColor shrink grow basis-0 min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden after:absolute after:content-[""] after:top-0 after:bottom-1 after:-z after:rounded-t after:pointer-events after:inset-x focus-visible:not-data-disabled:opacity focus-visible:after:bg-gray focus-visible:after:inset-shadow-[0_ focus-visible:after:inset-shadow-gray items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
             data-activation-direction="none"
             data-orientation="horizontal"
             data-testid="tab-2"
@@ -163,7 +163,7 @@ exports[`Tabs renders in vertical orientation 1`] = `
           <button
             aria-disabled="false"
             aria-selected="false"
-            class="opacity-100 first-of-type:mt last-of-type:mb my-1 mx-0 py-2 px-4 text-left rounded-l rounded-r transition-all w-full overflow-hidden bg-gray hover:bg-gray text-graphite hover:text-black shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="opacity-100 first-of-type:mt last-of-type:mb my-1 mx-0 py-2 px-4 text-left rounded-l rounded-r transition-all w-full overflow-hidden bg-gray hover:bg-gray text-graphite hover:text-black shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden focus-visible:inset-shadow focus-visible:inset-shadow-blue items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
             data-activation-direction="none"
             data-orientation="vertical"
             data-testid="tab-1"
@@ -176,16 +176,20 @@ exports[`Tabs renders in vertical orientation 1`] = `
               class="w-full block"
             >
               <div
-                class="m-0 text-md text-inherit font-semibold whitespace-nowrap [-webkit-box overflow-hidden text-ellipsis pr-[0.9px] block"
+                class="m-0 text-md text-inherit font-semibold whitespace-nowrap [-webkit-box overflow-hidden text-ellipsis pr-[0.9px] block relative"
               >
                 Tab 1
+                <span
+                  aria-hidden="true"
+                  class="absolute inset-0"
+                />
               </div>
             </span>
           </button>
           <button
             aria-disabled="false"
             aria-selected="false"
-            class="opacity-100 first-of-type:mt last-of-type:mb my-1 mx-0 py-2 px-4 text-left rounded-l rounded-r transition-all w-full overflow-hidden bg-gray hover:bg-gray text-graphite hover:text-black shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="opacity-100 first-of-type:mt last-of-type:mb my-1 mx-0 py-2 px-4 text-left rounded-l rounded-r transition-all w-full overflow-hidden bg-gray hover:bg-gray text-graphite hover:text-black shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden focus-visible:inset-shadow focus-visible:inset-shadow-blue items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
             data-activation-direction="none"
             data-orientation="vertical"
             data-testid="tab-2"
@@ -198,9 +202,13 @@ exports[`Tabs renders in vertical orientation 1`] = `
               class="w-full block"
             >
               <div
-                class="m-0 text-md text-inherit font-semibold whitespace-nowrap [-webkit-box overflow-hidden text-ellipsis pr-[0.9px] block"
+                class="m-0 text-md text-inherit font-semibold whitespace-nowrap [-webkit-box overflow-hidden text-ellipsis pr-[0.9px] block relative"
               >
                 Tab 2
+                <span
+                  aria-hidden="true"
+                  class="absolute inset-0"
+                />
               </div>
             </span>
           </button>
@@ -233,7 +241,7 @@ exports[`Tabs renders with a pre-selected option 1`] = `
           <button
             aria-disabled="false"
             aria-selected="false"
-            class="opacity-70 m-0 [&:not(:last-of-type)]:mr p-0 pb-[0.4375rem] text-center bg-transparent z-10 rounded-none text-inheritColor shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="opacity-70 m-0 [&:not(:last-of-type)]:mr p-0 pb-[0.4375rem] text-center bg-transparent z-10 rounded-none text-inheritColor shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden after:absolute after:content-[""] after:top-0 after:bottom-1 after:-z after:rounded-t after:pointer-events after:-inset-x first-of-type:after:left last-of-type:after:right focus-visible:not-data-disabled:opacity focus-visible:after:bg-gray focus-visible:after:inset-shadow-[0_ focus-visible:after:inset-shadow-gray items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
             data-activation-direction="none"
             data-orientation="horizontal"
             data-testid="tab-1"
@@ -255,7 +263,7 @@ exports[`Tabs renders with a pre-selected option 1`] = `
           <button
             aria-disabled="false"
             aria-selected="true"
-            class="opacity-100 m-0 [&:not(:last-of-type)]:mr p-0 pb-[0.4375rem] text-center bg-transparent z-10 rounded-none text-black shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="opacity-100 m-0 [&:not(:last-of-type)]:mr p-0 pb-[0.4375rem] text-center bg-transparent z-10 rounded-none text-black shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden after:absolute after:content-[""] after:top-0 after:bottom-1 after:-z after:rounded-t after:pointer-events after:-inset-x first-of-type:after:left last-of-type:after:right focus-visible:not-data-disabled:opacity focus-visible:after:bg-gray focus-visible:after:inset-shadow-[0_ focus-visible:after:inset-shadow-gray items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
             data-activation-direction="none"
             data-active=""
             data-composite-item-active=""
@@ -320,7 +328,7 @@ exports[`Tabs renders with a pre-selected option using custom value 1`] = `
           <button
             aria-disabled="false"
             aria-selected="true"
-            class="opacity-100 m-0 [&:not(:last-of-type)]:mr p-0 pb-[0.4375rem] text-center bg-transparent z-10 rounded-none text-black shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="opacity-100 m-0 [&:not(:last-of-type)]:mr p-0 pb-[0.4375rem] text-center bg-transparent z-10 rounded-none text-black shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden after:absolute after:content-[""] after:top-0 after:bottom-1 after:-z after:rounded-t after:pointer-events after:-inset-x first-of-type:after:left last-of-type:after:right focus-visible:not-data-disabled:opacity focus-visible:after:bg-gray focus-visible:after:inset-shadow-[0_ focus-visible:after:inset-shadow-gray items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
             data-activation-direction="none"
             data-active=""
             data-composite-item-active=""
@@ -344,7 +352,7 @@ exports[`Tabs renders with a pre-selected option using custom value 1`] = `
           <button
             aria-disabled="false"
             aria-selected="false"
-            class="opacity-70 m-0 [&:not(:last-of-type)]:mr p-0 pb-[0.4375rem] text-center bg-transparent z-10 rounded-none text-inheritColor shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="opacity-70 m-0 [&:not(:last-of-type)]:mr p-0 pb-[0.4375rem] text-center bg-transparent z-10 rounded-none text-inheritColor shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden after:absolute after:content-[""] after:top-0 after:bottom-1 after:-z after:rounded-t after:pointer-events after:-inset-x first-of-type:after:left last-of-type:after:right focus-visible:not-data-disabled:opacity focus-visible:after:bg-gray focus-visible:after:inset-shadow-[0_ focus-visible:after:inset-shadow-gray items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
             data-activation-direction="none"
             data-orientation="horizontal"
             data-testid="tab-2"