@cdx-ui/components 0.0.1-beta.3 → 0.0.1-beta.30

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 (242) hide show
  1. package/README.md +18 -11
  2. package/lib/commonjs/components/Button/styles.js +2 -2
  3. package/lib/commonjs/components/Button/styles.js.map +1 -1
  4. package/lib/commonjs/components/Card/index.js +22 -4
  5. package/lib/commonjs/components/Card/index.js.map +1 -1
  6. package/lib/commonjs/components/Card/styles.js +27 -5
  7. package/lib/commonjs/components/Card/styles.js.map +1 -1
  8. package/lib/commonjs/components/Checkbox/index.js +5 -29
  9. package/lib/commonjs/components/Checkbox/index.js.map +1 -1
  10. package/lib/commonjs/components/Checkbox/styles.js +39 -47
  11. package/lib/commonjs/components/Checkbox/styles.js.map +1 -1
  12. package/lib/commonjs/components/Field/index.js +8 -2
  13. package/lib/commonjs/components/Field/index.js.map +1 -1
  14. package/lib/commonjs/components/Field/styles.js +4 -4
  15. package/lib/commonjs/components/Field/styles.js.map +1 -1
  16. package/lib/commonjs/components/Heading/styles.js +1 -1
  17. package/lib/commonjs/components/Heading/styles.js.map +1 -1
  18. package/lib/commonjs/components/Icon/index.js +1 -2
  19. package/lib/commonjs/components/Icon/index.js.map +1 -1
  20. package/lib/commonjs/components/IconButton/index.js +6 -1
  21. package/lib/commonjs/components/IconButton/index.js.map +1 -1
  22. package/lib/commonjs/components/IconButton/styles.js +135 -10
  23. package/lib/commonjs/components/IconButton/styles.js.map +1 -1
  24. package/lib/commonjs/components/Input/styles.js +7 -6
  25. package/lib/commonjs/components/Input/styles.js.map +1 -1
  26. package/lib/commonjs/components/ListItem/index.js +283 -0
  27. package/lib/commonjs/components/ListItem/index.js.map +1 -0
  28. package/lib/commonjs/components/ListItem/styles.js +130 -0
  29. package/lib/commonjs/components/ListItem/styles.js.map +1 -0
  30. package/lib/commonjs/components/ProgressSegmented/index.js +22 -10
  31. package/lib/commonjs/components/ProgressSegmented/index.js.map +1 -1
  32. package/lib/commonjs/components/Radio/index.js +167 -0
  33. package/lib/commonjs/components/Radio/index.js.map +1 -0
  34. package/lib/commonjs/components/Radio/styles.js +31 -0
  35. package/lib/commonjs/components/Radio/styles.js.map +1 -0
  36. package/lib/commonjs/components/Text/styles.js +2 -2
  37. package/lib/commonjs/components/Text/styles.js.map +1 -1
  38. package/lib/commonjs/components/Tile/index.js +251 -0
  39. package/lib/commonjs/components/Tile/index.js.map +1 -0
  40. package/lib/commonjs/components/Tile/styles.js +52 -0
  41. package/lib/commonjs/components/Tile/styles.js.map +1 -0
  42. package/lib/commonjs/components/index.js +36 -0
  43. package/lib/commonjs/components/index.js.map +1 -1
  44. package/lib/commonjs/figma/Button.figma.js +70 -0
  45. package/lib/commonjs/figma/Button.figma.js.map +1 -0
  46. package/lib/commonjs/figma/Card.Header.figma.js +28 -0
  47. package/lib/commonjs/figma/Card.Header.figma.js.map +1 -0
  48. package/lib/commonjs/figma/Card.figma.js +42 -0
  49. package/lib/commonjs/figma/Card.figma.js.map +1 -0
  50. package/lib/commonjs/figma/Checkbox.figma.js +55 -0
  51. package/lib/commonjs/figma/Checkbox.figma.js.map +1 -0
  52. package/lib/commonjs/figma/Field.Input.figma.js +57 -0
  53. package/lib/commonjs/figma/Field.Input.figma.js.map +1 -0
  54. package/lib/commonjs/figma/Field.Select.figma.js +57 -0
  55. package/lib/commonjs/figma/Field.Select.figma.js.map +1 -0
  56. package/lib/commonjs/figma/Heading.figma.js +30 -0
  57. package/lib/commonjs/figma/Heading.figma.js.map +1 -0
  58. package/lib/commonjs/figma/Icon.figma.js +20 -0
  59. package/lib/commonjs/figma/Icon.figma.js.map +1 -0
  60. package/lib/commonjs/figma/IconButton.figma.js +47 -0
  61. package/lib/commonjs/figma/IconButton.figma.js.map +1 -0
  62. package/lib/commonjs/figma/Input.figma.js +52 -0
  63. package/lib/commonjs/figma/Input.figma.js.map +1 -0
  64. package/lib/commonjs/figma/ProgressSegmented.figma.js +39 -0
  65. package/lib/commonjs/figma/ProgressSegmented.figma.js.map +1 -0
  66. package/lib/commonjs/figma/Radio.figma.js +38 -0
  67. package/lib/commonjs/figma/Radio.figma.js.map +1 -0
  68. package/lib/commonjs/figma/Select.figma.js +53 -0
  69. package/lib/commonjs/figma/Select.figma.js.map +1 -0
  70. package/lib/commonjs/figma/Text.figma.js +29 -0
  71. package/lib/commonjs/figma/Text.figma.js.map +1 -0
  72. package/lib/commonjs/figma/icons.figma.batch.js +27 -0
  73. package/lib/commonjs/figma/icons.figma.batch.js.map +1 -0
  74. package/lib/commonjs/figma/icons.figma.batch.json +17705 -0
  75. package/lib/commonjs/styles/primitives.js +36 -2
  76. package/lib/commonjs/styles/primitives.js.map +1 -1
  77. package/lib/module/components/Button/styles.js +2 -2
  78. package/lib/module/components/Button/styles.js.map +1 -1
  79. package/lib/module/components/Card/index.js +23 -4
  80. package/lib/module/components/Card/index.js.map +1 -1
  81. package/lib/module/components/Card/styles.js +27 -5
  82. package/lib/module/components/Card/styles.js.map +1 -1
  83. package/lib/module/components/Checkbox/index.js +6 -30
  84. package/lib/module/components/Checkbox/index.js.map +1 -1
  85. package/lib/module/components/Checkbox/styles.js +40 -48
  86. package/lib/module/components/Checkbox/styles.js.map +1 -1
  87. package/lib/module/components/Field/index.js +9 -3
  88. package/lib/module/components/Field/index.js.map +1 -1
  89. package/lib/module/components/Field/styles.js +4 -4
  90. package/lib/module/components/Field/styles.js.map +1 -1
  91. package/lib/module/components/Heading/styles.js +1 -1
  92. package/lib/module/components/Heading/styles.js.map +1 -1
  93. package/lib/module/components/Icon/index.js +1 -2
  94. package/lib/module/components/Icon/index.js.map +1 -1
  95. package/lib/module/components/IconButton/index.js +6 -1
  96. package/lib/module/components/IconButton/index.js.map +1 -1
  97. package/lib/module/components/IconButton/styles.js +135 -10
  98. package/lib/module/components/IconButton/styles.js.map +1 -1
  99. package/lib/module/components/Input/styles.js +7 -6
  100. package/lib/module/components/Input/styles.js.map +1 -1
  101. package/lib/module/components/ListItem/index.js +226 -0
  102. package/lib/module/components/ListItem/index.js.map +1 -0
  103. package/lib/module/components/ListItem/styles.js +127 -0
  104. package/lib/module/components/ListItem/styles.js.map +1 -0
  105. package/lib/module/components/ProgressSegmented/index.js +23 -11
  106. package/lib/module/components/ProgressSegmented/index.js.map +1 -1
  107. package/lib/module/components/Radio/index.js +164 -0
  108. package/lib/module/components/Radio/index.js.map +1 -0
  109. package/lib/module/components/Radio/styles.js +27 -0
  110. package/lib/module/components/Radio/styles.js.map +1 -0
  111. package/lib/module/components/Text/styles.js +2 -2
  112. package/lib/module/components/Text/styles.js.map +1 -1
  113. package/lib/module/components/Tile/index.js +243 -0
  114. package/lib/module/components/Tile/index.js.map +1 -0
  115. package/lib/module/components/Tile/styles.js +48 -0
  116. package/lib/module/components/Tile/styles.js.map +1 -0
  117. package/lib/module/components/index.js +3 -0
  118. package/lib/module/components/index.js.map +1 -1
  119. package/lib/module/figma/Button.figma.js +64 -0
  120. package/lib/module/figma/Button.figma.js.map +1 -0
  121. package/lib/module/figma/Card.Header.figma.js +22 -0
  122. package/lib/module/figma/Card.Header.figma.js.map +1 -0
  123. package/lib/module/figma/Card.figma.js +36 -0
  124. package/lib/module/figma/Card.figma.js.map +1 -0
  125. package/lib/module/figma/Checkbox.figma.js +49 -0
  126. package/lib/module/figma/Checkbox.figma.js.map +1 -0
  127. package/lib/module/figma/Field.Input.figma.js +51 -0
  128. package/lib/module/figma/Field.Input.figma.js.map +1 -0
  129. package/lib/module/figma/Field.Select.figma.js +51 -0
  130. package/lib/module/figma/Field.Select.figma.js.map +1 -0
  131. package/lib/module/figma/Heading.figma.js +24 -0
  132. package/lib/module/figma/Heading.figma.js.map +1 -0
  133. package/lib/module/figma/Icon.figma.js +14 -0
  134. package/lib/module/figma/Icon.figma.js.map +1 -0
  135. package/lib/module/figma/IconButton.figma.js +41 -0
  136. package/lib/module/figma/IconButton.figma.js.map +1 -0
  137. package/lib/module/figma/Input.figma.js +46 -0
  138. package/lib/module/figma/Input.figma.js.map +1 -0
  139. package/lib/module/figma/ProgressSegmented.figma.js +33 -0
  140. package/lib/module/figma/ProgressSegmented.figma.js.map +1 -0
  141. package/lib/module/figma/Radio.figma.js +32 -0
  142. package/lib/module/figma/Radio.figma.js.map +1 -0
  143. package/lib/module/figma/Select.figma.js +47 -0
  144. package/lib/module/figma/Select.figma.js.map +1 -0
  145. package/lib/module/figma/Text.figma.js +23 -0
  146. package/lib/module/figma/Text.figma.js.map +1 -0
  147. package/lib/module/figma/icons.figma.batch.js +22 -0
  148. package/lib/module/figma/icons.figma.batch.js.map +1 -0
  149. package/lib/module/figma/icons.figma.batch.json +17705 -0
  150. package/lib/module/styles/primitives.js +36 -2
  151. package/lib/module/styles/primitives.js.map +1 -1
  152. package/lib/typescript/components/Card/index.d.ts +4 -3
  153. package/lib/typescript/components/Card/index.d.ts.map +1 -1
  154. package/lib/typescript/components/Card/styles.d.ts +13 -3
  155. package/lib/typescript/components/Card/styles.d.ts.map +1 -1
  156. package/lib/typescript/components/Checkbox/index.d.ts +1 -2
  157. package/lib/typescript/components/Checkbox/index.d.ts.map +1 -1
  158. package/lib/typescript/components/Checkbox/styles.d.ts +4 -14
  159. package/lib/typescript/components/Checkbox/styles.d.ts.map +1 -1
  160. package/lib/typescript/components/Field/FieldLabel.web.d.ts +2 -2
  161. package/lib/typescript/components/Field/FieldLabel.web.d.ts.map +1 -1
  162. package/lib/typescript/components/Field/index.d.ts.map +1 -1
  163. package/lib/typescript/components/Field/styles.d.ts.map +1 -1
  164. package/lib/typescript/components/Heading/styles.d.ts.map +1 -1
  165. package/lib/typescript/components/Icon/index.d.ts.map +1 -1
  166. package/lib/typescript/components/IconButton/index.d.ts.map +1 -1
  167. package/lib/typescript/components/IconButton/styles.d.ts +6 -2
  168. package/lib/typescript/components/IconButton/styles.d.ts.map +1 -1
  169. package/lib/typescript/components/Input/styles.d.ts.map +1 -1
  170. package/lib/typescript/components/ListItem/index.d.ts +49 -0
  171. package/lib/typescript/components/ListItem/index.d.ts.map +1 -0
  172. package/lib/typescript/components/ListItem/styles.d.ts +30 -0
  173. package/lib/typescript/components/ListItem/styles.d.ts.map +1 -0
  174. package/lib/typescript/components/ProgressSegmented/index.d.ts +14 -3
  175. package/lib/typescript/components/ProgressSegmented/index.d.ts.map +1 -1
  176. package/lib/typescript/components/Radio/index.d.ts +40 -0
  177. package/lib/typescript/components/Radio/index.d.ts.map +1 -0
  178. package/lib/typescript/components/Radio/styles.d.ts +8 -0
  179. package/lib/typescript/components/Radio/styles.d.ts.map +1 -0
  180. package/lib/typescript/components/Text/styles.d.ts.map +1 -1
  181. package/lib/typescript/components/Tile/index.d.ts +70 -0
  182. package/lib/typescript/components/Tile/index.d.ts.map +1 -0
  183. package/lib/typescript/components/Tile/styles.d.ts +18 -0
  184. package/lib/typescript/components/Tile/styles.d.ts.map +1 -0
  185. package/lib/typescript/components/index.d.ts +3 -0
  186. package/lib/typescript/components/index.d.ts.map +1 -1
  187. package/lib/typescript/figma/Button.figma.d.ts +8 -0
  188. package/lib/typescript/figma/Button.figma.d.ts.map +1 -0
  189. package/lib/typescript/figma/Card.Header.figma.d.ts +8 -0
  190. package/lib/typescript/figma/Card.Header.figma.d.ts.map +1 -0
  191. package/lib/typescript/figma/Card.figma.d.ts +8 -0
  192. package/lib/typescript/figma/Card.figma.d.ts.map +1 -0
  193. package/lib/typescript/figma/Checkbox.figma.d.ts +8 -0
  194. package/lib/typescript/figma/Checkbox.figma.d.ts.map +1 -0
  195. package/lib/typescript/figma/Field.Input.figma.d.ts +8 -0
  196. package/lib/typescript/figma/Field.Input.figma.d.ts.map +1 -0
  197. package/lib/typescript/figma/Field.Select.figma.d.ts +8 -0
  198. package/lib/typescript/figma/Field.Select.figma.d.ts.map +1 -0
  199. package/lib/typescript/figma/Heading.figma.d.ts +8 -0
  200. package/lib/typescript/figma/Heading.figma.d.ts.map +1 -0
  201. package/lib/typescript/figma/Icon.figma.d.ts +8 -0
  202. package/lib/typescript/figma/Icon.figma.d.ts.map +1 -0
  203. package/lib/typescript/figma/IconButton.figma.d.ts +8 -0
  204. package/lib/typescript/figma/IconButton.figma.d.ts.map +1 -0
  205. package/lib/typescript/figma/Input.figma.d.ts +8 -0
  206. package/lib/typescript/figma/Input.figma.d.ts.map +1 -0
  207. package/lib/typescript/figma/ProgressSegmented.figma.d.ts +8 -0
  208. package/lib/typescript/figma/ProgressSegmented.figma.d.ts.map +1 -0
  209. package/lib/typescript/figma/Radio.figma.d.ts +8 -0
  210. package/lib/typescript/figma/Radio.figma.d.ts.map +1 -0
  211. package/lib/typescript/figma/Select.figma.d.ts +8 -0
  212. package/lib/typescript/figma/Select.figma.d.ts.map +1 -0
  213. package/lib/typescript/figma/Text.figma.d.ts +8 -0
  214. package/lib/typescript/figma/Text.figma.d.ts.map +1 -0
  215. package/lib/typescript/figma/icons.figma.batch.d.ts +14 -0
  216. package/lib/typescript/figma/icons.figma.batch.d.ts.map +1 -0
  217. package/lib/typescript/styles/primitives.d.ts +35 -0
  218. package/lib/typescript/styles/primitives.d.ts.map +1 -1
  219. package/package.json +5 -5
  220. package/src/components/Button/styles.ts +2 -2
  221. package/src/components/Card/index.tsx +41 -16
  222. package/src/components/Card/styles.ts +43 -23
  223. package/src/components/Checkbox/index.tsx +8 -19
  224. package/src/components/Checkbox/styles.ts +82 -86
  225. package/src/components/Field/FieldLabel.web.tsx +1 -1
  226. package/src/components/Field/index.tsx +10 -3
  227. package/src/components/Field/styles.ts +5 -4
  228. package/src/components/Heading/{styles.tsx → styles.ts} +1 -1
  229. package/src/components/Icon/index.tsx +1 -2
  230. package/src/components/IconButton/index.tsx +3 -2
  231. package/src/components/IconButton/styles.ts +136 -10
  232. package/src/components/Input/styles.ts +13 -8
  233. package/src/components/ListItem/index.tsx +285 -0
  234. package/src/components/ListItem/styles.ts +153 -0
  235. package/src/components/ProgressSegmented/index.tsx +49 -14
  236. package/src/components/Radio/index.tsx +192 -0
  237. package/src/components/Radio/styles.ts +59 -0
  238. package/src/components/Text/{styles.tsx → styles.ts} +2 -2
  239. package/src/components/Tile/index.tsx +296 -0
  240. package/src/components/Tile/styles.ts +82 -0
  241. package/src/components/index.ts +3 -0
  242. package/src/styles/primitives.ts +36 -2
