@sk-web-gui/core 4.1.0 → 4.1.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 (22) hide show
  1. package/dist/cjs/components/accordion.js +113 -111
  2. package/dist/cjs/components/accordion.js.map +1 -1
  3. package/dist/cjs/components/forms.js +9 -0
  4. package/dist/cjs/components/forms.js.map +1 -1
  5. package/dist/cjs/components/input.js +50 -46
  6. package/dist/cjs/components/input.js.map +1 -1
  7. package/dist/cjs/components/progress-bar.js +6 -0
  8. package/dist/cjs/components/progress-bar.js.map +1 -1
  9. package/dist/esm/components/accordion.js +113 -111
  10. package/dist/esm/components/accordion.js.map +1 -1
  11. package/dist/esm/components/forms.js +9 -0
  12. package/dist/esm/components/forms.js.map +1 -1
  13. package/dist/esm/components/input.js +50 -46
  14. package/dist/esm/components/input.js.map +1 -1
  15. package/dist/esm/components/progress-bar.js +6 -0
  16. package/dist/esm/components/progress-bar.js.map +1 -1
  17. package/dist/types/components/accordion.d.ts +108 -106
  18. package/dist/types/components/countrycode-select.d.ts +5 -0
  19. package/dist/types/components/forms.d.ts +9 -0
  20. package/dist/types/components/input.d.ts +65 -61
  21. package/dist/types/components/progress-bar.d.ts +6 -0
  22. package/package.json +2 -2
