@coinbase/cds-mobile 8.52.1 → 8.52.2

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 (13) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dts/controls/Checkbox.d.ts +9 -5
  3. package/dts/controls/Checkbox.d.ts.map +1 -1
  4. package/dts/controls/CheckboxCell.d.ts.map +1 -1
  5. package/dts/controls/Radio.d.ts +16 -1
  6. package/dts/controls/Radio.d.ts.map +1 -1
  7. package/dts/controls/RadioCell.d.ts.map +1 -1
  8. package/esm/controls/CheckboxCell.js +3 -1
  9. package/esm/controls/Radio.js +2 -1
  10. package/esm/controls/RadioCell.js +3 -1
  11. package/esm/controls/__stories__/Checkbox.stories.js +34 -4
  12. package/esm/controls/__stories__/RadioGroup.stories.js +47 -4
  13. 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.52.2 (3/11/2026 PST)
12
+
13
+ #### 🐞 Fixes
14
+
15
+ - Configure control borderWidth and controlColor. [[#457](https://github.com/coinbase/cds/pull/457)]
16
+
11
17
  ## 8.52.1 ((3/11/2026, 09:52 AM PST))
12
18
 
13
19
  This is an artificial version bump with no new change.
package/dts/controls/Checkbox.d.ts CHANGED
@@ -2,18 +2,22 @@ import React from 'react';
2
2
  import type { View } from 'react-native';
3
3
  import type { ThemeVars } from '@coinbase/cds-common';
4
4
  import { type ControlBaseProps } from './Control';
5
- export type CheckboxBaseProps<CheckboxValue extends string> = ControlBaseProps<CheckboxValue>;
6
- export type CheckboxProps<CheckboxValue extends string> = ControlBaseProps<CheckboxValue> & {
7
- /** Sets the checked/active color of the control.
8
- * @default bgPrimary
5
+ export type CheckboxBaseProps<CheckboxValue extends string> = Omit<
6
+ ControlBaseProps<CheckboxValue>,
7
+ 'controlColor'
8
+ > & {
9
+ /**
10
+ * Sets the checked/active color of the checkbox.
11
+ * @default fgInverse
9
12
  */
10
13
  controlColor?: ThemeVars.Color;
11
14
  /**
12
- * Optional.Sets the border width of the checkbox.
15
+ * Sets the border width of the checkbox.
13
16
  * @default 100
14
17
  */
15
18
  borderWidth?: ThemeVars.BorderWidth;
16
19
  };
20
+ export type CheckboxProps<CheckboxValue extends string> = CheckboxBaseProps<CheckboxValue>;
17
21
  declare const CheckboxWithRef: <CheckboxValue extends string>(
18
22
  props: CheckboxProps<CheckboxValue> & {
19
23
  ref?: React.Ref<View>;
package/dts/controls/Checkbox.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/controls/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAMtD,OAAO,EAAW,KAAK,gBAAgB,EAAyB,MAAM,WAAW,CAAC;AAElF,MAAM,MAAM,iBAAiB,CAAC,aAAa,SAAS,MAAM,IAAI,gBAAgB,CAAC,aAAa,CAAC,CAAC;AAE9F,MAAM,MAAM,aAAa,CAAC,aAAa,SAAS,MAAM,IAAI,gBAAgB,CAAC,aAAa,CAAC,GAAG;IAC1F;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC/B;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC;CACrC,CAAC;AAuEF,QAAA,MAAM,eAAe,EAiCf,CAAC,aAAa,SAAS,MAAM,EACjC,KAAK,EAAE,aAAa,CAAC,aAAa,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;CAAE,KAC5D,KAAK,CAAC,YAAY,CAAC;AAGxB,eAAO,MAAM,QAAQ,EAA4B,OAAO,eAAe,GACrE,KAAK,CAAC,mBAAmB,CAAC,OAAO,eAAe,CAAC,CAAC"}
1
+ {"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/controls/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAMtD,OAAO,EAAW,KAAK,gBAAgB,EAAyB,MAAM,WAAW,CAAC;AAElF,MAAM,MAAM,iBAAiB,CAAC,aAAa,SAAS,MAAM,IAAI,IAAI,CAChE,gBAAgB,CAAC,aAAa,CAAC,EAC/B,cAAc,CACf,GAAG;IACF;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC/B;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,aAAa,CAAC,aAAa,SAAS,MAAM,IAAI,iBAAiB,CAAC,aAAa,CAAC,CAAC;AAuE3F,QAAA,MAAM,eAAe,EAiCf,CAAC,aAAa,SAAS,MAAM,EACjC,KAAK,EAAE,aAAa,CAAC,aAAa,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;CAAE,KAC5D,KAAK,CAAC,YAAY,CAAC;AAGxB,eAAO,MAAM,QAAQ,EAA4B,OAAO,eAAe,GACrE,KAAK,CAAC,mBAAmB,CAAC,OAAO,eAAe,CAAC,CAAC"}
package/dts/controls/CheckboxCell.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CheckboxCell.d.ts","sourceRoot":"","sources":["../../src/controls/CheckboxCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAChF,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,IAAI,EACT,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAMjE,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAIzE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,qBAAqB,CAAC,aAAa,SAAS,MAAM,IAAI;IAChE,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,SAAS,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC5B,MAAM,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACzB,kBAAkB,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACrC,kBAAkB,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC;CAC5C,GAAG,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC,GACvE,IAAI,CAAC,kBAAkB,EAAE,UAAU,GAAG,gBAAgB,CAAC,CAAC;AAE1D,MAAM,MAAM,iBAAiB,CAAC,aAAa,SAAS,MAAM,IACxD,qBAAqB,CAAC,aAAa,CAAC,GAAG;IACrC,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,uCAAuC;QACvC,iBAAiB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACzC,gCAAgC;QAChC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACxC,yBAAyB;QACzB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC7B,+BAA+B;QAC/B,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACpC,CAAC;CACH,CAAC;AAEJ,QAAA,MAAM,mBAAmB,EAuMnB,CAAC,aAAa,SAAS,MAAM,EACjC,KAAK,EAAE,iBAAiB,CAAC,aAAa,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;CAAE,KACzE,KAAK,CAAC,YAAY,CAAC;AAExB,eAAO,MAAM,YAAY,EAAgC,OAAO,mBAAmB,GACjF,KAAK,CAAC,mBAAmB,CAAC,OAAO,mBAAmB,CAAC,CAAC"}
1
+ {"version":3,"file":"CheckboxCell.d.ts","sourceRoot":"","sources":["../../src/controls/CheckboxCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAChF,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,IAAI,EACT,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAMjE,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAIzE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,qBAAqB,CAAC,aAAa,SAAS,MAAM,IAAI;IAChE,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,SAAS,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC5B,MAAM,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACzB,kBAAkB,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACrC,kBAAkB,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC;CAC5C,GAAG,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC,GACvE,IAAI,CAAC,kBAAkB,EAAE,UAAU,GAAG,gBAAgB,CAAC,CAAC;AAE1D,MAAM,MAAM,iBAAiB,CAAC,aAAa,SAAS,MAAM,IACxD,qBAAqB,CAAC,aAAa,CAAC,GAAG;IACrC,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,uCAAuC;QACvC,iBAAiB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACzC,gCAAgC;QAChC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACxC,yBAAyB;QACzB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC7B,+BAA+B;QAC/B,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACpC,CAAC;CACH,CAAC;AAEJ,QAAA,MAAM,mBAAmB,EAyMnB,CAAC,aAAa,SAAS,MAAM,EACjC,KAAK,EAAE,iBAAiB,CAAC,aAAa,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;CAAE,KACzE,KAAK,CAAC,YAAY,CAAC;AAExB,eAAO,MAAM,YAAY,EAAgC,OAAO,mBAAmB,GACjF,KAAK,CAAC,mBAAmB,CAAC,OAAO,mBAAmB,CAAC,CAAC"}
package/dts/controls/Radio.d.ts CHANGED
@@ -1,7 +1,22 @@
1
1
  import React from 'react';
2
2
  import { type View } from 'react-native';
3
+ import type { ThemeVars } from '@coinbase/cds-common';
3
4
  import { type ControlBaseProps } from './Control';
4
- export type RadioBaseProps<RadioValue extends string> = ControlBaseProps<RadioValue>;
5
+ export type RadioBaseProps<RadioValue extends string> = Omit<
6
+ ControlBaseProps<RadioValue>,
7
+ 'controlColor'
8
+ > & {
9
+ /**
10
+ * Sets the checked/active color of the radio.
11
+ * @default bgPrimary
12
+ */
13
+ controlColor?: ThemeVars.Color;
14
+ /**
15
+ * Sets the border width of the radio.
16
+ * @default 100
17
+ */
18
+ borderWidth?: ThemeVars.BorderWidth;
19
+ };
5
20
  export type RadioProps<RadioValue extends string> = RadioBaseProps<RadioValue>;
6
21
  declare const RadioWithRef: <RadioValue extends string>(
7
22
  props: RadioProps<RadioValue> & {
package/dts/controls/Radio.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../src/controls/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,EAAyC,KAAK,IAAI,EAAE,MAAM,cAAc,CAAC;AAOhF,OAAO,EAAW,KAAK,gBAAgB,EAAyB,MAAM,WAAW,CAAC;AASlF,MAAM,MAAM,cAAc,CAAC,UAAU,SAAS,MAAM,IAAI,gBAAgB,CAAC,UAAU,CAAC,CAAC;AAErF,MAAM,MAAM,UAAU,CAAC,UAAU,SAAS,MAAM,IAAI,cAAc,CAAC,UAAU,CAAC,CAAC;AAuD/E,QAAA,MAAM,YAAY,EAuBZ,CAAC,UAAU,SAAS,MAAM,EAC9B,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;CAAE,KACtD,KAAK,CAAC,YAAY,CAAC;AAGxB,eAAO,MAAM,KAAK,EAAyB,OAAO,YAAY,GAC5D,KAAK,CAAC,mBAAmB,CAAC,OAAO,YAAY,CAAC,CAAC"}
1
+ {"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../src/controls/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,EAAyC,KAAK,IAAI,EAAE,MAAM,cAAc,CAAC;AAEhF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAMtD,OAAO,EAAW,KAAK,gBAAgB,EAAyB,MAAM,WAAW,CAAC;AASlF,MAAM,MAAM,cAAc,CAAC,UAAU,SAAS,MAAM,IAAI,IAAI,CAC1D,gBAAgB,CAAC,UAAU,CAAC,EAC5B,cAAc,CACf,GAAG;IACF;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC/B;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,UAAU,CAAC,UAAU,SAAS,MAAM,IAAI,cAAc,CAAC,UAAU,CAAC,CAAC;AAwD/E,QAAA,MAAM,YAAY,EAuBZ,CAAC,UAAU,SAAS,MAAM,EAC9B,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;CAAE,KACtD,KAAK,CAAC,YAAY,CAAC;AAGxB,eAAO,MAAM,KAAK,EAAyB,OAAO,YAAY,GAC5D,KAAK,CAAC,mBAAmB,CAAC,OAAO,YAAY,CAAC,CAAC"}
package/dts/controls/RadioCell.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"RadioCell.d.ts","sourceRoot":"","sources":["../../src/controls/RadioCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAChF,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,IAAI,EACT,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAMjE,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAGrE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAGlD,MAAM,MAAM,kBAAkB,CAAC,UAAU,SAAS,MAAM,IAAI;IAC1D,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,SAAS,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC5B,MAAM,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACzB,kBAAkB,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACrC,kBAAkB,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC;CAC5C,GAAG,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC,GACpE,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,gBAAgB,CAAC,CAAC;AAEtD,MAAM,MAAM,cAAc,CAAC,UAAU,SAAS,MAAM,IAAI,kBAAkB,CAAC,UAAU,CAAC,GAAG;IACvF,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,oCAAoC;QACpC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACtC,gCAAgC;QAChC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACxC,yBAAyB;QACzB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC7B,+BAA+B;QAC/B,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACpC,CAAC;CACH,CAAC;AAEF,QAAA,MAAM,gBAAgB,EAsMhB,CAAC,UAAU,SAAS,MAAM,EAC9B,KAAK,EAAE,cAAc,CAAC,UAAU,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;CAAE,KACnE,KAAK,CAAC,YAAY,CAAC;AAExB,eAAO,MAAM,SAAS,EAA6B,OAAO,gBAAgB,GACxE,KAAK,CAAC,mBAAmB,CAAC,OAAO,gBAAgB,CAAC,CAAC"}
1
+ {"version":3,"file":"RadioCell.d.ts","sourceRoot":"","sources":["../../src/controls/RadioCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAChF,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,IAAI,EACT,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAMjE,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAGrE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAGlD,MAAM,MAAM,kBAAkB,CAAC,UAAU,SAAS,MAAM,IAAI;IAC1D,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,SAAS,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC5B,MAAM,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACzB,kBAAkB,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACrC,kBAAkB,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC;CAC5C,GAAG,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC,GACpE,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,gBAAgB,CAAC,CAAC;AAEtD,MAAM,MAAM,cAAc,CAAC,UAAU,SAAS,MAAM,IAAI,kBAAkB,CAAC,UAAU,CAAC,GAAG;IACvF,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,oCAAoC;QACpC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACtC,gCAAgC;QAChC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACxC,yBAAyB;QACzB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC7B,+BAA+B;QAC/B,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACpC,CAAC;CACH,CAAC;AAEF,QAAA,MAAM,gBAAgB,EAwMhB,CAAC,UAAU,SAAS,MAAM,EAC9B,KAAK,EAAE,cAAc,CAAC,UAAU,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;CAAE,KACnE,KAAK,CAAC,YAAY,CAAC;AAExB,eAAO,MAAM,SAAS,EAA6B,OAAO,gBAAgB,GACxE,KAAK,CAAC,mBAAmB,CAAC,OAAO,gBAAgB,CAAC,CAAC"}
package/esm/controls/CheckboxCell.js CHANGED
@@ -1,4 +1,4 @@
1
- const _excluded = ["title", "description", "checked", "onChange", "disabled", "columnGap", "rowGap", "padding", "borderWidth", "borderRadius", "background", "borderColor", "accessibilityLabel", "accessibilityHint", "testID", "value", "width", "style", "contentStyle", "wrapperStyles", "onPressIn", "onPressOut", "pressedBorderColor", "pressedBorderWidth", "indeterminate", "readOnly", "styles"];
1
+ const _excluded = ["title", "description", "checked", "onChange", "disabled", "columnGap", "rowGap", "padding", "borderWidth", "borderRadius", "background", "borderColor", "controlColor", "accessibilityLabel", "accessibilityHint", "testID", "value", "width", "style", "contentStyle", "wrapperStyles", "onPressIn", "onPressOut", "pressedBorderColor", "pressedBorderWidth", "indeterminate", "readOnly", "styles"];
2
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
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
4
  import React, { forwardRef, memo, useCallback, useMemo, useState } from 'react';
@@ -25,6 +25,7 @@ const CheckboxCellWithRef = /*#__PURE__*/forwardRef(function CheckboxCell(_ref,
25
25
  borderRadius = 200,
26
26
  background = 'bg',
27
27
  borderColor = 'bgLine',
28
+ controlColor,
28
29
  accessibilityLabel,
29
30
  accessibilityHint,
30
31
  testID,
@@ -155,6 +156,7 @@ const CheckboxCellWithRef = /*#__PURE__*/forwardRef(function CheckboxCell(_ref,
155
156
  children: /*#__PURE__*/_jsx(Checkbox, {
156
157
  accessible: false,
157
158
  checked: !!checked,
159
+ controlColor: controlColor,
158
160
  disabled: disabled,
159
161
  indeterminate: indeterminate,
160
162
  pointerEvents: "none",
package/esm/controls/Radio.js CHANGED
@@ -40,6 +40,7 @@ const RadioIcon = _ref2 => {
40
40
  checked,
41
41
  background = 'bg',
42
42
  borderRadius = 1000,
43
+ borderWidth = 100,
43
44
  elevation,
44
45
  animatedScaleValue,
45
46
  animatedOpacityValue,
@@ -53,7 +54,7 @@ const RadioIcon = _ref2 => {
53
54
  background: background,
54
55
  borderColor: borderColor,
55
56
  borderRadius: borderRadius,
56
- borderWidth: 100,
57
+ borderWidth: borderWidth,
57
58
  disabled: disabled,
58
59
  elevation: elevation,
59
60
  pressed: pressed,
package/esm/controls/RadioCell.js CHANGED
@@ -1,4 +1,4 @@
1
- const _excluded = ["title", "description", "checked", "onChange", "disabled", "readOnly", "columnGap", "rowGap", "padding", "borderWidth", "borderRadius", "background", "borderColor", "accessibilityLabel", "accessibilityHint", "testID", "value", "width", "style", "contentStyle", "wrapperStyles", "onPressIn", "onPressOut", "pressedBorderColor", "pressedBorderWidth", "styles"];
1
+ const _excluded = ["title", "description", "checked", "onChange", "disabled", "readOnly", "columnGap", "rowGap", "padding", "borderWidth", "borderRadius", "background", "borderColor", "controlColor", "accessibilityLabel", "accessibilityHint", "testID", "value", "width", "style", "contentStyle", "wrapperStyles", "onPressIn", "onPressOut", "pressedBorderColor", "pressedBorderWidth", "styles"];
2
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
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
4
  import React, { forwardRef, memo, useCallback, useMemo, useState } from 'react';
@@ -26,6 +26,7 @@ const RadioCellWithRef = /*#__PURE__*/forwardRef(function RadioCell(_ref, ref) {
26
26
  borderRadius = 200,
27
27
  background = 'bg',
28
28
  borderColor = 'bgLine',
29
+ controlColor,
29
30
  accessibilityLabel,
30
31
  accessibilityHint,
31
32
  testID,
@@ -154,6 +155,7 @@ const RadioCellWithRef = /*#__PURE__*/forwardRef(function RadioCell(_ref, ref) {
154
155
  children: /*#__PURE__*/_jsx(Radio, {
155
156
  accessible: false,
156
157
  checked: !!checked,
158
+ controlColor: controlColor,
157
159
  disabled: disabled,
158
160
  pointerEvents: "none",
159
161
  readOnly: readOnly,
package/esm/controls/__stories__/Checkbox.stories.js CHANGED
@@ -46,14 +46,26 @@ const CheckboxScreen = () => {
46
46
  checked: true,
47
47
  disabled: true,
48
48
  children: "Checked and disabled"
49
- }), /*#__PURE__*/_jsx(Checkbox, {
49
+ })]
50
+ }), /*#__PURE__*/_jsx(Example, {
51
+ inline: true,
52
+ title: "Read Only",
53
+ children: /*#__PURE__*/_jsx(Checkbox, {
50
54
  readOnly: true,
51
55
  children: "Read Only"
52
- }), /*#__PURE__*/_jsx(Checkbox, {
56
+ })
57
+ }), /*#__PURE__*/_jsx(Example, {
58
+ inline: true,
59
+ title: "No Label",
60
+ children: /*#__PURE__*/_jsx(Checkbox, {
53
61
  accessibilityLabel: "checkbox with no label"
54
- }), /*#__PURE__*/_jsx(Checkbox, {
62
+ })
63
+ }), /*#__PURE__*/_jsx(Example, {
64
+ inline: true,
65
+ title: "Multi-line Label",
66
+ children: /*#__PURE__*/_jsx(Checkbox, {
55
67
  children: "This checkbox has a multi-line label. The checkbox and label should align at the top. The label is super duper long and it keeps going on forever. This checkbox has a multi-line label."
56
- })]
68
+ })
57
69
  }), /*#__PURE__*/_jsx(Example, {
58
70
  inline: true,
59
71
  title: "Checkbox Group",
@@ -137,6 +149,24 @@ const CheckboxScreen = () => {
137
149
  onChange: () => setChecked(s => !s),
138
150
  children: "Style props indeterminate"
139
151
  })]
152
+ }), /*#__PURE__*/_jsxs(Example, {
153
+ inline: true,
154
+ title: "Custom Border Width",
155
+ children: [/*#__PURE__*/_jsx(Checkbox, {
156
+ checked: checked,
157
+ onChange: () => setChecked(s => !s),
158
+ children: "Default (100)"
159
+ }), /*#__PURE__*/_jsx(Checkbox, {
160
+ borderWidth: 200,
161
+ checked: checked,
162
+ onChange: () => setChecked(s => !s),
163
+ children: "Border width 200"
164
+ }), /*#__PURE__*/_jsx(Checkbox, {
165
+ borderWidth: 500,
166
+ checked: checked,
167
+ onChange: () => setChecked(s => !s),
168
+ children: "Border width 500"
169
+ })]
140
170
  })]
141
171
  });
142
172
  };
package/esm/controls/__stories__/RadioGroup.stories.js CHANGED
@@ -1,6 +1,9 @@
1
+ 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); }
1
2
  import React, { useState } from 'react';
2
3
  import { Example, ExampleScreen } from '../../examples/ExampleScreen';
3
4
  import { VStack } from '../../layout';
5
+ import { ThemeProvider } from '../../system';
6
+ import { defaultTheme } from '../../themes/defaultTheme';
4
7
  import { Text } from '../../typography/Text';
5
8
  import { Radio, RadioGroup } from '../RadioGroup';
6
9
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -31,14 +34,26 @@ const RadioGroupScreen = () => {
31
34
  }), /*#__PURE__*/_jsx(Radio, {
32
35
  disabled: true,
33
36
  children: "Disabled"
34
- }), /*#__PURE__*/_jsx(Radio, {
37
+ })]
38
+ }), /*#__PURE__*/_jsx(Example, {
39
+ inline: true,
40
+ title: "Read Only",
41
+ children: /*#__PURE__*/_jsx(Radio, {
35
42
  readOnly: true,
36
43
  children: "Read Only"
37
- }), /*#__PURE__*/_jsx(Radio, {
44
+ })
45
+ }), /*#__PURE__*/_jsx(Example, {
46
+ inline: true,
47
+ title: "No Label",
48
+ children: /*#__PURE__*/_jsx(Radio, {
38
49
  accessibilityLabel: "radio with no label"
39
- }), /*#__PURE__*/_jsx(Radio, {
50
+ })
51
+ }), /*#__PURE__*/_jsx(Example, {
52
+ inline: true,
53
+ title: "Multi-line Label",
54
+ children: /*#__PURE__*/_jsx(Radio, {
40
55
  children: "This radio has a multi-line label. The radio and label should align at the top. The label is super duper long and it keeps going on forever. This radio has a multi-line label."
41
- })]
56
+ })
42
57
  }), /*#__PURE__*/_jsx(Example, {
43
58
  inline: true,
44
59
  title: "Radio Group",
@@ -135,6 +150,34 @@ const RadioGroupScreen = () => {
135
150
  })]