@@ -0,0 +1,243 @@
1
+ "use strict";
2
+
3
+ import { forwardRef } from 'react';
4
+ import { Pressable, Text, View } from 'react-native';
5
+ import { createTile, useTileContext } from '@cdx-ui/primitives';
6
+ import { Check } from '@cdx-ui/icons';
7
+ import { dataAttributes } from '@cdx-ui/primitives';
8
+ import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
9
+ import { checkboxIndicatorVariants, checkboxIconVariants } from '../Checkbox/styles';
10
+ import { Icon } from '../Icon';
11
+ import { radioIndicatorVariants, radioInnerDotVariants } from '../Radio/styles';
12
+ import { tileContentVariants, tileDescriptionVariants, tileGroupVariants, tileIndicatorVariants, tileLeadingSlotVariants, tileRootVariants, tileTitleVariants, tileTrailingSlotVariants } from './styles';
13
+ import { jsx as _jsx } from "react/jsx-runtime";
14
+ const TILE_SCOPE = 'TILE';
15
+ const TILE_GROUP_SCOPE = 'TILE_GROUP';
16
+ const RootPressable = withStyleContext(Pressable, TILE_SCOPE);
17
+ const GroupView = withStyleContext(View, TILE_GROUP_SCOPE);
18
+ const useTileGroupStyleContext = () => {
19
+ // `useStyleContext` types the result as a `Record`, but at runtime the value is
20
+ // `undefined` when no provider is in scope (e.g. standalone Tile). Cast through
21
+ // `unknown` to acknowledge that.
22
+ const ctx = useStyleContext(TILE_GROUP_SCOPE);
23
+ return ctx ?? {};
24
+ };
25
+ const TilePrimitive = createTile({
26
+ Pressable: RootPressable,
27
+ Group: GroupView,
28
+ LeadingSlot: View,
29
+ Content: View,
30
+ Title: Text,
31
+ Description: Text,
32
+ Indicator: View,
33
+ TrailingSlot: View
34
+ });
35
+
36
+ // =============================================================================
37
+ // TILE GROUP
38
+ // =============================================================================
39
+
40
+ /**
41
+ * Discriminated union mirroring `ITileGroupProps`, with `className` and layout variants added at
42
+ * the styled layer. Distributing the intersection across each branch keeps `interface … extends`
43
+ * ergonomics and avoids tripping `@typescript-eslint` on `(union) & { ... }`.
44
+ *
45
+ * `direction` and `spacing` constrain the group layout to the three supported patterns:
46
+ * - `direction="column"` + `spacing="default"` — vertical stack with gaps (default).
47
+ * - `direction="column"` + `spacing="none"` — tight vertical stack (rows touch).
48
+ * - `direction="row"` + `spacing="default"` — side-by-side horizontal layout.
49
+ *
50
+ * `shape` (when set) is propagated to child `Tile`s via `withStyleContext`, matching the
51
+ * Avatar size-propagation pattern. A per-tile `shape` prop overrides the inherited value.
52
+ */
53
+
54
+ const TileGroup = /*#__PURE__*/forwardRef(({
55
+ className,
56
+ style,
57
+ children,
58
+ direction,
59
+ spacing,
60
+ shape,
61
+ ...props
62
+ }, ref) => /*#__PURE__*/_jsx(TilePrimitive.Group, {
63
+ ref: ref,
64
+ className: cn(tileGroupVariants({
65
+ direction,
66
+ spacing
67
+ }), className),
68
+ style: style,
69
+ context: {
70
+ shape
71
+ },
72
+ ...props,
73
+ children: children
74
+ }));
75
+ TileGroup.displayName = 'Tile.Group';
76
+
77
+ // =============================================================================
78
+ // TILE ROOT
79
+ // =============================================================================
80
+
81
+ const TileRoot = /*#__PURE__*/forwardRef(({
82
+ shape: shapeProp,
83
+ showSeparator,
84
+ className,
85
+ style,
86
+ context,
87
+ ...props
88
+ }, ref) => {
89
+ const {
90
+ shape: inheritedShape
91
+ } = useTileGroupStyleContext();
92
+ const shape = shapeProp ?? inheritedShape ?? 'card';
93
+ const computedClassName = cn(tileRootVariants({
94
+ shape,
95
+ showSeparator
96
+ }), className);
97
+ return /*#__PURE__*/_jsx(TilePrimitive, {
98
+ ref: ref,
99
+ className: computedClassName,
100
+ context: {
101
+ ...context,
102
+ shape
103
+ },
104
+ style: style,
105
+ ...props
106
+ });
107
+ });
108
+ TileRoot.displayName = 'Tile';
109
+
110
+ // =============================================================================
111
+ // SLOTS
112
+ // =============================================================================
113
+
114
+ const TileLeadingSlot = /*#__PURE__*/forwardRef(({
115
+ className,
116
+ style,
117
+ ...props
118
+ }, ref) => /*#__PURE__*/_jsx(TilePrimitive.LeadingSlot, {
119
+ ref: ref,
120
+ className: cn(tileLeadingSlotVariants(), className),
121
+ style: style,
122
+ ...props
123
+ }));
124
+ TileLeadingSlot.displayName = 'Tile.LeadingSlot';
125
+ const TileContent = /*#__PURE__*/forwardRef(({
126
+ className,
127
+ style,
128
+ ...props
129
+ }, ref) => /*#__PURE__*/_jsx(TilePrimitive.Content, {
130
+ ref: ref,
131
+ className: cn(tileContentVariants(), className),
132
+ style: style,
133
+ ...props
134
+ }));
135
+ TileContent.displayName = 'Tile.Content';
136
+ const TileTitle = /*#__PURE__*/forwardRef(({
137
+ className,
138
+ style,
139
+ numberOfLines = 1,
140
+ ...props
141
+ }, ref) => /*#__PURE__*/_jsx(TilePrimitive.Title, {
142
+ ref: ref,
143
+ className: cn(tileTitleVariants(), className),
144
+ style: style,
145
+ numberOfLines: numberOfLines,
146
+ ...props
147
+ }));
148
+ TileTitle.displayName = 'Tile.Title';
149
+ const TileDescription = /*#__PURE__*/forwardRef(({
150
+ className,
151
+ style,
152
+ ...props
153
+ }, ref) => /*#__PURE__*/_jsx(TilePrimitive.Description, {
154
+ ref: ref,
155
+ className: cn(tileDescriptionVariants(), className),
156
+ style: style,
157
+ ...props
158
+ }));
159
+ TileDescription.displayName = 'Tile.Description';
160
+
161
+ /**
162
+ * Decorative selection affordance. Renders pure CVA-styled Views — no interactive hooks,
163
+ * no nested Pressable, zero runtime overhead. The Tile root owns the press target and
164
+ * ARIA role; this subtree is `aria-hidden` via `createTileIndicator`.
165
+ *
166
+ * The visual is inferred from the tile context: `single` (radio semantics) → radio ring,
167
+ * `multiple` (checkbox semantics) → checkbox square. An explicit `indicatorType` prop
168
+ * overrides — primarily for standalone tiles that want a radio-style visual.
169
+ */
170
+ function TileIndicatorVisual({
171
+ indicatorType
172
+ }) {
173
+ const {
174
+ isSelected,
175
+ isDisabled,
176
+ selectionType
177
+ } = useTileContext();
178
+ const effectiveType = indicatorType ?? (selectionType === 'single' ? 'radio' : 'checkbox');
179
+ const stateAttrs = dataAttributes({
180
+ checked: isSelected,
181
+ disabled: isDisabled
182
+ });
183
+ if (effectiveType === 'radio') {
184
+ return /*#__PURE__*/_jsx(View, {
185
+ className: radioIndicatorVariants(),
186
+ ...stateAttrs,
187
+ children: /*#__PURE__*/_jsx(View, {
188
+ className: radioInnerDotVariants(),
189
+ ...dataAttributes({
190
+ checked: isSelected,
191
+ invalid: false
192
+ })
193
+ })
194
+ });
195
+ }
196
+ return /*#__PURE__*/_jsx(View, {
197
+ className: cn(checkboxIndicatorVariants()),
198
+ ...stateAttrs,
199
+ children: isSelected && /*#__PURE__*/_jsx(Icon, {
200
+ as: Check,
201
+ className: checkboxIconVariants()
202
+ })
203
+ });
204
+ }
205
+ const TileIndicator = /*#__PURE__*/forwardRef(({
206
+ className,
207
+ children,
208
+ style,
209
+ indicatorType,
210
+ ...props
211
+ }, ref) => /*#__PURE__*/_jsx(TilePrimitive.Indicator, {
212
+ ref: ref,
213
+ className: cn(tileIndicatorVariants(), className),
214
+ style: style,
215
+ indicatorType: indicatorType,
216
+ ...props,
217
+ children: children ?? /*#__PURE__*/_jsx(TileIndicatorVisual, {
218
+ indicatorType: indicatorType
219
+ })
220
+ }));
221
+ TileIndicator.displayName = 'Tile.Indicator';
222
+ const TileTrailingSlot = /*#__PURE__*/forwardRef(({
223
+ className,
224
+ style,
225
+ ...props
226
+ }, ref) => /*#__PURE__*/_jsx(TilePrimitive.TrailingSlot, {
227
+ ref: ref,
228
+ className: cn(tileTrailingSlotVariants(), className),
229
+ style: style,
230
+ ...props
231
+ }));
232
+ TileTrailingSlot.displayName = 'Tile.TrailingSlot';
233
+ export const Tile = Object.assign(TileRoot, {
234
+ Group: TileGroup,
235
+ LeadingSlot: TileLeadingSlot,
236
+ Content: TileContent,
237
+ Title: TileTitle,
238
+ Description: TileDescription,
239
+ Indicator: TileIndicator,
240
+ TrailingSlot: TileTrailingSlot
241
+ });
242
+ export { useTileContext };
243
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["forwardRef","Pressable","Text","View","createTile","useTileContext","Check","dataAttributes","cn","useStyleContext","withStyleContext","checkboxIndicatorVariants","checkboxIconVariants","Icon","radioIndicatorVariants","radioInnerDotVariants","tileContentVariants","tileDescriptionVariants","tileGroupVariants","tileIndicatorVariants","tileLeadingSlotVariants","tileRootVariants","tileTitleVariants","tileTrailingSlotVariants","jsx","_jsx","TILE_SCOPE","TILE_GROUP_SCOPE","RootPressable","GroupView","useTileGroupStyleContext","ctx","TilePrimitive","Group","LeadingSlot","Content","Title","Description","Indicator","TrailingSlot","TileGroup","className","style","children","direction","spacing","shape","props","ref","context","displayName","TileRoot","shapeProp","showSeparator","inheritedShape","computedClassName","TileLeadingSlot","TileContent","TileTitle","numberOfLines","TileDescription","TileIndicatorVisual","indicatorType","isSelected","isDisabled","selectionType","effectiveType","stateAttrs","checked","disabled","invalid","as","TileIndicator","TileTrailingSlot","Tile","Object","assign"],"sourceRoot":"../../../../src","sources":["components/Tile/index.tsx"],"mappings":"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","ignoreList":[]}
@@ -0,0 +1,48 @@
1
+ "use strict";
2
+
3
+ import { Platform } from 'react-native';
4
+ import { cva } from 'class-variance-authority';
5
+ import { TRANSITION_COLORS } from '../../styles/primitives';
6
+ export const tileGroupVariants = cva(['flex w-full'], {
7
+ variants: {
8
+ direction: {
9
+ column: 'flex-col',
10
+ row: 'flex-row'
11
+ },
12
+ spacing: {
13
+ default: 'gap-2',
14
+ none: 'gap-0'
15
+ }
16
+ },
17
+ defaultVariants: {
18
+ direction: 'column',
19
+ spacing: 'default'
20
+ }
21
+ });
22
+ export const tileRootVariants = cva(['flex-row self-stretch gap-3 px-4 py-3', 'data-[disabled=true]:opacity-50', TRANSITION_COLORS, Platform.select({
23
+ web: ['outline-none', 'data-[hover=true]:data-[disabled=false]:bg-surface-action-tint-hover', 'data-[active=true]:data-[disabled=false]:data-[hover=true]:bg-surface-action-tint-active', 'data-[hover=true]:data-[disabled=false]:data-[state=unselected]:border-stroke-action', 'focus-visible:data-[disabled=false]:ring-2 focus-visible:data-[disabled=false]:ring-stroke-focus focus-visible:data-[disabled=false]:ring-offset-2'].join(' '),
24
+ default: ['data-[active=true]:bg-surface-action-tint-hover', 'data-[active=true]:border-stroke-action'].join(' ')
25
+ })], {
26
+ variants: {
27
+ shape: {
28
+ flat: 'rounded-none border-0 bg-transparent',
29
+ card: ['rounded-xl border-1 border-solid', 'border-stroke-secondary', 'bg-surface-primary', 'data-[state=selected]:border-stroke-action', 'data-[state=selected]:border-1.5', 'data-[state=selected]:bg-surface-action-tint'].join(' ')
30
+ },
31
+ showSeparator: {
32
+ true: ['border-b border-solid border-stroke-secondary! native:data-[active=true]:border-stroke-secondary' // Override border-stroke-action on hover
33
+ ],
34
+ false: ''
35
+ }
36
+ },
37
+ defaultVariants: {
38
+ shape: 'card',
39
+ showSeparator: false
40
+ }
41
+ });
42
+ export const tileLeadingSlotVariants = cva(['flex shrink-0 items-center justify-center']);
43
+ export const tileTrailingSlotVariants = cva(['flex shrink-0 items-center justify-center']);
44
+ export const tileContentVariants = cva(['min-w-0 flex-1 flex-col gap-0.5 no-underline']);
45
+ export const tileTitleVariants = cva(['text-base font-medium text-content-primary no-underline']);
46
+ export const tileDescriptionVariants = cva(['text-sm text-content-secondary no-underline']);
47
+ export const tileIndicatorVariants = cva(['flex shrink-0 items-center justify-center']);
48
+ //# sourceMappingURL=styles.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["Platform","cva","TRANSITION_COLORS","tileGroupVariants","variants","direction","column","row","spacing","default","none","defaultVariants","tileRootVariants","select","web","join","shape","flat","card","showSeparator","true","false","tileLeadingSlotVariants","tileTrailingSlotVariants","tileContentVariants","tileTitleVariants","tileDescriptionVariants","tileIndicatorVariants"],"sourceRoot":"../../../../src","sources":["components/Tile/styles.ts"],"mappings":";;AAAA,SAASA,QAAQ,QAAQ,cAAc;AACvC,SAASC,GAAG,QAA2B,0BAA0B;AACjE,SAASC,iBAAiB,QAAQ,yBAAyB;AAE3D,OAAO,MAAMC,iBAAiB,GAAGF,GAAG,CAAC,CAAC,aAAa,CAAC,EAAE;EACpDG,QAAQ,EAAE;IACRC,SAAS,EAAE;MACTC,MAAM,EAAE,UAAU;MAClBC,GAAG,EAAE;IACP,CAAC;IACDC,OAAO,EAAE;MACPC,OAAO,EAAE,OAAO;MAChBC,IAAI,EAAE;IACR;EACF,CAAC;EACDC,eAAe,EAAE;IACfN,SAAS,EAAE,QAAQ;IACnBG,OAAO,EAAE;EACX;AACF,CAAC,CAAC;AAIF,OAAO,MAAMI,gBAAgB,GAAGX,GAAG,CACjC,CACE,uCAAuC,EACvC,iCAAiC,EACjCC,iBAAiB,EACjBF,QAAQ,CAACa,MAAM,CAAC;EACdC,GAAG,EAAE,CACH,cAAc,EACd,sEAAsE,EACtE,0FAA0F,EAC1F,sFAAsF,EACtF,oJAAoJ,CACrJ,CAACC,IAAI,CAAC,GAAG,CAAC;EACXN,OAAO,EAAE,CACP,iDAAiD,EACjD,yCAAyC,CAC1C,CAACM,IAAI,CAAC,GAAG;AACZ,CAAC,CAAC,CACH,EACD;EACEX,QAAQ,EAAE;IACRY,KAAK,EAAE;MACLC,IAAI,EAAE,sCAAsC;MAC5CC,IAAI,EAAE,CACJ,kCAAkC,EAClC,yBAAyB,EACzB,oBAAoB,EACpB,4CAA4C,EAC5C,kCAAkC,EAClC,8CAA8C,CAC/C,CAACH,IAAI,CAAC,GAAG;IACZ,CAAC;IACDI,aAAa,EAAE;MACbC,IAAI,EAAE,CACJ,kGAAkG,CAAE;MAAA,CACrG;MACDC,KAAK,EAAE;IACT;EACF,CAAC;EACDV,eAAe,EAAE;IACfK,KAAK,EAAE,MAAM;IACbG,aAAa,EAAE;EACjB;AACF,CACF,CAAC;AAED,OAAO,MAAMG,uBAAuB,GAAGrB,GAAG,CAAC,CAAC,2CAA2C,CAAC,CAAC;AAEzF,OAAO,MAAMsB,wBAAwB,GAAGtB,GAAG,CAAC,CAAC,2CAA2C,CAAC,CAAC;AAE1F,OAAO,MAAMuB,mBAAmB,GAAGvB,GAAG,CAAC,CAAC,8CAA8C,CAAC,CAAC;AAExF,OAAO,MAAMwB,iBAAiB,GAAGxB,GAAG,CAAC,CAAC,yDAAyD,CAAC,CAAC;AAEjG,OAAO,MAAMyB,uBAAuB,GAAGzB,GAAG,CAAC,CAAC,6CAA6C,CAAC,CAAC;AAE3F,OAAO,MAAM0B,qBAAqB,GAAG1B,GAAG,CAAC,CAAC,2CAA2C,CAAC,CAAC","ignoreList":[]}
@@ -15,11 +15,14 @@ export * from './Image';
15
15
  export * from './Input';
