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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/dist-package/src/Tab/Tab.d.ts +3 -3
  2. package/dist-package/src/Tab/Tab.d.ts.map +1 -1
  3. package/dist-package/src/Tab/Tab.js +13 -1
  4. package/dist-package/src/Tab/Tab.js.map +1 -1
  5. package/dist-package/src/Tabs/Tabs.d.ts +1 -1
  6. package/dist-package/src/Tabs/Tabs.d.ts.map +1 -1
  7. package/dist-package/src/Tabs/Tabs.js.map +1 -1
  8. package/dist-package/src/TabsCompound/index.d.ts +1 -1
  9. package/dist-package/src/TabsCompound/index.d.ts.map +1 -1
  10. package/package.json +14 -14
  11. package/src/Tab/Tab.tsx +21 -7
  12. package/src/Tab/__snapshots__/test.tsx.snap +3 -3
  13. package/src/Tabs/Tabs.tsx +1 -1
  14. package/src/Tabs/__snapshots__/test.tsx.snap +10 -10
package/dist-package/src/Tab/Tab.d.ts CHANGED
@@ -1,6 +1,6 @@
1
- import type { ReactNode, HTMLAttributes } from 'react';
1
+ import type { ReactNode, HTMLAttributes, ReactElement } from 'react';
2
2
  import React from 'react';
3
- import type { BaseProps, TextLabelProps, IconElement } from '@toptal/picasso-shared';
3
+ import type { BaseProps, TextLabelProps } from '@toptal/picasso-shared';
4
4
  import type { TabsValueType } from '../Tabs/Tabs';
5
5
  export interface Props extends BaseProps, TextLabelProps, Omit<HTMLAttributes<HTMLButtonElement>, 'onChange'> {
6
6
  /**
@@ -13,7 +13,7 @@ export interface Props extends BaseProps, TextLabelProps, Omit<HTMLAttributes<HT
13
13
  /** The label element */
14
14
  label?: ReactNode;
15
15
  /** The Icon element */
16
- icon?: IconElement;
16
+ icon?: ReactElement;
17
17
  /** Image URL */
18
18
  avatar?: string | null;
19
19
  /** Description */
package/dist-package/src/Tab/Tab.d.ts.map CHANGED
@@ -1 +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"}
1
+ {"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../src/Tab/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AACpE,OAAO,KAAiC,MAAM,OAAO,CAAA;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 CHANGED
@@ -57,6 +57,18 @@ const rootClassesByOrientation = (selected) => ({
57
57
  : 'bg-gray-100 hover:bg-gray-200 text-graphite-700 hover:text-black',
58
58
  ],
59
59
  });
60
+ // Tabs root clips overflow, so horizontal focus uses a widened `::after`
61
+ const getFocusClasses = (orientation, variant) => orientation === 'vertical'
62
+ ? 'focus-visible:inset-shadow-[0_0_0_0.1875rem] focus-visible:inset-shadow-blue-500/48'
63
+ : [
64
+ 'after:absolute after:content-[""] after:top-0 after:bottom-1 after:-z-1',
65
+ 'after:rounded-t-sm after:pointer-events-none',
66
+ variant === 'fullWidth'
67
+ ? 'after:inset-x-0'
68
+ : 'after:-inset-x-1 first-of-type:after:left-0 last-of-type:after:right-0',
69
+ 'focus-visible:not-data-disabled:opacity-100 focus-visible:after:bg-gray-100',
70
+ 'focus-visible:after:inset-shadow-[0_-0.125rem_0_0] focus-visible:after:inset-shadow-gray-500',
71
+ ];
60
72
  const classesByVariant = {
61
73
  scrollable: 'shrink-0 max-w-[264px]',
62
74
  fullWidth: 'shrink grow basis-0',
@@ -78,7 +90,7 @@ export const Tab = forwardRef(function Tab(props, ref) {
78
90
  orientation,
79
91
  titleCase,
80
92
  });
81
- 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) }),
93
+ 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) }),
82
94
  React.createElement("span", { className: twJoin('w-full', wrapperClassesByOrientation[orientation]) },
83
95
  renderLabel,
84
96
  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 CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../src/Tab/Tab.tsx"],"names":[],"mappings":"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"}
1
+ {"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 CHANGED
@@ -23,6 +23,6 @@ export declare const TabsContext: React.Context<{
23
23
  }>;
24
24
  declare const Tabs: <V extends TabsValueType = TabsValueType>(props: Props<V> & {
25
25
  ref?: ForwardedRef<HTMLDivElement>;
26
- }) => React.ReactElement;
26
+ }) => JSX.Element;
27
27
  export default Tabs;
