@xqmsg/ui-core 0.9.3 → 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 (67) hide show
  1. package/dist/components/button/index.d.ts +3 -7
  2. package/dist/components/input/Input.stories.d.ts +4 -0
  3. package/dist/components/input/InputTypes.d.ts +5 -3
  4. package/dist/components/input/StackedInput/StackedInput.d.ts +0 -3
  5. package/dist/components/input/StackedMultiSelect/index.d.ts +1 -1
  6. package/dist/components/input/StackedSelect/StackedSelect.d.ts +7 -3
  7. package/dist/components/input/components/dropdown/index.d.ts +10 -0
  8. package/dist/components/input/components/label/index.d.ts +9 -0
  9. package/dist/components/input/components/token/Token.stories.d.ts +5 -0
  10. package/dist/components/input/components/token/index.d.ts +7 -0
  11. package/dist/components/input/index.d.ts +1 -3
  12. package/dist/theme/components/button.d.ts +68 -207
  13. package/dist/theme/components/form-error.d.ts +3 -3
  14. package/dist/theme/components/form-label.d.ts +4 -6
  15. package/dist/theme/components/form.d.ts +3 -3
  16. package/dist/theme/components/input.d.ts +32 -161
  17. package/dist/theme/components/select.d.ts +27 -153
  18. package/dist/theme/components/textarea.d.ts +10 -117
  19. package/dist/theme/foundations/colors.d.ts +68 -16
  20. package/dist/ui-core.cjs.development.js +594 -860
  21. package/dist/ui-core.cjs.development.js.map +1 -1
  22. package/dist/ui-core.cjs.production.min.js +1 -1
  23. package/dist/ui-core.cjs.production.min.js.map +1 -1
  24. package/dist/ui-core.esm.js +598 -864
  25. package/dist/ui-core.esm.js.map +1 -1
  26. package/package.json +1 -2
  27. package/src/components/banner/index.tsx +7 -1
  28. package/src/components/button/Button.stories.tsx +19 -7
  29. package/src/components/button/index.tsx +7 -19
  30. package/src/components/button/spinner/index.tsx +2 -7
  31. package/src/components/input/Input.stories.tsx +60 -58
  32. package/src/components/input/InputTypes.ts +7 -1
  33. package/src/components/input/StackedInput/StackedInput.tsx +3 -15
  34. package/src/components/input/StackedMultiSelect/components/MultiValue/index.tsx +2 -2
  35. package/src/components/input/StackedMultiSelect/index.tsx +88 -92
  36. package/src/components/input/StackedPilledInput/index.tsx +139 -56
  37. package/src/components/input/StackedSelect/StackedSelect.tsx +63 -20
  38. package/src/components/input/StackedSelect/assets/svg/subtract.svg +3 -0
  39. package/src/components/input/components/dropdown/index.tsx +80 -0
  40. package/src/components/input/components/label/index.tsx +24 -0
  41. package/src/components/input/components/token/Token.stories.tsx +22 -0
  42. package/src/components/input/components/token/assets/svg/close.svg +3 -0
  43. package/src/components/input/components/token/index.tsx +37 -0
  44. package/src/components/input/index.tsx +7 -20
  45. package/src/components/loading/index.tsx +1 -1
  46. package/src/components/table/Table.stories.tsx +9 -1
  47. package/src/components/table/index.tsx +1 -1
  48. package/src/components/table/loading/index.tsx +2 -2
  49. package/src/components/tabs/index.tsx +1 -1
  50. package/src/components/text/index.tsx +1 -1
  51. package/src/theme/components/alert.ts +4 -4
  52. package/src/theme/components/button.ts +45 -186
  53. package/src/theme/components/form-error.ts +11 -14
  54. package/src/theme/components/form-label.ts +8 -8
  55. package/src/theme/components/form.ts +10 -13
  56. package/src/theme/components/input.ts +17 -191
  57. package/src/theme/components/link.ts +2 -1
  58. package/src/theme/components/select.ts +5 -10
  59. package/src/theme/components/tabs.ts +3 -3
  60. package/src/theme/components/textarea.ts +2 -38
  61. package/src/theme/customXQChakraTheme.ts +0 -2
  62. package/src/theme/foundations/colors.ts +31 -10
  63. package/src/theme/foundations/shadows.ts +3 -3
  64. package/dist/components/input/components/InputTag/index.d.ts +0 -7
  65. package/dist/theme/components/menu.d.ts +0 -48
  66. package/src/components/input/components/InputTag/index.tsx +0 -24
  67. package/src/theme/components/menu.ts +0 -70
