decathlon-ui 0.3.0 → 0.3.2

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 (41) hide show
  1. package/dist/components/button/button.props.d.ts +5 -2
  2. package/dist/components/button/button.props.d.ts.map +1 -1
  3. package/dist/components/button/button.props.js +3 -0
  4. package/dist/components/button/button.styles.d.ts +423 -9
  5. package/dist/components/button/button.styles.d.ts.map +1 -1
  6. package/dist/components/button/button.styles.js +77 -25
  7. package/dist/components/index.d.ts +2 -0
  8. package/dist/components/index.d.ts.map +1 -1
  9. package/dist/components/index.js +2 -0
  10. package/dist/components/information-card/index.d.ts +3 -0
  11. package/dist/components/information-card/index.d.ts.map +1 -0
  12. package/dist/components/information-card/index.js +1 -0
  13. package/dist/components/information-card/information-card.component.d.ts +4 -0
  14. package/dist/components/information-card/information-card.component.d.ts.map +1 -0
  15. package/dist/components/information-card/information-card.component.js +45 -0
  16. package/dist/components/information-card/information-card.styles.d.ts +30 -0
  17. package/dist/components/information-card/information-card.styles.d.ts.map +1 -0
  18. package/dist/components/information-card/information-card.styles.js +37 -0
  19. package/dist/components/information-card/information-card.types.d.ts +32 -0
  20. package/dist/components/information-card/information-card.types.d.ts.map +1 -0
  21. package/dist/components/information-card/information-card.types.js +1 -0
  22. package/dist/components/input/error-message/error-message.d.ts.map +1 -1
  23. package/dist/components/input/error-message/error-message.js +29 -26
  24. package/dist/components/input/input.component.d.ts +2 -1
  25. package/dist/components/input/input.component.d.ts.map +1 -1
  26. package/dist/components/input/input.component.js +2 -3
  27. package/dist/components/input/input.styles.d.ts +15 -14
  28. package/dist/components/input/input.styles.d.ts.map +1 -1
  29. package/dist/components/input/input.styles.js +16 -15
  30. package/dist/components/product-card/product-card.component.js +1 -1
  31. package/dist/components/select/select.component.d.ts.map +1 -1
  32. package/dist/components/select/select.component.js +1 -3
  33. package/dist/components/select/select.styles.d.ts +19 -18
  34. package/dist/components/select/select.styles.d.ts.map +1 -1
  35. package/dist/components/select/select.styles.js +20 -19
  36. package/dist/themes/index.d.ts +1 -0
  37. package/dist/themes/index.d.ts.map +1 -1
  38. package/dist/themes/light.d.ts +1 -0
  39. package/dist/themes/light.d.ts.map +1 -1
  40. package/dist/themes/light.js +1 -0
  41. package/package.json +1 -1
