@qasa/qds-ui 0.2.0 → 0.4.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 (38) hide show
  1. package/dist/cjs/index.js +1 -1
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/cjs/types/components/avatar/avatar.d.ts +1 -0
  4. package/dist/cjs/types/components/button/button-styles.d.ts +67 -40
  5. package/dist/cjs/types/components/heading/heading.d.ts +37 -21
  6. package/dist/cjs/types/components/icon/create-icon.d.ts +31 -12
  7. package/dist/cjs/types/components/icon/icons/index.d.ts +1 -0
  8. package/dist/cjs/types/components/icon/icons/minus.d.ts +2 -0
  9. package/dist/cjs/types/components/icon-button/icon-button-styles.d.ts +50 -28
  10. package/dist/cjs/types/components/label/label.d.ts +24 -14
  11. package/dist/cjs/types/components/loading-dots/loading-dots.d.ts +23 -11
  12. package/dist/cjs/types/components/paragraph/paragraph.d.ts +24 -14
  13. package/dist/cjs/types/styles/common-styles.d.ts +28 -11
  14. package/dist/cjs/types/theme/foundations/colors.d.ts +21 -13
  15. package/dist/cjs/types/theme/foundations/index.d.ts +23 -11
  16. package/dist/cjs/types/theme/foundations/typography.d.ts +2 -0
  17. package/dist/cjs/types/theme/theme-tools.d.ts +23 -11
  18. package/dist/cjs/types/theme/theme.d.ts +23 -11
  19. package/dist/esm/index.js +1 -1
  20. package/dist/esm/index.js.map +1 -1
  21. package/dist/esm/types/components/avatar/avatar.d.ts +1 -0
  22. package/dist/esm/types/components/button/button-styles.d.ts +67 -40
  23. package/dist/esm/types/components/heading/heading.d.ts +37 -21
  24. package/dist/esm/types/components/icon/create-icon.d.ts +31 -12
  25. package/dist/esm/types/components/icon/icons/index.d.ts +1 -0
  26. package/dist/esm/types/components/icon/icons/minus.d.ts +2 -0
  27. package/dist/esm/types/components/icon-button/icon-button-styles.d.ts +50 -28
  28. package/dist/esm/types/components/label/label.d.ts +24 -14
  29. package/dist/esm/types/components/loading-dots/loading-dots.d.ts +23 -11
  30. package/dist/esm/types/components/paragraph/paragraph.d.ts +24 -14
  31. package/dist/esm/types/styles/common-styles.d.ts +28 -11
  32. package/dist/esm/types/theme/foundations/colors.d.ts +21 -13
  33. package/dist/esm/types/theme/foundations/index.d.ts +23 -11
  34. package/dist/esm/types/theme/foundations/typography.d.ts +2 -0
  35. package/dist/esm/types/theme/theme-tools.d.ts +23 -11
  36. package/dist/esm/types/theme/theme.d.ts +23 -11
  37. package/dist/index.d.ts +334 -174
  38. package/package.json +1 -1
