@qasa/qds-ui 0.10.1 → 0.11.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 (34) hide show
  1. package/dist/cjs/index.js +2 -2
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/cjs/types/components/button/button-styles.d.ts +26 -16
  4. package/dist/cjs/types/components/icon-button/icon-button-styles.d.ts +26 -16
  5. package/dist/cjs/types/components/label/label.d.ts +13 -8
  6. package/dist/cjs/types/components/loading-dots/loading-dots.d.ts +13 -8
  7. package/dist/cjs/types/components/paragraph/paragraph.d.ts +13 -8
  8. package/dist/cjs/types/components/textarea/textarea.d.ts +5 -0
  9. package/dist/cjs/types/components/toast/toast-styles.d.ts +13 -8
  10. package/dist/cjs/types/styles/common-styles.d.ts +13 -8
  11. package/dist/cjs/types/theme/foundations/colors.d.ts +9 -8
  12. package/dist/cjs/types/theme/foundations/index.d.ts +13 -8
  13. package/dist/cjs/types/theme/foundations/sizes.d.ts +2 -0
  14. package/dist/cjs/types/theme/foundations/spacing.d.ts +4 -0
  15. package/dist/cjs/types/theme/theme-tools.d.ts +13 -8
  16. package/dist/cjs/types/theme/theme.d.ts +13 -8
  17. package/dist/esm/index.js +2 -2
  18. package/dist/esm/index.js.map +1 -1
  19. package/dist/esm/types/components/button/button-styles.d.ts +26 -16
  20. package/dist/esm/types/components/icon-button/icon-button-styles.d.ts +26 -16
  21. package/dist/esm/types/components/label/label.d.ts +13 -8
  22. package/dist/esm/types/components/loading-dots/loading-dots.d.ts +13 -8
  23. package/dist/esm/types/components/paragraph/paragraph.d.ts +13 -8
  24. package/dist/esm/types/components/textarea/textarea.d.ts +5 -0
  25. package/dist/esm/types/components/toast/toast-styles.d.ts +13 -8
  26. package/dist/esm/types/styles/common-styles.d.ts +13 -8
  27. package/dist/esm/types/theme/foundations/colors.d.ts +9 -8
  28. package/dist/esm/types/theme/foundations/index.d.ts +13 -8
  29. package/dist/esm/types/theme/foundations/sizes.d.ts +2 -0
  30. package/dist/esm/types/theme/foundations/spacing.d.ts +4 -0
  31. package/dist/esm/types/theme/theme-tools.d.ts +13 -8
  32. package/dist/esm/types/theme/theme.d.ts +13 -8
  33. package/dist/index.d.ts +135 -80
  34. package/package.json +2 -4