package/dist/components/button/button.props.d.ts CHANGED
@@ -2,7 +2,7 @@ export type ButtonProps = {
2
2
  onPress?: () => void;
3
3
  label?: string;
4
4
  loading?: boolean;
5
- variant?: "primary" | "primary-inverted" | "secondary" | "secondary-inverted" | "converted";
5
+ variant?: "primary" | "primary-inverted" | "secondary" | "secondary-inverted" | "converted" | "danger" | "danger-inverted" | "danger-outline";
6
6
  fullWidth?: boolean;
7
7
  size?: "small" | "medium" | "large";
8
8
  icon?: any;
@@ -13,7 +13,10 @@ export declare enum ButtonVariant {
13
13
  primaryInverted = "primary-inverted",
14
14
  secondary = "secondary",
15
15
  secondaryInverted = "secondary-inverted",
16
- converted = "converted"
16
+ converted = "converted",
17
+ danger = "danger",
18
+ dangerInverted = "danger-inverted",
19
+ dangerOutline = "danger-outline"
17
20
  }
18
21
  export declare enum ButtonSize {
19
22
  small = "small",
package/dist/components/button/button.props.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"button.props.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.props.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EACJ,SAAS,GACT,kBAAkB,GAClB,WAAW,GACX,oBAAoB,GACpB,WAAW,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,oBAAY,aAAa;IACvB,OAAO,YAAY;IACnB,eAAe,qBAAqB;IACpC,SAAS,cAAc;IACvB,iBAAiB,uBAAuB;IACxC,SAAS,cAAc;CACxB;AAED,oBAAY,UAAU;IACpB,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB"}
1
+ {"version":3,"file":"button.props.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.props.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EACJ,SAAS,GACT,kBAAkB,GAClB,WAAW,GACX,oBAAoB,GACpB,WAAW,GACX,QAAQ,GACR,iBAAiB,GACjB,gBAAgB,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,oBAAY,aAAa;IACvB,OAAO,YAAY;IACnB,eAAe,qBAAqB;IACpC,SAAS,cAAc;IACvB,iBAAiB,uBAAuB;IACxC,SAAS,cAAc;IACvB,MAAM,WAAW;IACjB,cAAc,oBAAoB;IAClC,aAAa,mBAAmB;CACjC;AAED,oBAAY,UAAU;IACpB,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB"}
package/dist/components/button/button.props.js CHANGED
@@ -5,6 +5,9 @@ export var ButtonVariant;
5
5
  ButtonVariant["secondary"] = "secondary";
6
6
  ButtonVariant["secondaryInverted"] = "secondary-inverted";
7
7
  ButtonVariant["converted"] = "converted";
8
+ ButtonVariant["danger"] = "danger";
9
+ ButtonVariant["dangerInverted"] = "danger-inverted";
10
+ ButtonVariant["dangerOutline"] = "danger-outline";
8
11
  })(ButtonVariant || (ButtonVariant = {}));
9
12
  export var ButtonSize;