16
16
  export * from './OtpInput';
17
17
  export * from './Link';
18
+ export * from './ListItem';
18
19
  export * from './ProgressBar';
19
20
  export * from './ProgressSegmented';
21
+ export * from './Radio';
20
22
  export * from './Select';
21
23
  export * from './VirtualizedList';
22
24
  export * from './Switch';
25
+ export * from './Tile';
23
26
  export { HStack, VStack } from './Stack';
24
27
  export * from './Heading';
25
28
  export * from './Text';
@@ -1 +1 @@
1
- {"version":3,"names":["HStack","VStack"],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;AAAA,cAAc,eAAe;AAC7B,cAAc,UAAU;AACxB,cAAc,eAAe;AAC7B,cAAc,OAAO;AACrB,cAAc,UAAU;AACxB,cAAc,QAAQ;AACtB,cAAc,YAAY;AAC1B,cAAc,QAAQ;AACtB,cAAc,UAAU;AACxB,cAAc,SAAS;AACvB,cAAc,QAAQ;AACtB,cAAc,SAAS;AACvB,cAAc,SAAS;AACvB,cAAc,YAAY;AAC1B,cAAc,QAAQ;AACtB,cAAc,eAAe;AAC7B,cAAc,qBAAqB;AACnC,cAAc,UAAU;AACxB,cAAc,mBAAmB;AACjC,cAAc,UAAU;AACxB,SAASA,MAAM,EAAEC,MAAM,QAAQ,SAAS;AACxC,cAAc,WAAW;AACzB,cAAc,QAAQ;AACtB,cAAc,QAAQ;AACtB,cAAc,cAAc","ignoreList":[]}
1
+ {"version":3,"names":["HStack","VStack"],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;AAAA,cAAc,eAAe;AAC7B,cAAc,UAAU;AACxB,cAAc,eAAe;AAC7B,cAAc,OAAO;AACrB,cAAc,UAAU;AACxB,cAAc,QAAQ;AACtB,cAAc,YAAY;AAC1B,cAAc,QAAQ;AACtB,cAAc,UAAU;AACxB,cAAc,SAAS;AACvB,cAAc,QAAQ;AACtB,cAAc,SAAS;AACvB,cAAc,SAAS;AACvB,cAAc,YAAY;AAC1B,cAAc,QAAQ;AACtB,cAAc,YAAY;AAC1B,cAAc,eAAe;AAC7B,cAAc,qBAAqB;AACnC,cAAc,SAAS;AACvB,cAAc,UAAU;AACxB,cAAc,mBAAmB;AACjC,cAAc,UAAU;AACxB,cAAc,QAAQ;AACtB,SAASA,MAAM,EAAEC,MAAM,QAAQ,SAAS;AACxC,cAAc,WAAW;AACzB,cAAc,QAAQ;AACtB,cAAc,QAAQ;AACtB,cAAc,cAAc","ignoreList":[]}
@@ -0,0 +1,64 @@
1
+ "use strict";
2
+
3
+ // url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=119-72
4
+ // source=packages/components/src/components/Button/index.tsx
5
+ // component=Button
6
+ import figma from 'figma';
7
+ const instance = figma.selectedInstance;
8
+
9
+ // Variant rename: Figma uses "solid" but code uses "strong" for the filled/primary style.
10
+ // This divergence exists because "strong" better communicates visual weight in the code API
11
+ // while "solid" is the conventional Figma naming.
12
+ const variant = instance.getEnum('variant', {
13
+ solid: 'strong',
14
+ outline: 'outline',
15
+ ghost: 'ghost'
16
+ });
17
+ const color = instance.getEnum('color', {
18
+ action: 'action',
19
+ danger: 'danger'
20
+ });
21
+ const size = instance.getEnum('size', {
22
+ default: 'default',
23
+ small: 'small'
24
+ });
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.
27
+ const isDisabled = instance.getEnum('isDisabled', {
28
+ true: true,
29
+ false: undefined
30
+ });
31
+ const isDisabledProp = figma.helpers.react.renderProp('isDisabled', isDisabled);
32
+ const showLeadingIcon = instance.getBoolean('Show Leading Icon?');
33
+ const showTrailingIcon = instance.getBoolean('Show Trailing Icon?');
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;
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
+ }
54
+ export default {
55
+ id: 'button',
56
+ imports: ["import { Button } from '@cdx-ui/components'", ...iconImports],
57
+ example: figma.code`
58
+ <Button variant="${variant}" color="${color}" size="${size}"${isDisabledProp}>
59
+ ${showLeadingIcon ? figma.code`<Button.Icon as={${leadingIconSnippet}} />` : null}
60
+ <Button.Label>${label}</Button.Label>
61
+ ${showTrailingIcon ? figma.code`<Button.Icon as={${trailingIconSnippet}} />` : null}
62
+ </Button>`
63
+ };
64
+ //# sourceMappingURL=Button.figma.js.map
@@ -0,0 +1 @@
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,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,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