@coinbase/cds-web 8.48.3 → 8.49.1

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 (11) hide show
  1. package/CHANGELOG.md +14 -2
  2. package/dts/tabs/SegmentedTab.d.ts.map +1 -1
  3. package/dts/tabs/SegmentedTabs.d.ts +23 -1
  4. package/dts/tabs/SegmentedTabs.d.ts.map +1 -1
  5. package/dts/tabs/Tabs.d.ts +22 -1
  6. package/dts/tabs/Tabs.d.ts.map +1 -1
  7. package/esm/navigation/__figma__/SidebarItem.figma.js +24 -28
  8. package/esm/tabs/SegmentedTab.js +9 -8
  9. package/esm/tabs/SegmentedTabs.js +18 -3
  10. package/esm/tabs/Tabs.js +28 -4
  11. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -8,6 +8,18 @@ All notable changes to this project will be documented in this file.
8
8
 
9
9
  <!-- template-start -->
10
10
 
11
+ ## 8.49.1 (3/5/2026 PST)
12
+
13
+ #### 🐞 Fixes
14
+
15
+ - Fix: spread tabs props at end for Tabs. [[#472](https://github.com/coinbase/cds/pull/472)]
16
+
17
+ ## 8.49.0 (2/26/2026 PST)
18
+
19
+ #### 🚀 Updates
20
+
21
+ - Add styles and classnames props to Tab components. [[#438](https://github.com/coinbase/cds/pull/438)]
22
+
11
23
  ## 8.48.3 (2/25/2026 PST)
12
24
 
13
25
  #### 🐞 Fixes
@@ -417,7 +429,7 @@ This is an artificial version bump with no new change.
417
429
 
418
430
  #### 🐞 Fixes
419
431
 
420
- - Improve keyboard navigation for Tabs components and upadate ARIA roles. [[#96](https://github.com/coinbase/cds/pull/96)]
432
+ - Improve keyboard navigation for Tabs components and update ARIA roles. [[#96](https://github.com/coinbase/cds/pull/96)]
421
433
 
422
434
  ## 8.25.0 (12/1/2025 PST)
423
435
 
@@ -499,7 +511,7 @@ This is an artificial version bump with no new change.
499
511
 
500
512
  - Fixed select alpha dropdown zIndex. [[#161](https://github.com/coinbase/cds/pull/161)]
501
513
  - Corrected ListCell spacingVariant jsdoc. [[#161](https://github.com/coinbase/cds/pull/161)]
502
- - Updated docs of FullscreenMoal and FullscreenModalLayout to show a more precise 3-column layout example. [[#161](https://github.com/coinbase/cds/pull/161)]
514
+ - Updated docs of FullscreenModal and FullscreenModalLayout to show a more precise 3-column layout example. [[#161](https://github.com/coinbase/cds/pull/161)]
503
515
 
504
516
  ## 8.21.0 (11/12/2025 PST)
505
517
 
package/dts/tabs/SegmentedTab.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SegmentedTab.d.ts","sourceRoot":"","sources":["../../src/tabs/SegmentedTab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AACtE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAOlE,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAkCzE,MAAM,MAAM,iBAAiB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,kBAAkB,GAC/E,QAAQ,CAAC,KAAK,CAAC,GAAG;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC9B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACxB,+DAA+D;IAC/D,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CACxD,CAAC;AAMJ,KAAK,qBAAqB,GAAG,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,EACzD,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAA;CAAE,KAC9E,KAAK,CAAC,YAAY,CAAC;AAExB,QAAA,MAAM,qBAAqB;;;;IAtBvB;;;OAGG;kBACW,SAAS,CAAC,KAAK;IAC7B;;;OAGG;YACK,SAAS,CAAC,KAAK;IACvB,+DAA+D;mCAClC,KAAK,CAAC,UAAU,KAAK,IAAI;4CAuGzD,CAAC;AAIF,eAAO,MAAM,YAAY,EAA4B,qBAAqB,CAAC"}
1
+ {"version":3,"file":"SegmentedTab.d.ts","sourceRoot":"","sources":["../../src/tabs/SegmentedTab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AACtE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAMlE,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAkCzE,MAAM,MAAM,iBAAiB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,kBAAkB,GAC/E,QAAQ,CAAC,KAAK,CAAC,GAAG;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC9B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACxB,+DAA+D;IAC/D,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CACxD,CAAC;AAMJ,KAAK,qBAAqB,GAAG,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,EACzD,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAA;CAAE,KAC9E,KAAK,CAAC,YAAY,CAAC;AAExB,QAAA,MAAM,qBAAqB;;;;IAtBvB;;;OAGG;kBACW,SAAS,CAAC,KAAK;IAC7B;;;OAGG;YACK,SAAS,CAAC,KAAK;IACvB,+DAA+D;mCAClC,KAAK,CAAC,UAAU,KAAK,IAAI;4CAuGzD,CAAC;AAIF,eAAO,MAAM,YAAY,EAA4B,qBAAqB,CAAC"}
package/dts/tabs/SegmentedTabs.d.ts CHANGED
@@ -3,7 +3,29 @@ import { type TabsProps } from './Tabs';
3
3
  export type SegmentedTabsProps<TabId extends string = string> = Partial<
4
4
  Pick<TabsProps<TabId>, 'TabComponent' | 'TabsActiveIndicatorComponent'>
5
5
  > &
6
- Omit<TabsProps<TabId>, 'TabComponent' | 'TabsActiveIndicatorComponent'>;
6
+ Omit<
7
+ TabsProps<TabId>,
8
+ 'TabComponent' | 'TabsActiveIndicatorComponent' | 'styles' | 'classNames'
9
+ > & {
10
+ /** Custom styles for individual elements of the SegmentedTabs component */
11
+ styles?: {
12
+ /** Root element */
13
+ root?: React.CSSProperties;
14
+ /** Tab element */
15
+ tab?: React.CSSProperties;
16
+ /** Active indicator element */
17
+ activeIndicator?: React.CSSProperties;
18
+ };
19
+ /** Custom class names for individual elements of the SegmentedTabs component */
20
+ classNames?: {
21
+ /** Root element */
22
+ root?: string;
23
+ /** Tab element */
24
+ tab?: string;
25
+ /** Active indicator element */
26
+ activeIndicator?: string;
27
+ };
28
+ };
7
29
  type SegmentedTabsFC = <TabId extends string>(
8
30
  props: SegmentedTabsProps<TabId> & {
9
31
  ref?: React.ForwardedRef<HTMLElement>;
package/dts/tabs/SegmentedTabs.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SegmentedTabs.d.ts","sourceRoot":"","sources":["../../src/tabs/SegmentedTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAIhD,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAE9C,MAAM,MAAM,kBAAkB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,OAAO,CACrE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,8BAA8B,CAAC,CACxE,GACC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,8BAA8B,CAAC,CAAC;AAE1E,KAAK,eAAe,GAAG,CAAC,KAAK,SAAS,MAAM,EAC1C,KAAK,EAAE,kBAAkB,CAAC,KAAK,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;CAAE,KACzE,KAAK,CAAC,YAAY,CAAC;AA+BxB,eAAO,MAAM,aAAa,EAA6B,eAAe,CAAC"}
1
+ {"version":3,"file":"SegmentedTabs.d.ts","sourceRoot":"","sources":["../../src/tabs/SegmentedTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAMhD,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAE9C,MAAM,MAAM,kBAAkB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,OAAO,CACrE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,8BAA8B,CAAC,CACxE,GACC,IAAI,CACF,SAAS,CAAC,KAAK,CAAC,EAChB,cAAc,GAAG,8BAA8B,GAAG,QAAQ,GAAG,YAAY,CAC1E,GAAG;IACF,2EAA2E;IAC3E,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B,kBAAkB;QAClB,GAAG,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC1B,+BAA+B;QAC/B,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KACvC,CAAC;IACF,gFAAgF;IAChF,UAAU,CAAC,EAAE;QACX,mBAAmB;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,kBAAkB;QAClB,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,+BAA+B;QAC/B,eAAe,CAAC,EAAE,MAAM,CAAC;KAC1B,CAAC;CACH,CAAC;AAEJ,KAAK,eAAe,GAAG,CAAC,KAAK,SAAS,MAAM,EAC1C,KAAK,EAAE,kBAAkB,CAAC,KAAK,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;CAAE,KACzE,KAAK,CAAC,YAAY,CAAC;AA6CxB,eAAO,MAAM,aAAa,EAA6B,eAAe,CAAC"}
package/dts/tabs/Tabs.d.ts CHANGED
@@ -24,6 +24,8 @@ export type TabComponentProps<TabId extends string = string> = TabValue<TabId> &
24
24
  * @default "tab"
25
25
  */
26
26
  role?: string;
27
+ className?: string;
28
+ style?: React.CSSProperties;
27
29
  };
28
30
  export type TabComponent<TabId extends string = string> = React.FC<TabComponentProps<TabId>>;
29
31
  export type TabsActiveIndicatorComponent = React.FC<TabsActiveIndicatorProps>;
@@ -42,7 +44,26 @@ export type TabsBaseProps<TabId extends string = string> = {
42
44
  onActiveTabElementChange?: (element: HTMLElement | null) => void;
43
45
  } & Omit<TabsOptions<TabId>, 'tabs'>;
44
46
  export type TabsProps<TabId extends string = string> = TabsBaseProps<TabId> &
45
- Omit<HStackProps<HStackDefaultElement>, 'onChange' | 'ref'>;
47
+ Omit<HStackProps<HStackDefaultElement>, 'onChange' | 'ref'> & {
48
+ /** Custom styles for individual elements of the Tabs component */
49
+ styles?: {
50
+ /** Root element */
51
+ root?: React.CSSProperties;
52
+ /** Tab element */
53
+ tab?: React.CSSProperties;
54
+ /** Active indicator element */
55
+ activeIndicator?: React.CSSProperties;
56
+ };
57
+ /** Custom class names for individual elements of the Tabs component */
58
+ classNames?: {
59
+ /** Root element */
60
+ root?: string;
61
+ /** Tab element */
62
+ tab?: string;
63
+ /** Active indicator element */
64
+ activeIndicator?: string;
65
+ };
66
+ };
46
67
  type TabsFC = <TabId extends string = string>(
47
68
  props: TabsProps<TabId> & {
48
69
  ref?: React.ForwardedRef<HTMLElement>;
package/dts/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,KAAiD,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAIjE,OAAO,EAEL,KAAK,WAAW,EAChB,KAAK,QAAQ,EAEd,MAAM,mCAAmC,CAAC;AAE3C,OAAO,EAAe,KAAK,IAAI,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAe,KAAK,WAAW,EAAmB,MAAM,eAAe,CAAC;AAE/E,OAAO,EAAO,KAAK,iBAAiB,EAAE,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAU,KAAK,oBAAoB,EAAE,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAkBvF,eAAO,MAAM,oBAAoB;;;;;;CAMF,CAAC;AAEhC,MAAM,MAAM,wBAAwB,GAAG;IACrC,aAAa,EAAE,IAAI,CAAC;CACrB,GAAG,QAAQ,CAAC,iBAAiB,CAAC,GAC7B,WAAW,CAAC;AAEd,MAAM,MAAM,iBAAiB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,QAAQ,CAAC,KAAK,CAAC,GAAG;IAC/E,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,YAAY,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC;AAE7F,MAAM,MAAM,4BAA4B,GAAG,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAAC,CAAC;AAE9E,MAAM,MAAM,aAAa,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI;IACzD,2FAA2F;IAC3F,IAAI,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG;QAAE,SAAS,CAAC,EAAE,YAAY,CAAC,KAAK,CAAC,CAAA;KAAE,CAAC,EAAE,CAAC;IAChE,gDAAgD;IAChD,YAAY,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC;IAClC,iEAAiE;IACjE,4BAA4B,EAAE,4BAA4B,CAAC;IAC3D,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACnC,2DAA2D;IAC3D,wBAAwB,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;CAClE,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,CAAC;AAErC,MAAM,MAAM,SAAS,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,aAAa,CAAC,KAAK,CAAC,GACzE,IAAI,CAAC,WAAW,CAAC,oBAAoB,CAAC,EAAE,UAAU,GAAG,KAAK,CAAC,CAAC;AAE9D,KAAK,MAAM,GAAG,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,EAC1C,KAAK,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;CAAE,KAChE,KAAK,CAAC,YAAY,CAAC;AAuJxB,eAAO,MAAM,IAAI,EAAoB,MAAM,CAAC;AAE5C,eAAO,MAAM,mBAAmB,GAAI,uCAIjC,wBAAwB,mDAiB1B,CAAC"}
1
+ {"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/tabs/Tabs.tsx"],"names":[],"mappings":"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"}
package/esm/navigation/__figma__/SidebarItem.figma.js CHANGED
@@ -1,28 +1,24 @@
1
- // import React from 'react';
2
- // import { figma } from '@figma/code-connect';
3
-
4
- // import { SidebarItem } from '../SidebarItem';
5
-
6
- // figma.connect(
7
- // SidebarItem,
8
- // 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=252-12892',
9
- // {
10
- // imports: ["import { SidebarItem } from '@coinbase/cds-web/navigation/SidebarItem';"],
11
- // variant: { type: 'default', state: 'default', active: 'true' },
12
- // props: {},
13
- // // @ts-expect-error not typed
14
- // example: (props) => <SidebarItem active {...props} />,
15
- // },
16
- // );
17
-
18
- // figma.connect(
19
- // SidebarItem,
20
- // 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=252-12892',
21
- // {
22
- // imports: ["import { SidebarItem } from '@coinbase/cds-web/navigation/SidebarItem';"],
23
- // variant: { type: 'compact', state: 'default', active: 'true' },
24
- // props: {},
25
- // // @ts-expect-error not typed
26
- // example: (props) => <SidebarItem active compact {...props} />,
27
- // },
28
- // );
1
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
2
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
3
+ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
4
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
5
+ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
6
+ import React from 'react';
7
+ import { figma } from '@figma/code-connect';
8
+ import { SidebarItem } from '../SidebarItem';
9
+ import { jsx as _jsx } from "react/jsx-runtime";
10
+ figma.connect(SidebarItem, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=252-12892', {
11
+ imports: ["import { SidebarItem } from '@coinbase/cds-web/navigation/SidebarItem';"],
12
+ variant: {
13
+ type: 'default',
14
+ state: 'default',
15
+ active: 'true'
16
+ },
17
+ props: {
18
+ title: figma.textContent('Label')
19
+ },
20
+ example: props => /*#__PURE__*/_jsx(SidebarItem, _objectSpread({
21
+ active: true,
22
+ icon: "home"
23
+ }, props))
24
+ });
package/esm/tabs/SegmentedTab.js CHANGED
@@ -15,7 +15,7 @@ import { Pressable } from '../system/Pressable';
15
15
  import { Text } from '../typography/Text';
16
16
  import { tabsTransitionConfig } from './Tabs';
17
17
  import { jsx as _jsx } from "react/jsx-runtime";
18
- const MotionText = motion(Text);
18
+ const MotionBox = motion(Box);
19
19
  const insetFocusRingCss = "insetFocusRingCss-i13o7yik";
20
20
  const buttonCss = "buttonCss-bijg88k";
21
21
  const buttonDisabledCss = "buttonDisabledCss-b265t1b";
@@ -75,23 +75,24 @@ const SegmentedTabComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
75
75
  textTransform: textTransform,
76
76
  type: "button"
77
77
  }, props), {}, {
78
- children: /*#__PURE__*/_jsx(Box, {
78
+ children: /*#__PURE__*/_jsx(MotionBox, _objectSpread(_objectSpread({
79
79
  as: "span",
80
80
  justifyContent: "center",
81
81
  paddingX: 2,
82
- paddingY: 1,
83
- children: typeof label === 'string' ? /*#__PURE__*/_jsx(MotionText, _objectSpread(_objectSpread({
82
+ paddingY: 1
83
+ }, motionProps), {}, {
84
+ children: typeof label === 'string' ? /*#__PURE__*/_jsx(Text, {
85
+ color: "currentColor",
84
86
  font: font,
85
87
  fontFamily: fontFamily,
86
88
  fontSize: fontSize,
87
89
  fontWeight: fontWeight,
88
90
  lineHeight: lineHeight,
89
91
  textAlign: textAlign,
90
- textTransform: textTransform
91
- }, motionProps), {}, {
92
+ textTransform: textTransform,
92
93
  children: label
93
- })) : label
94
- })
94
+ }) : label
95
+ }))
95
96
  }));
96
97
  }));
97
98
  SegmentedTabComponent.displayName = 'SegmentedTab';
package/esm/tabs/SegmentedTabs.js CHANGED
@@ -1,4 +1,4 @@
1
- const _excluded = ["TabComponent", "TabsActiveIndicatorComponent", "activeBackground", "background", "borderRadius"];
1
+ const _excluded = ["TabComponent", "TabsActiveIndicatorComponent", "activeBackground", "background", "borderRadius", "className", "classNames", "style", "styles"];
2
2
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
3
3
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
4
4
  function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -7,6 +7,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
7
7
  function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
8
8
  function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
9
9
  import React, { forwardRef, memo } from 'react';
10
+ import { cx } from '../cx';
10
11
  import { SegmentedTab } from './SegmentedTab';
11
12
  import { SegmentedTabsActiveIndicator } from './SegmentedTabsActiveIndicator';
12
13
  import { Tabs } from './Tabs';
@@ -17,7 +18,11 @@ const SegmentedTabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref,
17
18
  TabsActiveIndicatorComponent = SegmentedTabsActiveIndicator,
18
19
  activeBackground = 'bgInverse',
19
20
  background = 'bgSecondary',
20
- borderRadius = 1000
21
+ borderRadius = 700,
22
+ className,
23
+ classNames,
24
+ style,
25
+ styles
21
26
  } = _ref,
22
27
  props = _objectWithoutProperties(_ref, _excluded);
23
28
  return /*#__PURE__*/_jsx(Tabs, _objectSpread({
@@ -27,7 +32,17 @@ const SegmentedTabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref,
27
32
  activeBackground: activeBackground,
28
33
  background: background,
29
34
  borderRadius: borderRadius,
30
- role: "tablist"
35
+ className: cx(className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
36
+ classNames: {
37
+ tab: classNames === null || classNames === void 0 ? void 0 : classNames.tab,
38
+ activeIndicator: classNames === null || classNames === void 0 ? void 0 : classNames.activeIndicator
39
+ },
40
+ role: "tablist",
41
+ style: styles !== null && styles !== void 0 && styles.root ? _objectSpread(_objectSpread({}, style), styles.root) : style,
42
+ styles: {
43
+ tab: styles === null || styles === void 0 ? void 0 : styles.tab,
44
+ activeIndicator: styles === null || styles === void 0 ? void 0 : styles.activeIndicator
45
+ }
31
46
  }, props));
32
47
  }));
33
48
  SegmentedTabsComponent.displayName = 'SegmentedTabs';
package/esm/tabs/Tabs.js CHANGED
@@ -1,5 +1,5 @@
1
1
  const _excluded = ["id", "registerRef"],
2
- _excluded2 = ["tabs", "TabComponent", "TabsActiveIndicatorComponent", "activeBackground", "activeTab", "onActiveTabElementChange", "disabled", "onChange", "role", "position", "width", "style"],
2
+ _excluded2 = ["tabs", "TabComponent", "TabsActiveIndicatorComponent", "activeBackground", "activeTab", "onActiveTabElementChange", "disabled", "onChange", "className", "classNames", "styles", "role", "position", "width", "borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "style"],
3
3
  _excluded3 = ["id", "Component", "disabled"],
4
4
  _excluded4 = ["activeTabRect", "position"];
5
5
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -18,6 +18,7 @@ import { useTabs } from '@coinbase/cds-common/tabs/useTabs';
18
18
  import { accessibleOpacityDisabled } from '@coinbase/cds-common/tokens/interactable';
19
19
  import { defaultRect } from '@coinbase/cds-common/types/Rect';
20
20
  import { m as motion } from 'framer-motion';
21
+ import { cx } from '../cx';
21
22
  import { Box } from '../layout/Box';
22
23
  import { HStack } from '../layout/HStack';
23
24
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -50,9 +51,17 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) =>
50
51
  onActiveTabElementChange,
51
52
  disabled,
52
53
  onChange,
54
+ className,
55
+ classNames,
56
+ styles,
53
57
  role = 'tablist',
54
58
  position = 'relative',
55
59
  width = 'fit-content',
60
+ borderRadius,
61
+ borderTopLeftRadius,
62
+ borderTopRightRadius,
63
+ borderBottomLeftRadius,
64
+ borderBottomRightRadius,
56
65
  style
57
66
  } = _ref2,
58
67
  props = _objectWithoutProperties(_ref2, _excluded2);
@@ -114,9 +123,9 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) =>
114
123
  focusableElement === null || focusableElement === void 0 || focusableElement.focus();
115
124
  }
116
125
  }, [tabs, refMap]);
117
- const containerStyle = useMemo(() => _objectSpread({
126
+ const containerStyle = useMemo(() => _objectSpread(_objectSpread({
118
127
  opacity: disabled ? accessibleOpacityDisabled : 1
119
- }, style), [disabled, style]);
128
+ }, style), styles === null || styles === void 0 ? void 0 : styles.root), [disabled, style, styles === null || styles === void 0 ? void 0 : styles.root]);
120
129
  const registerRef = useCallback((tabId, ref) => {
121
130
  refMap.registerRef(tabId, ref);
122
131
  if ((activeTab === null || activeTab === void 0 ? void 0 : activeTab.id) === tabId) {
@@ -125,6 +134,12 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) =>
125
134
  }, [activeTab, onActiveTabElementChange, refMap]);
126
135
  return /*#__PURE__*/_jsx(HStack, _objectSpread(_objectSpread({
127
136
  ref: mergedContainerRefs,
137
+ borderBottomLeftRadius: borderBottomLeftRadius,
138
+ borderBottomRightRadius: borderBottomRightRadius,
139
+ borderRadius: borderRadius,
140
+ borderTopLeftRadius: borderTopLeftRadius,
141
+ borderTopRightRadius: borderTopRightRadius,
142
+ className: cx(className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
128
143
  onKeyDown: handleTabsContainerKeyDown,
129
144
  position: position,
130
145
  role: role,
@@ -135,7 +150,14 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) =>
135
150
  value: api,
136
151
  children: [/*#__PURE__*/_jsx(TabsActiveIndicatorComponent, {
137
152
  activeTabRect: activeTabRect,
138
- background: activeBackground
153
+ background: activeBackground,
154
+ borderBottomLeftRadius: borderBottomLeftRadius,
155
+ borderBottomRightRadius: borderBottomRightRadius,
156
+ borderRadius: borderRadius,
157
+ borderTopLeftRadius: borderTopLeftRadius,
158
+ borderTopRightRadius: borderTopRightRadius,
159
+ className: classNames === null || classNames === void 0 ? void 0 : classNames.activeIndicator,
160
+ style: styles === null || styles === void 0 ? void 0 : styles.activeIndicator
139
161
  }), tabs.map(_ref3 => {
140
162
  let {
141
163
  id,
@@ -149,9 +171,11 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) =>
149
171
  registerRef: registerRef,
150
172
  children: /*#__PURE__*/_jsx(RenderedTab, _objectSpread({
151
173
  "data-rendered-tab": true,
174
+ className: classNames === null || classNames === void 0 ? void 0 : classNames.tab,
152
175
  disabled: tabDisabled,
153
176
  id: id,
154
177
  role: "tab",
178
+ style: styles === null || styles === void 0 ? void 0 : styles.tab,
155
179
  tabIndex: (activeTab === null || activeTab === void 0 ? void 0 : activeTab.id) === id || !activeTab ? 0 : -1
156
180
  }, props))
157
181
  }, id);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coinbase/cds-web",
3
- "version": "8.48.3",
3
+ "version": "8.49.1",
4
4
  "description": "Coinbase Design System - Web",
5
5
  "repository": {
6
6
  "type": "git",
@@ -207,9 +207,9 @@
207
207
  "react-dom": "^18.3.1"
208
208
  },
209
209
  "dependencies": {
210
- "@coinbase/cds-common": "^8.48.3",
211
- "@coinbase/cds-icons": "^5.11.0",
212
- "@coinbase/cds-illustrations": "^4.31.0",
210
+ "@coinbase/cds-common": "^8.49.1",
211
+ "@coinbase/cds-icons": "^5.12.0",
212
+ "@coinbase/cds-illustrations": "^4.32.0",
213
213
  "@coinbase/cds-lottie-files": "^3.3.4",
214
214
  "@coinbase/cds-utils": "^2.3.5",
215
215
  "@floating-ui/react-dom": "^2.1.1",