@cdx-ui/components 0.0.1-beta.4 → 0.0.1-beta.40

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 (283) hide show
  1. package/README.md +18 -11
  2. package/lib/commonjs/components/Avatar/index.js +1 -1
  3. package/lib/commonjs/components/Avatar/styles.js +36 -29
  4. package/lib/commonjs/components/Avatar/styles.js.map +1 -1
  5. package/lib/commonjs/components/Button/styles.js +2 -2
  6. package/lib/commonjs/components/Button/styles.js.map +1 -1
  7. package/lib/commonjs/components/CLAUDE.md +90 -0
  8. package/lib/commonjs/components/Card/index.js +22 -4
  9. package/lib/commonjs/components/Card/index.js.map +1 -1
  10. package/lib/commonjs/components/Card/styles.js +27 -5
  11. package/lib/commonjs/components/Card/styles.js.map +1 -1
  12. package/lib/commonjs/components/Checkbox/index.js +5 -29
  13. package/lib/commonjs/components/Checkbox/index.js.map +1 -1
  14. package/lib/commonjs/components/Checkbox/styles.js +39 -47
  15. package/lib/commonjs/components/Checkbox/styles.js.map +1 -1
  16. package/lib/commonjs/components/Chip/index.js +78 -9
  17. package/lib/commonjs/components/Chip/index.js.map +1 -1
  18. package/lib/commonjs/components/Chip/styles.js +207 -21
  19. package/lib/commonjs/components/Chip/styles.js.map +1 -1
  20. package/lib/commonjs/components/Field/index.js +8 -2
  21. package/lib/commonjs/components/Field/index.js.map +1 -1
  22. package/lib/commonjs/components/Field/styles.js +4 -4
  23. package/lib/commonjs/components/Field/styles.js.map +1 -1
  24. package/lib/commonjs/components/Heading/styles.js +1 -1
  25. package/lib/commonjs/components/Heading/styles.js.map +1 -1
  26. package/lib/commonjs/components/Icon/index.js +1 -2
  27. package/lib/commonjs/components/Icon/index.js.map +1 -1
  28. package/lib/commonjs/components/IconButton/index.js +6 -1
  29. package/lib/commonjs/components/IconButton/index.js.map +1 -1
  30. package/lib/commonjs/components/IconButton/styles.js +135 -10
  31. package/lib/commonjs/components/IconButton/styles.js.map +1 -1
  32. package/lib/commonjs/components/Input/styles.js +7 -6
  33. package/lib/commonjs/components/Input/styles.js.map +1 -1
  34. package/lib/commonjs/components/ListItem/index.js +283 -0
  35. package/lib/commonjs/components/ListItem/index.js.map +1 -0
  36. package/lib/commonjs/components/ListItem/styles.js +130 -0
  37. package/lib/commonjs/components/ListItem/styles.js.map +1 -0
  38. package/lib/commonjs/components/ProgressSegmented/index.js +22 -10
  39. package/lib/commonjs/components/ProgressSegmented/index.js.map +1 -1
  40. package/lib/commonjs/components/Radio/index.js +167 -0
  41. package/lib/commonjs/components/Radio/index.js.map +1 -0
  42. package/lib/commonjs/components/Radio/styles.js +31 -0
  43. package/lib/commonjs/components/Radio/styles.js.map +1 -0
  44. package/lib/commonjs/components/Text/styles.js +2 -2
  45. package/lib/commonjs/components/Text/styles.js.map +1 -1
  46. package/lib/commonjs/components/Tile/index.js +251 -0
  47. package/lib/commonjs/components/Tile/index.js.map +1 -0
  48. package/lib/commonjs/components/Tile/styles.js +52 -0
  49. package/lib/commonjs/components/Tile/styles.js.map +1 -0
  50. package/lib/commonjs/components/index.js +36 -0
  51. package/lib/commonjs/components/index.js.map +1 -1
  52. package/lib/commonjs/figma/Avatar.figma.js +54 -0
  53. package/lib/commonjs/figma/Avatar.figma.js.map +1 -0
  54. package/lib/commonjs/figma/Button.figma.js +28 -11
  55. package/lib/commonjs/figma/Button.figma.js.map +1 -1
  56. package/lib/commonjs/figma/CLAUDE.md +30 -0
  57. package/lib/commonjs/figma/Card.Header.figma.js +28 -0
  58. package/lib/commonjs/figma/Card.Header.figma.js.map +1 -0
  59. package/lib/commonjs/figma/Card.figma.js +42 -0
  60. package/lib/commonjs/figma/Card.figma.js.map +1 -0
  61. package/lib/commonjs/figma/Checkbox.figma.js +55 -0
  62. package/lib/commonjs/figma/Checkbox.figma.js.map +1 -0
  63. package/lib/commonjs/figma/Chip.figma.js +68 -0
  64. package/lib/commonjs/figma/Chip.figma.js.map +1 -0
  65. package/lib/commonjs/figma/Field.Input.figma.js +57 -0
  66. package/lib/commonjs/figma/Field.Input.figma.js.map +1 -0
  67. package/lib/commonjs/figma/Field.Select.figma.js +57 -0
  68. package/lib/commonjs/figma/Field.Select.figma.js.map +1 -0
  69. package/lib/commonjs/figma/Heading.figma.js +30 -0
  70. package/lib/commonjs/figma/Heading.figma.js.map +1 -0
  71. package/lib/commonjs/figma/Icon.figma.js +20 -0
  72. package/lib/commonjs/figma/Icon.figma.js.map +1 -0
  73. package/lib/commonjs/figma/IconButton.figma.js +47 -0
  74. package/lib/commonjs/figma/IconButton.figma.js.map +1 -0
  75. package/lib/commonjs/figma/Input.figma.js +52 -0
  76. package/lib/commonjs/figma/Input.figma.js.map +1 -0
  77. package/lib/commonjs/figma/ProgressSegmented.figma.js +39 -0
  78. package/lib/commonjs/figma/ProgressSegmented.figma.js.map +1 -0
  79. package/lib/commonjs/figma/Radio.figma.js +38 -0
  80. package/lib/commonjs/figma/Radio.figma.js.map +1 -0
  81. package/lib/commonjs/figma/Select.figma.js +53 -0
  82. package/lib/commonjs/figma/Select.figma.js.map +1 -0
  83. package/lib/commonjs/figma/Text.figma.js +29 -0
  84. package/lib/commonjs/figma/Text.figma.js.map +1 -0
  85. package/lib/commonjs/figma/icons.figma.batch.js +27 -0
  86. package/lib/commonjs/figma/icons.figma.batch.js.map +1 -0
  87. package/lib/commonjs/figma/icons.figma.batch.json +17705 -0
  88. package/lib/commonjs/styles/primitives.js +42 -5
  89. package/lib/commonjs/styles/primitives.js.map +1 -1
  90. package/lib/module/components/Avatar/index.js +1 -1
  91. package/lib/module/components/Avatar/styles.js +36 -29
  92. package/lib/module/components/Avatar/styles.js.map +1 -1
  93. package/lib/module/components/Button/styles.js +2 -2
  94. package/lib/module/components/Button/styles.js.map +1 -1
  95. package/lib/module/components/CLAUDE.md +90 -0
  96. package/lib/module/components/Card/index.js +23 -4
  97. package/lib/module/components/Card/index.js.map +1 -1
  98. package/lib/module/components/Card/styles.js +27 -5
  99. package/lib/module/components/Card/styles.js.map +1 -1
  100. package/lib/module/components/Checkbox/index.js +6 -30
  101. package/lib/module/components/Checkbox/index.js.map +1 -1
  102. package/lib/module/components/Checkbox/styles.js +40 -48
  103. package/lib/module/components/Checkbox/styles.js.map +1 -1
  104. package/lib/module/components/Chip/index.js +82 -13
  105. package/lib/module/components/Chip/index.js.map +1 -1
  106. package/lib/module/components/Chip/styles.js +206 -20
  107. package/lib/module/components/Chip/styles.js.map +1 -1
  108. package/lib/module/components/Field/index.js +9 -3
  109. package/lib/module/components/Field/index.js.map +1 -1
  110. package/lib/module/components/Field/styles.js +4 -4
  111. package/lib/module/components/Field/styles.js.map +1 -1
  112. package/lib/module/components/Heading/styles.js +1 -1
  113. package/lib/module/components/Heading/styles.js.map +1 -1
  114. package/lib/module/components/Icon/index.js +1 -2
  115. package/lib/module/components/Icon/index.js.map +1 -1
  116. package/lib/module/components/IconButton/index.js +6 -1
  117. package/lib/module/components/IconButton/index.js.map +1 -1
  118. package/lib/module/components/IconButton/styles.js +135 -10
  119. package/lib/module/components/IconButton/styles.js.map +1 -1
  120. package/lib/module/components/Input/styles.js +7 -6
  121. package/lib/module/components/Input/styles.js.map +1 -1
  122. package/lib/module/components/ListItem/index.js +226 -0
  123. package/lib/module/components/ListItem/index.js.map +1 -0
  124. package/lib/module/components/ListItem/styles.js +127 -0
  125. package/lib/module/components/ListItem/styles.js.map +1 -0
  126. package/lib/module/components/ProgressSegmented/index.js +23 -11
  127. package/lib/module/components/ProgressSegmented/index.js.map +1 -1
  128. package/lib/module/components/Radio/index.js +164 -0
  129. package/lib/module/components/Radio/index.js.map +1 -0
  130. package/lib/module/components/Radio/styles.js +27 -0
  131. package/lib/module/components/Radio/styles.js.map +1 -0
  132. package/lib/module/components/Text/styles.js +2 -2
  133. package/lib/module/components/Text/styles.js.map +1 -1
  134. package/lib/module/components/Tile/index.js +243 -0
  135. package/lib/module/components/Tile/index.js.map +1 -0
  136. package/lib/module/components/Tile/styles.js +48 -0
  137. package/lib/module/components/Tile/styles.js.map +1 -0
  138. package/lib/module/components/index.js +3 -0
  139. package/lib/module/components/index.js.map +1 -1
  140. package/lib/module/figma/Avatar.figma.js +48 -0
  141. package/lib/module/figma/Avatar.figma.js.map +1 -0
  142. package/lib/module/figma/Button.figma.js +28 -11
  143. package/lib/module/figma/Button.figma.js.map +1 -1
  144. package/lib/module/figma/CLAUDE.md +30 -0
  145. package/lib/module/figma/Card.Header.figma.js +22 -0
  146. package/lib/module/figma/Card.Header.figma.js.map +1 -0
  147. package/lib/module/figma/Card.figma.js +36 -0
  148. package/lib/module/figma/Card.figma.js.map +1 -0
  149. package/lib/module/figma/Checkbox.figma.js +49 -0
  150. package/lib/module/figma/Checkbox.figma.js.map +1 -0
  151. package/lib/module/figma/Chip.figma.js +62 -0
  152. package/lib/module/figma/Chip.figma.js.map +1 -0
  153. package/lib/module/figma/Field.Input.figma.js +51 -0
  154. package/lib/module/figma/Field.Input.figma.js.map +1 -0
  155. package/lib/module/figma/Field.Select.figma.js +51 -0
  156. package/lib/module/figma/Field.Select.figma.js.map +1 -0
  157. package/lib/module/figma/Heading.figma.js +24 -0
  158. package/lib/module/figma/Heading.figma.js.map +1 -0
  159. package/lib/module/figma/Icon.figma.js +14 -0
  160. package/lib/module/figma/Icon.figma.js.map +1 -0
  161. package/lib/module/figma/IconButton.figma.js +41 -0
  162. package/lib/module/figma/IconButton.figma.js.map +1 -0
  163. package/lib/module/figma/Input.figma.js +46 -0
  164. package/lib/module/figma/Input.figma.js.map +1 -0
  165. package/lib/module/figma/ProgressSegmented.figma.js +33 -0
  166. package/lib/module/figma/ProgressSegmented.figma.js.map +1 -0
  167. package/lib/module/figma/Radio.figma.js +32 -0
  168. package/lib/module/figma/Radio.figma.js.map +1 -0
  169. package/lib/module/figma/Select.figma.js +47 -0
  170. package/lib/module/figma/Select.figma.js.map +1 -0
  171. package/lib/module/figma/Text.figma.js +23 -0
  172. package/lib/module/figma/Text.figma.js.map +1 -0
  173. package/lib/module/figma/icons.figma.batch.js +22 -0
  174. package/lib/module/figma/icons.figma.batch.js.map +1 -0
  175. package/lib/module/figma/icons.figma.batch.json +17705 -0
  176. package/lib/module/styles/primitives.js +42 -5
  177. package/lib/module/styles/primitives.js.map +1 -1
  178. package/lib/typescript/components/Avatar/styles.d.ts +4 -4
  179. package/lib/typescript/components/Avatar/styles.d.ts.map +1 -1
  180. package/lib/typescript/components/Card/index.d.ts +4 -3
  181. package/lib/typescript/components/Card/index.d.ts.map +1 -1
  182. package/lib/typescript/components/Card/styles.d.ts +13 -3
  183. package/lib/typescript/components/Card/styles.d.ts.map +1 -1
  184. package/lib/typescript/components/Checkbox/index.d.ts +1 -2
  185. package/lib/typescript/components/Checkbox/index.d.ts.map +1 -1
  186. package/lib/typescript/components/Checkbox/styles.d.ts +4 -14
  187. package/lib/typescript/components/Checkbox/styles.d.ts.map +1 -1
  188. package/lib/typescript/components/Chip/index.d.ts +19 -6
  189. package/lib/typescript/components/Chip/index.d.ts.map +1 -1
  190. package/lib/typescript/components/Chip/styles.d.ts +13 -4
  191. package/lib/typescript/components/Chip/styles.d.ts.map +1 -1
  192. package/lib/typescript/components/Field/FieldLabel.web.d.ts +2 -2
  193. package/lib/typescript/components/Field/FieldLabel.web.d.ts.map +1 -1
  194. package/lib/typescript/components/Field/index.d.ts.map +1 -1
  195. package/lib/typescript/components/Field/styles.d.ts.map +1 -1
  196. package/lib/typescript/components/Heading/styles.d.ts +1 -1
  197. package/lib/typescript/components/Icon/index.d.ts.map +1 -1
  198. package/lib/typescript/components/IconButton/index.d.ts.map +1 -1
  199. package/lib/typescript/components/IconButton/styles.d.ts +6 -2
  200. package/lib/typescript/components/IconButton/styles.d.ts.map +1 -1
  201. package/lib/typescript/components/Input/styles.d.ts.map +1 -1
  202. package/lib/typescript/components/ListItem/index.d.ts +49 -0
  203. package/lib/typescript/components/ListItem/index.d.ts.map +1 -0
  204. package/lib/typescript/components/ListItem/styles.d.ts +30 -0
  205. package/lib/typescript/components/ListItem/styles.d.ts.map +1 -0
  206. package/lib/typescript/components/ProgressSegmented/index.d.ts +14 -3
  207. package/lib/typescript/components/ProgressSegmented/index.d.ts.map +1 -1
  208. package/lib/typescript/components/Radio/index.d.ts +40 -0
  209. package/lib/typescript/components/Radio/index.d.ts.map +1 -0
  210. package/lib/typescript/components/Radio/styles.d.ts +8 -0
  211. package/lib/typescript/components/Radio/styles.d.ts.map +1 -0
  212. package/lib/typescript/components/Stack/styles.d.ts +2 -2
  213. package/lib/typescript/components/Text/styles.d.ts +1 -1
  214. package/lib/typescript/components/Tile/index.d.ts +70 -0
  215. package/lib/typescript/components/Tile/index.d.ts.map +1 -0
  216. package/lib/typescript/components/Tile/styles.d.ts +18 -0
  217. package/lib/typescript/components/Tile/styles.d.ts.map +1 -0
  218. package/lib/typescript/components/index.d.ts +3 -0
  219. package/lib/typescript/components/index.d.ts.map +1 -1
  220. package/lib/typescript/figma/Avatar.figma.d.ts +8 -0
  221. package/lib/typescript/figma/Avatar.figma.d.ts.map +1 -0
  222. package/lib/typescript/figma/Button.figma.d.ts.map +1 -1
  223. package/lib/typescript/figma/Card.Header.figma.d.ts +8 -0
  224. package/lib/typescript/figma/Card.Header.figma.d.ts.map +1 -0
  225. package/lib/typescript/figma/Card.figma.d.ts +8 -0
  226. package/lib/typescript/figma/Card.figma.d.ts.map +1 -0
  227. package/lib/typescript/figma/Checkbox.figma.d.ts +8 -0
  228. package/lib/typescript/figma/Checkbox.figma.d.ts.map +1 -0
  229. package/lib/typescript/figma/Chip.figma.d.ts +8 -0
  230. package/lib/typescript/figma/Chip.figma.d.ts.map +1 -0
  231. package/lib/typescript/figma/Field.Input.figma.d.ts +8 -0
  232. package/lib/typescript/figma/Field.Input.figma.d.ts.map +1 -0
  233. package/lib/typescript/figma/Field.Select.figma.d.ts +8 -0
  234. package/lib/typescript/figma/Field.Select.figma.d.ts.map +1 -0
  235. package/lib/typescript/figma/Heading.figma.d.ts +8 -0
  236. package/lib/typescript/figma/Heading.figma.d.ts.map +1 -0
  237. package/lib/typescript/figma/Icon.figma.d.ts +8 -0
  238. package/lib/typescript/figma/Icon.figma.d.ts.map +1 -0
  239. package/lib/typescript/figma/IconButton.figma.d.ts +8 -0
  240. package/lib/typescript/figma/IconButton.figma.d.ts.map +1 -0
  241. package/lib/typescript/figma/Input.figma.d.ts +8 -0
  242. package/lib/typescript/figma/Input.figma.d.ts.map +1 -0
  243. package/lib/typescript/figma/ProgressSegmented.figma.d.ts +8 -0
  244. package/lib/typescript/figma/ProgressSegmented.figma.d.ts.map +1 -0
  245. package/lib/typescript/figma/Radio.figma.d.ts +8 -0
  246. package/lib/typescript/figma/Radio.figma.d.ts.map +1 -0
  247. package/lib/typescript/figma/Select.figma.d.ts +8 -0
  248. package/lib/typescript/figma/Select.figma.d.ts.map +1 -0
  249. package/lib/typescript/figma/Text.figma.d.ts +8 -0
  250. package/lib/typescript/figma/Text.figma.d.ts.map +1 -0
  251. package/lib/typescript/figma/icons.figma.batch.d.ts +14 -0
  252. package/lib/typescript/figma/icons.figma.batch.d.ts.map +1 -0
  253. package/lib/typescript/styles/primitives.d.ts +38 -0
  254. package/lib/typescript/styles/primitives.d.ts.map +1 -1
  255. package/package.json +4 -4
  256. package/src/components/Avatar/index.tsx +1 -1
  257. package/src/components/Avatar/styles.ts +49 -34
  258. package/src/components/Button/styles.ts +2 -2
  259. package/src/components/CLAUDE.md +90 -0
  260. package/src/components/Card/index.tsx +41 -16
  261. package/src/components/Card/styles.ts +43 -23
  262. package/src/components/Checkbox/index.tsx +8 -19
  263. package/src/components/Checkbox/styles.ts +82 -86
  264. package/src/components/Chip/index.tsx +104 -27
  265. package/src/components/Chip/styles.ts +232 -18
  266. package/src/components/Field/FieldLabel.web.tsx +1 -1
  267. package/src/components/Field/index.tsx +10 -3
  268. package/src/components/Field/styles.ts +5 -4
  269. package/src/components/Heading/styles.ts +1 -1
  270. package/src/components/Icon/index.tsx +1 -2
  271. package/src/components/IconButton/index.tsx +3 -2
  272. package/src/components/IconButton/styles.ts +136 -10
  273. package/src/components/Input/styles.ts +14 -9
  274. package/src/components/ListItem/index.tsx +285 -0
  275. package/src/components/ListItem/styles.ts +153 -0
  276. package/src/components/ProgressSegmented/index.tsx +49 -14
  277. package/src/components/Radio/index.tsx +192 -0
  278. package/src/components/Radio/styles.ts +59 -0
  279. package/src/components/Text/styles.ts +2 -2
  280. package/src/components/Tile/index.tsx +296 -0
  281. package/src/components/Tile/styles.ts +82 -0
  282. package/src/components/index.ts +3 -0
  283. package/src/styles/primitives.ts +42 -5
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
 
