alouette 7.0.0-beta.2 → 7.0.0-beta.21

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 (180) hide show
  1. package/README.md +7 -1
  2. package/dist/createAlouetteTamagui-browser.es.js +105 -95
  3. package/dist/createAlouetteTamagui-browser.es.js.map +1 -1
  4. package/dist/createAlouetteTamagui-node18.mjs +105 -95
  5. package/dist/createAlouetteTamagui-node18.mjs.map +1 -1
  6. package/dist/createAlouetteTamagui-react-native.cjs.js +107 -94
  7. package/dist/createAlouetteTamagui-react-native.cjs.js.map +1 -1
  8. package/dist/definitions/components/actions/Button.d.ts +20 -0
  9. package/dist/definitions/components/actions/Button.d.ts.map +1 -0
  10. package/dist/definitions/components/actions/Button.stories.d.ts +10 -0
  11. package/dist/definitions/components/actions/Button.stories.d.ts.map +1 -0
  12. package/dist/definitions/components/actions/IconButton.d.ts +18 -0
  13. package/dist/definitions/components/actions/IconButton.d.ts.map +1 -0
  14. package/dist/definitions/components/actions/IconButton.stories.d.ts +10 -0
  15. package/dist/definitions/components/actions/IconButton.stories.d.ts.map +1 -0
  16. package/dist/definitions/components/containers/Box.d.ts +13 -0
  17. package/dist/definitions/components/containers/Box.d.ts.map +1 -0
  18. package/dist/definitions/components/containers/Box.stories.d.ts +18 -0
  19. package/dist/definitions/components/containers/Box.stories.d.ts.map +1 -0
  20. package/dist/definitions/components/containers/PressableBox.d.ts +12 -0
  21. package/dist/definitions/components/containers/PressableBox.d.ts.map +1 -0
  22. package/dist/definitions/components/containers/PressableBox.stories.d.ts +18 -0
  23. package/dist/definitions/components/containers/PressableBox.stories.d.ts.map +1 -0
  24. package/dist/definitions/components/containers/variants.d.ts +61 -0
  25. package/dist/definitions/components/containers/variants.d.ts.map +1 -0
  26. package/dist/definitions/components/feedback/FeedbackIcon.d.ts +8 -0
  27. package/dist/definitions/components/feedback/FeedbackIcon.d.ts.map +1 -0
  28. package/dist/definitions/components/feedback/Message.d.ts +25 -0
  29. package/dist/definitions/components/feedback/Message.d.ts.map +1 -0
  30. package/dist/definitions/components/feedback/Message.stories.d.ts +10 -0
  31. package/dist/definitions/components/feedback/Message.stories.d.ts.map +1 -0
  32. package/dist/definitions/components/forms/InputText.d.ts +23 -0
  33. package/dist/definitions/components/forms/InputText.d.ts.map +1 -0
  34. package/dist/definitions/components/forms/InputText.stories.d.ts +16 -0
  35. package/dist/definitions/components/forms/InputText.stories.d.ts.map +1 -0
  36. package/dist/definitions/components/layout/Separator.d.ts +6 -0
  37. package/dist/definitions/components/layout/Separator.d.ts.map +1 -0
  38. package/dist/definitions/components/layout/Separator.stories.d.ts +10 -0
  39. package/dist/definitions/components/layout/Separator.stories.d.ts.map +1 -0
  40. package/dist/definitions/components/layout/list.d.ts +7 -0
  41. package/dist/definitions/components/layout/list.d.ts.map +1 -0
  42. package/dist/definitions/components/layout/list.stories.d.ts +7 -0
  43. package/dist/definitions/components/layout/list.stories.d.ts.map +1 -0
  44. package/dist/definitions/components/primitives/Icon.d.ts +14 -0
  45. package/dist/definitions/components/primitives/Icon.d.ts.map +1 -0
  46. package/dist/definitions/components/primitives/Icon.stories.d.ts +9 -0
  47. package/dist/definitions/components/primitives/Icon.stories.d.ts.map +1 -0
  48. package/dist/definitions/components/primitives/ScrollView.d.ts +14 -0
  49. package/dist/definitions/components/primitives/ScrollView.d.ts.map +1 -0
  50. package/dist/definitions/components/primitives/View.d.ts +5 -0
  51. package/dist/definitions/components/primitives/View.d.ts.map +1 -0
  52. package/dist/definitions/components/primitives/View.stories.d.ts +10 -0
  53. package/dist/definitions/components/primitives/View.stories.d.ts.map +1 -0
  54. package/dist/definitions/components/primitives/createVariants.d.ts +54 -0
  55. package/dist/definitions/components/primitives/createVariants.d.ts.map +1 -0
  56. package/dist/definitions/components/primitives/stacks.d.ts +17 -0
  57. package/dist/definitions/components/primitives/stacks.d.ts.map +1 -0
  58. package/dist/definitions/components/primitives/stacks.stories.d.ts +10 -0
  59. package/dist/definitions/components/primitives/stacks.stories.d.ts.map +1 -0
  60. package/dist/definitions/components/story-components/Story.d.ts +21 -0
  61. package/dist/definitions/components/story-components/Story.d.ts.map +1 -0
  62. package/dist/definitions/components/story-components/StoryContainer.d.ts +7 -0
  63. package/dist/definitions/components/story-components/StoryContainer.d.ts.map +1 -0
  64. package/dist/definitions/components/story-components/StoryDecorator.d.ts +3 -0
  65. package/dist/definitions/components/story-components/StoryDecorator.d.ts.map +1 -0
  66. package/dist/definitions/components/story-components/StoryGrid.d.ts +19 -0
  67. package/dist/definitions/components/story-components/StoryGrid.d.ts.map +1 -0
  68. package/dist/definitions/components/story-components/StoryTitle.d.ts +10 -0
  69. package/dist/definitions/components/story-components/StoryTitle.d.ts.map +1 -0
  70. package/dist/definitions/components/story-components/WithTamaguiConfig.d.ts +7 -0
  71. package/dist/definitions/components/story-components/WithTamaguiConfig.d.ts.map +1 -0
  72. package/dist/definitions/components/typography/Typography.d.ts +38 -0
  73. package/dist/definitions/components/typography/Typography.d.ts.map +1 -0
  74. package/dist/definitions/components/typography/Typography.stories.d.ts +15 -0
  75. package/dist/definitions/components/typography/Typography.stories.d.ts.map +1 -0
  76. package/dist/definitions/components/windowSize/SwitchBreakpoints.d.ts +20 -0
  77. package/dist/definitions/components/windowSize/SwitchBreakpoints.d.ts.map +1 -0
  78. package/dist/definitions/components/windowSize/SwitchBreakpoints.stories.d.ts +10 -0
  79. package/dist/definitions/components/windowSize/SwitchBreakpoints.stories.d.ts.map +1 -0
  80. package/dist/definitions/components/windowSize/useCurrentBreakpointName.d.ts +5 -0
  81. package/dist/definitions/components/windowSize/useCurrentBreakpointName.d.ts.map +1 -0
  82. package/dist/definitions/config/Breakpoints.d.ts +32 -0
  83. package/dist/definitions/config/Breakpoints.d.ts.map +1 -0
  84. package/dist/definitions/config/animations.d.ts +15 -0
  85. package/dist/definitions/config/animations.d.ts.map +1 -0
  86. package/dist/definitions/config/animations.web.d.ts +5 -0
  87. package/dist/definitions/config/animations.web.d.ts.map +1 -0
  88. package/dist/definitions/config/colorScales.d.ts +13 -0
  89. package/dist/definitions/config/colorScales.d.ts.map +1 -0
  90. package/dist/definitions/config/createAlouetteFonts.d.ts +90 -0
  91. package/dist/definitions/config/createAlouetteFonts.d.ts.map +1 -0
  92. package/dist/definitions/config/createAlouetteTokens.d.ts +557 -0
  93. package/dist/definitions/config/createAlouetteTokens.d.ts.map +1 -0
  94. package/dist/definitions/config/media.d.ts +15 -0
  95. package/dist/definitions/config/media.d.ts.map +1 -0
  96. package/dist/definitions/config/themes.d.ts +247 -0
  97. package/dist/definitions/config/themes.d.ts.map +1 -0
  98. package/dist/definitions/config/themes.stories.d.ts +8 -0
  99. package/dist/definitions/config/themes.stories.d.ts.map +1 -0
  100. package/dist/definitions/config/tokens.stories.d.ts +8 -0
  101. package/dist/definitions/config/tokens.stories.d.ts.map +1 -0
  102. package/dist/definitions/config/utils/groupTokens.d.ts +7 -0
  103. package/dist/definitions/config/utils/groupTokens.d.ts.map +1 -0
  104. package/dist/definitions/core/AlouetteDecorator.d.ts +3 -0
  105. package/dist/definitions/core/AlouetteDecorator.d.ts.map +1 -0
  106. package/dist/definitions/core/AlouetteProvider.d.ts +8 -0
  107. package/dist/definitions/core/AlouetteProvider.d.ts.map +1 -0
  108. package/dist/definitions/createAlouetteTamagui.d.ts +136 -0
  109. package/dist/definitions/createAlouetteTamagui.d.ts.map +1 -0
  110. package/dist/definitions/index.d.ts +42 -0
  111. package/dist/definitions/index.d.ts.map +1 -0
  112. package/dist/index-browser.es.js +389 -60
  113. package/dist/index-browser.es.js.map +1 -1
  114. package/dist/index-node18.mjs +389 -60
  115. package/dist/index-node18.mjs.map +1 -1
  116. package/dist/index-react-native.cjs.js +403 -56
  117. package/dist/index-react-native.cjs.js.map +1 -1
  118. package/package.json +31 -24
  119. package/src/components/actions/Button.stories.tsx +4 -5
  120. package/src/components/actions/Button.tsx +3 -4
  121. package/src/components/actions/IconButton.stories.tsx +2 -3
  122. package/src/components/actions/IconButton.tsx +4 -4
  123. package/src/components/containers/{Frame.stories.tsx → Box.stories.tsx} +21 -21
  124. package/src/components/containers/{Frame.tsx → Box.tsx} +3 -3
  125. package/src/components/containers/{Pressable.stories.tsx → PressableBox.stories.tsx} +8 -8
  126. package/src/components/containers/PressableBox.tsx +9 -0
  127. package/src/components/containers/variants.ts +15 -12
  128. package/src/components/feedback/FeedbackIcon.tsx +2 -2
  129. package/src/components/feedback/Message.stories.tsx +2 -2
  130. package/src/components/feedback/Message.tsx +4 -4
  131. package/src/components/forms/InputText.stories.tsx +2 -2
  132. package/src/components/forms/InputText.tsx +5 -0
  133. package/src/components/layout/Separator.stories.tsx +39 -0
  134. package/src/components/layout/Separator.tsx +31 -0
  135. package/src/components/layout/list.stories.tsx +24 -0
  136. package/src/components/layout/list.tsx +30 -0
  137. package/src/components/primitives/Icon.stories.tsx +1 -1
  138. package/src/components/primitives/Icon.tsx +6 -12
  139. package/src/components/primitives/ScrollView.ts +2 -1
  140. package/src/components/primitives/createVariants.ts +7 -5
  141. package/src/components/primitives/stacks.stories.tsx +14 -14
  142. package/src/components/primitives/stacks.ts +2 -6
  143. package/src/components/story-components/Story.tsx +1 -1
  144. package/src/components/story-components/StoryGrid.tsx +0 -1
  145. package/src/components/story-components/StoryTitle.tsx +3 -0
  146. package/src/components/typography/Typography.tsx +2 -0
  147. package/src/components/windowSize/SwitchBreakpoints.stories.tsx +1 -1
  148. package/src/config/animations.ts +4 -0
  149. package/src/config/animations.web.ts +1 -0
  150. package/src/config/colorScales.ts +4 -4
  151. package/src/config/createAlouetteFonts.ts +6 -6
  152. package/src/config/createAlouetteTokens.ts +23 -18
  153. package/src/config/themes.stories.tsx +5 -9
  154. package/src/config/themes.ts +139 -68
  155. package/src/config/tokens.stories.tsx +7 -7
  156. package/src/core/AlouetteDecorator.tsx +1 -0
  157. package/src/createAlouetteTamagui.ts +32 -19
  158. package/src/index.ts +50 -3
  159. package/.editorconfig +0 -13
  160. package/.eslintrc.json +0 -5
  161. package/.yo-rc.json +0 -11
  162. package/dist/phosphor-icons-browser.es.js +0 -2497
  163. package/dist/phosphor-icons-browser.es.js.map +0 -1
  164. package/dist/phosphor-icons-node18.mjs +0 -2497
  165. package/dist/phosphor-icons-node18.mjs.map +0 -1
  166. package/dist/phosphor-icons-react-native.cjs.js +0 -4998
  167. package/dist/phosphor-icons-react-native.cjs.js.map +0 -1
  168. package/phosphor-icons.js +0 -1
  169. package/rollup.config.mjs +0 -8
  170. package/scripts/generate-phosphor-icons-legacy-withcopy.mjs +0 -64
  171. package/scripts/generate-phosphor-icons.mjs +0 -51
  172. package/src/.eslintrc.json +0 -32
  173. package/src/components/containers/Pressable.tsx +0 -9
  174. package/src/components/windowSize/__snapshots__/SwitchBreakpoints.stories.tsx.snap +0 -1032
  175. package/src/components/windowSize/__snapshots_web__/SwitchBreakpoints.stories.tsx.snap +0 -402
  176. package/src/phosphor-icons.cjs +0 -1254
  177. package/src/phosphor-icons.d.ts +0 -2501
  178. package/src/phosphor-icons.ts +0 -2499
  179. package/src/typings/bundler.d.ts +0 -10
  180. package/tsconfig.json +0 -20