package/dist/theme/components/input.d.ts CHANGED
@@ -1,181 +1,52 @@
1
- declare type Dict = Record<string, any>;
2
- declare function variantOutline(props: Dict): {
3
- field: {
4
- border: string;
5
- borderColor: string;
6
- bg: string;
7
- _hover: {
8
- borderColor: string;
9
- };
10
- _readOnly: {
11
- boxShadow: string;
12
- userSelect: string;
13
- };
14
- _disabled: {
15
- opacity: number;
16
- cursor: string;
17
- };
18
- _focus: {
19
- zIndex: number;
20
- borderColor: any;
21
- boxShadow: string;
22
- };
23
- _invalid: {
24
- borderColor: any;
25
- boxShadow: string;
26
- _focus: {
27
- boxShadow: string;
28
- };
29
- };
30
- };
31
- addon: {
32
- border: string;
33
- borderColor: string;
34
- bg: string;
35
- };
36
- };
37
- declare function variantFilled(props: Dict): {
38
- field: {
39
- border: string;
40
- borderColor: string;
41
- bg: string;
42
- _hover: {
43
- bg: string;
44
- };
45
- _readOnly: {
46
- boxShadow: string;
47
- userSelect: string;
48
- };
49
- _disabled: {
50
- opacity: number;
51
- cursor: string;
52
- };
53
- _focus: {
54
- bg: string;
55
- borderColor: any;
56
- };
57
- _invalid: {
58
- borderColor: any;
59
- };
60
- };
61
- addon: {
62
- border: string;
63
- borderColor: string;
64
- bg: string;
65
- };
66
- };
67
- declare function variantFlushed(props: Dict): {
68
- field: {
69
- borderBottom: string;
70
- borderRadius: number;
71
- pl: number;
72
- pr: number;
73
- bg: string;
74
- _readOnly: {
75
- boxShadow: string;
76
- userSelect: string;
77
- };
78
- _focus: {
79
- borderColor: any;
80
- boxShadow: string;
81
- };
82
- _invalid: {
83
- borderColor: any;
84
- };
85
- };
86
- addon: {
87
- borderBottom: string;
88
- borderColor: string;
89
- borderRadius: number;
90
- paddingX: number;
91
- bg: string;
92
- };
93
- };
94
1
  declare const _default: {
95
2
  parts: string[];
96
3
  baseStyle: {
97
4
  field: {
98
- width: string;
99
- outline: number;
100
- position: string;
101
- appearance: string;
102
- transition: string;
5
+ fontSize: string;
103
6
  '::placeholder': {
104
7
  color: string;
105
8
  };
106
- };
107
- };
108
- sizes: {
109
- lg: {
110
- field: {
111
- fontSize: string;
112
- pl: number;
113
- pr: number;
114
- h: number;
115
- borderRadius: string;
116
- };
117
- addon: {
118
- fontSize: string;
119
- pl: number;
120
- pr: number;
121
- h: number;
122
- borderRadius: string;
123
- };
124
- };
125
- md: {
126
- field: {
127
- fontSize: string;
128
- pl: number;
129
- pr: number;
130
- h: number;
131
- borderRadius: string;
132
- };
133
- addon: {
134
- fontSize: string;
135
- pl: number;
136
- pr: number;
137
- h: number;
138
- borderRadius: string;
139
- };
140
- };
141
- sm: {
142
- field: {
143
- fontSize: string;
144
- pl: number;
145
- pr: number;
146
- h: number;
147
- borderRadius: string;
9
+ py: string;
10
+ px: string;
11
+ border: string;
12
+ borderColor: string;
13
+ _disabled: {
14
+ cursor: string;
15
+ bg: string;
16
+ color: string;
148
17
  };
149
- addon: {
150
- fontSize: string;
151
- pl: number;
152
- pr: number;
153
- h: number;
154
- borderRadius: string;
18
+ _focus: {
19
+ bg: string;
20
+ border: string;
21
+ borderColor: string;
155
22
  };
156
23
  };
157
24
  };
158
25
  variants: {
159
- outline: typeof variantOutline;
160
- filled: typeof variantFilled;
161
- flushed: typeof variantFlushed;
162
- unstyled: {
26
+ default: {
163
27
  field: {
164
- bg: string;
165
- pl: number;
166
- pr: number;
167
- height: string;
168
- };
169
- addon: {
170
- bg: string;
171
- pl: number;
172
- pr: number;
173
- height: string;
28
+ fontSize: string;
29
+ '::placeholder': {
30
+ color: string;
31
+ };
32
+ py: string;
33
+ px: string;
34
+ border: string;
35
+ borderColor: string;
36
+ _disabled: {
37
+ cursor: string;
38
+ bg: string;
39
+ color: string;
40
+ };
41
+ _focus: {
42
+ bg: string;
43
+ border: string;
44
+ borderColor: string;
45
+ };
174
46
  };
175
47
  };
176
48
  };
177
49
  defaultProps: {
178
- size: string;
179
50
  variant: string;
180
51
  };
181
52
  };
package/dist/theme/components/select.d.ts CHANGED
@@ -1,21 +1,30 @@
1
1
  declare const _default: {
2
2
  parts: string[];
3
- baseStyle: (props: Record<string, any>) => {
3
+ baseStyle: () => {
4
4
  field: {
5
5
  appearance: string;
6
6
  paddingBottom: string;
7
7
  lineHeight: string;
8
8
  bg: string;
9
- '> option': {
10
- bg: string;
11
- };
12
- width: string;
13
- outline: number;
14
- position: string;
15
- transition: string;
9
+ '> option': {};
10
+ fontSize: string;
16
11
  '::placeholder': {
17
12
  color: string;
18
13
  };
14
+ py: string;
15
+ px: string;
16
+ border: string;
17
+ borderColor: string;
18
+ _disabled: {
19
+ cursor: string;
20
+ bg: string;
21
+ color: string;
22
+ };
23
+ _focus: {
24
+ bg: string;
25
+ border: string;
26
+ borderColor: string;
27
+ };
19
28
  };
20
29
  icon: {
21
30
  color: string;
@@ -25,166 +34,31 @@ declare const _default: {
25
34
  };
26
35
  };
27
36
  };
28
- sizes: {
29
- lg: {
30
- field: {
31
- fontSize: string;
32
- pl: number;
33
- pr: number;
34
- h: number;
35
- borderRadius: string;
36
- };
37
- addon: {
38
- fontSize: string;
39
- pl: number;
40
- pr: number;
41
- h: number;
42
- borderRadius: string;
43
- };
44
- };
45
- md: {
46
- field: {
47
- fontSize: string;
48
- pl: number;
49
- pr: number;
50
- h: number;
51
- borderRadius: string;
52
- };
53
- addon: {
54
- fontSize: string;
55
- pl: number;
56
- pr: number;
57
- h: number;
58
- borderRadius: string;
59
- };
60
- };
61
- sm: {
62
- field: {
63
- fontSize: string;
64
- pl: number;
65
- pr: number;
66
- h: number;
67
- borderRadius: string;
68
- };
69
- addon: {
70
- fontSize: string;
71
- pl: number;
72
- pr: number;
73
- h: number;
74
- borderRadius: string;
75
- };
76
- };
77
- };
78
37
  variants: {
79
- outline: (props: Record<string, any>) => {
38
+ default: {
80
39
  field: {
81
- border: string;
82
- borderColor: string;
83
- bg: string;
84
- _hover: {
85
- borderColor: string;
86
- };
87
- _readOnly: {
88
- boxShadow: string;
89
- userSelect: string;
90
- };
91
- _disabled: {
92
- opacity: number;
93
- cursor: string;
94
- };
95
- _focus: {
96
- zIndex: number;
97
- borderColor: any;
98
- boxShadow: string;
99
- };
100
- _invalid: {
101
- borderColor: any;
102
- boxShadow: string;
103
- _focus: {
104
- boxShadow: string;
105
- };
40
+ fontSize: string;
41
+ '::placeholder': {
42
+ color: string;
106
43
  };
107
- };
108
- addon: {
109
- border: string;
110
- borderColor: string;
111
- bg: string;
112
- };
113
- };
114
- filled: (props: Record<string, any>) => {
115
- field: {
44
+ py: string;
45
+ px: string;
116
46
  border: string;
117
47
  borderColor: string;
118
- bg: string;
119
- _hover: {
120
- bg: string;
121
- };
122
- _readOnly: {
123
- boxShadow: string;
124
- userSelect: string;
125
- };
126
48
  _disabled: {
127
- opacity: number;
128
49
  cursor: string;
129
- };
130
- _focus: {
131
50
  bg: string;
132
- borderColor: any;
133
- };
134
- _invalid: {
135
- borderColor: any;
136
- };
137
- };
138
- addon: {
139
- border: string;
140
- borderColor: string;
141
- bg: string;
142
- };
143
- };
144
- flushed: (props: Record<string, any>) => {
145
- field: {
146
- borderBottom: string;
147
- borderRadius: number;
148
- pl: number;
149
- pr: number;
150
- bg: string;
151
- _readOnly: {
152
- boxShadow: string;
153
- userSelect: string;
51
+ color: string;
154
52
  };
155
53
  _focus: {
156
- borderColor: any;
157
- boxShadow: string;
158
- };
159
- _invalid: {
160
- borderColor: any;
54
+ bg: string;
55
+ border: string;
56
+ borderColor: string;
161
57
  };
162
58
  };
163
- addon: {
164
- borderBottom: string;
165
- borderColor: string;
166
- borderRadius: number;
167
- paddingX: number;
168
- bg: string;
169
- };
170
- };
171
- unstyled: {
172
- field: {
173
- bg: string;
174
- pl: number;
175
- pr: number;
176
- height: string;
177
- };
178
- addon: {
179
- bg: string;
180
- pl: number;
181
- pr: number;
182
- height: string;
183
- };
184
59
  };
185
60
  };
186
61
  defaultProps: {
187
- size: string;
188
62
  variant: string;
189
63
  };
190
64
  };
package/dist/theme/components/textarea.d.ts CHANGED
@@ -2,135 +2,28 @@ declare const _default: {
2
2
  baseStyle: {
3
3
  display: string;
4
4
  paddingY: string;
5
- minHeight: string;
5
+ height: string;
6
6
  lineHeight: string;
7
- width: string;
8
- outline: number;
9
- position: string;
10
- appearance: string;
11
- transition: string;
7
+ fontSize: string;
12
8
  '::placeholder': {
13
9
  color: string;
14
10
  };
15
- };
16
- sizes: {
17
- sm: {
18
- fontSize: string;
19
- pl: number;
20
- pr: number;
21
- h: number;
22
- borderRadius: string;
23
- };
24
- md: {
25
- fontSize: string;
26
- pl: number;
27
- pr: number;
28
- h: number;
29
- borderRadius: string;
30
- };
31
- lg: {
32
- fontSize: string;
33
- pl: number;
34
- pr: number;
35
- h: number;
36
- borderRadius: string;
37
- };
38
- };
39
- variants: {
40
- outline: (props: Record<string, any>) => {
41
- border: string;
42
- borderColor: string;
43
- bg: string;
44
- _hover: {
45
- borderColor: string;
46
- };
47
- _readOnly: {
48
- boxShadow: string;
49
- userSelect: string;
50
- };
51
- _disabled: {
52
- opacity: number;
53
- cursor: string;
54
- };
55
- _focus: {
56
- zIndex: number;
57
- borderColor: any;
58
- boxShadow: string;
59
- };
60
- _invalid: {
61
- borderColor: any;
62
- boxShadow: string;
63
- _focus: {
64
- boxShadow: string;
65
- };
66
- };
67
- };
68
- flushed: (props: Record<string, any>) => {
69
- borderBottom: string;
70
- borderRadius: number;
71
- pl: number;
72
- pr: number;
11
+ py: string;
12
+ px: string;
13
+ border: string;
14
+ borderColor: string;
15
+ _disabled: {
16
+ cursor: string;
73
17
  bg: string;
74
- _readOnly: {
75
- boxShadow: string;
76
- userSelect: string;
77
- };
78
- _focus: {
79
- borderColor: any;
80
- boxShadow: string;
81
- };
82
- _invalid: {
83
- borderColor: any;
84
- };
85
- };
86
- filled: (props: Record<string, any>) => {
87
- border: string;
88
- borderColor: string;
89
- bg: string;
90
- _hover: {
91
- bg: string;
92
- };
93
- _readOnly: {
94
- boxShadow: string;
95
- userSelect: string;
96
- };
97
- _disabled: {
98
- opacity: number;
99
- cursor: string;
100
- };
101
- _focus: {
102
- bg: string;
103
- borderColor: any;
104
- };
105
- _invalid: {
106
- borderColor: any;
107
- };
18
+ color: string;
108
19
  };
109
- code: (props: Record<string, any>) => {
20
+ _focus: {
110
21
  bg: string;
111
- color: string;
112
- fontFamily: string;
113
- fontSize: string;
114
22
  border: string;
115
23
  borderColor: string;
116
- borderRadius: string;
117
- p: number;
118
- wordBreak: string;
119
- _focus: {
120
- zIndex: number;
121
- borderColor: any;
122
- boxShadow: string;
123
- };
124
- };
125
- unstyled: {
126
- bg: string;
127
- pl: number;
128
- pr: number;
129
- height: string;
130
24
  };
131
25
  };
132
26
  defaultProps: {
133
- size: string;
134
27
  variant: string;
135
28
  };
136
29
  };
package/dist/theme/foundations/colors.d.ts CHANGED
@@ -16,7 +16,41 @@ declare const colors: {
16
16
  light: string;
17
17
  dark: string;
18
18
  };
19
+ secondary: {
20
+ light: string;
21
+ };
22
+ error: string;
23
+ };
24
+ border: {
25
+ focus: string;
26
+ default: string;
27
+ };
28
+ fill: {
29
+ light: {
30
+ primary: string;
31
+ secondary: string;
32
+ tertiary: string;
33
+ quaternary: string;
34
+ };
35
+ success: string;
36
+ error: string;
37
+ warning: string;
38
+ action: string;
39
+ };
40
+ semantic: {
41
+ action: string;
42
+ success: string;
43
+ warning: string;
44
+ error: string;
19
45
  };
46
+ transparent: string;
47
+ current: string;
48
+ black: string;
49
+ white: string;
50
+ lightBlue: string;
51
+ coolGray: string;
52
+ darkBlue: string;
53
+ backdrop: string;
20
54
  whiteAlpha: {
21
55
  50: string;
22
56
  100: string;
@@ -57,14 +91,6 @@ declare const colors: {
57
91
  orange: ColorHues;
58
92
  green: ColorHues;
59
93
  blue: ColorHues;
60
- transparent: string;
61
- current: string;
62
- black: string;
63
- white: string;
64
- lightBlue: string;
65
- coolGray: string;
66
- darkBlue: string;
67
- backdrop: string;
68
94
  };
69
95
  export declare type Colors = typeof colors;
70
96
  declare const _default: {
@@ -73,7 +99,41 @@ declare const _default: {
73
99
  light: string;
74
100
  dark: string;
75
101
  };
102
+ secondary: {
103
+ light: string;
104
+ };
105
+ error: string;
106
+ };
107
+ border: {
108
+ focus: string;
109
+ default: string;
110
+ };
111
+ fill: {
112
+ light: {
113
+ primary: string;
114
+ secondary: string;
115
+ tertiary: string;
116
+ quaternary: string;
117
+ };
118
+ success: string;
119
+ error: string;
120
+ warning: string;
121
+ action: string;
122
+ };
123
+ semantic: {
124
+ action: string;
125
+ success: string;
126
+ warning: string;
127
+ error: string;
76
128
  };
129
+ transparent: string;
130
+ current: string;
131
+ black: string;
132
+ white: string;
133
+ lightBlue: string;
134
+ coolGray: string;
135
+ darkBlue: string;
136
+ backdrop: string;
77
137
  whiteAlpha: {
78
138
  50: string;
79
139
  100: string;
@@ -114,13 +174,5 @@ declare const _default: {
114
174
  orange: ColorHues;
115
175
  green: ColorHues;
116
176
  blue: ColorHues;
117
- transparent: string;
118
- current: string;
119
- black: string;
120
- white: string;
121
- lightBlue: string;
122
- coolGray: string;
123
- darkBlue: string;
124
- backdrop: string;
125
177
  };
126
178
  export default _default;