@mgcrea/react-native-tailwind 0.6.0 → 0.7.0

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 (57) hide show
  1. package/README.md +437 -10
  2. package/dist/babel/config-loader.ts +1 -23
  3. package/dist/babel/index.cjs +543 -150
  4. package/dist/babel/index.d.ts +27 -2
  5. package/dist/babel/index.test.ts +268 -0
  6. package/dist/babel/index.ts +352 -44
  7. package/dist/components/Pressable.d.ts +2 -0
  8. package/dist/components/TextInput.d.ts +2 -0
  9. package/dist/config/palettes.d.ts +302 -0
  10. package/dist/config/palettes.js +1 -0
  11. package/dist/index.d.ts +3 -0
  12. package/dist/index.js +1 -1
  13. package/dist/parser/__snapshots__/colors.test.js.snap +242 -90
  14. package/dist/parser/__snapshots__/transforms.test.js.snap +58 -0
  15. package/dist/parser/colors.js +1 -1
  16. package/dist/parser/colors.test.js +1 -1
  17. package/dist/parser/layout.js +1 -1
  18. package/dist/parser/layout.test.js +1 -1
  19. package/dist/parser/typography.js +1 -1
  20. package/dist/parser/typography.test.js +1 -1
  21. package/dist/runtime.cjs +2 -0
  22. package/dist/runtime.cjs.map +7 -0
  23. package/dist/runtime.d.ts +139 -0
  24. package/dist/runtime.js +2 -0
  25. package/dist/runtime.js.map +7 -0
  26. package/dist/runtime.test.js +1 -0
  27. package/dist/stubs/tw.d.ts +60 -0
  28. package/dist/stubs/tw.js +1 -0
  29. package/dist/utils/flattenColors.d.ts +16 -0
  30. package/dist/utils/flattenColors.js +1 -0
  31. package/dist/utils/flattenColors.test.js +1 -0
  32. package/dist/utils/modifiers.d.ts +29 -0
  33. package/dist/utils/modifiers.js +1 -0
  34. package/dist/utils/modifiers.test.js +1 -0
  35. package/dist/utils/styleKey.test.js +1 -0
  36. package/package.json +15 -3
  37. package/src/babel/config-loader.ts +1 -23
  38. package/src/babel/index.test.ts +268 -0
  39. package/src/babel/index.ts +352 -44
  40. package/src/components/Pressable.tsx +1 -0
  41. package/src/components/TextInput.tsx +1 -0
  42. package/src/config/palettes.ts +304 -0
  43. package/src/index.ts +5 -0
  44. package/src/parser/colors.test.ts +47 -31
  45. package/src/parser/colors.ts +5 -110
  46. package/src/parser/layout.test.ts +35 -0
  47. package/src/parser/layout.ts +26 -0
  48. package/src/parser/typography.test.ts +10 -0
  49. package/src/parser/typography.ts +8 -0
  50. package/src/runtime.test.ts +325 -0
  51. package/src/runtime.ts +280 -0
  52. package/src/stubs/tw.ts +80 -0
  53. package/src/utils/flattenColors.test.ts +361 -0
  54. package/src/utils/flattenColors.ts +32 -0
  55. package/src/utils/modifiers.test.ts +286 -0
  56. package/src/utils/modifiers.ts +63 -0
  57. package/src/utils/styleKey.test.ts +168 -0