10
13
  (function (ButtonSize) {
package/dist/components/button/button.styles.d.ts CHANGED
@@ -5,6 +5,42 @@ export declare const useButtonStyles: ({ variant, fullWidth, size, }: {
5
5
  size?: string | undefined;
6
6
  }) => {
7
7
  container: {
8
+ width: "auto" | "100%";
9
+ borderRadius: number;
10
+ justifyContent: "center";
11
+ alignItems: "center";
12
+ flexDirection: "row";
13
+ gap: number;
14
+ backgroundColor: "#101010";
15
+ borderWidth?: undefined;
16
+ borderColor?: undefined;
17
+ paddingHorizontal: 16;
18
+ paddingVertical: number;
19
+ } | {
20
+ width: "auto" | "100%";
21
+ borderRadius: number;
22
+ justifyContent: "center";
23
+ alignItems: "center";
24
+ flexDirection: "row";
25
+ gap: number;
26
+ backgroundColor: "#FFFFFF";
27
+ borderWidth?: undefined;
28
+ borderColor?: undefined;
29
+ paddingHorizontal: 16;
30
+ paddingVertical: number;
31
+ } | {
32
+ width: "auto" | "100%";
33
+ borderRadius: number;
34
+ justifyContent: "center";
35
+ alignItems: "center";
36
+ flexDirection: "row";
37
+ gap: number;
38
+ backgroundColor: string;
39
+ borderWidth: number;
40
+ borderColor: "#B3BAC3";
41
+ paddingHorizontal: 16;
42
+ paddingVertical: number;
43
+ } | {
8
44
  width: "auto" | "100%";
9
45
  borderRadius: number;
10
46
  justifyContent: "center";
@@ -12,9 +48,57 @@ export declare const useButtonStyles: ({ variant, fullWidth, size, }: {
12
48
  flexDirection: "row";
13
49
  gap: number;
14
50
  backgroundColor: string;
51
+ borderWidth: number;
52
+ borderColor: "#B3BAC3";
53
+ paddingHorizontal: 16;
54
+ paddingVertical: number;
55
+ } | {
56
+ width: "auto" | "100%";
57
+ borderRadius: number;
58
+ justifyContent: "center";
59
+ alignItems: "center";
60
+ flexDirection: "row";
61
+ gap: number;
62
+ backgroundColor: "#3643BA";
63
+ borderWidth?: undefined;
64
+ borderColor?: undefined;
65
+ paddingHorizontal: 16;
66
+ paddingVertical: number;
67
+ } | {
68
+ width: "auto" | "100%";
69
+ borderRadius: number;
70
+ justifyContent: "center";
71
+ alignItems: "center";
72
+ flexDirection: "row";
73
+ gap: number;
74
+ backgroundColor: "#FFE4D6";
75
+ borderWidth?: undefined;
76
+ borderColor?: undefined;
77
+ paddingHorizontal: 16;
78
+ paddingVertical: number;
79
+ } | {
80
+ width: "auto" | "100%";
81
+ borderRadius: number;
82
+ justifyContent: "center";
83
+ alignItems: "center";
84
+ flexDirection: "row";
85
+ gap: number;
86
+ backgroundColor: "#FFFFFF";
15
87
  borderWidth?: undefined;
16
88
  borderColor?: undefined;
17
- paddingHorizontal: number;
89
+ paddingHorizontal: 16;
90
+ paddingVertical: number;
91
+ } | {
92
+ width: "auto" | "100%";
93
+ borderRadius: number;
94
+ justifyContent: "center";
95
+ alignItems: "center";
96
+ flexDirection: "row";
97
+ gap: number;
98
+ backgroundColor: string;
99
+ borderWidth: number;
100
+ borderColor: "#FFE4D6";
101
+ paddingHorizontal: 16;
18
102
  paddingVertical: number;
19
103
  } | {
20
104
  width: "auto" | "100%";
@@ -25,23 +109,353 @@ export declare const useButtonStyles: ({ variant, fullWidth, size, }: {
25
109
  gap: number;
26
110
  backgroundColor: string;
27
111
  borderWidth: number;
28
- borderColor: string;
29
- paddingHorizontal: number;
112
+ borderColor: "#E3262F";
113
+ paddingHorizontal: 16;
30
114
  paddingVertical: number;
115
+ } | {
116
+ width: "auto" | "100%";
117
+ borderRadius: number;
118
+ justifyContent: "center";
119
+ alignItems: "center";
120
+ flexDirection: "row";
121
+ gap: number;
122
+ backgroundColor: "#101010";
123
+ borderWidth?: undefined;
124
+ borderColor?: undefined;
125
+ paddingHorizontal: 16;
126
+ paddingVertical: 12;
127
+ } | {
128
+ width: "auto" | "100%";
129
+ borderRadius: number;
130
+ justifyContent: "center";
131
+ alignItems: "center";
132
+ flexDirection: "row";
133
+ gap: number;
134
+ backgroundColor: "#FFFFFF";
135
+ borderWidth?: undefined;
136
+ borderColor?: undefined;
137
+ paddingHorizontal: 16;
138
+ paddingVertical: 12;
139
+ } | {
140
+ width: "auto" | "100%";
141
+ borderRadius: number;
142
+ justifyContent: "center";
143
+ alignItems: "center";
144
+ flexDirection: "row";
145
+ gap: number;
146
+ backgroundColor: string;
147
+ borderWidth: number;
148
+ borderColor: "#B3BAC3";
149
+ paddingHorizontal: 16;
150
+ paddingVertical: 12;
151
+ } | {
152
+ width: "auto" | "100%";
153
+ borderRadius: number;
154
+ justifyContent: "center";
155
+ alignItems: "center";
156
+ flexDirection: "row";
157
+ gap: number;
158
+ backgroundColor: string;
159
+ borderWidth: number;
160
+ borderColor: "#B3BAC3";
161
+ paddingHorizontal: 16;
162
+ paddingVertical: 12;
163
+ } | {
164
+ width: "auto" | "100%";
165
+ borderRadius: number;
166
+ justifyContent: "center";
167
+ alignItems: "center";
168
+ flexDirection: "row";
169
+ gap: number;
170
+ backgroundColor: "#3643BA";
171
+ borderWidth?: undefined;
172
+ borderColor?: undefined;
173
+ paddingHorizontal: 16;
174
+ paddingVertical: 12;
175
+ } | {
176
+ width: "auto" | "100%";
177
+ borderRadius: number;
178
+ justifyContent: "center";
179
+ alignItems: "center";
180
+ flexDirection: "row";
181
+ gap: number;
182
+ backgroundColor: "#FFE4D6";
183
+ borderWidth?: undefined;
184
+ borderColor?: undefined;
185
+ paddingHorizontal: 16;
186
+ paddingVertical: 12;
187
+ } | {
188
+ width: "auto" | "100%";
189
+ borderRadius: number;
190
+ justifyContent: "center";
191
+ alignItems: "center";
192
+ flexDirection: "row";
193
+ gap: number;
194
+ backgroundColor: "#FFFFFF";
195
+ borderWidth?: undefined;
196
+ borderColor?: undefined;
197
+ paddingHorizontal: 16;
198
+ paddingVertical: 12;
199
+ } | {
200
+ width: "auto" | "100%";
201
+ borderRadius: number;
202
+ justifyContent: "center";
203
+ alignItems: "center";
204
+ flexDirection: "row";
205
+ gap: number;
206
+ backgroundColor: string;
207
+ borderWidth: number;
208
+ borderColor: "#FFE4D6";
209
+ paddingHorizontal: 16;
210
+ paddingVertical: 12;
211
+ } | {
212
+ width: "auto" | "100%";
213
+ borderRadius: number;
214
+ justifyContent: "center";
215
+ alignItems: "center";
216
+ flexDirection: "row";
217
+ gap: number;
218
+ backgroundColor: string;
219
+ borderWidth: number;
220
+ borderColor: "#E3262F";
221
+ paddingHorizontal: 16;
222
+ paddingVertical: 12;
223
+ } | {
224
+ width: "auto" | "100%";
225
+ borderRadius: number;
226
+ justifyContent: "center";
227
+ alignItems: "center";
228
+ flexDirection: "row";
229
+ gap: number;
230
+ backgroundColor: "#101010";
231
+ borderWidth?: undefined;
232
+ borderColor?: undefined;
233
+ paddingHorizontal: 16;
234
+ paddingVertical: 16;
235
+ } | {
236
+ width: "auto" | "100%";
237
+ borderRadius: number;
238
+ justifyContent: "center";
239
+ alignItems: "center";
240
+ flexDirection: "row";
241
+ gap: number;
242
+ backgroundColor: "#FFFFFF";
243
+ borderWidth?: undefined;
244
+ borderColor?: undefined;
245
+ paddingHorizontal: 16;
246
+ paddingVertical: 16;
247
+ } | {
248
+ width: "auto" | "100%";
249
+ borderRadius: number;
250
+ justifyContent: "center";
251
+ alignItems: "center";
252
+ flexDirection: "row";
253
+ gap: number;
254
+ backgroundColor: string;
255
+ borderWidth: number;
256
+ borderColor: "#B3BAC3";
257
+ paddingHorizontal: 16;
258
+ paddingVertical: 16;
259
+ } | {
260
+ width: "auto" | "100%";
261
+ borderRadius: number;
262
+ justifyContent: "center";
263
+ alignItems: "center";
264
+ flexDirection: "row";
265
+ gap: number;
266
+ backgroundColor: string;
267
+ borderWidth: number;
268
+ borderColor: "#B3BAC3";
269
+ paddingHorizontal: 16;
270
+ paddingVertical: 16;
271
+ } | {
272
+ width: "auto" | "100%";
273
+ borderRadius: number;
274
+ justifyContent: "center";
275
+ alignItems: "center";
276
+ flexDirection: "row";
277
+ gap: number;
278
+ backgroundColor: "#3643BA";
279
+ borderWidth?: undefined;
280
+ borderColor?: undefined;
281
+ paddingHorizontal: 16;
282
+ paddingVertical: 16;
283
+ } | {
284
+ width: "auto" | "100%";
285
+ borderRadius: number;
286
+ justifyContent: "center";
287
+ alignItems: "center";
288
+ flexDirection: "row";
289
+ gap: number;
290
+ backgroundColor: "#FFE4D6";
291
+ borderWidth?: undefined;
292
+ borderColor?: undefined;
293
+ paddingHorizontal: 16;
294
+ paddingVertical: 16;
295
+ } | {
296
+ width: "auto" | "100%";
297
+ borderRadius: number;
298
+ justifyContent: "center";
299
+ alignItems: "center";
300
+ flexDirection: "row";
301
+ gap: number;
302
+ backgroundColor: "#FFFFFF";
303
+ borderWidth?: undefined;
304
+ borderColor?: undefined;
305
+ paddingHorizontal: 16;
306
+ paddingVertical: 16;
307
+ } | {
308
+ width: "auto" | "100%";
309
+ borderRadius: number;
310
+ justifyContent: "center";
311
+ alignItems: "center";
312
+ flexDirection: "row";
313
+ gap: number;
314
+ backgroundColor: string;
315
+ borderWidth: number;
316
+ borderColor: "#FFE4D6";
317
+ paddingHorizontal: 16;
318
+ paddingVertical: 16;
319
+ } | {
320
+ width: "auto" | "100%";
321
+ borderRadius: number;
322
+ justifyContent: "center";
323
+ alignItems: "center";
324
+ flexDirection: "row";
325
+ gap: number;
326
+ backgroundColor: string;
327
+ borderWidth: number;
328
+ borderColor: "#E3262F";
329
+ paddingHorizontal: 16;
330
+ paddingVertical: 16;
31
331
  };
32
332
  buttonText: {
33
333
  fontWeight: "600";
34
- color: string;
35
- fontSize: number;
334
+ color: "#FFFFFF";
335
+ fontSize: 14;
336
+ } | {
337
+ fontWeight: "600";
338
+ color: "#101010";
339
+ fontSize: 14;
340
+ } | {
341
+ fontWeight: "600";
342
+ color: "#101010";
343
+ fontSize: 14;
344
+ } | {
345
+ fontWeight: "600";
346
+ color: "#FFFFFF";
347
+ fontSize: 14;
348
+ } | {
349
+ fontWeight: "600";
350
+ color: "#FFFFFF";
351
+ fontSize: 14;
352
+ } | {
353
+ fontWeight: "600";
354
+ color: "#FFFFFF";
355
+ fontSize: 14;
356
+ } | {
357
+ fontWeight: "600";
358
+ color: "#FFE4D6";
359
+ fontSize: 14;
360
+ } | {
361
+ fontWeight: "600";
362
+ color: "#AB0009";
363
+ fontSize: 14;
364
+ } | {
365
+ fontWeight: "600";
366
+ color: "#AB0009";
367
+ fontSize: 14;
368
+ } | {
369
+ fontWeight: "600";
370
+ color: "#FFFFFF";
371
+ fontSize: 16;
372
+ } | {
373
+ fontWeight: "600";
374
+ color: "#101010";
375
+ fontSize: 16;
376
+ } | {
377
+ fontWeight: "600";
378
+ color: "#101010";
379
+ fontSize: 16;
380
+ } | {
381
+ fontWeight: "600";
382
+ color: "#FFFFFF";
383
+ fontSize: 16;
384
+ } | {
385
+ fontWeight: "600";
386
+ color: "#FFFFFF";
387
+ fontSize: 16;
388
+ } | {
389
+ fontWeight: "600";
390
+ color: "#FFFFFF";
391
+ fontSize: 16;
392
+ } | {
393
+ fontWeight: "600";
394
+ color: "#FFE4D6";
395
+ fontSize: 16;
396
+ } | {
397
+ fontWeight: "600";
398
+ color: "#AB0009";
399
+ fontSize: 16;
400
+ } | {
401
+ fontWeight: "600";
402
+ color: "#AB0009";
403
+ fontSize: 16;
404
+ } | {
405
+ fontWeight: "600";
406
+ color: "#FFFFFF";
407
+ fontSize: 18;
408
+ } | {
409
+ fontWeight: "600";
410
+ color: "#101010";
411
+ fontSize: 18;
412
+ } | {
413
+ fontWeight: "600";
414
+ color: "#101010";
415
+ fontSize: 18;
416
+ } | {
417
+ fontWeight: "600";
418
+ color: "#FFFFFF";
419
+ fontSize: 18;
420
+ } | {
421
+ fontWeight: "600";
422
+ color: "#FFFFFF";
423
+ fontSize: 18;
424
+ } | {
425
+ fontWeight: "600";
426
+ color: "#FFFFFF";
427
+ fontSize: 18;
428
+ } | {
429
+ fontWeight: "600";
430
+ color: "#FFE4D6";
431
+ fontSize: 18;
36
432
  } | {
37
433
  fontWeight: "600";
38
- color: string;
39
- fontSize: number;
434
+ color: "#AB0009";
435
+ fontSize: 18;
436
+ } | {
437
+ fontWeight: "600";
438
+ color: "#AB0009";
439
+ fontSize: 18;
40
440
  };
41
441
  icon: {
42
- color: string;
442
+ color: "#FFFFFF";
443
+ } | {
444
+ color: "#101010";
445
+ } | {
446
+ color: "#101010";
447
+ } | {
448
+ color: "#FFFFFF";
449
+ } | {
450
+ color: "#FFFFFF";
451
+ } | {
452
+ color: "#FFFFFF";
453
+ } | {
454
+ color: "#FFE4D6";
455
+ } | {
456
+ color: "#AB0009";
43
457
  } | {
44
- color: string;
458
+ color: "#AB0009";
45
459
  };
46
460
  disabled: {
47
461
  opacity: number;
package/dist/components/button/button.styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"button.styles.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE/C,eAAO,MAAM,eAAe,GAAI;;;;CAI/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgIA,CAAC"}
1
+ {"version":3,"file":"button.styles.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE/C,eAAO,MAAM,eAAe,GAAI;;;;CAI/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoLA,CAAC"}
package/dist/components/button/button.styles.js CHANGED
@@ -8,8 +8,11 @@ fullWidth = true, size = "medium", }) => {
8
8
  switch (size) {
9
9
  case "small":
10
10
  return {
11
- container: { paddingHorizontal: 16, paddingVertical: 5.5 },
12
- buttonText: { fontSize: 14 },
11
+ container: {
12
+ paddingHorizontal: theme.spacing.md,
13
+ paddingVertical: 5.5,
14
+ },
15
+ buttonText: { fontSize: theme.spacing.default },
13
16
  icon: {
14
17
  width: 14,
15
18
  height: 14,
@@ -17,8 +20,11 @@ fullWidth = true, size = "medium", }) => {
17
20
  };
18
21
  case "medium":
19
22
  return {
20
- container: { paddingHorizontal: 16, paddingVertical: 12 },
21
- buttonText: { fontSize: 16 },
23
+ container: {
24
+ paddingHorizontal: theme.spacing.md,
25
+ paddingVertical: theme.spacing.sm,
26
+ },
27
+ buttonText: { fontSize: theme.fonts.sizes.sm },
22
28
  icon: {
23
29
  width: 16,
24
30
  height: 16,
@@ -26,8 +32,11 @@ fullWidth = true, size = "medium", }) => {
26
32
  };
27
33
  case "large":
28
34
  return {
29
- container: { paddingHorizontal: 16, paddingVertical: 16 },
30
- buttonText: { fontSize: 18 },
35
+ container: {
36
+ paddingHorizontal: theme.spacing.md,
37
+ paddingVertical: theme.spacing.md,
38
+ },
39
+ buttonText: { fontSize: theme.fonts.sizes.default },
31
40
  icon: {
32
41
  width: 16,
33
42
  height: 16,
@@ -35,8 +44,11 @@ fullWidth = true, size = "medium", }) => {
35
44
  };
36
45
  default:
37
46
  return {
38
- container: { paddingHorizontal: 16, paddingVertical: 12 },
39
- buttonText: { fontSize: 14 },
47
+ container: {
48
+ paddingHorizontal: theme.spacing.md,
49
+ paddingVertical: theme.spacing.sm,
50
+ },
51
+ buttonText: { fontSize: theme.fonts.sizes.xs },
40
52
  icon: {
41
53
  width: 14,
42
54
  height: 14,
@@ -49,17 +61,17 @@ fullWidth = true, size = "medium", }) => {
49
61
  case ButtonVariant.primary:
50
62
  return {
51
63
  container: { backgroundColor: theme.colors.black },
52
- buttonText: { color: "#fff" },
64
+ buttonText: { color: theme.colors.white },
53
65
  icon: {
54
- color: "#fff",
66
+ color: theme.colors.white,
55
67
  },
56
68
  };
57
69
  case ButtonVariant.primaryInverted:
58
70
  return {
59
- container: { backgroundColor: "#fff" },
60
- buttonText: { color: "#000" },
71
+ container: { backgroundColor: theme.colors.white },
72
+ buttonText: { color: theme.colors.black },
61
73
  icon: {
62
- color: "#000",
74
+ color: theme.colors.black,
63
75
  },
64
76
  };
65
77
  case ButtonVariant.secondary:
@@ -67,11 +79,11 @@ fullWidth = true, size = "medium", }) => {
67
79
  container: {
68
80
  backgroundColor: "transparent",
69
81
  borderWidth: 1,
70
- borderColor: "#B3BAC3",
82
+ borderColor: theme.colors.textTertiaryInverted,
71
83
  },
72
- buttonText: { color: "#000" },
84
+ buttonText: { color: theme.colors.black },
73
85
  icon: {
74
- color: "#000",
86
+ color: theme.colors.black,
75
87
  },
76
88
  };
77
89
  case ButtonVariant.secondaryInverted:
@@ -79,27 +91,67 @@ fullWidth = true, size = "medium", }) => {
79
91
  container: {
80
92
  backgroundColor: "transparent",
81
93
  borderWidth: 1,
82
- borderColor: "#B3BAC3",
94
+ borderColor: theme.colors.textTertiaryInverted,
83
95
  },
84
- buttonText: { color: "#fff" },
96
+ buttonText: { color: theme.colors.white },
85
97
  icon: {
86
- color: "#fff",
98
+ color: theme.colors.white,
87
99
  },
88
100
  };
89
101
  case ButtonVariant.converted:
90
102
  return {
91
- container: { backgroundColor: "#3643BA" },
92
- buttonText: { color: "#fff" },
103
+ container: { backgroundColor: theme.colors.primary },
104
+ buttonText: { color: theme.colors.white },
93
105
  icon: {
94
- color: "#fff",
106
+ color: theme.colors.white,
107
+ },
108
+ };
109
+ case ButtonVariant.danger:
110
+ return {
111
+ container: { backgroundColor: theme.colors.backgroundError },
112
+ buttonText: { color: theme.colors.white },
113
+ icon: {
114
+ color: theme.colors.white,
115
+ },
116
+ };
117
+ case ButtonVariant.dangerInverted:
118
+ return {
119
+ container: { backgroundColor: theme.colors.white },
120
+ buttonText: { color: theme.colors.backgroundError },
121
+ icon: {
122
+ color: theme.colors.backgroundError,
123
+ },
124
+ };
125
+ case ButtonVariant.dangerOutline:
126
+ return {
127
+ container: {
128
+ backgroundColor: "transparent",
129
+ borderWidth: 1,
130
+ borderColor: theme.colors.backgroundError,
131
+ },
132
+ buttonText: { color: theme.colors.textError },
133
+ icon: {
134
+ color: theme.colors.textError,
135
+ },
136
+ };
137
+ case ButtonVariant.dangerOutline:
138
+ return {
139
+ container: {
140
+ backgroundColor: "transparent",
141
+ borderWidth: 1,
142
+ borderColor: theme.colors.borderError,
143
+ },
144
+ buttonText: { color: theme.colors.textError },
145
+ icon: {
146
+ color: theme.colors.textError,
95
147
  },
96
148
  };
97
149
  default:
98
150
  return {
99
- container: { backgroundColor: "#101010" },
100
- buttonText: { color: "#fff" },
151
+ container: { backgroundColor: theme.colors.black },
152
+ buttonText: { color: theme.colors.white },
101
153
  icon: {
102
- color: "#fff",
154
+ color: theme.colors.white,
103
155
  },
104
156
  };
105
157
  }
package/dist/components/index.d.ts CHANGED
@@ -9,6 +9,7 @@ export * from "./category-item/index";
9
9
  export * from "./checkbox/index";
10
10
  export * from "./event-card/index";
11
11
  export * from "./filter-chip/index";
12
+ export * from "./information-card/index";
12
13
  export * from "./input/index";
13
14
  export * from "./loading/index";
14
15
  export * from "./order-card/index";
@@ -20,6 +21,7 @@ export * from "./quick-add-product-card/index";
20
21
  export * from "./radio/index";
21
22
  export * from "./range-slider/index";
22
23
  export * from "./search-button/index";
24
+ export * from "./select/index";
23
25
  export * from "./seller-box/index";
24
26
  export * from "./toggle-switch/index";
25
27
  export * from "./typography/index";