datocms-react-ui 0.3.6 → 0.3.10

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 (61) hide show
  1. package/dist/cjs/Button/index.js +65 -4
  2. package/dist/cjs/Button/index.js.map +1 -1
  3. package/dist/cjs/Button/styles.module.css.json +1 -1
  4. package/dist/cjs/Canvas/index.js +487 -7
  5. package/dist/cjs/Canvas/index.js.map +1 -1
  6. package/dist/cjs/Canvas/styles.module.css.json +1 -1
  7. package/dist/cjs/ContextInspector/styles.module.css.json +1 -1
  8. package/dist/cjs/Form/index.js +72 -0
  9. package/dist/cjs/Form/index.js.map +1 -1
  10. package/dist/cjs/Section/index.js +70 -0
  11. package/dist/cjs/Section/index.js.map +1 -0
  12. package/dist/cjs/Section/styles.module.css.json +1 -0
  13. package/dist/cjs/SelectField/index.js +56 -0
  14. package/dist/cjs/SelectField/index.js.map +1 -0
  15. package/dist/cjs/SelectInput/index.js +135 -0
  16. package/dist/cjs/SelectInput/index.js.map +1 -0
  17. package/dist/cjs/SwitchInput/index.js +1 -1
  18. package/dist/cjs/SwitchInput/index.js.map +1 -1
  19. package/dist/cjs/TextInput/styles.module.css.json +1 -1
  20. package/dist/cjs/index.js +3 -0
  21. package/dist/cjs/index.js.map +1 -1
  22. package/dist/esm/Button/index.d.ts +62 -1
  23. package/dist/esm/Button/index.js +65 -4
  24. package/dist/esm/Button/index.js.map +1 -1
  25. package/dist/esm/Button/styles.module.css.json +1 -1
  26. package/dist/esm/Canvas/index.d.ts +479 -1
  27. package/dist/esm/Canvas/index.js +487 -7
  28. package/dist/esm/Canvas/index.js.map +1 -1
  29. package/dist/esm/Canvas/styles.module.css.json +1 -1
  30. package/dist/esm/ContextInspector/styles.module.css.json +1 -1
  31. package/dist/esm/Form/index.d.ts +72 -0
  32. package/dist/esm/Form/index.js +72 -0
  33. package/dist/esm/Form/index.js.map +1 -1
  34. package/dist/esm/Section/index.d.ts +63 -0
  35. package/dist/esm/Section/index.js +63 -0
  36. package/dist/esm/Section/index.js.map +1 -0
  37. package/dist/esm/Section/styles.module.css.json +1 -0
  38. package/dist/esm/SelectField/index.d.ts +60 -0
  39. package/dist/esm/SelectField/index.js +46 -0
  40. package/dist/esm/SelectField/index.js.map +1 -0
  41. package/dist/esm/SelectInput/index.d.ts +17 -0
  42. package/dist/esm/SelectInput/index.js +106 -0
  43. package/dist/esm/SelectInput/index.js.map +1 -0
  44. package/dist/esm/SwitchInput/index.d.ts +1 -1
  45. package/dist/esm/SwitchInput/index.js +1 -1
  46. package/dist/esm/SwitchInput/index.js.map +1 -1
  47. package/dist/esm/TextInput/styles.module.css.json +1 -1
  48. package/dist/esm/index.d.ts +3 -0
  49. package/dist/esm/index.js +3 -0
  50. package/dist/esm/index.js.map +1 -1
  51. package/dist/types/Button/index.d.ts +62 -1
  52. package/dist/types/Canvas/index.d.ts +479 -1
  53. package/dist/types/Form/index.d.ts +72 -0
  54. package/dist/types/Section/index.d.ts +63 -0
  55. package/dist/types/SelectField/index.d.ts +60 -0
  56. package/dist/types/SelectInput/index.d.ts +17 -0
  57. package/dist/types/SwitchInput/index.d.ts +1 -1
  58. package/dist/types/index.d.ts +3 -0
  59. package/package.json +4 -6
  60. package/styles.css +1 -1
  61. package/types.json +1533 -132
package/dist/esm/Canvas/index.d.ts CHANGED
@@ -5,4 +5,482 @@ export declare type CanvasProps = {
5
5
  noAutoResizer?: boolean;
6
6
  children: ReactNode;
7
7
  };
