@coinbase/cds-web 8.38.0 → 8.38.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.
package/CHANGELOG.md CHANGED
@@ -8,6 +8,16 @@ All notable changes to this project will be documented in this file.
8
8
 
9
9
  <!-- template-start -->
10
10
 
11
+ ## 8.38.1 (1/15/2026 PST)
12
+
13
+ #### 🐞 Fixes
14
+
15
+ - Support TextInput labelNode on compact and inside labelVariant. [[#293](https://github.com/coinbase/cds/pull/293)]
16
+
17
+ #### 📘 Misc
18
+
19
+ - Internal: update figma code connect config and some mapping files. [[#304](https://github.com/coinbase/cds/pull/304)]
20
+
11
21
  ## 8.38.0 (1/14/2026 PST)
12
22
 
13
23
  #### 🚀 Updates
@@ -1 +1 @@
1
- {"version":3,"file":"NativeInput.d.ts","sourceRoot":"","sources":["../../src/controls/NativeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAC1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAiF/E,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gFAAgF;IAChF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;SAGK;IACL,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAChC;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;CACnC,GAAG,WAAW,GACb,IAAI,CACF,wBAAwB,EACxB,oBAAoB,GAAG,yBAAyB,GAAG,mBAAmB,CACvE,GACD,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAE9C,eAAO,MAAM,WAAW;cAnBZ,OAAO;IACjB,gFAAgF;uBAC7D,MAAM;IACzB;;;SAGK;YACG,cAAc,CAAC,OAAO,CAAC;IAC/B;;OAEG;cACO,KAAK,CAAC,iBAAiB;gNA4DlC,CAAC"}
1
+ {"version":3,"file":"NativeInput.d.ts","sourceRoot":"","sources":["../../src/controls/NativeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAC1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAiF/E,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gFAAgF;IAChF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;SAGK;IACL,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAChC;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;CACnC,GAAG,WAAW,GACb,IAAI,CACF,wBAAwB,EACxB,oBAAoB,GAAG,yBAAyB,GAAG,mBAAmB,CACvE,GACD,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAE9C,eAAO,MAAM,WAAW;cAnBZ,OAAO;IACjB,gFAAgF;uBAC7D,MAAM;IACzB;;;SAGK;YACG,cAAc,CAAC,OAAO,CAAC;IAC/B;;OAEG;cACO,KAAK,CAAC,iBAAiB;gNA8DlC,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../src/controls/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAgB,gBAAgB,EAAE,MAAM,2CAA2C,CAAC;AAChG,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAC1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAU/E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AA8CxD,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC;;;;;;;SAOK;IACL,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC/B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAChC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uHAAuH;IACvH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,mHAAmH;IACnH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE;QACV,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IACF;;;OAGG;IACH,qCAAqC,CAAC,EAAE,MAAM,CAAC;IAC/C;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,GAAG,WAAW,GACb,IAAI,CACF,wBAAwB,EACxB,oBAAoB,GAAG,yBAAyB,GAAG,mBAAmB,CACvE,GACD,gBAAgB,GAChB,IAAI,CACF,mBAAmB,EACjB,QAAQ,GACR,SAAS,GACT,OAAO,GACP,UAAU,GACV,cAAc,GACd,kBAAkB,GAClB,cAAc,GACd,iBAAiB,CACpB,GACD,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC,CAAC;AAE3E,MAAM,MAAM,cAAc,GAAG,kBAAkB,CAAC;AAkBhD,eAAO,MAAM,SAAS;IAvFpB;;OAEG;cACO,KAAK,CAAC,iBAAiB;IACjC;;;;;;;SAOK;gBACO,KAAK,CAAC,YAAY;IAC9B;;;OAGG;eACQ,OAAO;IAClB;;;OAGG;YACK,cAAc,CAAC,OAAO,CAAC;IAC/B;;OAEG;aACM,MAAM;IACf,uHAAuH;YAC/G,KAAK,CAAC,SAAS;IACvB,mHAAmH;UAC7G,KAAK,CAAC,SAAS;IACrB;;OAEG;gBACS;QACV,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB;IACD;;;OAGG;4CACqC,MAAM;IAC9C;;;OAGG;gBACS,KAAK,CAAC,SAAS;oZAyQ5B,CAAC"}
1
+ {"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../src/controls/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAgB,gBAAgB,EAAE,MAAM,2CAA2C,CAAC;AAChG,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAC1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAW/E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AA8CxD,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC;;;;;;;SAOK;IACL,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC/B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAChC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uHAAuH;IACvH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,mHAAmH;IACnH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE;QACV,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IACF;;;OAGG;IACH,qCAAqC,CAAC,EAAE,MAAM,CAAC;IAC/C;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,GAAG,WAAW,GACb,IAAI,CACF,wBAAwB,EACxB,oBAAoB,GAAG,yBAAyB,GAAG,mBAAmB,CACvE,GACD,gBAAgB,GAChB,IAAI,CACF,mBAAmB,EACjB,QAAQ,GACR,SAAS,GACT,OAAO,GACP,UAAU,GACV,cAAc,GACd,kBAAkB,GAClB,cAAc,GACd,iBAAiB,CACpB,GACD,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC,CAAC;AAE3E,MAAM,MAAM,cAAc,GAAG,kBAAkB,CAAC;AAkBhD,eAAO,MAAM,SAAS;IAvFpB;;OAEG;cACO,KAAK,CAAC,iBAAiB;IACjC;;;;;;;SAOK;gBACO,KAAK,CAAC,YAAY;IAC9B;;;OAGG;eACQ,OAAO;IAClB;;;OAGG;YACK,cAAc,CAAC,OAAO,CAAC;IAC/B;;OAEG;aACM,MAAM;IACf,uHAAuH;YAC/G,KAAK,CAAC,SAAS;IACvB,mHAAmH;UAC7G,KAAK,CAAC,SAAS;IACrB;;OAEG;gBACS;QACV,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB;IACD;;;OAGG;4CACqC,MAAM;IAC9C;;;OAGG;gBACS,KAAK,CAAC,SAAS;oZA6R5B,CAAC"}
@@ -3,6 +3,7 @@ import { figma } from '@figma/code-connect';
3
3
  import { AnnouncementCard } from '../AnnouncementCard';
4
4
  import { jsx as _jsx } from "react/jsx-runtime";
5
5
  figma.connect(AnnouncementCard, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=61%3A956', {
6
+ imports: ["import { AnnouncementCard } from '@coinbase/cds-web/cards/AnnouncementCard';"],
6
7
  props: {
7
8
  showtopdivider29390: figma.boolean('show top divider'),
8
9
  illustration5960: figma.instance('illustration'),
@@ -9,19 +9,21 @@ import { jsx as _jsx } from "react/jsx-runtime";
9
9
  figma.connect(InputChip, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=10177-5161&m=dev', {
10
10
  imports: ["import { InputChip } from '@coinbase/cds-web/chips/InputChip'"],
11
11
  props: {
12
- children: figma.string('value'),
12
+ children: figma.textContent('value'),
13
13
  start: figma.boolean('show start', {
14
14
  true: figma.instance('start'),
15
15
  false: undefined
16
16
  }),
17
- // state: figma.enum('state', {
18
- // default: 'default',
19
- // focused: 'focused',
20
- // hovered: 'hovered',
21
- // pressed: 'pressed',
22
- // }),
23
- disabled: figma.boolean('disabled'),
17
+ disabled: figma.enum('state', {
18
+ disabled: true,
19
+ default: false,
20
+ focused: false,
21
+ hovered: false,
22
+ pressed: false
23
+ }),
24
24
  compact: figma.boolean('compact')
25
+ // NOTE: The Figma 'show label' property doesn't have a direct mapping.
26
+ // To hide the label in React, omit the `children` prop or pass undefined.
25
27
  },
26
28
  example: props => /*#__PURE__*/_jsx(InputChip, _objectSpread({
27
29
  onClick: () => {}
@@ -13,14 +13,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
13
13
  figma.connect(SelectChip, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=10177-5222&m=dev', {
14
14
  imports: ["import { SelectChip } from '@coinbase/cds-web/chips'"],
15
15
  props: {
16
- // state: figma.enum('state', {
17
- // default: 'default',
18
- // hovered: 'hovered',
19
- // pressed: 'pressed',
20
- // focused: 'focused',
21
- // open: 'open',
22
- // }),
23
- disabled: figma.boolean('disabled'),
16
+ // 'disabled' is derived from state='disabled' in Figma (not a separate boolean)
17
+ disabled: figma.enum('state', {
18
+ disabled: true
19
+ }),
24
20
  active: figma.boolean('active'),
25
21
  compact: figma.boolean('compact'),
26
22
  start: figma.boolean('show start', {
@@ -28,6 +24,8 @@ figma.connect(SelectChip, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/
28
24
  false: undefined
29
25
  }),
30
26
  end: figma.instance('end')
27
+ // Note: 'show label' property not mapped - React component always renders
28
+ // valueLabel, value, or placeholder text (no prop to hide the label).
31
29
  },
32
30
  example: props => {
33
31
  const options = ['USD', 'CAD', 'GBP', 'JPY'];
@@ -40,6 +38,7 @@ figma.connect(SelectChip, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/
40
38
  });
41
39
  return /*#__PURE__*/_jsx(SelectChip, _objectSpread(_objectSpread({}, props), {}, {
42
40
  content: content,
41
+ disabled: props.disabled,
43
42
  onChange: setValue,
44
43
  value: value
45
44
  }));
@@ -1,4 +1,4 @@
1
- const _excluded = ["containerSpacing", "testID", "align", "onFocus", "onClick", "onBlur", "onKeyDown", "onChange", "accessibilityLabel", "accessibilityHint", "compact", "className", "style"];
1
+ const _excluded = ["containerSpacing", "testID", "align", "onFocus", "onClick", "onBlur", "onKeyDown", "onChange", "accessibilityLabel", "accessibilityLabelledBy", "accessibilityHint", "compact", "className", "style"];
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; }
@@ -24,6 +24,7 @@ export const NativeInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Na
24
24
  onKeyDown,
25
25
  onChange,
26
26
  accessibilityLabel,
27
+ accessibilityLabelledBy,
27
28
  accessibilityHint,
28
29
  compact,
29
30
  className,
@@ -42,6 +43,7 @@ export const NativeInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Na
42
43
  ref: ref,
43
44
  "aria-describedby": accessibilityHint,
44
45
  "aria-label": accessibilityLabel,
46
+ "aria-labelledby": accessibilityLabelledBy,
45
47
  className: cx(baseCss, containerSpacing !== null && containerSpacing !== void 0 ? containerSpacing : defaultContainerPadding, className),
46
48
  "data-testid": testID,
47
49
  onBlur: onBlur,
@@ -10,6 +10,7 @@ import React, { cloneElement, forwardRef, memo, useCallback, useMemo, useRef, us
10
10
  import { useMergeRefs } from '@coinbase/cds-common/hooks/useMergeRefs';
11
11
  import { usePrefixedId } from '@coinbase/cds-common/hooks/usePrefixedId';
12
12
  import { cx } from '../cx';
13
+ import { Box } from '../layout/Box';
13
14
  import { HStack } from '../layout/HStack';
14
15
  import { Text } from '../typography/Text';
15
16
  import { TextInputFocusVariantContext } from './context';
@@ -101,6 +102,7 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Text
101
102
  }
102
103
  return undefined;
103
104
  }, [disabled, htmlInputElmProps.readOnly]);
105
+ const hasLabel = useMemo(() => !!label || !!labelNode, [label, labelNode]);
104
106
  const inputElement = useMemo(() => {
105
107
  /** Ensures that the renderedInput has the blurring, focusing, disabled features */
106
108
  if (inputNode) {
@@ -126,7 +128,7 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Text
126
128
  compact: compact,
127
129
  containerSpacing: nativeInputContainerCss,
128
130
  "data-compact": compact,
129
- "data-labelvariant": compact || !label ? 'outside' : labelVariant,
131
+ "data-labelvariant": compact || !hasLabel ? 'outside' : labelVariant,
130
132
  "data-start": !!start || compact,
131
133
  disabled: disabled,
132
134
  id: shouldSetLabelId ? labelId : undefined,
@@ -134,7 +136,7 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Text
134
136
  onFocus: handleOnFocus,
135
137
  testID: testID
136
138
  }, htmlInputElmProps));
137
- }, [inputNode, refs, shouldSetHelperTextId, helperTextId, accessibilityLabel, label, align, variant, compact, labelVariant, start, disabled, shouldSetLabelId, labelId, handleOnBlur, handleOnFocus, testID, htmlInputElmProps]);
139
+ }, [inputNode, refs, shouldSetHelperTextId, helperTextId, accessibilityLabel, label, hasLabel, align, variant, compact, labelVariant, start, disabled, shouldSetLabelId, labelId, handleOnBlur, handleOnFocus, testID, htmlInputElmProps]);
138
140
  return /*#__PURE__*/_jsx(TextInputFocusVariantContext.Provider, {
139
141
  value: focused ? focusedVariant : undefined,
140
142
  children: /*#__PURE__*/_jsx(InputStack, {
@@ -178,7 +180,13 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Text
178
180
  }) : helperText),
179
181
  inputBackground: readOnlyInputBackground !== null && readOnlyInputBackground !== void 0 ? readOnlyInputBackground : inputBackground,
180
182
  inputNode: inputElement,
181
- labelNode: !compact && (labelNode ? labelNode : !!label && /*#__PURE__*/_jsx(InputLabel, {
183
+ labelNode: !compact && (labelNode ? labelVariant === 'inside' ? /*#__PURE__*/_jsx(Box, {
184
+ background: readOnlyInputBackground,
185
+ paddingEnd: 2,
186
+ paddingStart: start ? 0.5 : 2,
187
+ paddingTop: 1,
188
+ children: labelNode
189
+ }) : labelNode : !!label && /*#__PURE__*/_jsx(InputLabel, {
182
190
  background: labelVariant === 'inside' ? readOnlyInputBackground : undefined,
183
191
  className: cx(labelVariant === 'inside' && insideLabelCss, labelVariant === 'inside' && !!start && insideLabelCssStartCss),
184
192
  htmlFor: shouldSetLabelId ? labelId : undefined,
@@ -192,12 +200,12 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Text
192
200
  gap: 2,
193
201
  justifyContent: "center",
194
202
  onClick: handleNodePress,
203
+ paddingStart: compact && hasLabel ? 2 : undefined,
195
204
  testID: (_testIDMap$start = testIDMap === null || testIDMap === void 0 ? void 0 : testIDMap.start) !== null && _testIDMap$start !== void 0 ? _testIDMap$start : '',
196
- children: [compact && !!label && /*#__PURE__*/_jsx(InputLabel, {
205
+ children: [compact && (labelNode ? labelNode : !!label && /*#__PURE__*/_jsx(InputLabel, {
197
206
  htmlFor: shouldSetLabelId ? labelId : undefined,
198
- paddingStart: 2,
199
207
  children: label
200
- }), !!start && /*#__PURE__*/_jsx(_Fragment, {
208
+ })), !!start && /*#__PURE__*/_jsx(_Fragment, {
201
209
  children: start
202
210
  })]
203
211
  }),
@@ -25,7 +25,7 @@ figma.connect(RadioCell, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E
25
25
  figma.connect(RadioCell, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=54927-2624', {
26
26
  imports: ["import { RadioCell } from '@coinbase/cds-web/controls/RadioCell'"],
27
27
  variant: {
28
- state: 'selected'
28
+ selected: true
29
29
  },
30
30
  props: {
31
31
  title: figma.string('title text'),
@@ -40,4 +40,44 @@ figma.connect(RadioCell, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E
40
40
  checked: true
41
41
  }, props));
42
42
  }
43
+ });
44
+ figma.connect(RadioCell, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=54927-2624', {
45
+ imports: ["import { RadioCell } from '@coinbase/cds-web/controls/RadioCell'"],
46
+ variant: {
47
+ state: 'disabled'
48
+ },
49
+ props: {
50
+ title: figma.string('title text'),
51
+ description: figma.boolean('description', {
52
+ true: figma.string('description text'),
53
+ false: undefined
54
+ })
55
+ },
56
+ example: _ref3 => {
57
+ let props = _extends({}, (_objectDestructuringEmpty(_ref3), _ref3));
58
+ return /*#__PURE__*/_jsx(RadioCell, _objectSpread({
59
+ disabled: true
60
+ }, props));
61
+ }
62
+ });
63
+ figma.connect(RadioCell, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=54927-2624', {
64
+ imports: ["import { RadioCell } from '@coinbase/cds-web/controls/RadioCell'"],
65
+ variant: {
66
+ state: 'disabled',
67
+ selected: true
68
+ },
69
+ props: {
70
+ title: figma.string('title text'),
71
+ description: figma.boolean('description', {
72
+ true: figma.string('description text'),
73
+ false: undefined
74
+ })
75
+ },
76
+ example: _ref4 => {
77
+ let props = _extends({}, (_objectDestructuringEmpty(_ref4), _ref4));
78
+ return /*#__PURE__*/_jsx(RadioCell, _objectSpread({
79
+ checked: true,
80
+ disabled: true
81
+ }, props));
82
+ }
43
83
  });
@@ -1,25 +1,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/✨-CDS-Components?node-id=252%3A12892', {
11
- imports: ["import { SidebarItem } from '@coinbase/cds-web/navigation/SidebarItem';"],
12
- props: {
13
- active: figma.boolean('active'),
14
- title: figma.boolean('show label', {
15
- true: figma.string('label text'),
16
- false: undefined
17
- }),
18
- icon: figma.boolean('show start icon', {
19
- true: 'heart',
20
- false: undefined
21
- })
22
- },
23
- // @ts-expect-error not typed
24
- example: props => /*#__PURE__*/_jsx(SidebarItem, _objectSpread({}, props))
25
- });
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
+ // );
@@ -58,7 +58,7 @@ figma.connect(ProgressBar, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/
58
58
  }
59
59
  });
60
60
  figma.connect(ProgressBar, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=64-746&m=dev', {
61
- imports: ["import { ProgressBar } from '@coinbase/cds-mobile/visualizations/ProgressBar';", "import { ProgressBarWithFloatLabel } from '@coinbase/cds-mobile/visualizations/ProgressBarWithFloatLabel';"],
61
+ imports: ["import { ProgressBar } from '@coinbase/cds-web/visualizations/ProgressBar';", "import { ProgressBarWithFloatLabel } from '@coinbase/cds-web/visualizations/ProgressBarWithFloatLabel';"],
62
62
  props: {
63
63
  weight: figma.enum('weight', {
64
64
  normal: 'normal',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coinbase/cds-web",
3
- "version": "8.38.0",
3
+ "version": "8.38.1",
4
4
  "description": "Coinbase Design System - Web",
5
5
  "repository": {
6
6
  "type": "git",
@@ -203,7 +203,7 @@
203
203
  "react-dom": "^18.3.1"
204
204
  },
205
205
  "dependencies": {
206
- "@coinbase/cds-common": "^8.38.0",
206
+ "@coinbase/cds-common": "^8.38.1",
207
207
  "@coinbase/cds-icons": "^5.9.0",
208
208
  "@coinbase/cds-illustrations": "^4.29.0",
209
209
  "@coinbase/cds-lottie-files": "^3.3.4",
@@ -226,7 +226,6 @@
226
226
  "@babel/preset-react": "^7.27.1",
227
227
  "@babel/preset-typescript": "^7.27.1",
228
228
  "@coinbase/cds-web-utils": "^0.0.0",
229
- "@figma/code-connect": "^1.3.4",
230
229
  "@linaria/core": "^3.0.0-beta.22",
231
230
  "@linaria/shaker": "^3.0.0-beta.22",
232
231
  "@storybook/jest": "^0.2.3",