@@ -16,7 +16,9 @@ export declare const getSizeStyles: (theme: {
16
16
  '5x': string;
17
17
  '6x': string;
18
18
  '8x': string;
19
+ '10x': string;
19
20
  '12x': string;
21
+ '14x': string;
20
22
  '16x': string;
21
23
  '20x': string;
22
24
  '24x': string;
@@ -57,6 +59,7 @@ export declare const getSizeStyles: (theme: {
57
59
  gray30: string;
58
60
  gray20: string;
59
61
  gray10: string;
62
+ pink: string;
60
63
  uiPink: string;
61
64
  uiPinkDark: string;
62
65
  uiPinkLight: string;
@@ -69,15 +72,15 @@ export declare const getSizeStyles: (theme: {
69
72
  softPink: string;
70
73
  warmYellow: string;
71
74
  softYellow: string;
72
- red10: string;
73
- red20: string;
74
- red30: string;
75
- red40: string;
76
- red50: string;
77
- red60: string;
78
- red70: string;
79
- red80: string;
80
75
  red90: string;
76
+ red80: string;
77
+ red70: string;
78
+ red60: string;
79
+ red50: string;
80
+ red40: string;
81
+ red30: string;
82
+ red20: string;
83
+ red10: string;
81
84
  green90: string;
82
85
  green80: string;
83
86
  green70: string;
@@ -186,7 +189,9 @@ export declare const getSizeStyles: (theme: {
186
189
  '5x': string;
187
190
  '6x': string;
188
191
  '8x': string;
192
+ '10x': string;
189
193
  '12x': string;
194
+ '14x': string;
190
195
  '16x': string;
191
196
  '20x': string;
192
197
  '24x': string;
@@ -468,7 +473,9 @@ export declare const getVariantStyles: (theme: {
468
473
  '5x': string;
469
474
  '6x': string;
470
475
  '8x': string;
476
+ '10x': string;
471
477
  '12x': string;
478
+ '14x': string;
472
479
  '16x': string;
473
480
  '20x': string;
474
481
  '24x': string;
@@ -509,6 +516,7 @@ export declare const getVariantStyles: (theme: {
509
516
  gray30: string;
510
517
  gray20: string;
511
518
  gray10: string;
519
+ pink: string;
512
520
  uiPink: string;
513
521
  uiPinkDark: string;
514
522
  uiPinkLight: string;
@@ -521,15 +529,15 @@ export declare const getVariantStyles: (theme: {
521
529
  softPink: string;
522
530
  warmYellow: string;
523
531
  softYellow: string;
524
- red10: string;
525
- red20: string;
526
- red30: string;
527
- red40: string;
528
- red50: string;
529
- red60: string;
530
- red70: string;
531
- red80: string;
532
532
  red90: string;
533
+ red80: string;
534
+ red70: string;
535
+ red60: string;
536
+ red50: string;
537
+ red40: string;
538
+ red30: string;
539
+ red20: string;
540
+ red10: string;
533
541
  green90: string;
534
542
  green80: string;
535
543
  green70: string;
@@ -638,7 +646,9 @@ export declare const getVariantStyles: (theme: {
638
646
  '5x': string;
639
647
  '6x': string;
640
648
  '8x': string;
649
+ '10x': string;
641
650
  '12x': string;
651
+ '14x': string;
642
652
  '16x': string;
643
653
  '20x': string;
644
654
  '24x': string;
@@ -15,7 +15,9 @@ export declare const getSizeStyles: (theme: {
15
15
  '5x': string;
16
16
  '6x': string;
17
17
  '8x': string;
18
+ '10x': string;
18
19
  '12x': string;
20
+ '14x': string;
19
21
  '16x': string;
20
22
  '20x': string;
21
23
  '24x': string;
@@ -56,6 +58,7 @@ export declare const getSizeStyles: (theme: {
56
58
  gray30: string;
57
59
  gray20: string;
58
60
  gray10: string;
61
+ pink: string;
59
62
  uiPink: string;
60
63
  uiPinkDark: string;
61
64
  uiPinkLight: string;
@@ -68,15 +71,15 @@ export declare const getSizeStyles: (theme: {
68
71
  softPink: string;
69
72
  warmYellow: string;
70
73
  softYellow: string;
71
- red10: string;
72
- red20: string;
73
- red30: string;
74
- red40: string;
75
- red50: string;
76
- red60: string;
77
- red70: string;
78
- red80: string;
79
74
  red90: string;
75
+ red80: string;
76
+ red70: string;
77
+ red60: string;
78
+ red50: string;
79
+ red40: string;
80
+ red30: string;
81
+ red20: string;
82
+ red10: string;
80
83
  green90: string;
81
84
  green80: string;
82
85
  green70: string;
@@ -185,7 +188,9 @@ export declare const getSizeStyles: (theme: {
185
188
  '5x': string;
186
189
  '6x': string;
187
190
  '8x': string;
191
+ '10x': string;
188
192
  '12x': string;
193
+ '14x': string;
189
194
  '16x': string;
190
195
  '20x': string;
191
196
  '24x': string;
@@ -428,7 +433,9 @@ export declare const getVariantStyles: (theme: {
428
433
  '5x': string;
429
434
  '6x': string;
430
435
  '8x': string;
436
+ '10x': string;
431
437
  '12x': string;
438
+ '14x': string;
432
439
  '16x': string;
433
440
  '20x': string;
434
441
  '24x': string;
@@ -469,6 +476,7 @@ export declare const getVariantStyles: (theme: {
469
476
  gray30: string;
470
477
  gray20: string;
471
478
  gray10: string;
479
+ pink: string;
472
480
  uiPink: string;
473
481
  uiPinkDark: string;
474
482
  uiPinkLight: string;
@@ -481,15 +489,15 @@ export declare const getVariantStyles: (theme: {
481
489
  softPink: string;
482
490
  warmYellow: string;
483
491
  softYellow: string;
484
- red10: string;
485
- red20: string;
486
- red30: string;
487
- red40: string;
488
- red50: string;
489
- red60: string;
490
- red70: string;
491
- red80: string;
492
492
  red90: string;
493
+ red80: string;
494
+ red70: string;
495
+ red60: string;
496
+ red50: string;
497
+ red40: string;
498
+ red30: string;
499
+ red20: string;
500
+ red10: string;
493
501
  green90: string;
494
502
  green80: string;
495
503
  green70: string;
@@ -598,7 +606,9 @@ export declare const getVariantStyles: (theme: {
598
606
  '5x': string;
599
607
  '6x': string;
600
608
  '8x': string;
609
+ '10x': string;
601
610
  '12x': string;
611
+ '14x': string;
602
612
  '16x': string;
603
613
  '20x': string;
604
614
  '24x': string;
@@ -19,7 +19,9 @@ declare const getSizeStyles: (theme: {
19
19
  '5x': string;
20
20
  '6x': string;
21
21
  '8x': string;
22
+ '10x': string;
22
23
  '12x': string;
24
+ '14x': string;
23
25
  '16x': string;
24
26
  '20x': string;
25
27
  '24x': string;
@@ -60,6 +62,7 @@ declare const getSizeStyles: (theme: {
60
62
  gray30: string;
61
63
  gray20: string;
62
64
  gray10: string;
65
+ pink: string;
63
66
  uiPink: string;
64
67
  uiPinkDark: string;
65
68
  uiPinkLight: string;
@@ -72,15 +75,15 @@ declare const getSizeStyles: (theme: {
72
75
  softPink: string;
73
76
  warmYellow: string;
74
77
  softYellow: string;
75
- red10: string;
76
- red20: string;
77
- red30: string;
78
- red40: string;
79
- red50: string;
80
- red60: string;
81
- red70: string;
82
- red80: string;
83
78
  red90: string;
79
+ red80: string;
80
+ red70: string;
81
+ red60: string;
82
+ red50: string;
83
+ red40: string;
84
+ red30: string;
85
+ red20: string;
86
+ red10: string;
84
87
  green90: string;
85
88
  green80: string;
86
89
  green70: string;
@@ -189,7 +192,9 @@ declare const getSizeStyles: (theme: {
189
192
  '5x': string;
190
193
  '6x': string;
191
194
  '8x': string;
195
+ '10x': string;
192
196
  '12x': string;
197
+ '14x': string;
193
198
  '16x': string;
194
199
  '20x': string;
195
200
  '24x': string;
@@ -19,7 +19,9 @@ declare const getSizeStyles: (theme: {
19
19
  '5x': string;
20
20
  '6x': string;
21
21
  '8x': string;
22
+ '10x': string;
22
23
  '12x': string;
24
+ '14x': string;
23
25
  '16x': string;
24
26
  '20x': string;
25
27
  '24x': string;
@@ -60,6 +62,7 @@ declare const getSizeStyles: (theme: {
60
62
  gray30: string;
61
63
  gray20: string;
62
64
  gray10: string;
65
+ pink: string;
63
66
  uiPink: string;
64
67
  uiPinkDark: string;
65
68
  uiPinkLight: string;
@@ -72,15 +75,15 @@ declare const getSizeStyles: (theme: {
72
75
  softPink: string;
73
76
  warmYellow: string;
74
77
  softYellow: string;
75
- red10: string;
76
- red20: string;
77
- red30: string;
78
- red40: string;
79
- red50: string;
80
- red60: string;
81
- red70: string;
82
- red80: string;
83
78
  red90: string;
79
+ red80: string;
80
+ red70: string;
81
+ red60: string;
82
+ red50: string;
83
+ red40: string;
84
+ red30: string;
85
+ red20: string;
86
+ red10: string;
84
87
  green90: string;
85
88
  green80: string;
86
89
  green70: string;
@@ -189,7 +192,9 @@ declare const getSizeStyles: (theme: {
189
192
  '5x': string;
190
193
  '6x': string;
191
194
  '8x': string;
195
+ '10x': string;
192
196
  '12x': string;
197
+ '14x': string;
193
198
  '16x': string;
194
199
  '20x': string;
195
200
  '24x': string;
@@ -19,7 +19,9 @@ declare const getSizeStyles: (theme: {
19
19
  '5x': string;
20
20
  '6x': string;
21
21
  '8x': string;
22
+ '10x': string;
22
23
  '12x': string;
24
+ '14x': string;
23
25
  '16x': string;
24
26
  '20x': string;
25
27
  '24x': string;
@@ -60,6 +62,7 @@ declare const getSizeStyles: (theme: {
60
62
  gray30: string;
61
63
  gray20: string;
62
64
  gray10: string;
65
+ pink: string;
63
66
  uiPink: string;
64
67
  uiPinkDark: string;
65
68
  uiPinkLight: string;
@@ -72,15 +75,15 @@ declare const getSizeStyles: (theme: {
72
75
  softPink: string;
73
76
  warmYellow: string;
74
77
  softYellow: string;
75
- red10: string;
76
- red20: string;
77
- red30: string;
78
- red40: string;
79
- red50: string;
80
- red60: string;
81
- red70: string;
82
- red80: string;
83
78
  red90: string;
79
+ red80: string;
80
+ red70: string;
81
+ red60: string;
82
+ red50: string;
83
+ red40: string;
84
+ red30: string;
85
+ red20: string;
86
+ red10: string;
84
87
  green90: string;
85
88
  green80: string;
86
89
  green70: string;
@@ -189,7 +192,9 @@ declare const getSizeStyles: (theme: {
189
192
  '5x': string;
190
193
  '6x': string;
191
194
  '8x': string;
195
+ '10x': string;
192
196
  '12x': string;
197
+ '14x': string;
193
198
  '16x': string;
194
199
  '20x': string;
195
200
  '24x': string;
@@ -14,6 +14,11 @@ interface TextareaOptions extends TextareaBaseOptions {
14
14
  * Text that provides additional guidance to the user
15
15
  */
16
16
  helperText?: string;
17
+ /**
18
+ * If `true`, the input will display an optional indicator.
19
+ * If the `isRequired` prop is also `true`, this prop will be ignored.
20
+ */
21
+ isOptional?: boolean;
17
22
  }
18
23
  type OmittedProps = 'children' | 'readOnly' | 'size';
19
24
  export interface TextareaProps extends Omit<HTMLQdsProps<'textarea'>, OmittedProps>, TextareaOptions {
@@ -16,7 +16,9 @@ export declare const getVariantStyles: (theme: {
16
16
  '5x': string;
17
17
  '6x': string;
18
18
  '8x': string;
19
+ '10x': string;
19
20
  '12x': string;
21
+ '14x': string;
20
22
  '16x': string;
21
23
  '20x': string;
22
24
  '24x': string;
@@ -57,6 +59,7 @@ export declare const getVariantStyles: (theme: {
57
59
  gray30: string;
58
60
  gray20: string;
59
61
  gray10: string;
62
+ pink: string;
60
63
  uiPink: string;
61
64
  uiPinkDark: string;
62
65
  uiPinkLight: string;
@@ -69,15 +72,15 @@ export declare const getVariantStyles: (theme: {
69
72
  softPink: string;
70
73
  warmYellow: string;
71
74
  softYellow: string;
72
- red10: string;
73
- red20: string;
74
- red30: string;
75
- red40: string;
76
- red50: string;
77
- red60: string;
78
- red70: string;
79
- red80: string;
80
75
  red90: string;
76
+ red80: string;
77
+ red70: string;
78
+ red60: string;
79
+ red50: string;
80
+ red40: string;
81
+ red30: string;
82
+ red20: string;
83
+ red10: string;
81
84
  green90: string;
82
85
  green80: string;
83
86
  green70: string;
@@ -186,7 +189,9 @@ export declare const getVariantStyles: (theme: {
186
189
  '5x': string;
187
190
  '6x': string;
188
191
  '8x': string;
192
+ '10x': string;
189
193
  '12x': string;
194
+ '14x': string;
190
195
  '16x': string;
191
196
  '20x': string;
192
197
  '24x': string;
@@ -15,7 +15,9 @@ export declare const getFormFieldBaseStyles: (theme: {
15
15
  '5x': string;
16
16
  '6x': string;
17
17
  '8x': string;
18
+ '10x': string;
18
19
  '12x': string;
20
+ '14x': string;
19
21
  '16x': string;
20
22
  '20x': string;
21
23
  '24x': string;
@@ -56,6 +58,7 @@ export declare const getFormFieldBaseStyles: (theme: {
56
58
  gray30: string;
57
59
  gray20: string;
58
60
  gray10: string;
61
+ pink: string;
59
62
  uiPink: string;
60
63
  uiPinkDark: string;
61
64
  uiPinkLight: string;
@@ -68,15 +71,15 @@ export declare const getFormFieldBaseStyles: (theme: {
68
71
  softPink: string;
69
72
  warmYellow: string;
70
73
  softYellow: string;
71
- red10: string;
72
- red20: string;
73
- red30: string;
74
- red40: string;
75
- red50: string;
76
- red60: string;
77
- red70: string;
78
- red80: string;
79
74
  red90: string;
75
+ red80: string;
76
+ red70: string;
77
+ red60: string;
78
+ red50: string;
79
+ red40: string;
80
+ red30: string;
81
+ red20: string;
82
+ red10: string;
80
83
  green90: string;
81
84
  green80: string;
82
85
  green70: string;
@@ -185,7 +188,9 @@ export declare const getFormFieldBaseStyles: (theme: {
185
188
  '5x': string;
186
189
  '6x': string;
187
190
  '8x': string;
191
+ '10x': string;
188
192
  '12x': string;
193
+ '14x': string;
189
194
  '16x': string;
190
195
  '20x': string;
191
196
  '24x': string;
@@ -11,6 +11,7 @@ export declare const colors: {
11
11
  gray30: string;
12
12
  gray20: string;
13
13
  gray10: string;
14
+ pink: string;
14
15
  uiPink: string;
15
16
  uiPinkDark: string;
16
17
  uiPinkLight: string;
@@ -23,15 +24,15 @@ export declare const colors: {
23
24
  softPink: string;
24
25
  warmYellow: string;
25
26
  softYellow: string;
26
- red10: string;
27
- red20: string;
28
- red30: string;
29
- red40: string;
30
- red50: string;
31
- red60: string;
32
- red70: string;
33
- red80: string;
34
27
  red90: string;
28
+ red80: string;
29
+ red70: string;
30
+ red60: string;
31
+ red50: string;
32
+ red40: string;
33
+ red30: string;
34
+ red20: string;
35
+ red10: string;
35
36
  green90: string;
36
37
  green80: string;
37
38
  green70: string;
@@ -20,7 +20,9 @@ export declare const foundations: {
20
20
  '5x': string;
21
21
  '6x': string;
22
22
  '8x': string;
23
+ '10x': string;
23
24
  '12x': string;
25
+ '14x': string;
24
26
  '16x': string;
25
27
  '20x': string;
26
28
  '24x': string;
@@ -61,6 +63,7 @@ export declare const foundations: {
61
63
  gray30: string;
62
64
  gray20: string;
63
65
  gray10: string;
66
+ pink: string;
64
67
  uiPink: string;
65
68
  uiPinkDark: string;
66
69
  uiPinkLight: string;
@@ -73,15 +76,15 @@ export declare const foundations: {
73
76
  softPink: string;
74
77
  warmYellow: string;
75
78
  softYellow: string;
76
- red10: string;
77
- red20: string;
78
- red30: string;
79
- red40: string;
80
- red50: string;
81
- red60: string;
82
- red70: string;
83
- red80: string;
84
79
  red90: string;
80
+ red80: string;
81
+ red70: string;
82
+ red60: string;
83
+ red50: string;
84
+ red40: string;
85
+ red30: string;
86
+ red20: string;
87
+ red10: string;
85
88
  green90: string;
86
89
  green80: string;
87
90
  green70: string;
@@ -190,7 +193,9 @@ export declare const foundations: {
190
193
  '5x': string;
191
194
  '6x': string;
192
195
  '8x': string;
196
+ '10x': string;
193
197
  '12x': string;
198
+ '14x': string;
194
199
  '16x': string;
195
200
  '20x': string;
196
201
  '24x': string;
@@ -25,7 +25,9 @@ export declare const sizes: {
25
25
  '5x': string;
26
26
  '6x': string;
27
27
  '8x': string;
28
+ '10x': string;
28
29
  '12x': string;
30
+ '14x': string;
29
31
  '16x': string;
30
32
  '20x': string;
31
33
  '24x': string;
@@ -15,8 +15,12 @@ export declare const spacing: {
15
15
  '6x': string;
16
16
  /** 2rem (32px) */
17
17
  '8x': string;
18
+ /** 2.5rem (40px) */
19
+ '10x': string;
18
20
  /** 3rem (48px) */
19
21
  '12x': string;
22
+ /** 3.5rem (56px) */
23
+ '14x': string;
20
24
  /** 4rem (64px) */
21
25
  '16x': string;
22
26
  /** 5rem (80px) */
@@ -215,6 +215,7 @@ export declare const overrideTheme: (overrides: ThemeOverrides) => {
215
215
  gray30: string;
216
216
  gray20: string;
217
217
  gray10: string;
218
+ pink: string;
218
219
  uiPink: string;
219
220
  uiPinkDark: string;
220
221
  uiPinkLight: string;
@@ -227,15 +228,15 @@ export declare const overrideTheme: (overrides: ThemeOverrides) => {
227
228
  softPink: string;
228
229
  warmYellow: string;
229
230
  softYellow: string;
230
- red10: string;
231
- red20: string;
232
- red30: string;
233
- red40: string;
234
- red50: string;
235
- red60: string;
236
- red70: string;
237
- red80: string;
238
231
  red90: string;
232
+ red80: string;
233
+ red70: string;
234
+ red60: string;
235
+ red50: string;
236
+ red40: string;
237
+ red30: string;
238
+ red20: string;
239
+ red10: string;
239
240
  green90: string;
240
241
  green80: string;
241
242
  green70: string;
@@ -333,7 +334,9 @@ export declare const overrideTheme: (overrides: ThemeOverrides) => {
333
334
  '5x': string;
334
335
  '6x': string;
335
336
  '8x': string;
337
+ '10x': string;
336
338
  '12x': string;
339
+ '14x': string;
337
340
  '16x': string;
338
341
  '20x': string;
339
342
  '24x': string;
@@ -388,7 +391,9 @@ export declare const overrideTheme: (overrides: ThemeOverrides) => {
388
391
  '5x': string;
389
392
  '6x': string;
390
393
  '8x': string;
394
+ '10x': string;
391
395
  '12x': string;
396
+ '14x': string;
392
397
  '16x': string;
393
398
  '20x': string;
394
399
  '24x': string;
@@ -15,7 +15,9 @@ export declare const theme: {
15
15
  '5x': string;
16
16
  '6x': string;
17
17
  '8x': string;
18
+ '10x': string;
18
19
  '12x': string;
20
+ '14x': string;
19
21
  '16x': string;
20
22
  '20x': string;
21
23
  '24x': string;
@@ -56,6 +58,7 @@ export declare const theme: {
56
58
  gray30: string;
57
59
  gray20: string;
58
60
  gray10: string;
61
+ pink: string;
59
62
  uiPink: string;
60
63
  uiPinkDark: string;
61
64
  uiPinkLight: string;
@@ -68,15 +71,15 @@ export declare const theme: {
68
71
  softPink: string;
69
72
  warmYellow: string;
70
73
  softYellow: string;
71
- red10: string;
72
- red20: string;
73
- red30: string;
74
- red40: string;
75
- red50: string;
76
- red60: string;
77
- red70: string;
78
- red80: string;
79
74
  red90: string;
75
+ red80: string;
76
+ red70: string;
77
+ red60: string;
78
+ red50: string;
79
+ red40: string;
80
+ red30: string;
81
+ red20: string;
82
+ red10: string;
80
83
  green90: string;
81
84
  green80: string;
82
85
  green70: string;
@@ -185,7 +188,9 @@ export declare const theme: {
185
188
  '5x': string;
186
189
  '6x': string;
187
190
  '8x': string;
191
+ '10x': string;
188
192
  '12x': string;
193
+ '14x': string;
189
194
  '16x': string;
190
195
  '20x': string;
191
196
  '24x': string;