8
- export declare function Canvas({ ctx, children, noAutoResizer }: CanvasProps): JSX.Element;
8
+ /**
9
+ * @example Color variables
10
+ *
11
+ * ```js
12
+ * <Canvas ctx={ctx}>
13
+ * <Section title="Text colors">
14
+ * <table>
15
+ * <tbody>
16
+ * <tr>
17
+ * <td>
18
+ * <code>--base-body-color</code>
19
+ * </td>
20
+ * <td width="30%">
21
+ * <div
22
+ * style={{
23
+ * width: '30px',
24
+ * height: '30px',
25
+ * background: 'var(--base-body-color)',
26
+ * }}
27
+ * />
28
+ * </td>
29
+ * </tr>
30
+ * <tr>
31
+ * <td>
32
+ * <code>--light-body-color</code>
33
+ * </td>
34
+ * <td width="30%">
35
+ * <div
36
+ * style={{
37
+ * width: '30px',
38
+ * height: '30px',
39
+ * background: 'var(--light-body-color)',
40
+ * }}
41
+ * />
42
+ * </td>
43
+ * </tr>
44
+ * <tr>
45
+ * <td>
46
+ * <code>--placeholder-body-color</code>
47
+ * </td>
48
+ * <td width="30%">
49
+ * <div
50
+ * style={{
51
+ * width: '30px',
52
+ * height: '30px',
53
+ * background: 'var(--placeholder-body-color)',
54
+ * }}
55
+ * />
56
+ * </td>
57
+ * </tr>
58
+ * </tbody>
59
+ * </table>
60
+ * </Section>
61
+ * <Section title="UI colors">
62
+ * <table>
63
+ * <tbody>
64
+ * <tr>
65
+ * <td>
66
+ * <code>--light-bg-color</code>
67
+ * </td>
68
+ * <td width="30%">
69
+ * <div
70
+ * style={{
71
+ * width: '30px',
72
+ * height: '30px',
73
+ * background: 'var(--light-bg-color)',
74
+ * }}
75
+ * />
76
+ * </td>
77
+ * </tr>
78
+ * <tr>
79
+ * <td>
80
+ * <code>--lighter-bg-color</code>
81
+ * </td>
82
+ * <td width="30%">
83
+ * <div
84
+ * style={{
85
+ * width: '30px',
86
+ * height: '30px',
87
+ * background: 'var(--lighter-bg-color)',
88
+ * }}
89
+ * />
90
+ * </td>
91
+ * </tr>
92
+ * <tr>
93
+ * <td>
94
+ * <code>--disabled-bg-color</code>
95
+ * </td>
96
+ * <td width="30%">
97
+ * <div
98
+ * style={{
99
+ * width: '30px',
100
+ * height: '30px',
101
+ * background: 'var(--disabled-bg-color)',
102
+ * }}
103
+ * />
104
+ * </td>
105
+ * </tr>
106
+ * <tr>
107
+ * <td>
108
+ * <code>--border-color</code>
109
+ * </td>
110
+ * <td width="30%">
111
+ * <div
112
+ * style={{
113
+ * width: '30px',
114
+ * height: '30px',
115
+ * background: 'var(--border-color)',
116
+ * }}
117
+ * />
118
+ * </td>
119
+ * </tr>
120
+ * <tr>
121
+ * <td>
122
+ * <code>--darker-border-color</code>
123
+ * </td>
124
+ * <td width="30%">
125
+ * <div
126
+ * style={{
127
+ * width: '30px',
128
+ * height: '30px',
129
+ * background: 'var(--darker-border-color)',
130
+ * }}
131
+ * />
132
+ * </td>
133
+ * </tr>
134
+ * <tr>
135
+ * <td>
136
+ * <code>--alert-color</code>
137
+ * </td>
138
+ * <td width="30%">
139
+ * <div
140
+ * style={{
141
+ * width: '30px',
142
+ * height: '30px',
143
+ * background: 'var(--alert-color)',
144
+ * }}
145
+ * />
146
+ * </td>
147
+ * </tr>
148
+ * <tr>
149
+ * <td>
150
+ * <code>--warning-color</code>
151
+ * </td>
152
+ * <td width="30%">
153
+ * <div
154
+ * style={{
155
+ * width: '30px',
156
+ * height: '30px',
157
+ * background: 'var(--warning-color)',
158
+ * }}
159
+ * />
160
+ * </td>
161
+ * </tr>
162
+ * <tr>
163
+ * <td>
164
+ * <code>--notice-color</code>
165
+ * </td>
166
+ * <td width="30%">
167
+ * <div
168
+ * style={{
169
+ * width: '30px',
170
+ * height: '30px',
171
+ * background: 'var(--notice-color)',
172
+ * }}
173
+ * />
174
+ * </td>
175
+ * </tr>
176
+ * <tr>
177
+ * <td>
178
+ * <code>--warning-bg-color</code>
179
+ * </td>
180
+ * <td width="30%">
181
+ * <div
182
+ * style={{
183
+ * width: '30px',
184
+ * height: '30px',
185
+ * background: 'var(--warning-bg-color)',
186
+ * }}
187
+ * />
188
+ * </td>
189
+ * </tr>
190
+ * <tr>
191
+ * <td>
192
+ * <code>--add-color</code>
193
+ * </td>
194
+ * <td width="30%">
195
+ * <div
196
+ * style={{
197
+ * width: '30px',
198
+ * height: '30px',
199
+ * background: 'var(--add-color)',
200
+ * }}
201
+ * />
202
+ * </td>
203
+ * </tr>
204
+ * <tr>
205
+ * <td>
206
+ * <code>--remove-color</code>
207
+ * </td>
208
+ * <td width="30%">
209
+ * <div
210
+ * style={{
211
+ * width: '30px',
212
+ * height: '30px',
213
+ * background: 'var(--remove-color)',
214
+ * }}
215
+ * />
216
+ * </td>
217
+ * </tr>
218
+ * </tbody>
219
+ * </table>
220
+ * </Section>
221
+ * <Section title="Project-specific colors">
222
+ * <table>
223
+ * <tbody>
224
+ * <tr>
225
+ * <td>
226
+ * <code>--accent-color</code>
227
+ * </td>
228
+ * <td width="30%">
229
+ * <div
230
+ * style={{
231
+ * width: '30px',
232
+ * height: '30px',
233
+ * background: 'var(--accent-color)',
234
+ * }}
235
+ * />
236
+ * </td>
237
+ * </tr>
238
+ * <tr>
239
+ * <td>
240
+ * <code>--primary-color</code>
241
+ * </td>
242
+ * <td width="30%">
243
+ * <div
244
+ * style={{
245
+ * width: '30px',
246
+ * height: '30px',
247
+ * background: 'var(--primary-color)',
248
+ * }}
249
+ * />
250
+ * </td>
251
+ * </tr>
252
+ * <tr>
253
+ * <td>
254
+ * <code>--light-color</code>
255
+ * </td>
256
+ * <td width="30%">
257
+ * <div
258
+ * style={{
259
+ * width: '30px',
260
+ * height: '30px',
261
+ * background: 'var(--light-color)',
262
+ * }}
263
+ * />
264
+ * </td>
265
+ * </tr>
266
+ * <tr>
267
+ * <td>
268
+ * <code>--dark-color</code>
269
+ * </td>
270
+ * <td width="30%">
271
+ * <div
272
+ * style={{
273
+ * width: '30px',
274
+ * height: '30px',
275
+ * background: 'var(--dark-color)',
276
+ * }}
277
+ * />
278
+ * </td>
279
+ * </tr>
280
+ * </tbody>
281
+ * </table>
282
+ * </Section>
283
+ * </Canvas>;
284
+ * ```
285
+ *
286
+ * @example Typography variables
287
+ *
288
+ * ```js
289
+ * <Canvas ctx={ctx}>
290
+ * <table>
291
+ * <tbody>
292
+ * <tr>
293
+ * <td>
294
+ * <code>--font-size-xxs</code>
295
+ * </td>
296
+ * <td>
297
+ * <div style={{ fontSize: 'var(--font-size-xxs)' }}>
298
+ * Size XXS
299
+ * </div>
300
+ * </td>
301
+ * </tr>
302
+ * <tr>
303
+ * <td>
304
+ * <code>--font-size-xs</code>
305
+ * </td>
306
+ * <td>
307
+ * <div style={{ fontSize: 'var(--font-size-xs)' }}>Size XS</div>
308
+ * </td>
309
+ * </tr>
310
+ * <tr>
311
+ * <td>
312
+ * <code>--font-size-s</code>
313
+ * </td>
314
+ * <td>
315
+ * <div style={{ fontSize: 'var(--font-size-s)' }}>Size S</div>
316
+ * </td>
317
+ * </tr>
318
+ * <tr>
319
+ * <td>
320
+ * <code>--font-size-m</code>
321
+ * </td>
322
+ * <td>
323
+ * <div style={{ fontSize: 'var(--font-size-m)' }}>Size M</div>
324
+ * </td>
325
+ * </tr>
326
+ * <tr>
327
+ * <td>
328
+ * <code>--font-size-l</code>
329
+ * </td>
330
+ * <td>
331
+ * <div
332
+ * style={{
333
+ * fontSize: 'var(--font-size-l)',
334
+ * fontWeight: 'var(--font-weight-bold)',
335
+ * }}
336
+ * >
337
+ * Size L
338
+ * </div>
339
+ * </td>
340
+ * </tr>
341
+ * <tr>
342
+ * <td>
343
+ * <code>--font-size-xl</code>
344
+ * </td>
345
+ * <td>
346
+ * <div
347
+ * style={{
348
+ * fontSize: 'var(--font-size-xl)',
349
+ * fontWeight: 'var(--font-weight-bold)',
350
+ * }}
351
+ * >
352
+ * Size XL
353
+ * </div>
354
+ * </td>
355
+ * </tr>
356
+ * <tr>
357
+ * <td>
358
+ * <code>--font-size-xxl</code>
359
+ * </td>
360
+ * <td>
361
+ * <div
362
+ * style={{
363
+ * fontSize: 'var(--font-size-xxl)',
364
+ * fontWeight: 'var(--font-weight-bold)',
365
+ * }}
366
+ * >
367
+ * Size XXL
368
+ * </div>
369
+ * </td>
370
+ * </tr>
371
+ * <tr>
372
+ * <td>
373
+ * <code>--font-size-xxxl</code>
374
+ * </td>
375
+ * <td>
376
+ * <div
377
+ * style={{
378
+ * fontSize: 'var(--font-size-xxxl)',
379
+ * fontWeight: 'var(--font-weight-bold)',
380
+ * }}
381
+ * >
382
+ * Size XXXL
383
+ * </div>
384
+ * </td>
385
+ * </tr>
386
+ * </tbody>
387
+ * </table>
388
+ * </Canvas>;
389
+ * ```
390
+ *
391
+ * @example Spacing variables
392
+ *
393
+ * ```js
394
+ * <Canvas ctx={ctx}>
395
+ * <table>
396
+ * <tbody>
397
+ * <tr>
398
+ * <td>
399
+ * <code>--spacing-s</code>
400
+ * </td>
401
+ * <td>
402
+ * <div
403
+ * style={{
404
+ * background: 'var(--accent-color)',
405
+ * width: 'var(--spacing-s)',
406
+ * height: 'var(--spacing-s)',
407
+ * }}
408
+ * />
409
+ * </td>
410
+ * </tr>
411
+ * <tr>
412
+ * <td>
413
+ * <code>--spacing-m</code>
414
+ * </td>
415
+ * <td>
416
+ * <div
417
+ * style={{
418
+ * background: 'var(--accent-color)',
419
+ * width: 'var(--spacing-m)',
420
+ * height: 'var(--spacing-m)',
421
+ * }}
422
+ * />
423
+ * </td>
424
+ * </tr>
425
+ * <tr>
426
+ * <td>
427
+ * <code>--spacing-l</code>
428
+ * </td>
429
+ * <td>
430
+ * <div
431
+ * style={{
432
+ * background: 'var(--accent-color)',
433
+ * width: 'var(--spacing-l)',
434
+ * height: 'var(--spacing-l)',
435
+ * }}
436
+ * />
437
+ * </td>
438
+ * </tr>
439
+ * <tr>
440
+ * <td>
441
+ * <code>--spacing-xl</code>
442
+ * </td>
443
+ * <td>
444
+ * <div
445
+ * style={{
446
+ * background: 'var(--accent-color)',
447
+ * width: 'var(--spacing-xl)',
448
+ * height: 'var(--spacing-xl)',
449
+ * }}
450
+ * />
451
+ * </td>
452
+ * </tr>
453
+ * <tr>
454
+ * <td>
455
+ * <code>--spacing-xxl</code>
456
+ * </td>
457
+ * <td>
458
+ * <div
459
+ * style={{
460
+ * background: 'var(--accent-color)',
461
+ * width: 'var(--spacing-xxl)',
462
+ * height: 'var(--spacing-xxl)',
463
+ * }}
464
+ * />
465
+ * </td>
466
+ * </tr>
467
+ * <tr>
468
+ * <td>
469
+ * <code>--spacing-xxxl</code>
470
+ * </td>
471
+ * <td>
472
+ * <div
473
+ * style={{
474
+ * background: 'var(--accent-color)',
475
+ * width: 'var(--spacing-xxxl)',
476
+ * height: 'var(--spacing-xxxl)',
477
+ * }}
478
+ * />
479
+ * </td>
480
+ * </tr>
481
+ * </tbody>
482
+ * </table>
483
+ * </Canvas>;
484
+ * ```
485
+ */
486
+ export declare function Canvas({ ctx, children, noAutoResizer, }: CanvasProps): JSX.Element;