136
151
  });
137
152
  }
153
+ }), /*#__PURE__*/_jsx(Example, {
154
+ inline: true,
155
+ title: "Custom Border Width",
156
+ children: () => {
157
+ const toggleChecked = () => setChecked(prevChecked => !prevChecked);
158
+ const smallRadioTheme = _extends({}, defaultTheme, {
159
+ controlSize: _extends({}, defaultTheme.controlSize, {
160
+ radioSize: 18
161
+ })
162
+ });
163
+ return /*#__PURE__*/_jsxs(VStack, {
164
+ gap: 2,
165
+ children: [/*#__PURE__*/_jsx(Radio, {
166
+ checked: checked,
167
+ onChange: toggleChecked,
168
+ children: "Default radio (20px, borderWidth 100)"
169
+ }), /*#__PURE__*/_jsx(ThemeProvider, {
170
+ activeColorScheme: "light",
171
+ theme: smallRadioTheme,
172
+ children: /*#__PURE__*/_jsx(Radio, {
173
+ borderWidth: 200,
174
+ checked: checked,
175
+ onChange: toggleChecked,
176
+ children: "Smaller radio (18px, borderWidth 200)"
177
+ })
178
+ })]
179
+ });
180
+ }
138
181
  })]
139
182
  });
140
183
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coinbase/cds-mobile",
3
- "version": "8.52.1",
3
+ "version": "8.52.2",
4
4
  "description": "Coinbase Design System - Mobile",
5
5
  "repository": {
6
6
  "type": "git",
@@ -198,7 +198,7 @@
198
198
  "react-native-svg": "^14.1.0"
199
199
  },
200
200
  "dependencies": {
201
- "@coinbase/cds-common": "^8.52.1",
201
+ "@coinbase/cds-common": "^8.52.2",
202
202
  "@coinbase/cds-icons": "^5.12.0",
203
203
  "@coinbase/cds-illustrations": "^4.32.0",
204
204
  "@coinbase/cds-lottie-files": "^3.3.4",