3
- // url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/branch/LkwnLe2gHRg0vLdfg9Frjs/%E2%AD%90-CDS-V2--React-Native?node-id=119-72
3
+ // url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=119-72
4
4
  // source=packages/components/src/components/Button/index.tsx
5
5
  // component=Button
6
6
  import figma from 'figma';
@@ -8,7 +8,7 @@ const instance = figma.selectedInstance;
8
8
 
9
9
  // Variant rename: Figma uses "solid" but code uses "strong" for the filled/primary style.
10
10
  // This divergence exists because "strong" better communicates visual weight in the code API
11
- // while "solid" is the conventional Figma naming. Use getEnum to map between them.
11
+ // while "solid" is the conventional Figma naming.
12
12
  const variant = instance.getEnum('variant', {
13
13
  solid: 'strong',
14
14
  outline: 'outline',
@@ -22,26 +22,43 @@ const size = instance.getEnum('size', {
22
22
  default: 'default',
23
23
  small: 'small'
24
24
  });
25
- // Enum-as-boolean pattern: isDisabled is a VARIANT property in Figma (string values
26
- // "true"/"false") rather than a true BOOLEAN property. We use getEnum and map "false"
27
- // to undefined so the prop is omitted entirely from the generated snippet when not disabled.
25
+ // Enum-as-boolean: isDisabled is a VARIANT property in Figma (string values "true"/"false")
26
+ // rather than a true BOOLEAN. Map "false" to undefined so the prop is omitted when not disabled.
28
27
  const isDisabled = instance.getEnum('isDisabled', {
29
28
  true: true,
30
29
  false: undefined
31
30
  });
31
+ const isDisabledProp = figma.helpers.react.renderProp('isDisabled', isDisabled);
32
32
  const showLeadingIcon = instance.getBoolean('Show Leading Icon?');
33
33
  const showTrailingIcon = instance.getBoolean('Show Trailing Icon?');
34
- const leadingIcon = instance.findInstance('Button.Icon (Leading)');
35
- const trailingIcon = instance.findInstance('Button.Icon (Trailing)');
34
+
35
+ // Icon slots: Prefer metadata.props.componentName exposed by icon Code Connect templates,
36
+ // which yields a clean identifier (e.g. "Check"). Fall back to executeTemplate().example
37
+ // (renders a placeholder pill when the icon lacks Code Connect).
38
+ const leadingIconResult = instance.getInstanceSwap('Leading Icon')?.executeTemplate();
39
+ const trailingIconResult = instance.getInstanceSwap('Trailing Icon')?.executeTemplate();
40
+ const leadingIconName = leadingIconResult?.metadata?.props?.componentName;
41
+ const trailingIconName = trailingIconResult?.metadata?.props?.componentName;
42
+ const leadingIconSnippet = leadingIconName ?? leadingIconResult?.example;
43
+ const trailingIconSnippet = trailingIconName ?? trailingIconResult?.example;
36
44
  const label = instance.findText('Button.Label').textContent;
45
+
46
+ // Include icon imports when resolved via metadata.props (propagated from icon Code Connect)
47
+ const iconImports = [];
48
+ if (showLeadingIcon && leadingIconName) {
49
+ iconImports.push(`import { ${leadingIconName} } from '@cdx-ui/icons'`);
50
+ }
51
+ if (showTrailingIcon && trailingIconName) {
52
+ iconImports.push(`import { ${trailingIconName} } from '@cdx-ui/icons'`);
53
+ }
37
54
  export default {
38
55
  id: 'button',
39
- imports: ["import { Button } from '@cdx-ui/components'"],
56
+ imports: ["import { Button } from '@cdx-ui/components'", ...iconImports],
40
57
  example: figma.code`
41
- <Button variant="${variant}" color="${color}" size="${size}" isDisabled={${isDisabled}}>
42
- ${showLeadingIcon ? leadingIcon.executeTemplate().example : null}
58
+ <Button variant="${variant}" color="${color}" size="${size}"${isDisabledProp}>
59
+ ${showLeadingIcon ? figma.code`<Button.Icon as={${leadingIconSnippet}} />` : null}
43
60
  <Button.Label>${label}</Button.Label>
44
- ${showTrailingIcon ? trailingIcon.executeTemplate().example : null}
61
+ ${showTrailingIcon ? figma.code`<Button.Icon as={${trailingIconSnippet}} />` : null}
45
62
  </Button>`
46
63
  };
47
64
  //# sourceMappingURL=Button.figma.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["figma","instance","selectedInstance","variant","getEnum","solid","outline","ghost","color","action","danger","size","default","small","isDisabled","true","false","undefined","showLeadingIcon","getBoolean","showTrailingIcon","leadingIcon","findInstance","trailingIcon","label","findText","textContent","id","imports","example","code","executeTemplate"],"sourceRoot":"../../../src","sources":["figma/Button.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;;AAEvC;AACA;AACA;AACA,MAAMC,OAAO,GAAGF,QAAQ,CAACG,OAAO,CAAC,SAAS,EAAE;EAC1CC,KAAK,EAAE,QAAQ;EACfC,OAAO,EAAE,SAAS;EAClBC,KAAK,EAAE;AACT,CAAC,CAAC;AACF,MAAMC,KAAK,GAAGP,QAAQ,CAACG,OAAO,CAAC,OAAO,EAAE;EACtCK,MAAM,EAAE,QAAQ;EAChBC,MAAM,EAAE;AACV,CAAC,CAAC;AACF,MAAMC,IAAI,GAAGV,QAAQ,CAACG,OAAO,CAAC,MAAM,EAAE;EACpCQ,OAAO,EAAE,SAAS;EAClBC,KAAK,EAAE;AACT,CAAC,CAAC;AACF;AACA;AACA;AACA,MAAMC,UAAU,GAAGb,QAAQ,CAACG,OAAO,CAAC,YAAY,EAAE;EAChDW,IAAI,EAAE,IAAI;EACVC,KAAK,EAAEC;AACT,CAAC,CAAC;AAEF,MAAMC,eAAe,GAAGjB,QAAQ,CAACkB,UAAU,CAAC,oBAAoB,CAAC;AACjE,MAAMC,gBAAgB,GAAGnB,QAAQ,CAACkB,UAAU,CAAC,qBAAqB,CAAC;AACnE,MAAME,WAAW,GAAGpB,QAAQ,CAACqB,YAAY,CAAC,uBAAuB,CAAC;AAClE,MAAMC,YAAY,GAAGtB,QAAQ,CAACqB,YAAY,CAAC,wBAAwB,CAAC;AACpE,MAAME,KAAK,GAAIvB,QAAQ,CAACwB,QAAQ,CAAC,cAAc,CAAC,CAAgCC,WAAW;AAE3F,eAAe;EACbC,EAAE,EAAE,QAAQ;EACZC,OAAO,EAAE,CAAC,6CAA6C,CAAC;EACxDC,OAAO,EAAE7B,KAAK,CAAC8B,IAAI;AACrB,mBAAmB3B,OAAO,YAAYK,KAAK,WAAWG,IAAI,iBAAiBG,UAAU;AACrF,IAAII,eAAe,GAAGG,WAAW,CAACU,eAAe,CAAC,CAAC,CAACF,OAAO,GAAG,IAAI;AAClE,kBAAkBL,KAAK;AACvB,IAAIJ,gBAAgB,GAAGG,YAAY,CAACQ,eAAe,CAAC,CAAC,CAACF,OAAO,GAAG,IAAI;AACpE;AACA,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["figma","instance","selectedInstance","variant","getEnum","solid","outline","ghost","color","action","danger","size","default","small","isDisabled","true","false","undefined","isDisabledProp","helpers","react","renderProp","showLeadingIcon","getBoolean","showTrailingIcon","leadingIconResult","getInstanceSwap","executeTemplate","trailingIconResult","leadingIconName","metadata","props","componentName","trailingIconName","leadingIconSnippet","example","trailingIconSnippet","label","findText","textContent","iconImports","push","id","imports","code"],"sourceRoot":"../../../src","sources":["figma/Button.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;;AAEvC;AACA;AACA;AACA,MAAMC,OAAO,GAAGF,QAAQ,CAACG,OAAO,CAAC,SAAS,EAAE;EAC1CC,KAAK,EAAE,QAAQ;EACfC,OAAO,EAAE,SAAS;EAClBC,KAAK,EAAE;AACT,CAAC,CAAC;AACF,MAAMC,KAAK,GAAGP,QAAQ,CAACG,OAAO,CAAC,OAAO,EAAE;EACtCK,MAAM,EAAE,QAAQ;EAChBC,MAAM,EAAE;AACV,CAAC,CAAC;AACF,MAAMC,IAAI,GAAGV,QAAQ,CAACG,OAAO,CAAC,MAAM,EAAE;EACpCQ,OAAO,EAAE,SAAS;EAClBC,KAAK,EAAE;AACT,CAAC,CAAC;AACF;AACA;AACA,MAAMC,UAAU,GAAGb,QAAQ,CAACG,OAAO,CAAC,YAAY,EAAE;EAChDW,IAAI,EAAE,IAAI;EACVC,KAAK,EAAEC;AACT,CAAC,CAAC;AACF,MAAMC,cAAc,GAAGlB,KAAK,CAACmB,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,YAAY,EAAEP,UAAU,CAAC;AAE/E,MAAMQ,eAAe,GAAGrB,QAAQ,CAACsB,UAAU,CAAC,oBAAoB,CAAC;AACjE,MAAMC,gBAAgB,GAAGvB,QAAQ,CAACsB,UAAU,CAAC,qBAAqB,CAAC;;AAEnE;AACA;AACA;AACA,MAAME,iBAAiB,GAAGxB,QAAQ,CAACyB,eAAe,CAAC,cAAc,CAAC,EAAEC,eAAe,CAAC,CAAC;AACrF,MAAMC,kBAAkB,GAAG3B,QAAQ,CAACyB,eAAe,CAAC,eAAe,CAAC,EAAEC,eAAe,CAAC,CAAC;AAEvF,MAAME,eAAe,GAAGJ,iBAAiB,EAAEK,QAAQ,EAAEC,KAAK,EAAEC,aAAmC;AAC/F,MAAMC,gBAAgB,GAAGL,kBAAkB,EAAEE,QAAQ,EAAEC,KAAK,EAAEC,aAAmC;AACjG,MAAME,kBAAkB,GAAGL,eAAe,IAAIJ,iBAAiB,EAAEU,OAAO;AACxE,MAAMC,mBAAmB,GAAGH,gBAAgB,IAAIL,kBAAkB,EAAEO,OAAO;AAE3E,MAAME,KAAK,GAAIpC,QAAQ,CAACqC,QAAQ,CAAC,cAAc,CAAC,CAAgCC,WAAW;;AAE3F;AACA,MAAMC,WAAqB,GAAG,EAAE;AAChC,IAAIlB,eAAe,IAAIO,eAAe,EAAE;EACtCW,WAAW,CAACC,IAAI,CAAC,YAAYZ,eAAe,yBAAyB,CAAC;AACxE;AACA,IAAIL,gBAAgB,IAAIS,gBAAgB,EAAE;EACxCO,WAAW,CAACC,IAAI,CAAC,YAAYR,gBAAgB,yBAAyB,CAAC;AACzE;AAEA,eAAe;EACbS,EAAE,EAAE,QAAQ;EACZC,OAAO,EAAE,CAAC,6CAA6C,EAAE,GAAGH,WAAW,CAAC;EACxEL,OAAO,EAAEnC,KAAK,CAAC4C,IAAI;AACrB,mBAAmBzC,OAAO,YAAYK,KAAK,WAAWG,IAAI,IAAIO,cAAc;AAC5E,IAAII,eAAe,GAAGtB,KAAK,CAAC4C,IAAI,oBAAoBV,kBAAkB,MAAM,GAAG,IAAI;AACnF,kBAAkBG,KAAK;AACvB,IAAIb,gBAAgB,GAAGxB,KAAK,CAAC4C,IAAI,oBAAoBR,mBAAmB,MAAM,GAAG,IAAI;AACrF;AACA,CAAC","ignoreList":[]}
@@ -0,0 +1,30 @@
1
+ # Code Connect
2
+
3
+ Auto-loaded when working in `packages/components/src/figma/**` (`*.figma.ts`, `*.figma.batch.ts`, `*.figma.batch.json`).
4
+
5
+ Template files connect CDX UI components to Figma Dev Mode snippets. Read the full guide before making changes:
6
+
7
+ - `docs/internal/practices/code-connect.md` — complete workflow, mapping patterns, publishing, troubleshooting
8
+
9
+ ## Pattern summary
10
+
11
+ Each `.figma.ts` file follows this structure (see `Button.figma.ts` as the canonical example):
12
+
13
+ 1. **Metadata comments** — `// url=`, `// source=`, `// component=` at the top (required)
14
+ 2. **`figma` import** — `import figma from 'figma'` (template API, not a runtime import)
15
+ 3. **Instance handle** — `const instance = figma.selectedInstance`
16
+ 4. **Property mappings** — `getEnum`, `getBoolean`, `getInstanceSwap`, `findText`, `findInstance`
17
+ 5. **Default export** — `{ id, imports, example }` with optional `metadata`
18
+
19
+ ## Key rules
20
+
21
+ - **Enum renaming** — pass a mapping object to `getEnum` when Figma and code names differ; list all values explicitly
22
+ - **Boolean-as-variant** — Figma VARIANT properties with `"true"`/`"false"` string values use `getEnum`, not `getBoolean`; map `"false"` to `undefined`; **always** render via `figma.helpers.react.renderProp` — never `isDisabled={${isDisabled}}` (produces `isDisabled={}` when undefined)
23
+ - **Instance swap** — use `getInstanceSwap` (not `findInstance`) for designer-swappable slots; call `.executeTemplate()` before interpolating; prefer `metadata.props.componentName` over raw `.example` for icon slots
24
+ - **Runtime states excluded** — `isHovered`, `isFocused`, `isPressed`, `isLoading` are runtime-managed; never map them
25
+ - **Falsy → `undefined`** — default or falsy values map to `undefined` so they don't clutter the snippet
26
+ - **Compound dot notation** — render sub-components as `Button.Label`, `Button.Icon`, not bare `Label`/`Icon`
27
+ - **`imports` array** — use `@cdx-ui/components` import path; Figma deduplicates identical strings
28
+ - **Nestable metadata** — leaf components (icons, badges) set `metadata: { nestable: true, props: { componentName } }`
29
+ - **Batch pattern** — for large sets with identical code shapes (icons), use `.figma.batch.ts` + `.figma.batch.json` with `figma.batch.name`/`figma.batch.id`
30
+ - **Publish** — `pnpm figma:publish` locally; CI publishes on merge to `main`
@@ -0,0 +1,22 @@
1
+ "use strict";
2
+
3
+ // url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=455-178
4
+ // source=packages/components/src/components/Card/index.tsx
5
+ // component=Card.Header
6
+ import figma from 'figma';
7
+ const instance = figma.selectedInstance;
8
+ const showActions = instance.getBoolean('Show Actions?');
9
+ const actionsSlot = instance.getSlot('Actions');
10
+ const title = instance.findText('{Title}').textContent;
11
+ const actions = showActions && actionsSlot ? figma.helpers.react.renderChildren(actionsSlot) : null;
12
+ export default {
13
+ id: 'card-header',
14
+ // Must match Card.figma.ts when the card nests this template (identical strings → deduped imports).
15
+ imports: ["import { Card, Heading } from '@cdx-ui/components'"],
16
+ example: figma.code`
17
+ <Card.Header>
18
+ <Heading size="sm">${title}</Heading>
19
+ ${actions}
20
+ </Card.Header>`
21
+ };
22
+ //# sourceMappingURL=Card.Header.figma.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["figma","instance","selectedInstance","showActions","getBoolean","actionsSlot","getSlot","title","findText","textContent","actions","helpers","react","renderChildren","id","imports","example","code"],"sourceRoot":"../../../src","sources":["figma/Card.Header.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;AAEvC,MAAMC,WAAW,GAAGF,QAAQ,CAACG,UAAU,CAAC,eAAe,CAAC;AACxD,MAAMC,WAAW,GAAGJ,QAAQ,CAACK,OAAO,CAAC,SAAS,CAAC;AAC/C,MAAMC,KAAK,GAAIN,QAAQ,CAACO,QAAQ,CAAC,SAAS,CAAC,CAAgCC,WAAW;AAEtF,MAAMC,OAAO,GAAGP,WAAW,IAAIE,WAAW,GAAGL,KAAK,CAACW,OAAO,CAACC,KAAK,CAACC,cAAc,CAACR,WAAW,CAAC,GAAG,IAAI;AAEnG,eAAe;EACbS,EAAE,EAAE,aAAa;EACjB;EACAC,OAAO,EAAE,CAAC,oDAAoD,CAAC;EAC/DC,OAAO,EAAEhB,KAAK,CAACiB,IAAI;AACrB;AACA,uBAAuBV,KAAK;AAC5B,IAAIG,OAAO;AACX;AACA,CAAC","ignoreList":[]}
@@ -0,0 +1,36 @@
1
+ "use strict";
2
+
3
+ // url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=456-14
4
+ // source=packages/components/src/components/Card/index.tsx
5
+ // component=Card
6
+ import figma from 'figma';
7
+ const instance = figma.selectedInstance;
8
+
9
+ // VARIANT property uses "true" / "false" strings — omit prop when not full bleed.
10
+ const fullBleed = instance.getEnum('fullBleed', {
11
+ true: true,
12
+ false: undefined
13
+ });
14
+ const showHeader = instance.getBoolean('Show Header?');
15
+ const showFooter = instance.getBoolean('Show Footer?');
16
+ const headerLayer = instance.findInstance('Card.Header');
17
+ const headerSnippet = showHeader && headerLayer?.type === 'INSTANCE' ? headerLayer.executeTemplate().example : null;
18
+ const contentSlot = instance.getSlot('Card.Content');
19
+ const footerSlot = instance.getSlot('Card.Footer');
20
+ const contentChildren = contentSlot ? figma.helpers.react.renderChildren(contentSlot) : null;
21
+ const footerChildren = footerSlot ? figma.helpers.react.renderChildren(footerSlot) : null;
22
+
23
+ // When the header shows: use the exact same import string as Card.Header.figma.ts (Code Connect
24
+ // allows only `import … from 'figma'` in template files; duplicate literals are required for dedupe).
25
+ const componentImport = showHeader ? "import { Card, Heading } from '@cdx-ui/components'" : `import { Card } from '@cdx-ui/components'`;
26
+ export default {
27
+ id: 'card',
28
+ imports: [componentImport],
29
+ example: figma.code`
30
+ <Card fullBleed={${fullBleed}}>
31
+ ${headerSnippet}
32
+ <Card.Content>${contentChildren}</Card.Content>
33
+ ${showFooter ? figma.code`<Card.Footer>${footerChildren}</Card.Footer>` : null}
34
+ </Card>`
35
+ };
36
+ //# sourceMappingURL=Card.figma.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["figma","instance","selectedInstance","fullBleed","getEnum","true","false","undefined","showHeader","getBoolean","showFooter","headerLayer","findInstance","headerSnippet","type","executeTemplate","example","contentSlot","getSlot","footerSlot","contentChildren","helpers","react","renderChildren","footerChildren","componentImport","id","imports","code"],"sourceRoot":"../../../src","sources":["figma/Card.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;;AAEvC;AACA,MAAMC,SAAS,GAAGF,QAAQ,CAACG,OAAO,CAAC,WAAW,EAAE;EAC9CC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAEC;AACT,CAAC,CAAC;AAEF,MAAMC,UAAU,GAAGP,QAAQ,CAACQ,UAAU,CAAC,cAAc,CAAC;AACtD,MAAMC,UAAU,GAAGT,QAAQ,CAACQ,UAAU,CAAC,cAAc,CAAC;AAEtD,MAAME,WAAW,GAAGV,QAAQ,CAACW,YAAY,CAAC,aAAa,CAAC;AACxD,MAAMC,aAAa,GACjBL,UAAU,IAAIG,WAAW,EAAEG,IAAI,KAAK,UAAU,GAAGH,WAAW,CAACI,eAAe,CAAC,CAAC,CAACC,OAAO,GAAG,IAAI;AAE/F,MAAMC,WAAW,GAAGhB,QAAQ,CAACiB,OAAO,CAAC,cAAc,CAAC;AACpD,MAAMC,UAAU,GAAGlB,QAAQ,CAACiB,OAAO,CAAC,aAAa,CAAC;AAElD,MAAME,eAAe,GAAGH,WAAW,GAAGjB,KAAK,CAACqB,OAAO,CAACC,KAAK,CAACC,cAAc,CAACN,WAAW,CAAC,GAAG,IAAI;AAE5F,MAAMO,cAAc,GAAGL,UAAU,GAAGnB,KAAK,CAACqB,OAAO,CAACC,KAAK,CAACC,cAAc,CAACJ,UAAU,CAAC,GAAG,IAAI;;AAEzF;AACA;AACA,MAAMM,eAAe,GAAGjB,UAAU,GAC9B,oDAAoD,GACpD,2CAA2C;AAE/C,eAAe;EACbkB,EAAE,EAAE,MAAM;EACVC,OAAO,EAAE,CAACF,eAAe,CAAC;EAC1BT,OAAO,EAAEhB,KAAK,CAAC4B,IAAI;AACrB,mBAAmBzB,SAAS;AAC5B,IAAIU,aAAa;AACjB,kBAAkBO,eAAe;AACjC,IAAIV,UAAU,GAAGV,KAAK,CAAC4B,IAAI,gBAAgBJ,cAAc,gBAAgB,GAAG,IAAI;AAChF;AACA,CAAC","ignoreList":[]}
@@ -0,0 +1,49 @@
1
+ "use strict";
2
+
3
+ // url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=366-383
4
+ // source=packages/components/src/components/Checkbox/index.tsx
5
+ // component=Checkbox
6
+ import figma from 'figma';
7
+ const instance = figma.selectedInstance;
8
+
9
+ /**
10
+ * Enum-as-boolean VARIANT props use string values "true"/"false" in Figma.
11
+ * Props are emitted via `figma.helpers.react.renderProp` so JSX formatting matches Code Connect conventions.
12
+ *
13
+ * `isHovered` and `isFocused` are interaction-only variants (fixed "false") and are intentionally omitted.
14
+ */
15
+ const isChecked = instance.getEnum('isChecked', {
16
+ true: true,
17
+ false: false
18
+ });
19
+ const isIndeterminate = instance.getEnum('isIndeterminate', {
20
+ true: true,
21
+ false: false
22
+ });
23
+ const isInvalid = instance.getEnum('isInvalid', {
24
+ true: true,
25
+ false: false
26
+ });
27
+ const isDisabled = instance.getEnum('isDisabled', {
28
+ true: true,
29
+ false: false
30
+ });
31
+ const valueProp = figma.helpers.react.renderProp('value', 'terms');
32
+ const isCheckedProp = figma.helpers.react.renderProp('isChecked', isChecked);
33
+ const isIndeterminateProp = figma.helpers.react.renderProp('isIndeterminate', isIndeterminate);
34
+ const isInvalidProp = figma.helpers.react.renderProp('isInvalid', isInvalid);
35
+ const isDisabledProp = figma.helpers.react.renderProp('isDisabled', isDisabled);
36
+ const showLabel = instance.getEnum('Show Label?', {
37
+ true: true,
38
+ false: false
39
+ });
40
+ const labelText = instance.findText('Label').textContent;
41
+ export default {
42
+ id: 'checkbox',
43
+ imports: ["import { Checkbox } from '@cdx-ui/components'"],
44
+ example: figma.code`
45
+ <Checkbox${valueProp}${isCheckedProp}${isIndeterminateProp}${isInvalidProp}${isDisabledProp}>
46
+ ${showLabel ? figma.code`<Checkbox.Label>${labelText}</Checkbox.Label>` : null}
47
+ </Checkbox>`
48
+ };
49
+ //# sourceMappingURL=Checkbox.figma.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["figma","instance","selectedInstance","isChecked","getEnum","true","false","isIndeterminate","isInvalid","isDisabled","valueProp","helpers","react","renderProp","isCheckedProp","isIndeterminateProp","isInvalidProp","isDisabledProp","showLabel","labelText","findText","textContent","id","imports","example","code"],"sourceRoot":"../../../src","sources":["figma/Checkbox.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;;AAEvC;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,SAAS,GAAGF,QAAQ,CAACG,OAAO,CAAC,WAAW,EAAE;EAC9CC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAE;AACT,CAAC,CAAC;AACF,MAAMC,eAAe,GAAGN,QAAQ,CAACG,OAAO,CAAC,iBAAiB,EAAE;EAC1DC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAE;AACT,CAAC,CAAC;AACF,MAAME,SAAS,GAAGP,QAAQ,CAACG,OAAO,CAAC,WAAW,EAAE;EAC9CC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAE;AACT,CAAC,CAAC;AACF,MAAMG,UAAU,GAAGR,QAAQ,CAACG,OAAO,CAAC,YAAY,EAAE;EAChDC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAE;AACT,CAAC,CAAC;AAEF,MAAMI,SAAS,GAAGV,KAAK,CAACW,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,OAAO,EAAE,OAAO,CAAC;AAClE,MAAMC,aAAa,GAAGd,KAAK,CAACW,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,WAAW,EAAEV,SAAS,CAAC;AAC5E,MAAMY,mBAAmB,GAAGf,KAAK,CAACW,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,iBAAiB,EAAEN,eAAe,CAAC;AAC9F,MAAMS,aAAa,GAAGhB,KAAK,CAACW,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,WAAW,EAAEL,SAAS,CAAC;AAC5E,MAAMS,cAAc,GAAGjB,KAAK,CAACW,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,YAAY,EAAEJ,UAAU,CAAC;AAE/E,MAAMS,SAAS,GAAGjB,QAAQ,CAACG,OAAO,CAAC,aAAa,EAAE;EAChDC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAE;AACT,CAAC,CAAC;AAEF,MAAMa,SAAS,GAAIlB,QAAQ,CAACmB,QAAQ,CAAC,OAAO,CAAC,CAAgCC,WAAW;AAExF,eAAe;EACbC,EAAE,EAAE,UAAU;EACdC,OAAO,EAAE,CAAC,+CAA+C,CAAC;EAC1DC,OAAO,EAAExB,KAAK,CAACyB,IAAI;AACrB,WAAWf,SAAS,GAAGI,aAAa,GAAGC,mBAAmB,GAAGC,aAAa,GAAGC,cAAc;AAC3F,IAAIC,SAAS,GAAGlB,KAAK,CAACyB,IAAI,mBAAmBN,SAAS,mBAAmB,GAAG,IAAI;AAChF;AACA,CAAC","ignoreList":[]}
@@ -0,0 +1,62 @@
1
+ "use strict";
2
+
3
+ // url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=444-13403
4
+ // source=packages/components/src/components/Chip/index.tsx
5
+ // component=Chip
6
+ import figma from 'figma';
7
+ const instance = figma.selectedInstance;
8
+ const variant = instance.getEnum('variant', {
9
+ tint: 'tint',
10
+ outline: 'outline'
11
+ });
12
+ const size = instance.getEnum('size', {
13
+ default: 'default',
14
+ small: 'small',
15
+ xsmall: 'xsmall'
16
+ });
17
+ const color = instance.getEnum('color', {
18
+ default: 'default',
19
+ action: 'action',
20
+ danger: 'danger',
21
+ warning: 'warning',
22
+ success: 'success',
23
+ info: 'info'
24
+ });
25
+ const isDisabled = instance.getEnum('isDisabled', {
26
+ true: true,
27
+ false: undefined
28
+ });
29
+ const disabledProp = figma.helpers.react.renderProp('disabled', isDisabled);
30
+ const showLeadingIcon = instance.getBoolean('Show Leading Icon?');
31
+ const showAvatar = instance.getBoolean('Show Avatar?');
32
+ const showTrailingIcon = instance.getBoolean('Show Trailing Icon?');
33
+
34
+ // INSTANCE_SWAP property names from Figma (Chip.LeadingIcon / Chip.TrailingIcon).
35
+ const leadingIconResult = showLeadingIcon && !showAvatar ? instance.getInstanceSwap('Chip.LeadingIcon')?.executeTemplate() : undefined;
36
+ const trailingIconResult = showTrailingIcon ? instance.getInstanceSwap('Chip.TrailingIcon')?.executeTemplate() : undefined;
37
+ const leadingIconName = leadingIconResult?.metadata?.props?.componentName;
38
+ const trailingIconName = trailingIconResult?.metadata?.props?.componentName;
39
+ const leadingIconSnippet = leadingIconName ?? leadingIconResult?.example;
40
+ const trailingIconSnippet = trailingIconName ?? trailingIconResult?.example;
41
+ const label = instance.findText('Chip.Label').textContent;
42
+ const iconImports = [];
43
+ if (showLeadingIcon && !showAvatar && leadingIconName) {
44
+ iconImports.push(`import { ${leadingIconName} } from '@cdx-ui/icons'`);
45
+ }
46
+ if (showTrailingIcon && trailingIconName) {
47
+ iconImports.push(`import { ${trailingIconName} } from '@cdx-ui/icons'`);
48
+ }
49
+ const avatarImport = showAvatar ? ["import { Avatar } from '@cdx-ui/components'"] : [];
50
+ export default {
51
+ id: 'chip',
52
+ imports: ["import { Chip } from '@cdx-ui/components'", ...avatarImport, ...iconImports],
53
+ example: figma.code`
54
+ <Chip variant="${variant}" size="${size}" color="${color}"${disabledProp}>
55
+ ${showAvatar ? figma.code`<Chip.Avatar>
56
+ <Avatar.Image source={{ uri: '...' }} />
57
+ </Chip.Avatar>` : showLeadingIcon ? figma.code`<Chip.Icon as={${leadingIconSnippet}} slot="leading" />` : null}
58
+ <Chip.Label>${label}</Chip.Label>
59
+ ${showTrailingIcon ? figma.code`<Chip.Icon as={${trailingIconSnippet}} slot="trailing" />` : null}
60
+ </Chip>`
61
+ };
62
+ //# sourceMappingURL=Chip.figma.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["figma","instance","selectedInstance","variant","getEnum","tint","outline","size","default","small","xsmall","color","action","danger","warning","success","info","isDisabled","true","false","undefined","disabledProp","helpers","react","renderProp","showLeadingIcon","getBoolean","showAvatar","showTrailingIcon","leadingIconResult","getInstanceSwap","executeTemplate","trailingIconResult","leadingIconName","metadata","props","componentName","trailingIconName","leadingIconSnippet","example","trailingIconSnippet","label","findText","textContent","iconImports","push","avatarImport","id","imports","code"],"sourceRoot":"../../../src","sources":["figma/Chip.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;AAEvC,MAAMC,OAAO,GAAGF,QAAQ,CAACG,OAAO,CAAC,SAAS,EAAE;EAC1CC,IAAI,EAAE,MAAM;EACZC,OAAO,EAAE;AACX,CAAC,CAAC;AACF,MAAMC,IAAI,GAAGN,QAAQ,CAACG,OAAO,CAAC,MAAM,EAAE;EACpCI,OAAO,EAAE,SAAS;EAClBC,KAAK,EAAE,OAAO;EACdC,MAAM,EAAE;AACV,CAAC,CAAC;AACF,MAAMC,KAAK,GAAGV,QAAQ,CAACG,OAAO,CAAC,OAAO,EAAE;EACtCI,OAAO,EAAE,SAAS;EAClBI,MAAM,EAAE,QAAQ;EAChBC,MAAM,EAAE,QAAQ;EAChBC,OAAO,EAAE,SAAS;EAClBC,OAAO,EAAE,SAAS;EAClBC,IAAI,EAAE;AACR,CAAC,CAAC;AACF,MAAMC,UAAU,GAAGhB,QAAQ,CAACG,OAAO,CAAC,YAAY,EAAE;EAChDc,IAAI,EAAE,IAAI;EACVC,KAAK,EAAEC;AACT,CAAC,CAAC;AACF,MAAMC,YAAY,GAAGrB,KAAK,CAACsB,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,UAAU,EAAEP,UAAU,CAAC;AAE3E,MAAMQ,eAAe,GAAGxB,QAAQ,CAACyB,UAAU,CAAC,oBAAoB,CAAC;AACjE,MAAMC,UAAU,GAAG1B,QAAQ,CAACyB,UAAU,CAAC,cAAc,CAAC;AACtD,MAAME,gBAAgB,GAAG3B,QAAQ,CAACyB,UAAU,CAAC,qBAAqB,CAAC;;AAEnE;AACA,MAAMG,iBAAiB,GACrBJ,eAAe,IAAI,CAACE,UAAU,GAC1B1B,QAAQ,CAAC6B,eAAe,CAAC,kBAAkB,CAAC,EAAEC,eAAe,CAAC,CAAC,GAC/DX,SAAS;AACf,MAAMY,kBAAkB,GAAGJ,gBAAgB,GACvC3B,QAAQ,CAAC6B,eAAe,CAAC,mBAAmB,CAAC,EAAEC,eAAe,CAAC,CAAC,GAChEX,SAAS;AAEb,MAAMa,eAAe,GAAGJ,iBAAiB,EAAEK,QAAQ,EAAEC,KAAK,EAAEC,aAAmC;AAC/F,MAAMC,gBAAgB,GAAGL,kBAAkB,EAAEE,QAAQ,EAAEC,KAAK,EAAEC,aAAmC;AACjG,MAAME,kBAAkB,GAAGL,eAAe,IAAIJ,iBAAiB,EAAEU,OAAO;AACxE,MAAMC,mBAAmB,GAAGH,gBAAgB,IAAIL,kBAAkB,EAAEO,OAAO;AAE3E,MAAME,KAAK,GAAIxC,QAAQ,CAACyC,QAAQ,CAAC,YAAY,CAAC,CAAgCC,WAAW;AAEzF,MAAMC,WAAqB,GAAG,EAAE;AAChC,IAAInB,eAAe,IAAI,CAACE,UAAU,IAAIM,eAAe,EAAE;EACrDW,WAAW,CAACC,IAAI,CAAC,YAAYZ,eAAe,yBAAyB,CAAC;AACxE;AACA,IAAIL,gBAAgB,IAAIS,gBAAgB,EAAE;EACxCO,WAAW,CAACC,IAAI,CAAC,YAAYR,gBAAgB,yBAAyB,CAAC;AACzE;AACA,MAAMS,YAAY,GAAGnB,UAAU,GAAG,CAAC,6CAA6C,CAAC,GAAG,EAAE;AAEtF,eAAe;EACboB,EAAE,EAAE,MAAM;EACVC,OAAO,EAAE,CAAC,2CAA2C,EAAE,GAAGF,YAAY,EAAE,GAAGF,WAAW,CAAC;EACvFL,OAAO,EAAEvC,KAAK,CAACiD,IAAI;AACrB,iBAAiB9C,OAAO,WAAWI,IAAI,YAAYI,KAAK,IAAIU,YAAY;AACxE,IACIM,UAAU,GACN3B,KAAK,CAACiD,IAAI;AAClB;AACA,iBAAiB,GACTxB,eAAe,GACbzB,KAAK,CAACiD,IAAI,kBAAkBX,kBAAkB,qBAAqB,GACnE,IAAI;AACd,gBACgBG,KAAK;AACrB,IAAIb,gBAAgB,GAAG5B,KAAK,CAACiD,IAAI,kBAAkBT,mBAAmB,sBAAsB,GAAG,IAAI;AACnG;AACA,CAAC","ignoreList":[]}
@@ -0,0 +1,51 @@
1
+ "use strict";
2
+
3
+ // url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-CDS-V2--React-Native?node-id=409-3015
4
+ // source=packages/components/src/components/Field/index.tsx
5
+ // component=Field
6
+ import figma from 'figma';
7
+ const instance = figma.selectedInstance;
8
+ const showLabel = instance.getBoolean('Show Label?');
9
+ const showHelperText = instance.getBoolean('Show Helper Text?');
10
+ const showErrorText = instance.getBoolean('Show Error Text?');
11
+
12
+ // Enum-as-boolean: isInvalid / isDisabled are VARIANT properties in Figma (string values "true"/"false").
13
+ // Map "false" to undefined so renderProp omits them from the snippet.
14
+ const isInvalid = instance.getEnum('isInvalid', {
15
+ true: true,
16
+ false: undefined
17
+ });
18
+ const isDisabled = instance.getEnum('isDisabled', {
19
+ true: true,
20
+ false: undefined
21
+ });
22
+ const isInvalidProp = figma.helpers.react.renderProp('isInvalid', isInvalid);
23
+ const isDisabledProp = figma.helpers.react.renderProp('isDisabled', isDisabled);
24
+ const labelText = instance.findText('{Label}', {
25
+ traverseInstances: true
26
+ }).textContent;
27
+ const helperText = instance.findText('{HelperText}', {
28
+ traverseInstances: true
29
+ }).textContent;
30
+ const errorText = instance.findText('{ErrorText}', {
31
+ traverseInstances: true
32
+ }).textContent;
33
+ const input = instance.findInstance('Input');
34
+ let inputSnippet;
35
+ if (input?.type === 'INSTANCE') {
36
+ inputSnippet = input.executeTemplate().example;
37
+ }
38
+ export default {
39
+ id: 'field-input',
40
+ // Only import Field here; the nested Input template provides its own "import { Input } …" line.
41
+ // Code Connect merges the two separate import statements from the same package automatically.
42
+ imports: ["import { Field } from '@cdx-ui/components'"],
43
+ example: figma.code`
44
+ <Field${isInvalidProp}${isDisabledProp}>
45
+ ${showLabel ? figma.code`<Field.Label>${labelText}</Field.Label>` : null}
46
+ ${inputSnippet}
47
+ ${!isInvalid && showHelperText ? figma.code`<Field.Helper>${helperText}</Field.Helper>` : null}
48
+ ${isInvalid && showErrorText ? figma.code`<Field.Error>${errorText}</Field.Error>` : null}
49
+ </Field>`
50
+ };
51
+ //# sourceMappingURL=Field.Input.figma.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["figma","instance","selectedInstance","showLabel","getBoolean","showHelperText","showErrorText","isInvalid","getEnum","true","false","undefined","isDisabled","isInvalidProp","helpers","react","renderProp","isDisabledProp","labelText","findText","traverseInstances","textContent","helperText","errorText","input","findInstance","inputSnippet","type","executeTemplate","example","id","imports","code"],"sourceRoot":"../../../src","sources":["figma/Field.Input.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;AAEvC,MAAMC,SAAS,GAAGF,QAAQ,CAACG,UAAU,CAAC,aAAa,CAAC;AACpD,MAAMC,cAAc,GAAGJ,QAAQ,CAACG,UAAU,CAAC,mBAAmB,CAAC;AAC/D,MAAME,aAAa,GAAGL,QAAQ,CAACG,UAAU,CAAC,kBAAkB,CAAC;;AAE7D;AACA;AACA,MAAMG,SAAS,GAAGN,QAAQ,CAACO,OAAO,CAAC,WAAW,EAAE;EAC9CC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAEC;AACT,CAAC,CAAC;AACF,MAAMC,UAAU,GAAGX,QAAQ,CAACO,OAAO,CAAC,YAAY,EAAE;EAChDC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAEC;AACT,CAAC,CAAC;AAEF,MAAME,aAAa,GAAGb,KAAK,CAACc,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,WAAW,EAAET,SAAS,CAAC;AAC5E,MAAMU,cAAc,GAAGjB,KAAK,CAACc,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,YAAY,EAAEJ,UAAU,CAAC;AAE/E,MAAMM,SAAS,GACbjB,QAAQ,CAACkB,QAAQ,CAAC,SAAS,EAAE;EAC3BC,iBAAiB,EAAE;AACrB,CAAC,CAAC,CACFC,WAAW;AACb,MAAMC,UAAU,GACdrB,QAAQ,CAACkB,QAAQ,CAAC,cAAc,EAAE;EAChCC,iBAAiB,EAAE;AACrB,CAAC,CAAC,CACFC,WAAW;AACb,MAAME,SAAS,GACbtB,QAAQ,CAACkB,QAAQ,CAAC,aAAa,EAAE;EAC/BC,iBAAiB,EAAE;AACrB,CAAC,CAAC,CACFC,WAAW;AAEb,MAAMG,KAAK,GAAGvB,QAAQ,CAACwB,YAAY,CAAC,OAAO,CAAC;AAC5C,IAAIC,YAAyD;AAC7D,IAAIF,KAAK,EAAEG,IAAI,KAAK,UAAU,EAAE;EAC9BD,YAAY,GAAGF,KAAK,CAACI,eAAe,CAAC,CAAC,CAACC,OAAO;AAChD;AAEA,eAAe;EACbC,EAAE,EAAE,aAAa;EACjB;EACA;EACAC,OAAO,EAAE,CAAC,4CAA4C,CAAC;EACvDF,OAAO,EAAE7B,KAAK,CAACgC,IAAI;AACrB,QAAQnB,aAAa,GAAGI,cAAc;AACtC,IAAId,SAAS,GAAGH,KAAK,CAACgC,IAAI,gBAAgBd,SAAS,gBAAgB,GAAG,IAAI;AAC1E,IAAIQ,YAAY;AAChB,IAAI,CAACnB,SAAS,IAAIF,cAAc,GAAGL,KAAK,CAACgC,IAAI,iBAAiBV,UAAU,iBAAiB,GAAG,IAAI;AAChG,IAAIf,SAAS,IAAID,aAAa,GAAGN,KAAK,CAACgC,IAAI,gBAAgBT,SAAS,gBAAgB,GAAG,IAAI;AAC3F;AACA,CAAC","ignoreList":[]}
@@ -0,0 +1,51 @@
1
+ "use strict";
2
+
3
+ // url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-CDS-V2--React-Native?node-id=427-4179
4
+ // source=packages/components/src/components/Field/index.tsx
5
+ // component=Field
6
+ import figma from 'figma';
7
+ const instance = figma.selectedInstance;
8
+ const showLabel = instance.getBoolean('Show Label?');
9
+ const showHelperText = instance.getBoolean('Show Helper Text?');
10
+ const showErrorText = instance.getBoolean('Show Error Text?');
11
+
12
+ // Enum-as-boolean: isInvalid / isDisabled are VARIANT properties in Figma (string values "true"/"false").
13
+ // Map "false" to undefined so renderProp omits them from the snippet.
14
+ const isInvalid = instance.getEnum('isInvalid', {
15
+ true: true,
16
+ false: undefined
17
+ });
18
+ const isDisabled = instance.getEnum('isDisabled', {
19
+ true: true,
20
+ false: undefined
21
+ });
22
+ const isInvalidProp = figma.helpers.react.renderProp('isInvalid', isInvalid);
23
+ const isDisabledProp = figma.helpers.react.renderProp('isDisabled', isDisabled);
24
+ const labelText = instance.findText('{Label}', {
25
+ traverseInstances: true
26
+ }).textContent;
27
+ const helperText = instance.findText('{HelperText}', {
28
+ traverseInstances: true
29
+ }).textContent;
30
+ const errorText = instance.findText('{ErrorText}', {
31
+ traverseInstances: true
32
+ }).textContent;
33
+ const select = instance.findInstance('Select');
34
+ let selectSnippet;
35
+ if (select?.type === 'INSTANCE') {
36
+ selectSnippet = select.executeTemplate().example;
37
+ }
38
+ export default {
39
+ id: 'field-select',
40
+ // Only import Field here; the nested Select template provides its own "import { Select } …" line.
41
+ // Code Connect merges the two separate import statements from the same package automatically.
42
+ imports: ["import { Field } from '@cdx-ui/components'"],
43
+ example: figma.code`
44
+ <Field${isInvalidProp}${isDisabledProp}>
45
+ ${showLabel ? figma.code`<Field.Label>${labelText}</Field.Label>` : null}
46
+ ${selectSnippet}
47
+ ${!isInvalid && showHelperText ? figma.code`<Field.Helper>${helperText}</Field.Helper>` : null}
48
+ ${isInvalid && showErrorText ? figma.code`<Field.Error>${errorText}</Field.Error>` : null}
49
+ </Field>`
50
+ };
51
+ //# sourceMappingURL=Field.Select.figma.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["figma","instance","selectedInstance","showLabel","getBoolean","showHelperText","showErrorText","isInvalid","getEnum","true","false","undefined","isDisabled","isInvalidProp","helpers","react","renderProp","isDisabledProp","labelText","findText","traverseInstances","textContent","helperText","errorText","select","findInstance","selectSnippet","type","executeTemplate","example","id","imports","code"],"sourceRoot":"../../../src","sources":["figma/Field.Select.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;AAEvC,MAAMC,SAAS,GAAGF,QAAQ,CAACG,UAAU,CAAC,aAAa,CAAC;AACpD,MAAMC,cAAc,GAAGJ,QAAQ,CAACG,UAAU,CAAC,mBAAmB,CAAC;AAC/D,MAAME,aAAa,GAAGL,QAAQ,CAACG,UAAU,CAAC,kBAAkB,CAAC;;AAE7D;AACA;AACA,MAAMG,SAAS,GAAGN,QAAQ,CAACO,OAAO,CAAC,WAAW,EAAE;EAC9CC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAEC;AACT,CAAC,CAAC;AACF,MAAMC,UAAU,GAAGX,QAAQ,CAACO,OAAO,CAAC,YAAY,EAAE;EAChDC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAEC;AACT,CAAC,CAAC;AAEF,MAAME,aAAa,GAAGb,KAAK,CAACc,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,WAAW,EAAET,SAAS,CAAC;AAC5E,MAAMU,cAAc,GAAGjB,KAAK,CAACc,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,YAAY,EAAEJ,UAAU,CAAC;AAE/E,MAAMM,SAAS,GACbjB,QAAQ,CAACkB,QAAQ,CAAC,SAAS,EAAE;EAC3BC,iBAAiB,EAAE;AACrB,CAAC,CAAC,CACFC,WAAW;AACb,MAAMC,UAAU,GACdrB,QAAQ,CAACkB,QAAQ,CAAC,cAAc,EAAE;EAChCC,iBAAiB,EAAE;AACrB,CAAC,CAAC,CACFC,WAAW;AACb,MAAME,SAAS,GACbtB,QAAQ,CAACkB,QAAQ,CAAC,aAAa,EAAE;EAC/BC,iBAAiB,EAAE;AACrB,CAAC,CAAC,CACFC,WAAW;AAEb,MAAMG,MAAM,GAAGvB,QAAQ,CAACwB,YAAY,CAAC,QAAQ,CAAC;AAC9C,IAAIC,aAA0D;AAC9D,IAAIF,MAAM,EAAEG,IAAI,KAAK,UAAU,EAAE;EAC/BD,aAAa,GAAGF,MAAM,CAACI,eAAe,CAAC,CAAC,CAACC,OAAO;AAClD;AAEA,eAAe;EACbC,EAAE,EAAE,cAAc;EAClB;EACA;EACAC,OAAO,EAAE,CAAC,4CAA4C,CAAC;EACvDF,OAAO,EAAE7B,KAAK,CAACgC,IAAI;AACrB,QAAQnB,aAAa,GAAGI,cAAc;AACtC,IAAId,SAAS,GAAGH,KAAK,CAACgC,IAAI,gBAAgBd,SAAS,gBAAgB,GAAG,IAAI;AAC1E,IAAIQ,aAAa;AACjB,IAAI,CAACnB,SAAS,IAAIF,cAAc,GAAGL,KAAK,CAACgC,IAAI,iBAAiBV,UAAU,iBAAiB,GAAG,IAAI;AAChG,IAAIf,SAAS,IAAID,aAAa,GAAGN,KAAK,CAACgC,IAAI,gBAAgBT,SAAS,gBAAgB,GAAG,IAAI;AAC3F;AACA,CAAC","ignoreList":[]}
@@ -0,0 +1,24 @@
1
+ "use strict";
2
+
3
+ // url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=399-3385
4
+ // source=packages/components/src/components/Heading/index.tsx
5
+ // component=Heading
6
+ // Use the same branch URL as Button: Code Connect is scoped per file key; main vs branch are separate targets.
7
+ import figma from 'figma';
8
+ const instance = figma.selectedInstance;
9
+
10
+ // Figma size values are identical to code size values — no renaming needed.
11
+ const size = instance.getEnum('size', {
12
+ xl: 'xl',
13
+ lg: 'lg',
14
+ md: 'md',
15
+ sm: 'sm',
16
+ xs: 'xs'
17
+ });
18
+ const text = instance.findText('{Heading}').textContent;
19
+ export default {
20
+ id: 'heading',
21
+ imports: ["import { Heading } from '@cdx-ui/components'"],
22
+ example: figma.code`<Heading size="${size}">${text}</Heading>`
23
+ };
24
+ //# sourceMappingURL=Heading.figma.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["figma","instance","selectedInstance","size","getEnum","xl","lg","md","sm","xs","text","findText","textContent","id","imports","example","code"],"sourceRoot":"../../../src","sources":["figma/Heading.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;;AAEvC;AACA,MAAMC,IAAI,GAAGF,QAAQ,CAACG,OAAO,CAAC,MAAM,EAAE;EACpCC,EAAE,EAAE,IAAI;EACRC,EAAE,EAAE,IAAI;EACRC,EAAE,EAAE,IAAI;EACRC,EAAE,EAAE,IAAI;EACRC,EAAE,EAAE;AACN,CAAC,CAAC;AAEF,MAAMC,IAAI,GAAIT,QAAQ,CAACU,QAAQ,CAAC,WAAW,CAAC,CAAgCC,WAAW;AAEvF,eAAe;EACbC,EAAE,EAAE,SAAS;EACbC,OAAO,EAAE,CAAC,8CAA8C,CAAC;EACzDC,OAAO,EAAEf,KAAK,CAACgB,IAAI,kBAAkBb,IAAI,KAAKO,IAAI;AACpD,CAAC","ignoreList":[]}
@@ -0,0 +1,14 @@
1
+ "use strict";
2
+
3
+ // url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=397-33
4
+ // source=packages/components/src/components/Icon/index.tsx
5
+ // component=Icon
6
+ import figma from 'figma';
7
+ const instance = figma.selectedInstance;
8
+ const iconSnippet = instance.getInstanceSwap('as')?.executeTemplate().example;
9
+ export default {
10
+ example: figma.code`${iconSnippet}`,
11
+ imports: ["import { Icon } from '@cdx-ui/components'"],
12
+ id: 'icon'
13
+ };
14
+ //# sourceMappingURL=Icon.figma.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["figma","instance","selectedInstance","iconSnippet","getInstanceSwap","executeTemplate","example","code","imports","id"],"sourceRoot":"../../../src","sources":["figma/Icon.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;AAEvC,MAAMC,WAAW,GAAGF,QAAQ,CAACG,eAAe,CAAC,IAAI,CAAC,EAAEC,eAAe,CAAC,CAAC,CAACC,OAAO;AAE7E,eAAe;EACbA,OAAO,EAAEN,KAAK,CAACO,IAAI,GAAGJ,WAAW,EAAE;EACnCK,OAAO,EAAE,CAAC,2CAA2C,CAAC;EACtDC,EAAE,EAAE;AACN,CAAC","ignoreList":[]}
@@ -0,0 +1,41 @@
1
+ "use strict";
2
+
3
+ // url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=427-5235
4
+ // source=packages/components/src/components/IconButton/index.tsx
5
+ // component=IconButton
6
+ import figma from 'figma';
7
+ const instance = figma.selectedInstance;
8
+ const variant = instance.getEnum('variant', {
9
+ solid: 'solid',
10
+ tint: 'tint',
11
+ ghost: 'ghost'
12
+ });
13
+ const color = instance.getEnum('color', {
14
+ neutral: 'neutral',
15
+ action: 'action',
16
+ danger: 'danger'
17
+ });
18
+ const size = instance.getEnum('size', {
19
+ default: 'default',
20
+ small: 'small'
21
+ });
22
+
23
+ // Enum-as-boolean: isDisabled is a VARIANT property in Figma ("true"/"false").
24
+ const isDisabled = instance.getEnum('isDisabled', {
25
+ true: true,
26
+ false: undefined
27
+ });
28
+ const isDisabledProp = figma.helpers.react.renderProp('isDisabled', isDisabled);
29
+
30
+ // icon: INSTANCE_SWAP → IconButton `as` (CdxIcon). Prefer metadata.props.componentName from icon Code Connect.
31
+ const iconResult = instance.getInstanceSwap('icon')?.executeTemplate();
32
+ const iconName = iconResult?.metadata?.props?.componentName;
33
+ const iconSnippet = iconName ?? iconResult?.example;
34
+ const iconImports = iconName ? [`import { ${iconName} } from '@cdx-ui/icons'`] : [];
35
+ export default {
36
+ id: 'icon-button',
37
+ imports: ["import { IconButton } from '@cdx-ui/components'", ...iconImports],
38
+ example: figma.code`
39
+ <IconButton as={${iconSnippet}} variant="${variant}" color="${color}" size="${size}"${isDisabledProp} />`
40
+ };
41
+ //# sourceMappingURL=IconButton.figma.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["figma","instance","selectedInstance","variant","getEnum","solid","tint","ghost","color","neutral","action","danger","size","default","small","isDisabled","true","false","undefined","isDisabledProp","helpers","react","renderProp","iconResult","getInstanceSwap","executeTemplate","iconName","metadata","props","componentName","iconSnippet","example","iconImports","id","imports","code"],"sourceRoot":"../../../src","sources":["figma/IconButton.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;AAEvC,MAAMC,OAAO,GAAGF,QAAQ,CAACG,OAAO,CAAC,SAAS,EAAE;EAC1CC,KAAK,EAAE,OAAO;EACdC,IAAI,EAAE,MAAM;EACZC,KAAK,EAAE;AACT,CAAC,CAAC;AACF,MAAMC,KAAK,GAAGP,QAAQ,CAACG,OAAO,CAAC,OAAO,EAAE;EACtCK,OAAO,EAAE,SAAS;EAClBC,MAAM,EAAE,QAAQ;EAChBC,MAAM,EAAE;AACV,CAAC,CAAC;AACF,MAAMC,IAAI,GAAGX,QAAQ,CAACG,OAAO,CAAC,MAAM,EAAE;EACpCS,OAAO,EAAE,SAAS;EAClBC,KAAK,EAAE;AACT,CAAC,CAAC;;AAEF;AACA,MAAMC,UAAU,GAAGd,QAAQ,CAACG,OAAO,CAAC,YAAY,EAAE;EAChDY,IAAI,EAAE,IAAI;EACVC,KAAK,EAAEC;AACT,CAAC,CAAC;AACF,MAAMC,cAAc,GAAGnB,KAAK,CAACoB,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,YAAY,EAAEP,UAAU,CAAC;;AAE/E;AACA,MAAMQ,UAAU,GAAGtB,QAAQ,CAACuB,eAAe,CAAC,MAAM,CAAC,EAAEC,eAAe,CAAC,CAAC;AACtE,MAAMC,QAAQ,GAAGH,UAAU,EAAEI,QAAQ,EAAEC,KAAK,EAAEC,aAAmC;AACjF,MAAMC,WAAW,GAAGJ,QAAQ,IAAIH,UAAU,EAAEQ,OAAO;AAEnD,MAAMC,WAAW,GAAGN,QAAQ,GAAG,CAAC,YAAYA,QAAQ,yBAAyB,CAAC,GAAG,EAAE;AAEnF,eAAe;EACbO,EAAE,EAAE,aAAa;EACjBC,OAAO,EAAE,CAAC,iDAAiD,EAAE,GAAGF,WAAW,CAAC;EAC5ED,OAAO,EAAE/B,KAAK,CAACmC,IAAI;AACrB,kBAAkBL,WAAW,cAAc3B,OAAO,YAAYK,KAAK,WAAWI,IAAI,IAAIO,cAAc;AACpG,CAAC","ignoreList":[]}
@@ -0,0 +1,46 @@
1
+ "use strict";
2
+
3
+ // url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-CDS-V2--React-Native?node-id=159-22
4
+ // source=packages/components/src/components/Input/index.tsx
5
+ // component=Input
6
+ import figma from 'figma';
7
+ const instance = figma.selectedInstance;
8
+ const variant = instance.getEnum('variant', {
9
+ outlined: 'outline'
10
+ });
11
+ const size = instance.getEnum('size', {
12
+ default: 'default'
13
+ });
14
+ const isInvalid = instance.getEnum('isInvalid', {
15
+ true: true,
16
+ false: undefined
17
+ });
18
+ const isDisabled = instance.getEnum('isDisabled', {
19
+ true: true,
20
+ false: undefined
21
+ });
22
+ const isInvalidProp = figma.helpers.react.renderProp('isInvalid', isInvalid);
23
+ const isDisabledProp = figma.helpers.react.renderProp('isDisabled', isDisabled);
24
+ const showValue = instance.getEnum('Show Value?', {
25
+ true: true,
26
+ false: false
27
+ });
28
+ const showPlaceholder = instance.getEnum('Show Placeholder?', {
29
+ true: true,
30
+ false: false
31
+ });
32
+ const valueText = instance.findText('{value}', {
33
+ traverseInstances: true
34
+ }).textContent;
35
+ const placeholder = instance.getString('placeholder');
36
+ const defaultValueProp = figma.helpers.react.renderProp('defaultValue', showValue ? valueText : undefined);
37
+ const placeholderProp = figma.helpers.react.renderProp('placeholder', showPlaceholder ? placeholder : undefined);
38
+ export default {
39
+ id: 'input',
40
+ imports: ["import { Input } from '@cdx-ui/components'"],
41
+ example: figma.code`
42
+ <Input variant="${variant}" size="${size}"${isInvalidProp}${isDisabledProp}>
43
+ <Input.Field${defaultValueProp}${placeholderProp} />
44
+ </Input>`
45
+ };
46
+ //# sourceMappingURL=Input.figma.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["figma","instance","selectedInstance","variant","getEnum","outlined","size","default","isInvalid","true","false","undefined","isDisabled","isInvalidProp","helpers","react","renderProp","isDisabledProp","showValue","showPlaceholder","valueText","findText","traverseInstances","textContent","placeholder","getString","defaultValueProp","placeholderProp","id","imports","example","code"],"sourceRoot":"../../../src","sources":["figma/Input.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;AAEvC,MAAMC,OAAO,GAAGF,QAAQ,CAACG,OAAO,CAAC,SAAS,EAAE;EAC1CC,QAAQ,EAAE;AACZ,CAAC,CAAC;AACF,MAAMC,IAAI,GAAGL,QAAQ,CAACG,OAAO,CAAC,MAAM,EAAE;EACpCG,OAAO,EAAE;AACX,CAAC,CAAC;AAEF,MAAMC,SAAS,GAAGP,QAAQ,CAACG,OAAO,CAAC,WAAW,EAAE;EAC9CK,IAAI,EAAE,IAAI;EACVC,KAAK,EAAEC;AACT,CAAC,CAAC;AACF,MAAMC,UAAU,GAAGX,QAAQ,CAACG,OAAO,CAAC,YAAY,EAAE;EAChDK,IAAI,EAAE,IAAI;EACVC,KAAK,EAAEC;AACT,CAAC,CAAC;AAEF,MAAME,aAAa,GAAGb,KAAK,CAACc,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,WAAW,EAAER,SAAS,CAAC;AAC5E,MAAMS,cAAc,GAAGjB,KAAK,CAACc,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,YAAY,EAAEJ,UAAU,CAAC;AAE/E,MAAMM,SAAS,GAAGjB,QAAQ,CAACG,OAAO,CAAC,aAAa,EAAE;EAChDK,IAAI,EAAE,IAAI;EACVC,KAAK,EAAE;AACT,CAAC,CAAC;AACF,MAAMS,eAAe,GAAGlB,QAAQ,CAACG,OAAO,CAAC,mBAAmB,EAAE;EAC5DK,IAAI,EAAE,IAAI;EACVC,KAAK,EAAE;AACT,CAAC,CAAC;AAEF,MAAMU,SAAS,GACbnB,QAAQ,CAACoB,QAAQ,CAAC,SAAS,EAAE;EAC3BC,iBAAiB,EAAE;AACrB,CAAC,CAAC,CACFC,WAAW;AACb,MAAMC,WAAW,GAAGvB,QAAQ,CAACwB,SAAS,CAAC,aAAa,CAAC;AAErD,MAAMC,gBAAgB,GAAG1B,KAAK,CAACc,OAAO,CAACC,KAAK,CAACC,UAAU,CACrD,cAAc,EACdE,SAAS,GAAGE,SAAS,GAAGT,SAC1B,CAAC;AACD,MAAMgB,eAAe,GAAG3B,KAAK,CAACc,OAAO,CAACC,KAAK,CAACC,UAAU,CACpD,aAAa,EACbG,eAAe,GAAGK,WAAW,GAAGb,SAClC,CAAC;AAED,eAAe;EACbiB,EAAE,EAAE,OAAO;EACXC,OAAO,EAAE,CAAC,4CAA4C,CAAC;EACvDC,OAAO,EAAE9B,KAAK,CAAC+B,IAAI;AACrB,kBAAkB5B,OAAO,WAAWG,IAAI,IAAIO,aAAa,GAAGI,cAAc;AAC1E,gBAAgBS,gBAAgB,GAAGC,eAAe;AAClD;AACA,CAAC","ignoreList":[]}
@@ -0,0 +1,33 @@
1
+ "use strict";
2
+
3
+ // url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=449-449
4
+ // source=packages/components/src/components/ProgressSegmented/index.tsx
5
+ // component=ProgressSegmented
6
+ import figma from 'figma';
7
+ const instance = figma.selectedInstance;
8
+ const segmentsCount = instance.getEnum('segments', {
9
+ '2': 2,
10
+ '3': 3,
11
+ '4': 4,
12
+ '5': 5,
13
+ '6': 6
14
+ });
15
+
16
+ // Figma `step=complete` maps to `isStepComplete` on the last step (all segments filled).
17
+ const stepRaw = instance.getEnum('step', {
18
+ '1': '1',
19
+ '2': '2',
20
+ '3': '3',
21
+ '4': '4',
22
+ '5': '5',
23
+ '6': '6',
24
+ complete: 'complete'
25
+ });
26
+ const isStepComplete = stepRaw === 'complete';
27
+ const step = isStepComplete ? segmentsCount : Number(stepRaw);
28
+ export default {
29
+ id: 'progress-segmented',
30
+ imports: ["import { ProgressSegmented } from '@cdx-ui/components'"],
31
+ example: figma.code`<ProgressSegmented segments={${segmentsCount}} step={${step}}${isStepComplete ? figma.code` isStepComplete` : figma.code``} />`
32
+ };
33
+ //# sourceMappingURL=ProgressSegmented.figma.js.map