@@ -0,0 +1,302 @@
1
+ export type TailwindPalette = {
2
+ "50": string;
3
+ "100": string;
4
+ "200": string;
5
+ "300": string;
6
+ "400": string;
7
+ "500": string;
8
+ "600": string;
9
+ "700": string;
10
+ "800": string;
11
+ "900": string;
12
+ "950": string;
13
+ };
14
+ export declare const TAILWIND_PALETTES: {
15
+ red: {
16
+ "50": string;
17
+ "100": string;
18
+ "200": string;
19
+ "300": string;
20
+ "400": string;
21
+ "500": string;
22
+ "600": string;
23
+ "700": string;
24
+ "800": string;
25
+ "900": string;
26
+ "950": string;
27
+ };
28
+ orange: {
29
+ "50": string;
30
+ "100": string;
31
+ "200": string;
32
+ "300": string;
33
+ "400": string;
34
+ "500": string;
35
+ "600": string;
36
+ "700": string;
37
+ "800": string;
38
+ "900": string;
39
+ "950": string;
40
+ };
41
+ amber: {
42
+ "50": string;
43
+ "100": string;
44
+ "200": string;
45
+ "300": string;
46
+ "400": string;
47
+ "500": string;
48
+ "600": string;
49
+ "700": string;
50
+ "800": string;
51
+ "900": string;
52
+ "950": string;
53
+ };
54
+ yellow: {
55
+ "50": string;
56
+ "100": string;
57
+ "200": string;
58
+ "300": string;
59
+ "400": string;
60
+ "500": string;
61
+ "600": string;
62
+ "700": string;
63
+ "800": string;
64
+ "900": string;
65
+ "950": string;
66
+ };
67
+ lime: {
68
+ "50": string;
69
+ "100": string;
70
+ "200": string;
71
+ "300": string;
72
+ "400": string;
73
+ "500": string;
74
+ "600": string;
75
+ "700": string;
76
+ "800": string;
77
+ "900": string;
78
+ "950": string;
79
+ };
80
+ green: {
81
+ "50": string;
82
+ "100": string;
83
+ "200": string;
84
+ "300": string;
85
+ "400": string;
86
+ "500": string;
87
+ "600": string;
88
+ "700": string;
89
+ "800": string;
90
+ "900": string;
91
+ "950": string;
92
+ };
93
+ emerald: {
94
+ "50": string;
95
+ "100": string;
96
+ "200": string;
97
+ "300": string;
98
+ "400": string;
99
+ "500": string;
100
+ "600": string;
101
+ "700": string;
102
+ "800": string;
103
+ "900": string;
104
+ "950": string;
105
+ };
106
+ teal: {
107
+ "50": string;
108
+ "100": string;
109
+ "200": string;
110
+ "300": string;
111
+ "400": string;
112
+ "500": string;
113
+ "600": string;
114
+ "700": string;
115
+ "800": string;
116
+ "900": string;
117
+ "950": string;
118
+ };
119
+ cyan: {
120
+ "50": string;
121
+ "100": string;
122
+ "200": string;
123
+ "300": string;
124
+ "400": string;
125
+ "500": string;
126
+ "600": string;
127
+ "700": string;
128
+ "800": string;
129
+ "900": string;
130
+ "950": string;
131
+ };
132
+ sky: {
133
+ "50": string;
134
+ "100": string;
135
+ "200": string;
136
+ "300": string;
137
+ "400": string;
138
+ "500": string;
139
+ "600": string;
140
+ "700": string;
141
+ "800": string;
142
+ "900": string;
143
+ "950": string;
144
+ };
145
+ blue: {
146
+ "50": string;
147
+ "100": string;
148
+ "200": string;
149
+ "300": string;
150
+ "400": string;
151
+ "500": string;
152
+ "600": string;
153
+ "700": string;
154
+ "800": string;
155
+ "900": string;
156
+ "950": string;
157
+ };
158
+ indigo: {
159
+ "50": string;
160
+ "100": string;
161
+ "200": string;
162
+ "300": string;
163
+ "400": string;
164
+ "500": string;
165
+ "600": string;
166
+ "700": string;
167
+ "800": string;
168
+ "900": string;
169
+ "950": string;
170
+ };
171
+ violet: {
172
+ "50": string;
173
+ "100": string;
174
+ "200": string;
175
+ "300": string;
176
+ "400": string;
177
+ "500": string;
178
+ "600": string;
179
+ "700": string;
180
+ "800": string;
181
+ "900": string;
182
+ "950": string;
183
+ };
184
+ purple: {
185
+ "50": string;
186
+ "100": string;
187
+ "200": string;
188
+ "300": string;
189
+ "400": string;
190
+ "500": string;
191
+ "600": string;
192
+ "700": string;
193
+ "800": string;
194
+ "900": string;
195
+ "950": string;
196
+ };
197
+ fuchsia: {
198
+ "50": string;
199
+ "100": string;
200
+ "200": string;
201
+ "300": string;
202
+ "400": string;
203
+ "500": string;
204
+ "600": string;
205
+ "700": string;
206
+ "800": string;
207
+ "900": string;
208
+ "950": string;
209
+ };
210
+ pink: {
211
+ "50": string;
212
+ "100": string;
213
+ "200": string;
214
+ "300": string;
215
+ "400": string;
216
+ "500": string;
217
+ "600": string;
218
+ "700": string;
219
+ "800": string;
220
+ "900": string;
221
+ "950": string;
222
+ };
223
+ rose: {
224
+ "50": string;
225
+ "100": string;
226
+ "200": string;
227
+ "300": string;
228
+ "400": string;
229
+ "500": string;
230
+ "600": string;
231
+ "700": string;
232
+ "800": string;
233
+ "900": string;
234
+ "950": string;
235
+ };
236
+ slate: {
237
+ "50": string;
238
+ "100": string;
239
+ "200": string;
240
+ "300": string;
241
+ "400": string;
242
+ "500": string;
243
+ "600": string;
244
+ "700": string;
245
+ "800": string;
246
+ "900": string;
247
+ "950": string;
248
+ };
249
+ gray: {
250
+ "50": string;
251
+ "100": string;
252
+ "200": string;
253
+ "300": string;
254
+ "400": string;
255
+ "500": string;
256
+ "600": string;
257
+ "700": string;
258
+ "800": string;
259
+ "900": string;
260
+ "950": string;
261
+ };
262
+ zinc: {
263
+ "50": string;
264
+ "100": string;
265
+ "200": string;
266
+ "300": string;
267
+ "400": string;
268
+ "500": string;
269
+ "600": string;
270
+ "700": string;
271
+ "800": string;
272
+ "900": string;
273
+ "950": string;
274
+ };
275
+ neutral: {
276
+ "50": string;
277
+ "100": string;
278
+ "200": string;
279
+ "300": string;
280
+ "400": string;
281
+ "500": string;
282
+ "600": string;
283
+ "700": string;
284
+ "800": string;
285
+ "900": string;
286
+ "950": string;
287
+ };
288
+ stone: {
289
+ "50": string;
290
+ "100": string;
291
+ "200": string;
292
+ "300": string;
293
+ "400": string;
294
+ "500": string;
295
+ "600": string;
296
+ "700": string;
297
+ "800": string;
298
+ "900": string;
299
+ "950": string;
300
+ };
301
+ };
302
+ export type TailwindColor = keyof typeof TAILWIND_PALETTES;
@@ -0,0 +1 @@
1
+ Object.defineProperty(exports,"__esModule",{value:true});exports.TAILWIND_PALETTES=void 0;var TAILWIND_PALETTES=exports.TAILWIND_PALETTES={red:{"50":"#fef2f2","100":"#ffe2e2","200":"#ffc9c9","300":"#ffa2a2","400":"#ff6467","500":"#fb2c36","600":"#e7000b","700":"#c10007","800":"#9f0712","900":"#82181a","950":"#460809"},orange:{"50":"#fff7ed","100":"#ffedd4","200":"#ffd6a7","300":"#ffb86a","400":"#ff8904","500":"#ff6900","600":"#f54900","700":"#ca3500","800":"#9f2d00","900":"#7e2a0c","950":"#441306"},amber:{"50":"#fffbeb","100":"#fef3c6","200":"#fee685","300":"#ffd230","400":"#ffb900","500":"#fe9a00","600":"#e17100","700":"#bb4d00","800":"#973c00","900":"#7b3306","950":"#461901"},yellow:{"50":"#fefce8","100":"#fef9c2","200":"#fff085","300":"#ffdf20","400":"#fdc700","500":"#f0b100","600":"#d08700","700":"#a65f00","800":"#894b00","900":"#733e0a","950":"#432004"},lime:{"50":"#f7fee7","100":"#ecfcca","200":"#d8f999","300":"#bbf451","400":"#9ae600","500":"#7ccf00","600":"#5ea500","700":"#497d00","800":"#3c6300","900":"#35530e","950":"#192e03"},green:{"50":"#f0fdf4","100":"#dcfce7","200":"#b9f8cf","300":"#7bf1a8","400":"#05df72","500":"#00c950","600":"#00a63e","700":"#008236","800":"#016630","900":"#0d542b","950":"#032e15"},emerald:{"50":"#ecfdf5","100":"#d0fae5","200":"#a4f4cf","300":"#5ee9b5","400":"#00d492","500":"#00bc7d","600":"#009966","700":"#007a55","800":"#006045","900":"#004f3b","950":"#002c22"},teal:{"50":"#f0fdfa","100":"#cbfbf1","200":"#96f7e4","300":"#46ecd5","400":"#00d5be","500":"#00bba7","600":"#009689","700":"#00786f","800":"#005f5a","900":"#0b4f4a","950":"#022f2e"},cyan:{"50":"#ecfeff","100":"#cefafe","200":"#a2f4fd","300":"#53eafd","400":"#00d3f2","500":"#00b8db","600":"#0092b8","700":"#007595","800":"#005f78","900":"#104e64","950":"#053345"},sky:{"50":"#f0f9ff","100":"#dff2fe","200":"#b8e6fe","300":"#74d4ff","400":"#00bcff","500":"#00a6f4","600":"#0084d1","700":"#0069a8","800":"#00598a","900":"#024a70","950":"#052f4a"},blue:{"50":"#eff6ff","100":"#dbeafe","200":"#bedbff","300":"#8ec5ff","400":"#51a2ff","500":"#2b7fff","600":"#155dfc","700":"#1447e6","800":"#193cb8","900":"#1c398e","950":"#162456"},indigo:{"50":"#eef2ff","100":"#e0e7ff","200":"#c6d2ff","300":"#a3b3ff","400":"#7c86ff","500":"#615fff","600":"#4f39f6","700":"#432dd7","800":"#372aac","900":"#312c85","950":"#1e1a4d"},violet:{"50":"#f5f3ff","100":"#ede9fe","200":"#ddd6ff","300":"#c4b4ff","400":"#a684ff","500":"#8e51ff","600":"#7f22fe","700":"#7008e7","800":"#5d0ec0","900":"#4d179a","950":"#2f0d68"},purple:{"50":"#faf5ff","100":"#f3e8ff","200":"#e9d4ff","300":"#dab2ff","400":"#c27aff","500":"#ad46ff","600":"#9810fa","700":"#8200db","800":"#6e11b0","900":"#59168b","950":"#3c0366"},fuchsia:{"50":"#fdf4ff","100":"#fae8ff","200":"#f6cfff","300":"#f4a8ff","400":"#ed6aff","500":"#e12afb","600":"#c800de","700":"#a800b7","800":"#8a0194","900":"#721378","950":"#4b004f"},pink:{"50":"#fdf2f8","100":"#fce7f3","200":"#fccee8","300":"#fda5d5","400":"#fb64b6","500":"#f6339a","600":"#e60076","700":"#c6005c","800":"#a3004c","900":"#861043","950":"#510424"},rose:{"50":"#fff1f2","100":"#ffe4e6","200":"#ffccd3","300":"#ffa1ad","400":"#ff637e","500":"#ff2056","600":"#ec003f","700":"#c70036","800":"#a50036","900":"#8b0836","950":"#4d0218"},slate:{"50":"#f8fafc","100":"#f1f5f9","200":"#e2e8f0","300":"#cad5e2","400":"#90a1b9","500":"#62748e","600":"#45556c","700":"#314158","800":"#1d293d","900":"#0f172b","950":"#020618"},gray:{"50":"#f9fafb","100":"#f3f4f6","200":"#e5e7eb","300":"#d1d5dc","400":"#99a1af","500":"#6a7282","600":"#4a5565","700":"#364153","800":"#1e2939","900":"#101828","950":"#030712"},zinc:{"50":"#fafafa","100":"#f4f4f5","200":"#e4e4e7","300":"#d4d4d8","400":"#9f9fa9","500":"#71717b","600":"#52525c","700":"#3f3f46","800":"#27272a","900":"#18181b","950":"#09090b"},neutral:{"50":"#fafafa","100":"#f5f5f5","200":"#e5e5e5","300":"#d4d4d4","400":"#a1a1a1","500":"#737373","600":"#525252","700":"#404040","800":"#262626","900":"#171717","950":"#0a0a0a"},stone:{"50":"#fafaf9","100":"#f5f5f4","200":"#e7e5e4","300":"#d6d3d1","400":"#a6a09b","500":"#79716b","600":"#57534d","700":"#44403b","800":"#292524","900":"#1c1917","950":"#0c0a09"}};
package/dist/index.d.ts CHANGED
@@ -2,7 +2,10 @@
2
2
  * @mgcrea/react-native-tailwind
