@coinbase/cds-mobile 9.4.3 → 9.6.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.
- package/CHANGELOG.md +12 -0
- package/dts/cells/ListCellFallback.d.ts.map +1 -1
- package/dts/tabs/SegmentedTabs.d.ts +2 -0
- package/dts/tabs/SegmentedTabs.d.ts.map +1 -1
- package/dts/tabs/Tabs.d.ts +2 -0
- package/dts/tabs/Tabs.d.ts.map +1 -1
- package/dts/typography/TextFallback.d.ts +12 -0
- package/dts/typography/TextFallback.d.ts.map +1 -0
- package/dts/typography/index.d.ts +1 -0
- package/dts/typography/index.d.ts.map +1 -1
- package/dts/visualizations/chart/PeriodSelector.d.ts +1 -0
- package/dts/visualizations/chart/PeriodSelector.d.ts.map +1 -1
- package/esm/cells/ListCellFallback.js +19 -23
- package/esm/tabs/Tabs.js +1 -0
- package/esm/tabs/__stories__/SegmentedTabs.stories.js +16 -0
- package/esm/typography/TextFallback.js +41 -0
- package/esm/typography/index.js +1 -0
- 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
|
+
## 9.6.0 (7/6/2026 PST)
|
|
12
|
+
|
|
13
|
+
#### 🚀 Updates
|
|
14
|
+
|
|
15
|
+
- Feat: add TextFallback. [[#780](https://github.com/coinbase/cds/pull/780)]
|
|
16
|
+
|
|
17
|
+
## 9.5.0 (6/25/2026 PST)
|
|
18
|
+
|
|
19
|
+
#### 🚀 Updates
|
|
20
|
+
|
|
21
|
+
- Chore: add styled element for Tab's TabContainer component to support equal width tabs. [[#772](https://github.com/coinbase/cds/pull/772)]
|
|
22
|
+
|
|
11
23
|
## 9.4.3 (6/23/2026 PST)
|
|
12
24
|
|
|
13
25
|
#### 🐞 Fixes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListCellFallback.d.ts","sourceRoot":"","sources":["../../src/cells/ListCellFallback.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,KAAK,SAAS,EAAoB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAChF,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AAC3F,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;
|
|
1
|
+
{"version":3,"file":"ListCellFallback.d.ts","sourceRoot":"","sources":["../../src/cells/ListCellFallback.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,KAAK,SAAS,EAAoB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAChF,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AAC3F,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAQ1E,OAAO,EAAiB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACxE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAgD,KAAK,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAGlG,MAAM,MAAM,yBAAyB,GAAG,WAAW,GACjD,sBAAsB,GACtB,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,GACpD,IAAI,CAAC,iBAAiB,EAAE,SAAS,GAAG,cAAc,GAAG,cAAc,GAAG,gBAAgB,CAAC,GAAG;IACxF,mDAAmD;IACnD,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,2FAA2F;IAC3F,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,mCAAmC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mCAAmC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,iCAAiC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEJ,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,GAAG;IAC9D,+DAA+D;IAC/D,MAAM,CAAC,EAAE;QACP,kEAAkE;QAClE,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAClC,4CAA4C;QAC5C,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC9B,+CAA+C;QAC/C,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACjC,2CAA2C;QAC3C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC7B,iDAAiD;QACjD,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACnC,8CAA8C;QAC9C,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAChC,iDAAiD;QACjD,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAClC,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,gBAAgB,6DAwK3B,CAAC"}
|
|
@@ -12,6 +12,8 @@ export type SegmentedTabsProps<TabId extends string = string> = SegmentedTabsBas
|
|
|
12
12
|
styles?: {
|
|
13
13
|
/** Root container element */
|
|
14
14
|
root?: StyleProp<ViewStyle>;
|
|
15
|
+
/** Container element wrapping each tab */
|
|
16
|
+
tabContainer?: StyleProp<ViewStyle>;
|
|
15
17
|
/** Tab element */
|
|
16
18
|
tab?: StyleProp<ViewStyle>;
|
|
17
19
|
/** Active indicator element */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedTabs.d.ts","sourceRoot":"","sources":["../../src/tabs/SegmentedTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAM/D,OAAO,EAAQ,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAKlE,MAAM,MAAM,sBAAsB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,OAAO,CACzE,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,8BAA8B,CAAC,CAC5E,GACC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,8BAA8B,GAAG,QAAQ,CAAC,CAAC;AAEzF,MAAM,MAAM,kBAAkB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,sBAAsB,CAAC,KAAK,CAAC,GAC3F,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,8BAA8B,CAAC,CAAC,GAChF,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,8BAA8B,GAAG,QAAQ,CAAC,GAAG;IACnF,2EAA2E;IAC3E,MAAM,CAAC,EAAE;QACP,6BAA6B;QAC7B,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,kBAAkB;QAClB,GAAG,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC3B,+BAA+B;QAC/B,eAAe,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACxC,CAAC;CACH,CAAC;AAEJ,KAAK,eAAe,GAAG,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,EACnD,KAAK,EAAE,kBAAkB,CAAC,KAAK,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;CAAE,KAClE,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;AAChD,OAAO,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAM/D,OAAO,EAAQ,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAKlE,MAAM,MAAM,sBAAsB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,OAAO,CACzE,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,8BAA8B,CAAC,CAC5E,GACC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,8BAA8B,GAAG,QAAQ,CAAC,CAAC;AAEzF,MAAM,MAAM,kBAAkB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,sBAAsB,CAAC,KAAK,CAAC,GAC3F,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,8BAA8B,CAAC,CAAC,GAChF,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,8BAA8B,GAAG,QAAQ,CAAC,GAAG;IACnF,2EAA2E;IAC3E,MAAM,CAAC,EAAE;QACP,6BAA6B;QAC7B,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,0CAA0C;QAC1C,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACpC,kBAAkB;QAClB,GAAG,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC3B,+BAA+B;QAC/B,eAAe,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACxC,CAAC;CACH,CAAC;AAEJ,KAAK,eAAe,GAAG,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,EACnD,KAAK,EAAE,kBAAkB,CAAC,KAAK,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;CAAE,KAClE,KAAK,CAAC,YAAY,CAAC;AA+BxB,eAAO,MAAM,aAAa,EAA6B,eAAe,CAAC"}
|
package/dts/tabs/Tabs.d.ts
CHANGED
|
@@ -62,6 +62,8 @@ export type TabsProps<
|
|
|
62
62
|
styles?: {
|
|
63
63
|
/** Root container element */
|
|
64
64
|
root?: StyleProp<ViewStyle>;
|
|
65
|
+
/** Container element wrapping each tab */
|
|
66
|
+
tabContainer?: StyleProp<ViewStyle>;
|
|
65
67
|
/** Tab element */
|
|
66
68
|
tab?: StyleProp<ViewStyle>;
|
|
67
69
|
/** Active indicator element */
|
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,KAA+E,MAAM,OAAO,CAAC;AACpG,OAAO,EAAE,KAAK,SAAS,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAOpE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAGjE,OAAO,EAEL,KAAK,WAAW,EAChB,KAAK,QAAQ,EAEd,MAAM,mCAAmC,CAAC;AAE3C,OAAO,EAAe,KAAK,IAAI,EAAE,MAAM,iCAAiC,CAAC;AAGzE,OAAO,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/tabs/Tabs.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { ThemeVars } from '@coinbase/cds-common/core/theme';
|
|
2
|
+
import { type FallbackBaseProps, type FallbackProps } from '../layout/Fallback';
|
|
3
|
+
export type TextFallbackBaseProps = Omit<FallbackBaseProps, 'height'> & {
|
|
4
|
+
/** Font token used to size the fallback to match text line height. */
|
|
5
|
+
font: ThemeVars.FontSize;
|
|
6
|
+
};
|
|
7
|
+
export type TextFallbackProps = Omit<FallbackProps, 'height'> & Pick<TextFallbackBaseProps, 'font'>;
|
|
8
|
+
/**
|
|
9
|
+
* Loading placeholder sized to match a typography font token's line height.
|
|
10
|
+
*/
|
|
11
|
+
export declare const TextFallback: import('react').NamedExoticComponent<TextFallbackProps>;
|
|
12
|
+
//# sourceMappingURL=TextFallback.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TextFallback.d.ts","sourceRoot":"","sources":["../../src/typography/TextFallback.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAGjE,OAAO,EAAY,KAAK,iBAAiB,EAAE,KAAK,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAE1F,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,iBAAiB,EAAE,QAAQ,CAAC,GAAG;IACtE,sEAAsE;IACtE,IAAI,EAAE,SAAS,CAAC,QAAQ,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC,GAAG,IAAI,CAAC,qBAAqB,EAAE,MAAM,CAAC,CAAC;AAEpG;;GAEG;AACH,eAAO,MAAM,YAAY,yDA0BvB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/typography/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/typography/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC"}
|
|
@@ -86,6 +86,7 @@ export declare const PeriodSelector: React.NamedExoticComponent<
|
|
|
86
86
|
> & {
|
|
87
87
|
styles?: {
|
|
88
88
|
root?: import('react-native').StyleProp<ViewStyle>;
|
|
89
|
+
tabContainer?: import('react-native').StyleProp<ViewStyle>;
|
|
89
90
|
tab?: import('react-native').StyleProp<ViewStyle>;
|
|
90
91
|
activeIndicator?: import('react-native').StyleProp<ViewStyle>;
|
|
91
92
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PeriodSelector.d.ts","sourceRoot":"","sources":["../../../src/visualizations/chart/PeriodSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,EAAc,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAKhE,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAClF,OAAO,EAAqB,KAAK,wBAAwB,EAAE,MAAM,iBAAiB,CAAC;AAEnF,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAGjE,eAAO,MAAM,6BAA6B,GAAI,wDAK3C,wBAAwB,wDAmD1B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,aAAa,GAAG;IAClD;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,GAAG,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,CAAC;AAStD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;IAxBvB;;;OAGG;YACK,MAAM;IACd;;OAEG;cACO,OAAO;IACjB;;OAEG;YACK,GAAG;8BAyCZ,CAAC;AAQF,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,CAAC;AAErD;;;GAGG;AACH,eAAO,MAAM,cAAc;;YAjHe,CAAC;
|
|
1
|
+
{"version":3,"file":"PeriodSelector.d.ts","sourceRoot":"","sources":["../../../src/visualizations/chart/PeriodSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,EAAc,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAKhE,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAClF,OAAO,EAAqB,KAAK,wBAAwB,EAAE,MAAM,iBAAiB,CAAC;AAEnF,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAGjE,eAAO,MAAM,6BAA6B,GAAI,wDAK3C,wBAAwB,wDAmD1B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,aAAa,GAAG;IAClD;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,GAAG,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,CAAC;AAStD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;IAxBvB;;;OAGG;YACK,MAAM;IACd;;OAEG;cACO,OAAO;IACjB;;OAEG;YACK,GAAG;8BAyCZ,CAAC;AAQF,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,CAAC;AAErD;;;GAGG;AACH,eAAO,MAAM,cAAc;;YAjHe,CAAC;oBAExB,CAAC;WAEM,CAAC;uBACwB,CAAC;;6BAwInD,CAAC"}
|
|
@@ -5,9 +5,8 @@ import { memo, useMemo } from 'react';
|
|
|
5
5
|
import { StyleSheet, Text } from 'react-native';
|
|
6
6
|
import { getRectWidthVariant } from '@coinbase/cds-common/utils/getRectWidthVariant';
|
|
7
7
|
import { useComponentConfig } from '../hooks/useComponentConfig';
|
|
8
|
-
import { useTheme } from '../hooks/useTheme';
|
|
9
|
-
import { Fallback } from '../layout/Fallback';
|
|
10
8
|
import { VStack } from '../layout/VStack';
|
|
9
|
+
import { TextFallback } from '../typography/TextFallback';
|
|
11
10
|
import { Cell } from './Cell';
|
|
12
11
|
import { CellAccessory } from './CellAccessory';
|
|
13
12
|
import { condensedInnerSpacing, condensedOuterSpacing } from './ListCell';
|
|
@@ -35,21 +34,20 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_pro
|
|
|
35
34
|
accessibilityLabel = 'Loading'
|
|
36
35
|
} = mergedProps,
|
|
37
36
|
props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
|
|
38
|
-
const theme = useTheme();
|
|
39
37
|
const descriptionFallback = useMemo(() => {
|
|
40
38
|
if (!description) {
|
|
41
39
|
return null;
|
|
42
40
|
}
|
|
43
|
-
return /*#__PURE__*/_jsx(
|
|
41
|
+
return /*#__PURE__*/_jsx(TextFallback, {
|
|
44
42
|
"aria-hidden": true,
|
|
45
43
|
disableRandomRectWidth: disableRandomRectWidth,
|
|
46
|
-
|
|
44
|
+
font: spacingVariant === 'condensed' ? 'label2' : 'body',
|
|
47
45
|
rectWidthVariant: getRectWidthVariant(rectWidthVariant, 0),
|
|
48
46
|
style: styles == null ? void 0 : styles.description,
|
|
49
47
|
testID: "list-cell-fallback-description",
|
|
50
48
|
width: 110
|
|
51
49
|
});
|
|
52
|
-
}, [description, disableRandomRectWidth, rectWidthVariant, spacingVariant, styles == null ? void 0 : styles.description
|
|
50
|
+
}, [description, disableRandomRectWidth, rectWidthVariant, spacingVariant, styles == null ? void 0 : styles.description]);
|
|
53
51
|
const detailFallback = useMemo(() => {
|
|
54
52
|
if (!detail && !subdetail) {
|
|
55
53
|
return null;
|
|
@@ -57,58 +55,57 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_pro
|
|
|
57
55
|
return /*#__PURE__*/_jsxs(VStack, {
|
|
58
56
|
alignContent: "flex-end",
|
|
59
57
|
alignItems: "flex-end",
|
|
60
|
-
gap: 0.5,
|
|
61
58
|
justifyContent: "center",
|
|
62
|
-
children: [!!detail && /*#__PURE__*/_jsx(
|
|
59
|
+
children: [!!detail && /*#__PURE__*/_jsx(TextFallback, {
|
|
63
60
|
"aria-hidden": true,
|
|
64
61
|
disableRandomRectWidth: disableRandomRectWidth,
|
|
65
|
-
|
|
62
|
+
font: "body",
|
|
66
63
|
rectWidthVariant: getRectWidthVariant(rectWidthVariant, 1),
|
|
67
64
|
style: styles == null ? void 0 : styles.detail,
|
|
68
65
|
testID: "list-cell-fallback-detail",
|
|
69
66
|
width: 60
|
|
70
|
-
}), !!subdetail && /*#__PURE__*/_jsx(
|
|
67
|
+
}), !!subdetail && /*#__PURE__*/_jsx(TextFallback, {
|
|
71
68
|
"aria-hidden": true,
|
|
72
69
|
disableRandomRectWidth: disableRandomRectWidth,
|
|
73
|
-
|
|
70
|
+
font: spacingVariant === 'condensed' ? 'label2' : 'body',
|
|
74
71
|
rectWidthVariant: getRectWidthVariant(rectWidthVariant, 1),
|
|
75
72
|
style: styles == null ? void 0 : styles.subdetail,
|
|
76
73
|
testID: "list-cell-fallback-subdetail",
|
|
77
74
|
width: 60
|
|
78
75
|
})]
|
|
79
76
|
});
|
|
80
|
-
}, [detail, disableRandomRectWidth, rectWidthVariant, spacingVariant, styles == null ? void 0 : styles.detail, styles == null ? void 0 : styles.subdetail, subdetail
|
|
77
|
+
}, [detail, disableRandomRectWidth, rectWidthVariant, spacingVariant, styles == null ? void 0 : styles.detail, styles == null ? void 0 : styles.subdetail, subdetail]);
|
|
81
78
|
const helperTextFallback = useMemo(() => {
|
|
82
79
|
if (!helperText) {
|
|
83
80
|
return null;
|
|
84
81
|
}
|
|
85
|
-
return /*#__PURE__*/_jsx(
|
|
82
|
+
return /*#__PURE__*/_jsx(TextFallback, {
|
|
86
83
|
"aria-hidden": true,
|
|
87
84
|
disableRandomRectWidth: disableRandomRectWidth,
|
|
88
|
-
|
|
85
|
+
font: "body",
|
|
89
86
|
rectWidthVariant: getRectWidthVariant(rectWidthVariant, 4),
|
|
90
87
|
style: styles == null ? void 0 : styles.helperText,
|
|
91
88
|
testID: "list-cell-fallback-helper-text",
|
|
92
89
|
width: "85%"
|
|
93
90
|
});
|
|
94
|
-
}, [disableRandomRectWidth, helperText, rectWidthVariant, styles == null ? void 0 : styles.helperText
|
|
91
|
+
}, [disableRandomRectWidth, helperText, rectWidthVariant, styles == null ? void 0 : styles.helperText]);
|
|
95
92
|
const subtitleFallback = useMemo(() => {
|
|
96
93
|
if (!subtitle) {
|
|
97
94
|
return null;
|
|
98
95
|
}
|
|
99
|
-
return /*#__PURE__*/_jsx(
|
|
96
|
+
return /*#__PURE__*/_jsx(TextFallback, {
|
|
100
97
|
"aria-hidden": true,
|
|
101
98
|
disableRandomRectWidth: disableRandomRectWidth,
|
|
102
|
-
|
|
99
|
+
font: "label1",
|
|
103
100
|
rectWidthVariant: getRectWidthVariant(rectWidthVariant, 2),
|
|
104
101
|
style: styles == null ? void 0 : styles.subtitle,
|
|
105
102
|
testID: "list-cell-fallback-subtitle",
|
|
106
103
|
width: 80
|
|
107
104
|
});
|
|
108
|
-
}, [disableRandomRectWidth, rectWidthVariant, styles == null ? void 0 : styles.subtitle, subtitle
|
|
105
|
+
}, [disableRandomRectWidth, rectWidthVariant, styles == null ? void 0 : styles.subtitle, subtitle]);
|
|
109
106
|
const mediaFallback = useMemo(() => {
|
|
110
107
|
if (!media) {
|
|
111
|
-
return;
|
|
108
|
+
return undefined;
|
|
112
109
|
}
|
|
113
110
|
return /*#__PURE__*/_jsx(MediaFallback, {
|
|
114
111
|
"aria-hidden": true,
|
|
@@ -120,16 +117,16 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_pro
|
|
|
120
117
|
if (!title) {
|
|
121
118
|
return null;
|
|
122
119
|
}
|
|
123
|
-
return /*#__PURE__*/_jsx(
|
|
120
|
+
return /*#__PURE__*/_jsx(TextFallback, {
|
|
124
121
|
"aria-hidden": true,
|
|
125
122
|
disableRandomRectWidth: disableRandomRectWidth,
|
|
126
|
-
|
|
123
|
+
font: "headline",
|
|
127
124
|
rectWidthVariant: getRectWidthVariant(rectWidthVariant, 3),
|
|
128
125
|
style: styles == null ? void 0 : styles.title,
|
|
129
126
|
testID: "list-cell-fallback-title",
|
|
130
127
|
width: 90
|
|
131
128
|
});
|
|
132
|
-
}, [disableRandomRectWidth, rectWidthVariant, styles == null ? void 0 : styles.title,
|
|
129
|
+
}, [disableRandomRectWidth, rectWidthVariant, styles == null ? void 0 : styles.title, title]);
|
|
133
130
|
return /*#__PURE__*/_jsxs(Cell, _extends({
|
|
134
131
|
accessory: accessory ? /*#__PURE__*/_jsx(CellAccessory, {
|
|
135
132
|
type: accessory
|
|
@@ -149,7 +146,6 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_pro
|
|
|
149
146
|
style: localStyles.visuallyHidden,
|
|
150
147
|
children: accessibilityLabel
|
|
151
148
|
}), /*#__PURE__*/_jsxs(VStack, {
|
|
152
|
-
gap: 0.5,
|
|
153
149
|
children: [titleFallback, subtitleFallback, descriptionFallback]
|
|
154
150
|
})]
|
|
155
151
|
}));
|
package/esm/tabs/Tabs.js
CHANGED
|
@@ -141,6 +141,7 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
|
|
|
141
141
|
return /*#__PURE__*/_jsx(TabContainer, {
|
|
142
142
|
id: id,
|
|
143
143
|
registerRef: registerRef,
|
|
144
|
+
style: styles == null ? void 0 : styles.tabContainer,
|
|
144
145
|
children: /*#__PURE__*/_jsx(RenderedTab, _extends({}, renderedTabProps))
|
|
145
146
|
}, id);
|
|
146
147
|
})]
|
|
@@ -298,6 +298,22 @@ const SegmentedTabsScreen = () => /*#__PURE__*/_jsxs(ExampleScreen, {
|
|
|
298
298
|
defaultActiveTab: basicSegments[0],
|
|
299
299
|
tabs: basicSegments,
|
|
300
300
|
title: "Label Colors"
|
|
301
|
+
}), /*#__PURE__*/_jsx(SegmentedTabsExample, {
|
|
302
|
+
activeBackground: "bgPositiveWash",
|
|
303
|
+
activeColor: "fg",
|
|
304
|
+
background: "bgPositive",
|
|
305
|
+
color: "fgInverse",
|
|
306
|
+
defaultActiveTab: basicSegments[0],
|
|
307
|
+
padding: 0.5,
|
|
308
|
+
styles: {
|
|
309
|
+
tabContainer: {
|
|
310
|
+
flexGrow: 1,
|
|
311
|
+
flexBasis: 0
|
|
312
|
+
}
|
|
313
|
+
},
|
|
314
|
+
tabs: basicSegments,
|
|
315
|
+
title: "Equal Width",
|
|
316
|
+
width: "100%"
|
|
301
317
|
})]
|
|
302
318
|
});
|
|
303
319
|
const CustomStylesExample = () => {
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
const _excluded = ["font", "style"];
|
|
2
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
3
|
+
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; }
|
|
4
|
+
import { memo, useMemo } from 'react';
|
|
5
|
+
import { useWindowDimensions } from 'react-native';
|
|
6
|
+
import { useTheme } from '../hooks/useTheme';
|
|
7
|
+
import { Fallback } from '../layout/Fallback';
|
|
8
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
9
|
+
/**
|
|
10
|
+
* Loading placeholder sized to match a typography font token's line height.
|
|
11
|
+
*/
|
|
12
|
+
export const TextFallback = /*#__PURE__*/memo(function TextFallback(_ref) {
|
|
13
|
+
let {
|
|
14
|
+
font,
|
|
15
|
+
style
|
|
16
|
+
} = _ref,
|
|
17
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
18
|
+
const theme = useTheme();
|
|
19
|
+
const {
|
|
20
|
+
fontScale
|
|
21
|
+
} = useWindowDimensions();
|
|
22
|
+
const {
|
|
23
|
+
height,
|
|
24
|
+
paddingVertical
|
|
25
|
+
} = useMemo(() => {
|
|
26
|
+
const fontSize = theme.fontSize[font] * fontScale;
|
|
27
|
+
const lineHeight = theme.lineHeight[font] * fontScale;
|
|
28
|
+
const lineHeightOffset = lineHeight - fontSize;
|
|
29
|
+
return {
|
|
30
|
+
height: fontSize,
|
|
31
|
+
paddingVertical: Math.max(lineHeightOffset, 0) / 2
|
|
32
|
+
};
|
|
33
|
+
}, [font, fontScale, theme]);
|
|
34
|
+
return /*#__PURE__*/_jsx(Fallback, _extends({
|
|
35
|
+
height: height,
|
|
36
|
+
style: [{
|
|
37
|
+
paddingTop: paddingVertical,
|
|
38
|
+
paddingBottom: paddingVertical
|
|
39
|
+
}, style]
|
|
40
|
+
}, props));
|
|
41
|
+
});
|
package/esm/typography/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coinbase/cds-mobile",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.6.0",
|
|
4
4
|
"description": "Coinbase Design System - Mobile",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -206,9 +206,9 @@
|
|
|
206
206
|
"react-native-worklets": "0.5.2"
|
|
207
207
|
},
|
|
208
208
|
"dependencies": {
|
|
209
|
-
"@coinbase/cds-common": "^9.
|
|
210
|
-
"@coinbase/cds-icons": "^5.
|
|
211
|
-
"@coinbase/cds-illustrations": "^4.
|
|
209
|
+
"@coinbase/cds-common": "^9.6.0",
|
|
210
|
+
"@coinbase/cds-icons": "^5.20.0",
|
|
211
|
+
"@coinbase/cds-illustrations": "^4.44.0",
|
|
212
212
|
"@coinbase/cds-lottie-files": "^3.3.4",
|
|
213
213
|
"@coinbase/cds-utils": "^2.3.5",
|
|
214
214
|
"@floating-ui/react-native": "^0.10.5",
|