package/dist/types/components/accordion.d.ts CHANGED
@@ -1,120 +1,140 @@
1
1
  export declare const Accordion: () => {
2
2
  '.sk-disclosure': {
3
+ '@apply mt-6 mb-8': {};
4
+ '@apply text-dark-secondary': {};
5
+ '&[data-inverted="true"]': {
6
+ '@apply text-inverted-dark-secondary': {};
7
+ };
3
8
  '&-icon': {
4
9
  '@apply flex self-center': {};
5
10
  };
6
11
  '&-header': {
7
- '@apply mt-6 mb-8': {};
8
- '@apply flex flex-col text-left': {};
12
+ '@apply py-8': {};
13
+ '@apply flex flex-row text-left': {};
9
14
  '@apply cursor-pointer': {};
10
- '*': {
11
- '@apply cursor-pointer': {};
12
- };
13
- '&:focus-visible': {
14
- '@apply outline-0': {};
15
- };
15
+ '@apply items-center justify-between': {};
16
+ '@apply gap-16': {};
16
17
  '&-icon': {
17
- '@apply ml-auto': {};
18
- '@apply text-dark-secondary': {};
19
- svg: {
20
- '@apply w-20 h-20': {};
18
+ '@apply w-32 h-32': {};
19
+ '&-sm': {
20
+ '@apply w-20 min-h-20': {};
21
+ };
22
+ '&-md': {
23
+ '@apply w-24 min-h-24': {};
21
24
  };
22
25
  };
23
- '&[data-disabled="true"]': {
24
- '@apply text-dark-disabled': {};
25
- '.sk-disclosure-title': {
26
+ '&-title': {
27
+ '@apply text-dark-primary': {};
28
+ '@apply w-full': {};
29
+ '@apply flex flex-row': {};
30
+ '@apply items-center': {};
31
+ '@apply grow shrink': {};
32
+ '&[data-inverted="true"]': {
33
+ '@apply text-inverted-dark-primary': {};
34
+ };
35
+ '*': {
36
+ '@apply m-0': {};
37
+ '@apply text-inherit': {};
38
+ fontSize: string;
39
+ FontFamily: string;
40
+ lineHeight: string;
41
+ };
42
+ '&-disabled': {
26
43
  '@apply text-dark-disabled': {};
44
+ '&[data-inverted="true"]': {
45
+ '@apply text-inverted-dark-disabled': {};
46
+ };
47
+ };
48
+ '&-sm': {
49
+ '@apply gap-16': {};
50
+ '@apply text-h4-sm': {};
51
+ '&[data-variant="alt"]': {
52
+ '@apply gap-12': {};
53
+ };
54
+ };
55
+ '&-md': {
56
+ '@apply gap-16': {};
57
+ '@apply text-h4-md': {};
58
+ '&[data-variant="alt"]': {
59
+ '@apply gap-12': {};
60
+ };
27
61
  };
62
+ '&-lg': {
63
+ '@apply gap-16': {};
64
+ '&[data-variant="alt"]': {
65
+ '@apply gap-16': {};
66
+ '@apply text-h3-md': {};
67
+ };
68
+ };
69
+ '&-divider': {
70
+ '@apply border-divider': {};
71
+ '&[data-inverted="true"]': {
72
+ '@apply border-inverted-divider': {};
73
+ };
74
+ };
75
+ };
76
+ '&:focus-visible': {
77
+ '@apply outline-0': {};
78
+ };
79
+ '&[aria-disabled="true"]': {
80
+ '@apply text-dark-disabled': {};
28
81
  '@apply cursor-default': {};
29
82
  '*': {
30
83
  '@apply cursor-default': {};
31
84
  };
32
- };
33
- };
34
- '&-label': {
35
- '@apply shrink-0': {};
36
- };
37
- '&-toggle': {
38
- '@apply flex items-center justify-between': {};
39
- '@apply gap-16': {};
40
- '.sk-icon': {
41
- '@apply w-32 h-32': {};
42
- };
43
- };
44
- '&-title': {
45
- '@apply text-dark-primary': {};
46
- '&-wrapper': {
47
- '@apply w-full': {};
48
- '@apply flex flex-row': {};
49
- '@apply items-center': {};
50
- };
51
- };
52
- '&-sm': {
53
- '.sk-disclosure-title': {
54
- '@apply text-h4-sm font-bold': {};
55
- '&-wrapper': {
56
- '@apply gap-12': {};
85
+ '&[data-inverted="true"]': {
86
+ '@apply text-inverted-dark-disabled': {};
57
87
  };
58
88
  };
59
- '.sk-disclosure-toggle': {
60
- '@apply gap-12': {};
61
- '.sk-icon': {
62
- '@apply w-20 min-h-20': {};
89
+ '&-sm': {
90
+ '@apply gap-16': {};
91
+ '@apply h-32': {};
92
+ '&[data-variant="alt"]': {
93
+ '@apply gap-12': {};
63
94
  };
64
- };
65
- '.sk-disclosure-support': {
66
- '@apply text-small': {};
67
- };
68
- '&[data-variant="default"]': {
69
- '.sk-disclosure-toggle': {
70
- '@apply py-4': {};
95
+ '&[data-variant="default"]': {
71
96
  '@apply min-h-40': {};
72
97
  };
73
- '.sk-disclosure-header-icon': {
74
- '@apply w-32 h-32': {};
75
- };
76
98
  };
77
- '&[data-variant="alt"]': {};
78
- };
79
- '&-md': {
80
- '.sk-disclosure-title': {
81
- '@apply text-h4-md font-bold': {};
82
- '&-wrapper': {
99
+ '&-md': {
100
+ '@apply gap-16': {};
101
+ '&[data-variant="alt"]': {
83
102
  '@apply gap-12': {};
84
103
  };
104
+ '&[data-variant="default"]': {
105
+ '@apply min-h-56': {};
106
+ };
85
107
  };
86
- '.sk-disclosure-toggle': {
87
- '@apply gap-12': {};
88
- '.sk-icon': {
89
- '@apply w-24 min-h-24': {};
108
+ '&-lg': {
109
+ '@apply gap-16': {};
110
+ '.sk-disclosure-header-icon': {
111
+ '@apply w-32 min-h-32': {};
112
+ };
113
+ '&[data-variant="alt"]': {
114
+ '@apply gap-16': {};
90
115
  };
91
116
  };
92
- '.sk-disclosure-support': {
93
- '@apply text-body': {};
117
+ };
118
+ '&[data-variant="alt"]': {
119
+ '.sk-disclosure-header': {
120
+ '@apply py-0': {};
121
+ '@apply h-32': {};
94
122
  };
123
+ };
124
+ '&-label': {
125
+ '@apply shrink-0': {};
126
+ };
127
+ '&-md': {
95
128
  '&[data-variant="default"]': {
96
- '.sk-disclosure-toggle': {
129
+ '.sk-disclosure-header': {
97
130
  '@apply py-8': {};
98
131
  '@apply min-h-56': {};
99
132
  };
100
- '.sk-disclosure-header-icon': {
133
+ '.sk-disclosure-header-button': {
101
134
  '@apply w-40 h-40': {};
102
135
  };
103
136
  };
104
137
  };
105
- '&-lg': {
106
- '&[data-variant="alt"]': {
107
- '.sk-disclosure-support': {
108
- '@apply text-large': {};
109
- };
110
- '.sk-disclosure-title': {
111
- '@apply text-h3-md font-bold': {};
112
- '&-wrapper': {
113
- '@apply gap-16': {};
114
- };
115
- };
116
- };
117
- };
118
138
  '&-body': {
119
139
  '&[data-size="sm"]': {
120
140
  '@apply pr-12': {};
@@ -133,11 +153,11 @@ export declare const Accordion: () => {
133
153
  '@apply py-0': {};
134
154
  transitionProperty: string;
135
155
  transitionDuration: string;
136
- '&[aria-hidden="true"], &[data-hidden="true"]': {
137
- '@apply my-0 invisible max-h-0 opacity-0': {};
156
+ '&[aria-hidden="true"]': {
157
+ '@apply my-0 overflow-hidden max-h-0 opacity-0': {};
138
158
  };
139
- '&[aria-hidden="false"], &[data-hidden="false"]': {
140
- '@apply block opacity-100 visible': {};
159
+ '&[aria-hidden="false"]': {
160
+ '@apply block opacity-100': {};
141
161
  };
142
162
  '&[data-variant="alt"]': {
143
163
  '@apply mt-24': {};
@@ -170,31 +190,13 @@ export declare const Accordion: () => {
170
190
  transitionProperty: string;
171
191
  transitionDuration: string;
172
192
  '@apply border-b-1 border-divider': {};
193
+ '&[data-inverted="true"]': {
194
+ '@apply border-inverted-divider': {};
195
+ };
173
196
  };
174
197
  '&:last-child .sk-disclosure': {
175
198
  '@apply border-b-transparent': {};
176
199
  };
177
200
  };
178
201
  };
179
- '&[data-inverted="true"]': {
180
- '&.sk-disclosure': {
181
- '&-icon': {
182
- '@apply text-inverted-dark-secondary': {};
183
- };
184
- '&[data-disabled="true"]': {
185
- '@apply text-inverted-dark-disabled': {};
186
- '.sk-disclosure-title': {
187
- '@apply text-inverted-dark-disabled': {};
188
- };
189
- };
190
- '&-title': {
191
- '@apply text-inverted-dark-primary': {};
192
- };
193
- };
194
- '&.sk-accordion': {
195
- '&-item': {
196
- '@apply border-inverted-divider': {};
197
- };
198
- };
199
- };
200
202
  };
package/dist/types/components/countrycode-select.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ export declare const CountryCodeSelect: () => {
2
+ '.sk-country-code-select': {
3
+ 'font-family': string;
4
+ };
5
+ };
package/dist/types/components/forms.d.ts CHANGED
@@ -21,4 +21,13 @@ export declare const Forms: () => {
21
21
  '@apply font-normal': {};
22
22
  '@apply text-small': {};
23
23
  };
24
+ '.sk-form-error-message': {
25
+ '@apply text-error': {};
26
+ '@apply flex items-start gap-8': {};
27
+ '@apply self-stretch': {};
28
+ };
29
+ '.sk-form-error-message-icon': {
30
+ '@apply shrink-0': {};
31
+ '@apply pt-1': {};
32
+ };
24
33
  };
package/dist/types/components/input.d.ts CHANGED
@@ -144,71 +144,75 @@ export declare const Input: () => {
144
144
  };
145
145
  };
146
146
  '&-group': {
147
- '.sk-form-input': {
148
- '@apply rounded-0': {};
149
- '@apply border-0': {};
150
- '@apply focus:ring-0': {};
151
- '@apply focus:ring-offset-0': {};
152
- '@apply bg-transparent': {};
153
- '@apply dark:bg-transparent': {};
154
- '@apply grow': {};
155
- };
156
- '@apply border-1': {};
157
- '@apply border-input-field-outline': {};
158
- '@apply hover:border-input-field-outline-hover': {};
159
- '@apply placeholder:text-dark-placeholder': {};
160
- '@apply bg-input-field-surface': {};
161
- '&:invalid, &[aria-invalid="true"]': {
162
- '@apply border-2 border-error-surface-primary': {};
163
- };
164
- '&:disabled, &[aria-disabled="true"]': {
165
- '@apply bg-input-field-surface-disabled': {};
166
- '@apply border-input-field-outline-disabled': {};
167
- '@apply hover:border-input-field-outline-disabled': {};
168
- '@apply text-dark-disabled': {};
147
+ '&-outer': {
148
+ '@apply flex gap-0 max-w-full': {};
149
+ '&[data-hasleftaddon="true"]': {
150
+ '.sk-form-input, .sk-form-input-group-inner': {
151
+ '@apply rounded-l-0': {};
152
+ '@apply border-l-0': {};
153
+ };
154
+ };
155
+ '&[data-hasrightaddon="true"]': {
156
+ '.sk-form-input, .sk-form-input-group-inner': {
157
+ '@apply rounded-r-0': {};
158
+ '@apply border-r-0': {};
159
+ };
160
+ };
169
161
  };
170
- '&:read-only': {
162
+ '&-inner': {
163
+ '.sk-form-input': {
164
+ '@apply rounded-0': {};
165
+ '@apply border-0': {};
166
+ '@apply focus:ring-0': {};
167
+ '@apply focus:ring-offset-0': {};
168
+ '@apply bg-transparent': {};
169
+ '@apply dark:bg-transparent': {};
170
+ '@apply grow': {};
171
+ };
172
+ '@apply border-1': {};
173
+ '@apply border-input-field-outline': {};
174
+ '@apply hover:border-input-field-outline-hover': {};
175
+ '@apply placeholder:text-dark-placeholder': {};
171
176
  '@apply bg-input-field-surface': {};
172
- '@apply border-input-field-outline-disabled': {};
177
+ '&:invalid, &[aria-invalid="true"]': {
178
+ '@apply border-2 border-error-surface-primary': {};
179
+ };
180
+ '&:disabled, &[aria-disabled="true"]': {
181
+ '@apply bg-input-field-surface-disabled': {};
182
+ '@apply border-input-field-outline-disabled': {};
183
+ '@apply hover:border-input-field-outline-disabled': {};
184
+ '@apply text-dark-disabled': {};
185
+ };
186
+ '&:read-only': {
187
+ '@apply bg-input-field-surface': {};
188
+ '@apply border-input-field-outline-disabled': {};
189
+ '@apply text-dark-secondary': {};
190
+ '@apply placeholder:text-dark-secondary': {};
191
+ };
192
+ '@apply flex relative grow': {};
193
+ '@apply items-center': {};
194
+ '@apply focus-within:ring': {};
195
+ '@apply focus-within:ring-ring': {};
173
196
  '@apply text-dark-secondary': {};
174
- '@apply placeholder:text-dark-secondary': {};
175
- };
176
- '&-wrapper': {
177
- '@apply flex gap-0 max-w-full': {};
178
- };
179
- '@apply flex relative grow': {};
180
- '@apply items-center': {};
181
- '@apply focus-within:ring': {};
182
- '@apply focus-within:ring-ring': {};
183
- '@apply text-dark-secondary': {};
184
- '@apply focus-within:border-input-field-surface': {};
185
- '&:not(:invalid):not([aria-invalid="true"])': {
186
197
  '@apply focus-within:border-input-field-surface': {};
187
- };
188
- '&&-lg': {
189
- '@apply text-input-large': {};
190
- '@apply rounded-button-lg': {};
191
- '@apply h-48': {};
192
- };
193
- '&&-md': {
194
- '@apply text-input-medium': {};
195
- '@apply rounded-button-md': {};
196
- '@apply h-40': {};
197
- };
198
- '&&-sm': {
199
- '@apply text-input-small': {};
200
- '@apply rounded-button-sm': {};
201
- '@apply h-32': {};
202
- };
203
- '&[data-hasleftaddon="true"]': {
204
- '@apply pl-0': {};
205
- '@apply rounded-l-0': {};
206
- '@apply border-l-0': {};
207
- };
208
- '&[data-hasrightaddon="true"]': {
209
- '@apply pr-0': {};
210
- '@apply rounded-r-0': {};
211
- '@apply border-r-0': {};
198
+ '&:not(:invalid):not([aria-invalid="true"])': {
199
+ '@apply focus-within:border-input-field-surface': {};
200
+ };
201
+ '&&-lg': {
202
+ '@apply text-input-large': {};
203
+ '@apply rounded-button-lg': {};
204
+ '@apply h-48': {};
205
+ };
206
+ '&&-md': {
207
+ '@apply text-input-medium': {};
208
+ '@apply rounded-button-md': {};
209
+ '@apply h-40': {};
210
+ };
211
+ '&&-sm': {
212
+ '@apply text-input-small': {};
213
+ '@apply rounded-button-sm': {};
214
+ '@apply h-32': {};
215
+ };
212
216
  };
213
217
  };
214
218
  '@apply border-1': {};
package/dist/types/components/progress-bar.d.ts CHANGED
@@ -5,6 +5,12 @@ export declare const ProgressBar: (colors: string[]) => {
5
5
  "@apply bg-primary-surface": {};
6
6
  };
7
7
  };
8
+ '&-sm': {
9
+ '@apply h-[4px]': {};
10
+ };
11
+ '&-md': {
12
+ '@apply h-[8px]': {};
13
+ };
8
14
  '@apply flex h-4 rounded-circular bg-background-color-mixin-2': {};
9
15
  '&-fill': {
10
16
  '@apply rounded-circular': {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sk-web-gui/core",
3
- "version": "4.1.0",
3
+ "version": "4.1.2",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "main": "./dist/cjs/index.js",
@@ -41,5 +41,5 @@
41
41
  "mini-svg-data-uri": "^1.4.4",
42
42
  "tailwindcss": "^3.4.17"
43
43
  },
44
- "gitHead": "78174b1385bece36ac1519a25705bc5886dc72ac"
44
+ "gitHead": "114df0d9913ebce239a93a786a55b21842ba2693"
45
45
  }