@@ -1,6 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  import type { HTMLQdsProps } from '../../types';
3
3
  declare const SIZE_MAP: {
4
+ xs: number;
4
5
  sm: number;
5
6
  md: number;
6
7
  lg: number;
@@ -56,15 +56,18 @@ export declare const getSizeStyles: (theme: {
56
56
  gray30: string;
57
57
  gray20: string;
58
58
  gray10: string;
59
- brand90: string;
60
- brand80: string;
61
- brand70: string;
62
- brand60: string;
63
- brand50: string;
64
- brand40: string;
65
- brand30: string;
66
- brand20: string;
67
- brand10: string;
59
+ uiPink: string;
60
+ uiPinkDark: string;
61
+ uiPinkLight: string;
62
+ brown: string;
63
+ brownDark: string;
64
+ brownLight: string;
65
+ offWhite: string;
66
+ offWhiteDark: string;
67
+ offWhiteLight: string;
68
+ softPink: string;
69
+ warmYellow: string;
70
+ softYellow: string;
68
71
  red10: string;
69
72
  red20: string;
70
73
  red30: string;
@@ -111,6 +114,9 @@ export declare const getSizeStyles: (theme: {
111
114
  brandSecondary: string;
112
115
  brandSecondaryHover: string;
113
116
  brandSecondaryActive: string;
117
+ brandTertiary: string;
118
+ brandTertiaryHover: string;
119
+ brandTertiaryActive: string;
114
120
  negative: string;
115
121
  warning: string;
116
122
  positive: string;
@@ -125,7 +131,9 @@ export declare const getSizeStyles: (theme: {
125
131
  negative: string;
126
132
  warning: string;
127
133
  positive: string;
128
- onColor: string;
134
+ onBrandPrimary: string;
135
+ onBrandSecondary: string;
136
+ onBrandTertiary: string;
129
137
  };
130
138
  icon: {
131
139
  default: string;
@@ -135,7 +143,9 @@ export declare const getSizeStyles: (theme: {
135
143
  negative: string;
136
144
  warning: string;
137
145
  success: string;
138
- onColor: string;
146
+ onBrandPrimary: string;
147
+ onBrandSecondary: string;
148
+ onBrandTertiary: string;
139
149
  };
140
150
  border: {
141
151
  default: string;
@@ -204,6 +214,7 @@ export declare const getSizeStyles: (theme: {
204
214
  fontSize: string;
205
215
  lineHeight: string;
206
216
  letterSpacing: string;
217
+ fontFeatureSettings: string;
207
218
  };
208
219
  md: {
209
220
  fontFamily: string;
@@ -211,6 +222,7 @@ export declare const getSizeStyles: (theme: {
211
222
  fontSize: string;
212
223
  lineHeight: string;
213
224
  letterSpacing: string;
225
+ fontFeatureSettings: string;
214
226
  };
215
227
  };
216
228
  title: {
@@ -361,6 +373,27 @@ export declare const getSizeStyles: (theme: {
361
373
  paddingLeft: string;
362
374
  paddingRight: string;
363
375
  };
376
+ lg: {
377
+ fontFamily: string;
378
+ fontWeight: string;
379
+ fontSize: string;
380
+ lineHeight: string;
381
+ letterSpacing: string;
382
+ height: string;
383
+ minWidth: string;
384
+ paddingLeft: string;
385
+ paddingRight: string;
386
+ };
387
+ xl: {
388
+ fontFamily: string;
389
+ fontWeight: string;
390
+ fontSize: string;
391
+ lineHeight: string;
392
+ letterSpacing: string;
393
+ height: string;
394
+ paddingLeft: string;
395
+ paddingRight: string;
396
+ };
364
397
  };
365
398
  export declare const getVariantStyles: (theme: {
366
399
  mediaQueries: {
@@ -420,15 +453,18 @@ export declare const getVariantStyles: (theme: {
420
453
  gray30: string;
421
454
  gray20: string;
422
455
  gray10: string;
423
- brand90: string;
424
- brand80: string;
425
- brand70: string;
426
- brand60: string;
427
- brand50: string;
428
- brand40: string;
429
- brand30: string;
430
- brand20: string;
431
- brand10: string;
456
+ uiPink: string;
457
+ uiPinkDark: string;
458
+ uiPinkLight: string;
459
+ brown: string;
460
+ brownDark: string;
461
+ brownLight: string;
462
+ offWhite: string;
463
+ offWhiteDark: string;
464
+ offWhiteLight: string;
465
+ softPink: string;
466
+ warmYellow: string;
467
+ softYellow: string;
432
468
  red10: string;
433
469
  red20: string;
434
470
  red30: string;
@@ -475,6 +511,9 @@ export declare const getVariantStyles: (theme: {
475
511
  brandSecondary: string;
476
512
  brandSecondaryHover: string;
477
513
  brandSecondaryActive: string;
514
+ brandTertiary: string;
515
+ brandTertiaryHover: string;
516
+ brandTertiaryActive: string;
478
517
  negative: string;
479
518
  warning: string;
480
519
  positive: string;
@@ -489,7 +528,9 @@ export declare const getVariantStyles: (theme: {
489
528
  negative: string;
490
529
  warning: string;
491
530
  positive: string;
492
- onColor: string;
531
+ onBrandPrimary: string;
532
+ onBrandSecondary: string;
533
+ onBrandTertiary: string;
493
534
  };
494
535
  icon: {
495
536
  default: string;
@@ -499,7 +540,9 @@ export declare const getVariantStyles: (theme: {
499
540
  negative: string;
500
541
  warning: string;
501
542
  success: string;
502
- onColor: string;
543
+ onBrandPrimary: string;
544
+ onBrandSecondary: string;
545
+ onBrandTertiary: string;
503
546
  };
504
547
  border: {
505
548
  default: string;
@@ -568,6 +611,7 @@ export declare const getVariantStyles: (theme: {
568
611
  fontSize: string;
569
612
  lineHeight: string;
570
613
  letterSpacing: string;
614
+ fontFeatureSettings: string;
571
615
  };
572
616
  md: {
573
617
  fontFamily: string;
@@ -575,6 +619,7 @@ export declare const getVariantStyles: (theme: {
575
619
  fontSize: string;
576
620
  lineHeight: string;
577
621
  letterSpacing: string;
622
+ fontFeatureSettings: string;
578
623
  };
579
624
  };
580
625
  title: {
@@ -723,8 +768,6 @@ export declare const getVariantStyles: (theme: {
723
768
  tertiary: {
724
769
  background: string;
725
770
  color: string;
726
- border: string;
727
- borderColor: string;
728
771
  ":not([disabled])": {
729
772
  '@media(hover: hover)': {
730
773
  ':hover': {
@@ -736,20 +779,4 @@ export declare const getVariantStyles: (theme: {
736
779
  };
737
780
  };
738
781
  };
739
- ghost: {
740
- background: string;
741
- color: string;
742
- textDecoration: string;
743
- textUnderlineOffset: number;
744
- ":not([disabled])": {
745
- '@media(hover: hover)': {
746
- ':hover': {
747
- background: string;
748
- };
749
- ':active': {
750
- background: string;
751
- };
752
- };
753
- };
754
- };
755
782
  };
@@ -58,15 +58,18 @@ declare const getSizeStyles: (theme: {
58
58
  gray30: string;
59
59
  gray20: string;
60
60
  gray10: string;
61
- brand90: string;
62
- brand80: string;
63
- brand70: string;
64
- brand60: string;
65
- brand50: string;
66
- brand40: string;
67
- brand30: string;
68
- brand20: string;
69
- brand10: string;
61
+ uiPink: string;
62
+ uiPinkDark: string;
63
+ uiPinkLight: string;
64
+ brown: string;
65
+ brownDark: string;
66
+ brownLight: string;
67
+ offWhite: string;
68
+ offWhiteDark: string;
69
+ offWhiteLight: string;
70
+ softPink: string;
71
+ warmYellow: string;
72
+ softYellow: string;
70
73
  red10: string;
71
74
  red20: string;
72
75
  red30: string;
@@ -110,9 +113,16 @@ declare const getSizeStyles: (theme: {
110
113
  brandPrimary: string;
111
114
  brandPrimaryHover: string;
112
115
  brandPrimaryActive: string;
116
+ /**
117
+ * Alignment of the heading
118
+ * @default 'left'
119
+ */
113
120
  brandSecondary: string;
114
121
  brandSecondaryHover: string;
115
122
  brandSecondaryActive: string;
123
+ brandTertiary: string;
124
+ brandTertiaryHover: string;
125
+ brandTertiaryActive: string;
116
126
  negative: string;
117
127
  warning: string;
118
128
  positive: string;
@@ -127,7 +137,9 @@ declare const getSizeStyles: (theme: {
127
137
  negative: string;
128
138
  warning: string;
129
139
  positive: string;
130
- onColor: string;
140
+ onBrandPrimary: string;
141
+ onBrandSecondary: string;
142
+ onBrandTertiary: string;
131
143
  };
132
144
  icon: {
133
145
  default: string;
@@ -137,7 +149,9 @@ declare const getSizeStyles: (theme: {
137
149
  negative: string;
138
150
  warning: string;
139
151
  success: string;
140
- onColor: string;
152
+ onBrandPrimary: string;
153
+ onBrandSecondary: string;
154
+ onBrandTertiary: string;
141
155
  };
142
156
  border: {
143
157
  default: string;
@@ -206,6 +220,7 @@ declare const getSizeStyles: (theme: {
206
220
  fontSize: string;
207
221
  lineHeight: string;
208
222
  letterSpacing: string;
223
+ fontFeatureSettings: string;
209
224
  };
210
225
  md: {
211
226
  fontFamily: string;
@@ -213,6 +228,7 @@ declare const getSizeStyles: (theme: {
213
228
  fontSize: string;
214
229
  lineHeight: string;
215
230
  letterSpacing: string;
231
+ fontFeatureSettings: string;
216
232
  };
217
233
  };
218
234
  title: {
@@ -241,15 +257,15 @@ declare const getSizeStyles: (theme: {
241
257
  fontFamily: string;
242
258
  fontWeight: string;
243
259
  fontSize: string;
244
- lineHeight: string;
260
+ lineHeight: string; /**
261
+ * Alignment of the heading
262
+ * @default 'left'
263
+ */
245
264
  letterSpacing: string;
246
265
  };
247
266
  '2xs': {
248
267
  fontFamily: string;
249
- fontWeight: string; /**
250
- * Alignment of the heading
251
- * @default 'left'
252
- */
268
+ fontWeight: string;
253
269
  fontSize: string;
254
270
  lineHeight: string;
255
271
  letterSpacing: string;
@@ -358,15 +374,15 @@ declare const getSizeStyles: (theme: {
358
374
  fontFamily: string;
359
375
  fontWeight: string;
360
376
  fontSize: string;
361
- lineHeight: string;
377
+ lineHeight: string; /**
378
+ * Alignment of the heading
379
+ * @default 'left'
380
+ */
362
381
  letterSpacing: string;
363
382
  };
364
383
  '2xs': {
365
384
  fontFamily: string;
366
- fontWeight: string; /**
367
- * Alignment of the heading
368
- * @default 'left'
369
- */
385
+ fontWeight: string;
370
386
  fontSize: string;
371
387
  lineHeight: string;
372
388
  letterSpacing: string;
@@ -51,6 +51,9 @@ declare const getSizeStyles: (theme: {
51
51
  tooltip: number;
52
52
  };
53
53
  colors: {
54
+ /**
55
+ * The `svg`'s `viewBox` attribute
56
+ */
54
57
  core: {
55
58
  black: string;
56
59
  white: string;
@@ -63,15 +66,18 @@ declare const getSizeStyles: (theme: {
63
66
  gray30: string;
64
67
  gray20: string;
65
68
  gray10: string;
66
- brand90: string;
67
- brand80: string;
68
- brand70: string;
69
- brand60: string;
70
- brand50: string;
71
- brand40: string;
72
- brand30: string;
73
- brand20: string;
74
- brand10: string;
69
+ uiPink: string;
70
+ uiPinkDark: string;
71
+ uiPinkLight: string;
72
+ brown: string;
73
+ brownDark: string;
74
+ brownLight: string;
75
+ offWhite: string;
76
+ offWhiteDark: string;
77
+ offWhiteLight: string;
78
+ softPink: string;
79
+ warmYellow: string;
80
+ softYellow: string;
75
81
  red10: string;
76
82
  red20: string;
77
83
  red30: string;
@@ -83,7 +89,11 @@ declare const getSizeStyles: (theme: {
83
89
  red90: string;
84
90
  green90: string;
85
91
  green80: string;
86
- green70: string;
92
+ green70: string; /**
93
+ * The size of the icon.
94
+ *
95
+ * @default 16
96
+ */
87
97
  green60: string;
88
98
  green50: string;
89
99
  green40: string;
@@ -118,6 +128,9 @@ declare const getSizeStyles: (theme: {
118
128
  brandSecondary: string;
119
129
  brandSecondaryHover: string;
120
130
  brandSecondaryActive: string;
131
+ brandTertiary: string;
132
+ brandTertiaryHover: string;
133
+ brandTertiaryActive: string;
121
134
  negative: string;
122
135
  warning: string;
123
136
  positive: string;
@@ -132,7 +145,9 @@ declare const getSizeStyles: (theme: {
132
145
  negative: string;
133
146
  warning: string;
134
147
  positive: string;
135
- onColor: string;
148
+ onBrandPrimary: string;
149
+ onBrandSecondary: string;
150
+ onBrandTertiary: string;
136
151
  };
137
152
  icon: {
138
153
  default: string;
@@ -142,7 +157,9 @@ declare const getSizeStyles: (theme: {
142
157
  negative: string;
143
158
  warning: string;
144
159
  success: string;
145
- onColor: string;
160
+ onBrandPrimary: string;
161
+ onBrandSecondary: string;
162
+ onBrandTertiary: string;
146
163
  };
147
164
  border: {
148
165
  default: string;
@@ -215,6 +232,7 @@ declare const getSizeStyles: (theme: {
215
232
  fontSize: string;
216
233
  lineHeight: string;
217
234
  letterSpacing: string;
235
+ fontFeatureSettings: string;
218
236
  };
219
237
  md: {
220
238
  fontFamily: string;
@@ -222,6 +240,7 @@ declare const getSizeStyles: (theme: {
222
240
  fontSize: string;
223
241
  lineHeight: string;
224
242
  letterSpacing: string;
243
+ fontFeatureSettings: string;
225
244
  };
226
245
  };
227
246
  title: {
@@ -17,6 +17,7 @@ export { HeartIcon } from './heart';
17
17
  export { ImageIcon } from './image';
18
18
  export { LocationDotIcon } from './location-dot';
19
19
  export { MapIcon } from './map';
20
+ export { MinusIcon } from './minus';
20
21
  export { PlusIcon } from './plus';
21
22
  export { SearchIcon } from './search';
22
23
  export { SettingsIcon } from './settings';
@@ -0,0 +1,2 @@
1
+ /// <reference types="react" />
2
+ export declare const MinusIcon: import("react").ForwardRefExoticComponent<import("../create-icon").IconProps & import("react").RefAttributes<SVGSVGElement>>;
@@ -56,15 +56,18 @@ export declare const getSizeStyles: (theme: {
56
56
  gray30: string;
57
57
  gray20: string;
58
58
  gray10: string;
59
- brand90: string;
60
- brand80: string;
61
- brand70: string;
62
- brand60: string;
63
- brand50: string;
64
- brand40: string;
65
- brand30: string;
66
- brand20: string;
67
- brand10: string;
59
+ uiPink: string;
60
+ uiPinkDark: string;
61
+ uiPinkLight: string;
62
+ brown: string;
63
+ brownDark: string;
64
+ brownLight: string;
65
+ offWhite: string;
66
+ offWhiteDark: string;
67
+ offWhiteLight: string;
68
+ softPink: string;
69
+ warmYellow: string;
70
+ softYellow: string;
68
71
  red10: string;
69
72
  red20: string;
70
73
  red30: string;
@@ -111,6 +114,9 @@ export declare const getSizeStyles: (theme: {
111
114
  brandSecondary: string;
112
115
  brandSecondaryHover: string;
113
116
  brandSecondaryActive: string;
117
+ brandTertiary: string;
118
+ brandTertiaryHover: string;
119
+ brandTertiaryActive: string;
114
120
  negative: string;
115
121
  warning: string;
116
122
  positive: string;
@@ -125,7 +131,9 @@ export declare const getSizeStyles: (theme: {
125
131
  negative: string;
126
132
  warning: string;
127
133
  positive: string;
128
- onColor: string;
134
+ onBrandPrimary: string;
135
+ onBrandSecondary: string;
136
+ onBrandTertiary: string;
129
137
  };
130
138
  icon: {
131
139
  default: string;
@@ -135,7 +143,9 @@ export declare const getSizeStyles: (theme: {
135
143
  negative: string;
136
144
  warning: string;
137
145
  success: string;
138
- onColor: string;
146
+ onBrandPrimary: string;
147
+ onBrandSecondary: string;
148
+ onBrandTertiary: string;
139
149
  };
140
150
  border: {
141
151
  default: string;
@@ -204,6 +214,7 @@ export declare const getSizeStyles: (theme: {
204
214
  fontSize: string;
205
215
  lineHeight: string;
206
216
  letterSpacing: string;
217
+ fontFeatureSettings: string;
207
218
  };
208
219
  md: {
209
220
  fontFamily: string;
@@ -211,6 +222,7 @@ export declare const getSizeStyles: (theme: {
211
222
  fontSize: string;
212
223
  lineHeight: string;
213
224
  letterSpacing: string;
225
+ fontFeatureSettings: string;
214
226
  };
215
227
  };
216
228
  title: {
@@ -402,15 +414,18 @@ export declare const getVariantStyles: (theme: {
402
414
  gray30: string;
403
415
  gray20: string;
404
416
  gray10: string;
405
- brand90: string;
406
- brand80: string;
407
- brand70: string;
408
- brand60: string;
409
- brand50: string;
410
- brand40: string;
411
- brand30: string;
412
- brand20: string;
413
- brand10: string;
417
+ uiPink: string;
418
+ uiPinkDark: string;
419
+ uiPinkLight: string;
420
+ brown: string;
421
+ brownDark: string;
422
+ brownLight: string;
423
+ offWhite: string;
424
+ offWhiteDark: string;
425
+ offWhiteLight: string;
426
+ softPink: string;
427
+ warmYellow: string;
428
+ softYellow: string;
414
429
  red10: string;
415
430
  red20: string;
416
431
  red30: string;
@@ -457,6 +472,9 @@ export declare const getVariantStyles: (theme: {
457
472
  brandSecondary: string;
458
473
  brandSecondaryHover: string;
459
474
  brandSecondaryActive: string;
475
+ brandTertiary: string;
476
+ brandTertiaryHover: string;
477
+ brandTertiaryActive: string;
460
478
  negative: string;
461
479
  warning: string;
462
480
  positive: string;
@@ -471,7 +489,9 @@ export declare const getVariantStyles: (theme: {
471
489
  negative: string;
472
490
  warning: string;
473
491
  positive: string;
474
- onColor: string;
492
+ onBrandPrimary: string;
493
+ onBrandSecondary: string;
494
+ onBrandTertiary: string;
475
495
  };
476
496
  icon: {
477
497
  default: string;
@@ -481,7 +501,9 @@ export declare const getVariantStyles: (theme: {
481
501
  negative: string;
482
502
  warning: string;
483
503
  success: string;
484
- onColor: string;
504
+ onBrandPrimary: string;
505
+ onBrandSecondary: string;
506
+ onBrandTertiary: string;
485
507
  };
486
508
  border: {
487
509
  default: string;
@@ -550,6 +572,7 @@ export declare const getVariantStyles: (theme: {
550
572
  fontSize: string;
551
573
  lineHeight: string;
552
574
  letterSpacing: string;
575
+ fontFeatureSettings: string;
553
576
  };
554
577
  md: {
555
578
  fontFamily: string;
@@ -557,6 +580,7 @@ export declare const getVariantStyles: (theme: {
557
580
  fontSize: string;
558
581
  lineHeight: string;
559
582
  letterSpacing: string;
583
+ fontFeatureSettings: string;
560
584
  };
561
585
  };
562
586
  title: {
@@ -677,7 +701,7 @@ export declare const getVariantStyles: (theme: {
677
701
  primary: {
678
702
  background: string;
679
703
  color: string;
680
- ':enabled': {
704
+ ":not([disabled])": {
681
705
  '@media(hover: hover)': {
682
706
  ':hover': {
683
707
  background: string;
@@ -691,7 +715,7 @@ export declare const getVariantStyles: (theme: {
691
715
  secondary: {
692
716
  background: string;
693
717
  color: string;
694
- ':enabled': {
718
+ ":not([disabled])": {
695
719
  '@media(hover: hover)': {
696
720
  ':hover': {
697
721
  background: string;
@@ -705,9 +729,7 @@ export declare const getVariantStyles: (theme: {
705
729
  tertiary: {
706
730
  background: string;
707
731
  color: string;
708
- border: string;
709
- borderColor: string;
710
- ':enabled': {
732
+ ":not([disabled])": {
711
733
  '@media(hover: hover)': {
712
734
  ':hover': {
713
735
  background: string;
@@ -721,7 +743,7 @@ export declare const getVariantStyles: (theme: {
721
743
  ghost: {
722
744
  background: string;
723
745
  color: string;
724
- ':enabled': {
746
+ ":not([disabled])": {
725
747
  '@media(hover: hover)': {
726
748
  ':hover': {
727
749
  background: string;