@coinbase/cds-web 8.48.3 → 8.49.0

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 (10) hide show
  1. package/CHANGELOG.md +6 -0
  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/tabs/SegmentedTab.js +9 -8
  8. package/esm/tabs/SegmentedTabs.js +18 -3
  9. package/esm/tabs/Tabs.js +31 -6
  10. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
8
8
 
9
9
  <!-- template-start -->
10
10
 
11
+ ## 8.49.0 (2/26/2026 PST)
12
+
13
+ #### 🚀 Updates
14
+
15
+ - Add styles and classnames props to Tab components. [[#438](https://github.com/coinbase/cds/pull/438)]
16
+
11
17
  ## 8.48.3 (2/25/2026 PST)
12
18
 
13
19
  #### 🐞 Fixes
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/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,
@@ -147,13 +169,16 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) =>
147
169
  return /*#__PURE__*/_jsx(TabContainer, {
148
170
  id: id,
149
171
  registerRef: registerRef,
150
- children: /*#__PURE__*/_jsx(RenderedTab, _objectSpread({
172
+ children: /*#__PURE__*/_jsx(RenderedTab, _objectSpread(_objectSpread({
151
173
  "data-rendered-tab": true,
152
174
  disabled: tabDisabled,
153
175
  id: id,
154
176
  role: "tab",
155
177
  tabIndex: (activeTab === null || activeTab === void 0 ? void 0 : activeTab.id) === id || !activeTab ? 0 : -1
156
- }, props))
178
+ }, props), {}, {
179
+ className: classNames === null || classNames === void 0 ? void 0 : classNames.tab,
180
+ style: styles === null || styles === void 0 ? void 0 : styles.tab
181
+ }))
157
182
  }, id);
158
183
  })]
159
184
  })
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.0",
4
4
  "description": "Coinbase Design System - Web",
5
5
  "repository": {
6
6
  "type": "git",
@@ -207,7 +207,7 @@
207
207
  "react-dom": "^18.3.1"
208
208
  },
209
209
  "dependencies": {
210
- "@coinbase/cds-common": "^8.48.3",
210
+ "@coinbase/cds-common": "^8.49.0",
211
211
  "@coinbase/cds-icons": "^5.11.0",
212
212
  "@coinbase/cds-illustrations": "^4.31.0",
213
213
  "@coinbase/cds-lottie-files": "^3.3.4",