package/src/components/windowSize/__snapshots__/SwitchBreakpoints.stories.tsx.snap DELETED
@@ -1,1032 +0,0 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
2
-
3
- exports[`kitt2/Window Size/SwitchBreakpoints SwitchBreakpoints 1`] = `
4
- <RNCSafeAreaProvider
5
- onInsetsChange={[Function]}
6
- style={
7
- [
8
- {
9
- "flex": 1,
10
- },
11
- undefined,
12
- ]
13
- }
14
- >
15
- <View
16
- style={
17
- {
18
- "alignItems": "stretch",
19
- "flexDirection": "column",
20
- "marginBottom": 32,
21
- "marginLeft": -16,
22
- "marginRight": -16,
23
- "paddingLeft": 16,
24
- "paddingRight": 16,
25
- }
26
- }
27
- >
28
- <Text
29
- style={
30
- {
31
- "color": "#000000",
32
- "fontFamily": "Moderat-Black",
33
- "fontSize": 40,
34
- "lineHeight": 44,
35
- "marginBottom": 32,
36
- }
37
- }
38
- suppressHighlighting={true}
39
- >
40
- Mode "SwitchBreakpointsUsingDisplayNone"
41
- </Text>
42
- <View
43
- style={
44
- {
45
- "alignItems": "stretch",
46
- "flexDirection": "column",
47
- "marginBottom": 16,
48
- "marginLeft": -16,
49
- "marginRight": -16,
50
- "paddingLeft": 16,
51
- "paddingRight": 16,
52
- }
53
- }
54
- >
55
- <Text
56
- style={
57
- {
58
- "color": "#000000",
59
- "fontFamily": "Moderat-Black",
60
- "fontSize": 32,
61
- "lineHeight": 38.4,
62
- "marginBottom": 12,
63
- }
64
- }
65
- suppressHighlighting={true}
66
- >
67
- Current breakpoint
68
- </Text>
69
- <View
70
- style={
71
- {
72
- "display": "none",
73
- }
74
- }
75
- >
76
- <Text
77
- style={
78
- {
79
- "color": "#000000",
80
- "fontFamily": "Moderat-Regular",
81
- "fontSize": 32,
82
- "lineHeight": 38.4,
83
- }
84
- }
85
- suppressHighlighting={true}
86
- >
87
- base
88
- </Text>
89
- </View>
90
- <View
91
- style={
92
- {
93
- "display": "flex",
94
- }
95
- }
96
- >
97
- <Text
98
- style={
99
- {
100
- "color": "#000000",
101
- "fontFamily": "Moderat-Regular",
102
- "fontSize": 32,
103
- "lineHeight": 38.4,
104
- }
105
- }
106
- suppressHighlighting={true}
107
- >
108
- small
109
- </Text>
110
- </View>
111
- <View
112
- style={
113
- {
114
- "display": "none",
115
- }
116
- }
117
- >
118
- <Text
119
- style={
120
- {
121
- "color": "#000000",
122
- "fontFamily": "Moderat-Regular",
123
- "fontSize": 32,
124
- "lineHeight": 38.4,
125
- }
126
- }
127
- suppressHighlighting={true}
128
- >
129
- medium
130
- </Text>
131
- </View>
132
- <View
133
- style={
134
- {
135
- "display": "none",
136
- }
137
- }
138
- >
139
- <Text
140
- style={
141
- {
142
- "color": "#000000",
143
- "fontFamily": "Moderat-Regular",
144
- "fontSize": 32,
145
- "lineHeight": 38.4,
146
- }
147
- }
148
- suppressHighlighting={true}
149
- >
150
- large
151
- </Text>
152
- </View>
153
- <View
154
- style={
155
- {
156
- "display": "none",
157
- }
158
- }
159
- >
160
- <Text
161
- style={
162
- {
163
- "color": "#000000",
164
- "fontFamily": "Moderat-Regular",
165
- "fontSize": 32,
166
- "lineHeight": 38.4,
167
- }
168
- }
169
- suppressHighlighting={true}
170
- >
171
- wide
172
- </Text>
173
- </View>
174
- </View>
175
- <View
176
- style={
177
- {
178
- "alignItems": "stretch",
179
- "flexDirection": "column",
180
- "marginBottom": 16,
181
- "marginLeft": -16,
182
- "marginRight": -16,
183
- "paddingLeft": 16,
184
- "paddingRight": 16,
185
- }
186
- }
187
- >
188
- <Text
189
- style={
190
- {
191
- "color": "#000000",
192
- "fontFamily": "Moderat-Black",
193
- "fontSize": 32,
194
- "lineHeight": 38.4,
195
- "marginBottom": 12,
196
- }
197
- }
198
- suppressHighlighting={true}
199
- >
200
- In Breakpoint
201
- </Text>
202
- <View
203
- style={
204
- {
205
- "display": "flex",
206
- "flexDirection": "row",
207
- "marginBottom": 16,
208
- "marginTop": -4,
209
- }
210
- }
211
- >
212
- <View
213
- style={
214
- {
215
- "display": "flex",
216
- "flexBasis": 0,
217
- "flexGrow": 1,
218
- "marginBottom": 8,
219
- "marginTop": 8,
220
- "paddingBottom": 0,
221
- "paddingTop": 0,
222
- }
223
- }
224
- >
225
- <View
226
- style={
227
- {
228
- "alignItems": "stretch",
229
- "flexDirection": "column",
230
- }
231
- }
232
- >
233
- <Text
234
- numberOfLines={1}
235
- style={
236
- {
237
- "fontFamily": "Moderat-Black",
238
- "fontSize": 24,
239
- "lineHeight": 31.2,
240
- "marginBottom": 12,
241
- }
242
- }
243
- suppressHighlighting={true}
244
- >
245
- base
246
- </Text>
247
- <View
248
- style={
249
- {
250
- "display": "none",
251
- }
252
- }
253
- >
254
- <Text
255
- style={
256
- {
257
- "color": "#000000",
258
- "fontFamily": "Moderat-Regular",
259
- "fontSize": 32,
260
- "lineHeight": 38.4,
261
- }
262
- }
263
- suppressHighlighting={true}
264
- >
265
- yes
266
- </Text>
267
- </View>
268
- <View
269
- style={
270
- {
271
- "display": "flex",
272
- }
273
- }
274
- >
275
- <Text
276
- style={
277
- {
278
- "color": "#000000",
279
- "fontFamily": "Moderat-Regular",
280
- "fontSize": 32,
281
- "lineHeight": 38.4,
282
- }
283
- }
284
- suppressHighlighting={true}
285
- >
286
- no
287
- </Text>
288
- </View>
289
- </View>
290
- </View>
291
- <View
292
- style={
293
- {
294
- "display": "flex",
295
- "flexBasis": 0,
296
- "flexGrow": 1,
297
- "marginBottom": 8,
298
- "marginTop": 8,
299
- "paddingBottom": 0,
300
- "paddingTop": 0,
301
- }
302
- }
303
- >
304
- <View
305
- style={
306
- {
307
- "alignItems": "stretch",
308
- "flexDirection": "column",
309
- }
310
- }
311
- >
312
- <Text
313
- numberOfLines={1}
314
- style={
315
- {
316
- "fontFamily": "Moderat-Black",
317
- "fontSize": 24,
318
- "lineHeight": 31.2,
319
- "marginBottom": 12,
320
- }
321
- }
322
- suppressHighlighting={true}
323
- >
324
- small
325
- </Text>
326
- <View
327
- style={
328
- {
329
- "display": "none",
330
- }
331
- }
332
- >
333
- <Text
334
- style={
335
- {
336
- "color": "#000000",
337
- "fontFamily": "Moderat-Regular",
338
- "fontSize": 32,
339
- "lineHeight": 38.4,
340
- }
341
- }
342
- suppressHighlighting={true}
343
- >
344
- no
345
- </Text>
346
- </View>
347
- <View
348
- style={
349
- {
350
- "display": "flex",
351
- }
352
- }
353
- >
354
- <Text
355
- style={
356
- {
357
- "color": "#000000",
358
- "fontFamily": "Moderat-Regular",
359
- "fontSize": 32,
360
- "lineHeight": 38.4,
361
- }
362
- }
363
- suppressHighlighting={true}
364
- >
365
- yes
366
- </Text>
367
- </View>
368
- <View
369
- style={
370
- {
371
- "display": "none",
372
- }
373
- }
374
- >
375
- <Text
376
- style={
377
- {
378
- "color": "#000000",
379
- "fontFamily": "Moderat-Regular",
380
- "fontSize": 32,
381
- "lineHeight": 38.4,
382
- }
383
- }
384
- suppressHighlighting={true}
385
- >
386
- no
387
- </Text>
388
- </View>
389
- </View>
390
- </View>
391
- <View
392
- style={
393
- {
394
- "display": "flex",
395
- "flexBasis": 0,
396
- "flexGrow": 1,
397
- "marginBottom": 8,
398
- "marginTop": 8,
399
- "paddingBottom": 0,
400
- "paddingTop": 0,
401
- }
402
- }
403
- >
404
- <View
405
- style={
406
- {
407
- "alignItems": "stretch",
408
- "flexDirection": "column",
409
- }
410
- }
411
- >
412
- <Text
413
- numberOfLines={1}
414
- style={
415
- {
416
- "fontFamily": "Moderat-Black",
417
- "fontSize": 24,
418
- "lineHeight": 31.2,
419
- "marginBottom": 12,
420
- }
421
- }
422
- suppressHighlighting={true}
423
- >
424
- medium
425
- </Text>
426
- <View
427
- style={
428
- {
429
- "display": "flex",
430
- }
431
- }
432
- >
433
- <Text
434
- style={
435
- {
436
- "color": "#000000",
437
- "fontFamily": "Moderat-Regular",
438
- "fontSize": 32,
439
- "lineHeight": 38.4,
440
- }
441
- }
442
- suppressHighlighting={true}
443
- >
444
- no
445
- </Text>
446
- </View>
447
- <View
448
- style={
449
- {
450
- "display": "none",
451
- }
452
- }
453
- >
454
- <Text
455
- style={
456
- {
457
- "color": "#000000",
458
- "fontFamily": "Moderat-Regular",
459
- "fontSize": 32,
460
- "lineHeight": 38.4,
461
- }
462
- }
463
- suppressHighlighting={true}
464
- >
465
- yes
466
- </Text>
467
- </View>
468
- <View
469
- style={
470
- {
471
- "display": "none",
472
- }
473
- }
474
- >
475
- <Text
476
- style={
477
- {
478
- "color": "#000000",
479
- "fontFamily": "Moderat-Regular",
480
- "fontSize": 32,
481
- "lineHeight": 38.4,
482
- }
483
- }
484
- suppressHighlighting={true}
485
- >
486
- no
487
- </Text>
488
- </View>
489
- </View>
490
- </View>
491
- <View
492
- style={
493
- {
494
- "display": "flex",
495
- "flexBasis": 0,
496
- "flexGrow": 1,
497
- "marginBottom": 8,
498
- "marginTop": 8,
499
- "paddingBottom": 0,
500
- "paddingTop": 0,
501
- }
502
- }
503
- >
504
- <View
505
- style={
506
- {
507
- "alignItems": "stretch",
508
- "flexDirection": "column",
509
- }
510
- }
511
- >
512
- <Text
513
- numberOfLines={1}
514
- style={
515
- {
516
- "fontFamily": "Moderat-Black",
517
- "fontSize": 24,
518
- "lineHeight": 31.2,
519
- "marginBottom": 12,
520
- }
521
- }
522
- suppressHighlighting={true}
523
- >
524
- large
525
- </Text>
526
- <View
527
- style={
528
- {
529
- "display": "flex",
530
- }
531
- }
532
- >
533
- <Text
534
- style={
535
- {
536
- "color": "#000000",
537
- "fontFamily": "Moderat-Regular",
538
- "fontSize": 32,
539
- "lineHeight": 38.4,
540
- }
541
- }
542
- suppressHighlighting={true}
543
- >
544
- no
545
- </Text>
546
- </View>
547
- <View
548
- style={
549
- {
550
- "display": "none",
551
- }
552
- }
553
- >
554
- <Text
555
- style={
556
- {
557
- "color": "#000000",
558
- "fontFamily": "Moderat-Regular",
559
- "fontSize": 32,
560
- "lineHeight": 38.4,
561
- }
562
- }
563
- suppressHighlighting={true}
564
- >
565
- yes
566
- </Text>
567
- </View>
568
- <View
569
- style={
570
- {
571
- "display": "none",
572
- }
573
- }
574
- >
575
- <Text
576
- style={
577
- {
578
- "color": "#000000",
579
- "fontFamily": "Moderat-Regular",
580
- "fontSize": 32,
581
- "lineHeight": 38.4,
582
- }
583
- }
584
- suppressHighlighting={true}
585
- >
586
- no
587
- </Text>
588
- </View>
589
- </View>
590
- </View>
591
- <View
592
- style={
593
- {
594
- "display": "flex",
595
- "flexBasis": 0,
596
- "flexGrow": 1,
597
- "marginBottom": 8,
598
- "marginTop": 8,
599
- "paddingBottom": 0,
600
- "paddingTop": 0,
601
- }
602
- }
603
- >
604
- <View
605
- style={
606
- {
607
- "alignItems": "stretch",
608
- "flexDirection": "column",
609
- }
610
- }
611
- >
612
- <Text
613
- numberOfLines={1}
614
- style={
615
- {
616
- "fontFamily": "Moderat-Black",
617
- "fontSize": 24,
618
- "lineHeight": 31.2,
619
- "marginBottom": 12,
620
- }
621
- }
622
- suppressHighlighting={true}
623
- >
624
- wide
625
- </Text>
626
- <View
627
- style={
628
- {
629
- "display": "flex",
630
- }
631
- }
632
- >
633
- <Text
634
- style={
635
- {
636
- "color": "#000000",
637
- "fontFamily": "Moderat-Regular",
638
- "fontSize": 32,
639
- "lineHeight": 38.4,
640
- }
641
- }
642
- suppressHighlighting={true}
643
- >
644
- no
645
- </Text>
646
- </View>
647
- <View
648
- style={
649
- {
650
- "display": "none",
651
- }
652
- }
653
- >
654
- <Text
655
- style={
656
- {
657
- "color": "#000000",
658
- "fontFamily": "Moderat-Regular",
659
- "fontSize": 32,
660
- "lineHeight": 38.4,
661
- }
662
- }
663
- suppressHighlighting={true}
664
- >
665
- yes
666
- </Text>
667
- </View>
668
- </View>
669
- </View>
670
- </View>
671
- </View>
672
- </View>
673
- <View
674
- style={
675
- {
676
- "alignItems": "stretch",
677
- "flexDirection": "column",
678
- "marginBottom": 32,
679
- "marginLeft": -16,
680
- "marginRight": -16,
681
- "paddingLeft": 16,
682
- "paddingRight": 16,
683
- }
684
- }
685
- >
686
- <Text
687
- style={
688
- {
689
- "color": "#000000",
690
- "fontFamily": "Moderat-Black",
691
- "fontSize": 40,
692
- "lineHeight": 44,
693
- "marginBottom": 32,
694
- }
695
- }
696
- suppressHighlighting={true}
697
- >
698
- Mode "SwitchBreakpointsUsingNull"
699
- </Text>
700
- <View
701
- style={
702
- {
703
- "alignItems": "stretch",
704
- "flexDirection": "column",
705
- "marginBottom": 16,
706
- "marginLeft": -16,
707
- "marginRight": -16,
708
- "paddingLeft": 16,
709
- "paddingRight": 16,
710
- }
711
- }
712
- >
713
- <Text
714
- style={
715
- {
716
- "color": "#000000",
717
- "fontFamily": "Moderat-Black",
718
- "fontSize": 32,
719
- "lineHeight": 38.4,
720
- "marginBottom": 12,
721
- }
722
- }
723
- suppressHighlighting={true}
724
- >
725
- Current breakpoint
726
- </Text>
727
- <Text
728
- style={
729
- {
730
- "color": "#000000",
731
- "fontFamily": "Moderat-Regular",
732
- "fontSize": 32,
733
- "lineHeight": 38.4,
734
- }
735
- }
736
- suppressHighlighting={true}
737
- >
738
- small
739
- </Text>
740
- </View>
741
- <View
742
- style={
743
- {
744
- "alignItems": "stretch",
745
- "flexDirection": "column",
746
- "marginBottom": 16,
747
- "marginLeft": -16,
748
- "marginRight": -16,
749
- "paddingLeft": 16,
750
- "paddingRight": 16,
751
- }
752
- }
753
- >
754
- <Text
755
- style={
756
- {
757
- "color": "#000000",
758
- "fontFamily": "Moderat-Black",
759
- "fontSize": 32,
760
- "lineHeight": 38.4,
761
- "marginBottom": 12,
762
- }
763
- }
764
- suppressHighlighting={true}
765
- >
766
- In Breakpoint
767
- </Text>
768
- <View
769
- style={
770
- {
771
- "display": "flex",
772
- "flexDirection": "row",
773
- "marginBottom": 16,
774
- "marginTop": -4,
775
- }
776
- }
777
- >
778
- <View
779
- style={
780
- {
781
- "display": "flex",
782
- "flexBasis": 0,
783
- "flexGrow": 1,
784
- "marginBottom": 8,
785
- "marginTop": 8,
786
- "paddingBottom": 0,
787
- "paddingTop": 0,
788
- }
789
- }
790
- >
791
- <View
792
- style={
793
- {
794
- "alignItems": "stretch",
795
- "flexDirection": "column",
796
- }
797
- }
798
- >
799
- <Text
800
- numberOfLines={1}
801
- style={
802
- {
803
- "fontFamily": "Moderat-Black",
804
- "fontSize": 24,
805
- "lineHeight": 31.2,
806
- "marginBottom": 12,
807
- }
808
- }
809
- suppressHighlighting={true}
810
- >
811
- base
812
- </Text>
813
- <Text
814
- style={
815
- {
816
- "color": "#000000",
817
- "fontFamily": "Moderat-Regular",
818
- "fontSize": 32,
819
- "lineHeight": 38.4,
820
- }
821
- }
822
- suppressHighlighting={true}
823
- >
824
- no
825
- </Text>
826
- </View>
827
- </View>
828
- <View
829
- style={
830
- {
831
- "display": "flex",
832
- "flexBasis": 0,
833
- "flexGrow": 1,
834
- "marginBottom": 8,
835
- "marginTop": 8,
836
- "paddingBottom": 0,
837
- "paddingTop": 0,
838
- }
839
- }
840
- >
841
- <View
842
- style={
843
- {
844
- "alignItems": "stretch",
845
- "flexDirection": "column",
846
- }
847
- }
848
- >
849
- <Text
850
- numberOfLines={1}
851
- style={
852
- {
853
- "fontFamily": "Moderat-Black",
854
- "fontSize": 24,
855
- "lineHeight": 31.2,
856
- "marginBottom": 12,
857
- }
858
- }
859
- suppressHighlighting={true}
860
- >
861
- small
862
- </Text>
863
- <Text
864
- style={
865
- {
866
- "color": "#000000",
867
- "fontFamily": "Moderat-Regular",
868
- "fontSize": 32,
869
- "lineHeight": 38.4,
870
- }
871
- }
872
- suppressHighlighting={true}
873
- >
874
- yes
875
- </Text>
876
- </View>
877
- </View>
878
- <View
879
- style={
880
- {
881
- "display": "flex",
882
- "flexBasis": 0,
883
- "flexGrow": 1,
884
- "marginBottom": 8,
885
- "marginTop": 8,
886
- "paddingBottom": 0,
887
- "paddingTop": 0,
888
- }
889
- }
890
- >
891
- <View
892
- style={
893
- {
894
- "alignItems": "stretch",
895
- "flexDirection": "column",
896
- }
897
- }
898
- >
899
- <Text
900
- numberOfLines={1}
901
- style={
902
- {
903
- "fontFamily": "Moderat-Black",
904
- "fontSize": 24,
905
- "lineHeight": 31.2,
906
- "marginBottom": 12,
907
- }
908
- }
909
- suppressHighlighting={true}
910
- >
911
- medium
912
- </Text>
913
- <Text
914
- style={
915
- {
916
- "color": "#000000",
917
- "fontFamily": "Moderat-Regular",
918
- "fontSize": 32,
919
- "lineHeight": 38.4,
920
- }
921
- }
922
- suppressHighlighting={true}
923
- >
924
- no
925
- </Text>
926
- </View>
927
- </View>
928
- <View
929
- style={
930
- {
931
- "display": "flex",
932
- "flexBasis": 0,
933
- "flexGrow": 1,
934
- "marginBottom": 8,
935
- "marginTop": 8,
936
- "paddingBottom": 0,
937
- "paddingTop": 0,
938
- }
939
- }
940
- >
941
- <View
942
- style={
943
- {
944
- "alignItems": "stretch",
945
- "flexDirection": "column",
946
- }
947
- }
948
- >
949
- <Text
950
- numberOfLines={1}
951
- style={
952
- {
953
- "fontFamily": "Moderat-Black",
954
- "fontSize": 24,
955
- "lineHeight": 31.2,
956
- "marginBottom": 12,
957
- }
958
- }
959
- suppressHighlighting={true}
960
- >
961
- large
962
- </Text>
963
- <Text
964
- style={
965
- {
966
- "color": "#000000",
967
- "fontFamily": "Moderat-Regular",
968
- "fontSize": 32,
969
- "lineHeight": 38.4,
970
- }
971
- }
972
- suppressHighlighting={true}
973
- >
974
- no
975
- </Text>
976
- </View>
977
- </View>
978
- <View
979
- style={
980
- {
981
- "display": "flex",
982
- "flexBasis": 0,
983
- "flexGrow": 1,
984
- "marginBottom": 8,
985
- "marginTop": 8,
986
- "paddingBottom": 0,
987
- "paddingTop": 0,
988
- }
989
- }
990
- >
991
- <View
992
- style={
993
- {
994
- "alignItems": "stretch",
995
- "flexDirection": "column",
996
- }
997
- }
998
- >
999
- <Text
1000
- numberOfLines={1}
1001
- style={
1002
- {
1003
- "fontFamily": "Moderat-Black",
1004
- "fontSize": 24,
1005
- "lineHeight": 31.2,
1006
- "marginBottom": 12,
1007
- }
1008
- }
1009
- suppressHighlighting={true}
1010
- >
1011
- wide
1012
- </Text>
1013
- <Text
1014
- style={
1015
- {
1016
- "color": "#000000",
1017
- "fontFamily": "Moderat-Regular",
1018
- "fontSize": 32,
1019
- "lineHeight": 38.4,
1020
- }
1021
- }
1022
- suppressHighlighting={true}
1023
- >
1024
- no
1025
- </Text>
1026
- </View>
1027
- </View>
1028
- </View>
1029
- </View>
1030
- </View>
1031
- </RNCSafeAreaProvider>
1032
- `;