3
3
  * Compile-time Tailwind CSS for React Native
4
4
  */
5
+ export { tw, twStyle } from "./stubs/tw.js";
6
+ export type { NativeStyle, TwStyle } from "./stubs/tw.js";
5
7
  export { parseClass, parseClassName } from "./parser";
8
+ export { flattenColors } from "./utils/flattenColors";
6
9
  export { generateStyleKey } from "./utils/styleKey";
7
10
  export type { RNStyle, StyleObject } from "./types";
8
11
  export { parseAspectRatio, parseBorder, parseColor, parseLayout, parseShadow, parseSizing, parseSpacing, parseTypography, } from "./parser";
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"ASPECT_RATIO_PRESETS",{enumerable:true,get:function get(){return _aspectRatio.ASPECT_RATIO_PRESETS;}});Object.defineProperty(exports,"COLORS",{enumerable:true,get:function get(){return _colors.COLORS;}});Object.defineProperty(exports,"FONT_SIZES",{enumerable:true,get:function get(){return _typography.FONT_SIZES;}});Object.defineProperty(exports,"INSET_SCALE",{enumerable:true,get:function get(){return _layout.INSET_SCALE;}});Object.defineProperty(exports,"LETTER_SPACING_SCALE",{enumerable:true,get:function get(){return _typography.LETTER_SPACING_SCALE;}});Object.defineProperty(exports,"Pressable",{enumerable:true,get:function get(){return _Pressable.Pressable;}});Object.defineProperty(exports,"SHADOW_SCALE",{enumerable:true,get:function get(){return _shadows.SHADOW_SCALE;}});Object.defineProperty(exports,"SIZE_PERCENTAGES",{enumerable:true,get:function get(){return _sizing.SIZE_PERCENTAGES;}});Object.defineProperty(exports,"SIZE_SCALE",{enumerable:true,get:function get(){return _sizing.SIZE_SCALE;}});Object.defineProperty(exports,"SPACING_SCALE",{enumerable:true,get:function get(){return _spacing.SPACING_SCALE;}});Object.defineProperty(exports,"TextInput",{enumerable:true,get:function get(){return _TextInput.TextInput;}});Object.defineProperty(exports,"Z_INDEX_SCALE",{enumerable:true,get:function get(){return _layout.Z_INDEX_SCALE;}});Object.defineProperty(exports,"generateStyleKey",{enumerable:true,get:function get(){return _styleKey.generateStyleKey;}});Object.defineProperty(exports,"parseAspectRatio",{enumerable:true,get:function get(){return _parser.parseAspectRatio;}});Object.defineProperty(exports,"parseBorder",{enumerable:true,get:function get(){return _parser.parseBorder;}});Object.defineProperty(exports,"parseClass",{enumerable:true,get:function get(){return _parser.parseClass;}});Object.defineProperty(exports,"parseClassName",{enumerable:true,get:function get(){return _parser.parseClassName;}});Object.defineProperty(exports,"parseColor",{enumerable:true,get:function get(){return _parser.parseColor;}});Object.defineProperty(exports,"parseLayout",{enumerable:true,get:function get(){return _parser.parseLayout;}});Object.defineProperty(exports,"parseShadow",{enumerable:true,get:function get(){return _parser.parseShadow;}});Object.defineProperty(exports,"parseSizing",{enumerable:true,get:function get(){return _parser.parseSizing;}});Object.defineProperty(exports,"parseSpacing",{enumerable:true,get:function get(){return _parser.parseSpacing;}});Object.defineProperty(exports,"parseTypography",{enumerable:true,get:function get(){return _parser.parseTypography;}});var _parser=require("./parser");var _styleKey=require("./utils/styleKey");var _aspectRatio=require("./parser/aspectRatio");var _colors=require("./parser/colors");var _layout=require("./parser/layout");var _shadows=require("./parser/shadows");var _sizing=require("./parser/sizing");var _spacing=require("./parser/spacing");var _typography=require("./parser/typography");var _Pressable=require("./components/Pressable");var _TextInput=require("./components/TextInput");
1
+ Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"ASPECT_RATIO_PRESETS",{enumerable:true,get:function get(){return _aspectRatio.ASPECT_RATIO_PRESETS;}});Object.defineProperty(exports,"COLORS",{enumerable:true,get:function get(){return _colors.COLORS;}});Object.defineProperty(exports,"FONT_SIZES",{enumerable:true,get:function get(){return _typography.FONT_SIZES;}});Object.defineProperty(exports,"INSET_SCALE",{enumerable:true,get:function get(){return _layout.INSET_SCALE;}});Object.defineProperty(exports,"LETTER_SPACING_SCALE",{enumerable:true,get:function get(){return _typography.LETTER_SPACING_SCALE;}});Object.defineProperty(exports,"Pressable",{enumerable:true,get:function get(){return _Pressable.Pressable;}});Object.defineProperty(exports,"SHADOW_SCALE",{enumerable:true,get:function get(){return _shadows.SHADOW_SCALE;}});Object.defineProperty(exports,"SIZE_PERCENTAGES",{enumerable:true,get:function get(){return _sizing.SIZE_PERCENTAGES;}});Object.defineProperty(exports,"SIZE_SCALE",{enumerable:true,get:function get(){return _sizing.SIZE_SCALE;}});Object.defineProperty(exports,"SPACING_SCALE",{enumerable:true,get:function get(){return _spacing.SPACING_SCALE;}});Object.defineProperty(exports,"TextInput",{enumerable:true,get:function get(){return _TextInput.TextInput;}});Object.defineProperty(exports,"Z_INDEX_SCALE",{enumerable:true,get:function get(){return _layout.Z_INDEX_SCALE;}});Object.defineProperty(exports,"flattenColors",{enumerable:true,get:function get(){return _flattenColors.flattenColors;}});Object.defineProperty(exports,"generateStyleKey",{enumerable:true,get:function get(){return _styleKey.generateStyleKey;}});Object.defineProperty(exports,"parseAspectRatio",{enumerable:true,get:function get(){return _parser.parseAspectRatio;}});Object.defineProperty(exports,"parseBorder",{enumerable:true,get:function get(){return _parser.parseBorder;}});Object.defineProperty(exports,"parseClass",{enumerable:true,get:function get(){return _parser.parseClass;}});Object.defineProperty(exports,"parseClassName",{enumerable:true,get:function get(){return _parser.parseClassName;}});Object.defineProperty(exports,"parseColor",{enumerable:true,get:function get(){return _parser.parseColor;}});Object.defineProperty(exports,"parseLayout",{enumerable:true,get:function get(){return _parser.parseLayout;}});Object.defineProperty(exports,"parseShadow",{enumerable:true,get:function get(){return _parser.parseShadow;}});Object.defineProperty(exports,"parseSizing",{enumerable:true,get:function get(){return _parser.parseSizing;}});Object.defineProperty(exports,"parseSpacing",{enumerable:true,get:function get(){return _parser.parseSpacing;}});Object.defineProperty(exports,"parseTypography",{enumerable:true,get:function get(){return _parser.parseTypography;}});Object.defineProperty(exports,"tw",{enumerable:true,get:function get(){return _tw.tw;}});Object.defineProperty(exports,"twStyle",{enumerable:true,get:function get(){return _tw.twStyle;}});var _tw=require("./stubs/tw.js");var _parser=require("./parser");var _flattenColors=require("./utils/flattenColors");var _styleKey=require("./utils/styleKey");var _aspectRatio=require("./parser/aspectRatio");var _colors=require("./parser/colors");var _layout=require("./parser/layout");var _shadows=require("./parser/shadows");var _sizing=require("./parser/sizing");var _spacing=require("./parser/spacing");var _typography=require("./parser/typography");var _Pressable=require("./components/Pressable");var _TextInput=require("./components/TextInput");