28
28
  //# sourceMappingURL=Tabs.d.ts.map
package/dist-package/src/Tabs/Tabs.d.ts.map CHANGED
@@ -1 +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"}
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,GAAG,CAAC,OAAO,CAAA;AAEhB,eAAe,IAAI,CAAA"}
package/dist-package/src/Tabs/Tabs.js.map CHANGED
@@ -1 +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"}
1
+ {"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 CHANGED
@@ -1,6 +1,6 @@
1
1
  export declare const TabsCompound: (<V extends import("../Tabs").TabsValueType = import("../Tabs").TabsValueType>(props: import("../Tabs/Tabs").Props<V> & {
2
2
  ref?: import("react").ForwardedRef<HTMLDivElement>;
3
- }) => import("react").ReactElement) & {
3
+ }) => JSX.Element) & {
4
4
  Tab: import("react").ForwardRefExoticComponent<import("../Tab/Tab").Props & import("react").RefAttributes<HTMLButtonElement>>;
5
5
  };
6
6
  //# sourceMappingURL=index.d.ts.map
package/dist-package/src/TabsCompound/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TabsCompound/index.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY;OAGmkI,CAAC;;;CAD3lI,CAAA"}
1
+ {"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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@toptal/picasso-tabs",
3
- "version": "100.0.4-alpha-pf-react-19-improvements-970580a42.0",
3
+ "version": "100.0.4",
4
4
  "description": "Toptal UI components library - Tabs",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -20,30 +20,30 @@
20
20
  "dependencies": {
21
21
  "@base-ui/react": "^1.6.0",
22
22
  "ap-style-title-case": "^1.1.2",
23
- "@toptal/picasso-container": "100.0.2-alpha-pf-react-19-improvements-970580a42.0",
24
- "@toptal/picasso-icons": "100.0.2-alpha-pf-react-19-improvements-970580a42.0",
25
- "@toptal/picasso-shared": "100.1.1-alpha-pf-react-19-improvements-970580a42.0",
26
- "@toptal/picasso-typography": "100.0.2-alpha-pf-react-19-improvements-970580a42.0",
27
- "@toptal/picasso-typography-overflow": "100.0.3-alpha-pf-react-19-improvements-970580a42.0",
28
- "@toptal/picasso-user-badge": "100.0.3-alpha-pf-react-19-improvements-970580a42.0",
29
- "@toptal/picasso-utils": "100.0.2-alpha-pf-react-19-improvements-970580a42.0"
23
+ "@toptal/picasso-container": "100.0.1",
24
+ "@toptal/picasso-icons": "100.0.1",
25
+ "@toptal/picasso-user-badge": "100.0.2",
26
+ "@toptal/picasso-utils": "100.0.1",
27
+ "@toptal/picasso-shared": "100.1.0",
28
+ "@toptal/picasso-typography": "100.0.1",
29
+ "@toptal/picasso-typography-overflow": "100.0.2"
30
30
  },
31
31
  "sideEffects": [
32
32
  "**/styles.ts",
33
33
  "**/styles.js"
34
34
  ],
35
35
  "peerDependencies": {
36
- "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
37
- "@toptal/picasso-tailwind-merge": "^100.0.1-alpha-pf-react-19-improvements-970580a42.0",
38
- "@toptal/picasso-tailwind": "^100.0.1-alpha-pf-react-19-improvements-970580a42.0"
36
+ "react": ">=17.0.0 < 19.0.0",
37
+ "@toptal/picasso-tailwind-merge": "^100.0.0",
38
+ "@toptal/picasso-tailwind": "^100.0.0"
39
39
  },
40
40
  "exports": {
41
41
  ".": "./dist-package/src/index.js"
42
42
  },
43
43
  "devDependencies": {
44
- "@toptal/picasso-provider": "100.2.1-alpha-pf-react-19-improvements-970580a42.0",
45
- "@toptal/picasso-tailwind-merge": "100.0.1-alpha-pf-react-19-improvements-970580a42.0",
46
- "@toptal/picasso-test-utils": "100.1.1-alpha-pf-react-19-improvements-970580a42.0"
44
+ "@toptal/picasso-provider": "100.2.0",
45
+ "@toptal/picasso-tailwind-merge": "100.0.0",
46
+ "@toptal/picasso-test-utils": "100.1.0"
47
47
  },
48
48
  "files": [
49
49
  "dist-package/**",
package/src/Tab/Tab.tsx CHANGED
@@ -1,11 +1,7 @@
1
- import type { ReactNode, HTMLAttributes } from 'react'
1
+ import type { ReactNode, HTMLAttributes, ReactElement } from 'react'
2
2
  import React, { forwardRef, useContext } from 'react'
3
3
  import { Tabs as BaseUITabs } from '@base-ui/react/tabs'
4
- import type {
5
- BaseProps,
6
- TextLabelProps,
7
- IconElement,
8
- } from '@toptal/picasso-shared'
4
+ import type { BaseProps, TextLabelProps } from '@toptal/picasso-shared'
9
5
  import { useTitleCase } from '@toptal/picasso-shared'
10
6
  import { UserBadge } from '@toptal/picasso-user-badge'
11
7
  import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge'
@@ -32,7 +28,7 @@ export interface Props
32
28
  label?: ReactNode
33
29
 
34
30
  /** The Icon element */
35
- icon?: IconElement
31
+ icon?: ReactElement
36
32
 
37
33
  /** Image URL */
38
34
  avatar?: string | null
@@ -96,6 +92,23 @@ const rootClassesByOrientation = (selected: boolean) => ({
96
92
  ],
97
93
  })
98
94
 
95
+ // Tabs root clips overflow, so horizontal focus uses a widened `::after`
96
+ const getFocusClasses = (
97
+ orientation: 'horizontal' | 'vertical',
98
+ variant: 'scrollable' | 'fullWidth'
99
+ ) =>
100
+ orientation === 'vertical'
101
+ ? 'focus-visible:inset-shadow-[0_0_0_0.1875rem] focus-visible:inset-shadow-blue-500/48'
102
+ : [
103
+ 'after:absolute after:content-[""] after:top-0 after:bottom-1 after:-z-1',
104
+ 'after:rounded-t-sm after:pointer-events-none',
105
+ variant === 'fullWidth'
106
+ ? 'after:inset-x-0'
107
+ : 'after:-inset-x-1 first-of-type:after:left-0 last-of-type:after:right-0',
108
+ 'focus-visible:not-data-disabled:opacity-100 focus-visible:after:bg-gray-100',
109
+ 'focus-visible:after:inset-shadow-[0_-0.125rem_0_0] focus-visible:after:inset-shadow-gray-500',
110
+ ]
111
+
99
112
  const classesByVariant = {
100
113
  scrollable: 'shrink-0 max-w-[264px]',
101
114
  fullWidth: 'shrink grow basis-0',
@@ -151,6 +164,7 @@ export const Tab = forwardRef<HTMLButtonElement, Props>(function Tab(
151
164
  icon && isHorizontal && 'min-h-0 pr-6',
152
165
  'min-w-0 sm:min-w-[160px] md:min-w-[auto]',
153
166
  'border-0 cursor-pointer inline-flex outline-hidden',
167
+ getFocusClasses(orientation, variant),
154
168
  'items-center select-none align-middle appearance-none',
155
169
  'justify-center no-underline [-webkit-tap-highlight-color:transparent]',
156
170
  'normal-case whitespace-normal leading-4',
package/src/Tab/__snapshots__/test.tsx.snap CHANGED
@@ -22,7 +22,7 @@ exports[`Tab Tab disabled tab 1`] = `
22
22
  <button
23
23
  aria-disabled="true"
24
24
  aria-selected="false"
25
- 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"
25
+ 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"
26
26
  data-activation-direction="none"
27
27
  data-disabled=""
28
28
  data-orientation="horizontal"
@@ -70,7 +70,7 @@ exports[`Tab Tab renders 1`] = `
70
70
  <button
71
71
  aria-disabled="false"
72
72
  aria-selected="false"
73
- 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"
73
+ 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"
74
74
  data-activation-direction="none"
75
75
  data-orientation="horizontal"
76
76
  id="base-ui-:r0:"
@@ -117,7 +117,7 @@ exports[`Tab Tab tab with icon 1`] = `
117
117
  <button
118
118
  aria-disabled="false"
119
119
  aria-selected="false"
120
- 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"
120
+ 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"
121
121
  data-activation-direction="none"
122
122
  data-orientation="horizontal"
123
123
  id="base-ui-:r2:"
package/src/Tabs/Tabs.tsx CHANGED
@@ -159,6 +159,6 @@ const Tabs = forwardRef(
159
159
  }
160
160
  ) as <V extends TabsValueType = TabsValueType>(
161
161
  props: Props<V> & { ref?: ForwardedRef<HTMLDivElement> }
162
- ) => React.ReactElement
162
+ ) => JSX.Element
163
163
 
164
164
  export default Tabs
package/src/Tabs/__snapshots__/test.tsx.snap CHANGED
@@ -22,7 +22,7 @@ exports[`Tabs renders 1`] = `
22
22
  <button
23
23
  aria-disabled="false"
24
24
  aria-selected="false"
25
- 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"
25
+ 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"
26
26
  data-activation-direction="none"
27
27
  data-orientation="horizontal"
28
28
  data-testid="tab-1"
@@ -44,7 +44,7 @@ exports[`Tabs renders 1`] = `
44
44
  <button
45
45
  aria-disabled="false"
46
46
  aria-selected="false"
47
- 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"
47
+ 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"
48
48
  data-activation-direction="none"
49
49
  data-orientation="horizontal"
50
50
  data-testid="tab-2"
@@ -92,7 +92,7 @@ exports[`Tabs renders in full width 1`] = `
92
92
  <button
93
93
  aria-disabled="false"
94
94
  aria-selected="false"
95
- 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"
95
+ 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"
96
96
  data-activation-direction="none"
97
97
  data-orientation="horizontal"
98
98
  data-testid="tab-1"
@@ -114,7 +114,7 @@ exports[`Tabs renders in full width 1`] = `
114
114
  <button
115
115
  aria-disabled="false"
116
116
  aria-selected="false"
117
- 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"
117
+ 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"
118
118
  data-activation-direction="none"
119
119
  data-orientation="horizontal"
120
120
  data-testid="tab-2"
@@ -163,7 +163,7 @@ exports[`Tabs renders in vertical orientation 1`] = `
163
163
  <button
164
164
  aria-disabled="false"
165
165
  aria-selected="false"
166
- 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"
166
+ 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"
167
167
  data-activation-direction="none"
168
168
  data-orientation="vertical"
169
169
  data-testid="tab-1"
@@ -185,7 +185,7 @@ exports[`Tabs renders in vertical orientation 1`] = `
185
185
  <button
186
186
  aria-disabled="false"
187
187
  aria-selected="false"
188
- 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"
188
+ 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"
189
189
  data-activation-direction="none"
190
190
  data-orientation="vertical"
191
191
  data-testid="tab-2"
@@ -233,7 +233,7 @@ exports[`Tabs renders with a pre-selected option 1`] = `
233
233
  <button
234
234
  aria-disabled="false"
235
235
  aria-selected="false"
236
- 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"
236
+ 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"
237
237
  data-activation-direction="none"
238
238
  data-orientation="horizontal"
239
239
  data-testid="tab-1"
@@ -255,7 +255,7 @@ exports[`Tabs renders with a pre-selected option 1`] = `
255
255
  <button
256
256
  aria-disabled="false"
257
257
  aria-selected="true"
258
- 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"
258
+ 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"
259
259
  data-activation-direction="none"
260
260
  data-active=""
261
261
  data-composite-item-active=""
@@ -320,7 +320,7 @@ exports[`Tabs renders with a pre-selected option using custom value 1`] = `
320
320
  <button
321
321
  aria-disabled="false"
322
322
  aria-selected="true"
323
- 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"
323
+ 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"
324
324
  data-activation-direction="none"
325
325
  data-active=""
326
326
  data-composite-item-active=""
@@ -344,7 +344,7 @@ exports[`Tabs renders with a pre-selected option using custom value 1`] = `
344
344
  <button
345
345
  aria-disabled="false"
346
346
  aria-selected="false"
347
- 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"
347
+ 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"
348
348
  data-activation-direction="none"
349
349
  data-orientation="horizontal"
350
350
  data-testid="tab-2"