@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.
@@ -10,121 +10,141 @@ Object.defineProperty(exports, "Accordion", {
10
10
  });
11
11
  const Accordion = ()=>({
12
12
  '.sk-disclosure': {
13
+ '@apply mt-6 mb-8': {},
14
+ '@apply text-dark-secondary': {},
15
+ '&[data-inverted="true"]': {
16
+ '@apply text-inverted-dark-secondary': {}
17
+ },
13
18
  '&-icon': {
14
19
  '@apply flex self-center': {}
15
20
  },
16
21
  '&-header': {
17
- '@apply mt-6 mb-8': {},
18
- '@apply flex flex-col text-left': {},
22
+ '@apply py-8': {},
23
+ '@apply flex flex-row text-left': {},
19
24
  '@apply cursor-pointer': {},
20
- '*': {
21
- '@apply cursor-pointer': {}
25
+ '@apply items-center justify-between': {},
26
+ '@apply gap-16': {},
27
+ '&-icon': {
28
+ '@apply w-32 h-32': {},
29
+ '&-sm': {
30
+ '@apply w-20 min-h-20': {}
31
+ },
32
+ '&-md': {
33
+ '@apply w-24 min-h-24': {}
34
+ }
35
+ },
36
+ '&-title': {
37
+ '@apply text-dark-primary': {},
38
+ '@apply w-full': {},
39
+ '@apply flex flex-row': {},
40
+ '@apply items-center': {},
41
+ '@apply grow shrink': {},
42
+ '&[data-inverted="true"]': {
43
+ '@apply text-inverted-dark-primary': {}
44
+ },
45
+ '*': {
46
+ '@apply m-0': {},
47
+ '@apply text-inherit': {},
48
+ fontSize: 'inherit',
49
+ FontFamily: 'inherit',
50
+ lineHeight: 'inherit'
51
+ },
52
+ '&-disabled': {
53
+ '@apply text-dark-disabled': {},
54
+ '&[data-inverted="true"]': {
55
+ '@apply text-inverted-dark-disabled': {}
56
+ }
57
+ },
58
+ '&-sm': {
59
+ '@apply gap-16': {},
60
+ '@apply text-h4-sm': {},
61
+ '&[data-variant="alt"]': {
62
+ '@apply gap-12': {}
63
+ }
64
+ },
65
+ '&-md': {
66
+ '@apply gap-16': {},
67
+ '@apply text-h4-md': {},
68
+ '&[data-variant="alt"]': {
69
+ '@apply gap-12': {}
70
+ }
71
+ },
72
+ '&-lg': {
73
+ '@apply gap-16': {},
74
+ '&[data-variant="alt"]': {
75
+ '@apply gap-16': {},
76
+ '@apply text-h3-md': {}
77
+ }
78
+ },
79
+ '&-divider': {
80
+ '@apply border-divider': {},
81
+ '&[data-inverted="true"]': {
82
+ '@apply border-inverted-divider': {}
83
+ }
84
+ }
22
85
  },
23
86
  '&:focus-visible': {
24
87
  '@apply outline-0': {}
25
88
  },
26
- '&-icon': {
27
- '@apply ml-auto': {},
28
- '@apply text-dark-secondary': {},
29
- svg: {
30
- '@apply w-20 h-20': {}
31
- }
32
- },
33
- '&[data-disabled="true"]': {
89
+ '&[aria-disabled="true"]': {
34
90
  '@apply text-dark-disabled': {},
35
- '.sk-disclosure-title': {
36
- '@apply text-dark-disabled': {}
37
- },
38
91
  '@apply cursor-default': {},
39
92
  '*': {
40
93
  '@apply cursor-default': {}
94
+ },
95
+ '&[data-inverted="true"]': {
96
+ '@apply text-inverted-dark-disabled': {}
41
97
  }
42
- }
43
- },
44
- '&-label': {
45
- '@apply shrink-0': {}
46
- },
47
- '&-toggle': {
48
- '@apply flex items-center justify-between': {},
49
- '@apply gap-16': {},
50
- '.sk-icon': {
51
- '@apply w-32 h-32': {}
52
- }
53
- },
54
- '&-title': {
55
- '@apply text-dark-primary': {},
56
- '&-wrapper': {
57
- '@apply w-full': {},
58
- '@apply flex flex-row': {},
59
- '@apply items-center': {}
60
- }
61
- },
62
- '&-sm': {
63
- '.sk-disclosure-title': {
64
- '@apply text-h4-sm font-bold': {},
65
- '&-wrapper': {
98
+ },
99
+ '&-sm': {
100
+ '@apply gap-16': {},
101
+ '@apply h-32': {},
102
+ '&[data-variant="alt"]': {
66
103
  '@apply gap-12': {}
104
+ },
105
+ '&[data-variant="default"]': {
106
+ '@apply min-h-40': {}
67
107
  }
68
108
  },
69
- '.sk-disclosure-toggle': {
70
- '@apply gap-12': {},
71
- '.sk-icon': {
72
- '@apply w-20 min-h-20': {}
109
+ '&-md': {
110
+ '@apply gap-16': {},
111
+ '&[data-variant="alt"]': {
112
+ '@apply gap-12': {}
113
+ },
114
+ '&[data-variant="default"]': {
115
+ '@apply min-h-56': {}
73
116
  }
74
117
  },
75
- '.sk-disclosure-support': {
76
- '@apply text-small': {}
77
- },
78
- '&[data-variant="default"]': {
79
- '.sk-disclosure-toggle': {
80
- '@apply py-4': {},
81
- '@apply min-h-40': {}
82
- },
118
+ '&-lg': {
119
+ '@apply gap-16': {},
83
120
  '.sk-disclosure-header-icon': {
84
- '@apply w-32 h-32': {}
121
+ '@apply w-32 min-h-32': {}
122
+ },
123
+ '&[data-variant="alt"]': {
124
+ '@apply gap-16': {}
85
125
  }
86
- },
87
- '&[data-variant="alt"]': {}
126
+ }
127
+ },
128
+ '&[data-variant="alt"]': {
129
+ '.sk-disclosure-header': {
130
+ '@apply py-0': {},
131
+ '@apply h-32': {}
132
+ }
133
+ },
134
+ '&-label': {
135
+ '@apply shrink-0': {}
88
136
  },
89
137
  '&-md': {
90
- '.sk-disclosure-title': {
91
- '@apply text-h4-md font-bold': {},
92
- '&-wrapper': {
93
- '@apply gap-12': {}
94
- }
95
- },
96
- '.sk-disclosure-toggle': {
97
- '@apply gap-12': {},
98
- '.sk-icon': {
99
- '@apply w-24 min-h-24': {}
100
- }
101
- },
102
- '.sk-disclosure-support': {
103
- '@apply text-body': {}
104
- },
105
138
  '&[data-variant="default"]': {
106
- '.sk-disclosure-toggle': {
139
+ '.sk-disclosure-header': {
107
140
  '@apply py-8': {},
108
141
  '@apply min-h-56': {}
109
142
  },
110
- '.sk-disclosure-header-icon': {
143
+ '.sk-disclosure-header-button': {
111
144
  '@apply w-40 h-40': {}
112
145
  }
113
146
  }
114
147
  },
115
- '&-lg': {
116
- '&[data-variant="alt"]': {
117
- '.sk-disclosure-support': {
118
- '@apply text-large': {}
119
- },
120
- '.sk-disclosure-title': {
121
- '@apply text-h3-md font-bold': {},
122
- '&-wrapper': {
123
- '@apply gap-16': {}
124
- }
125
- }
126
- }
127
- },
128
148
  '&-body': {
129
149
  '&[data-size="sm"]': {
130
150
  '@apply pr-12': {}
@@ -141,13 +161,13 @@ const Accordion = ()=>({
141
161
  '@apply mr-32': {},
142
162
  '@apply gap-8': {},
143
163
  '@apply py-0': {},
144
- transitionProperty: 'visibility, height, opacity, padding, margin',
164
+ transitionProperty: 'height, opacity, padding, margin',
145
165
  transitionDuration: '180ms',
146
- '&[aria-hidden="true"], &[data-hidden="true"]': {
147
- '@apply my-0 invisible max-h-0 opacity-0': {}
166
+ '&[aria-hidden="true"]': {
167
+ '@apply my-0 overflow-hidden max-h-0 opacity-0': {}
148
168
  },
149
- '&[aria-hidden="false"], &[data-hidden="false"]': {
150
- '@apply block opacity-100 visible': {}
169
+ '&[aria-hidden="false"]': {
170
+ '@apply block opacity-100': {}
151
171
  },
152
172
  '&[data-variant="alt"]': {
153
173
  '@apply mt-24': {},
@@ -179,33 +199,15 @@ const Accordion = ()=>({
179
199
  '.sk-disclosure': {
180
200
  transitionProperty: 'margin',
181
201
  transitionDuration: '180ms',
182
- '@apply border-b-1 border-divider': {}
202
+ '@apply border-b-1 border-divider': {},
203
+ '&[data-inverted="true"]': {
204
+ '@apply border-inverted-divider': {}
205
+ }
183
206
  },
184
207
  '&:last-child .sk-disclosure': {
185
208
  '@apply border-b-transparent': {}
186
209
  }
187
210
  }
188
- },
189
- '&[data-inverted="true"]': {
190
- '&.sk-disclosure': {
191
- '&-icon': {
192
- '@apply text-inverted-dark-secondary': {}
193
- },
194
- '&[data-disabled="true"]': {
195
- '@apply text-inverted-dark-disabled': {},
196
- '.sk-disclosure-title': {
197
- '@apply text-inverted-dark-disabled': {}
198
- }
199
- },
200
- '&-title': {
201
- '@apply text-inverted-dark-primary': {}
202
- }
203
- },
204
- '&.sk-accordion': {
205
- '&-item': {
206
- '@apply border-inverted-divider': {}
207
- }
208
- }
209
211
  }
210
212
  });
211
213
 
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/accordion.ts"],"sourcesContent":["export const Accordion = () => ({\r\n '.sk-disclosure': {\r\n '&-icon': {\r\n '@apply flex self-center': {},\r\n },\r\n '&-header': {\r\n '@apply mt-6 mb-8': {},\r\n '@apply flex flex-col text-left': {},\r\n '@apply cursor-pointer': {},\r\n '*': {\r\n '@apply cursor-pointer': {},\r\n },\r\n '&:focus-visible': {\r\n '@apply outline-0': {},\r\n },\r\n\r\n '&-icon': {\r\n '@apply ml-auto': {},\r\n '@apply text-dark-secondary': {},\r\n svg: {\r\n '@apply w-20 h-20': {},\r\n },\r\n },\r\n '&[data-disabled=\"true\"]': {\r\n '@apply text-dark-disabled': {},\r\n '.sk-disclosure-title': {\r\n '@apply text-dark-disabled': {},\r\n },\r\n '@apply cursor-default': {},\r\n '*': {\r\n '@apply cursor-default': {},\r\n },\r\n },\r\n },\r\n '&-label': {\r\n '@apply shrink-0': {},\r\n },\r\n '&-toggle': {\r\n '@apply flex items-center justify-between': {},\r\n '@apply gap-16': {},\r\n '.sk-icon': {\r\n '@apply w-32 h-32': {},\r\n },\r\n },\r\n '&-title': {\r\n '@apply text-dark-primary': {},\r\n '&-wrapper': {\r\n '@apply w-full': {},\r\n '@apply flex flex-row': {},\r\n '@apply items-center': {},\r\n },\r\n },\r\n\r\n '&-sm': {\r\n '.sk-disclosure-title': {\r\n '@apply text-h4-sm font-bold': {},\r\n '&-wrapper': {\r\n '@apply gap-12': {},\r\n },\r\n },\r\n '.sk-disclosure-toggle': {\r\n '@apply gap-12': {},\r\n '.sk-icon': {\r\n '@apply w-20 min-h-20': {},\r\n },\r\n },\r\n '.sk-disclosure-support': {\r\n '@apply text-small': {},\r\n },\r\n '&[data-variant=\"default\"]': {\r\n '.sk-disclosure-toggle': {\r\n '@apply py-4': {},\r\n '@apply min-h-40': {},\r\n },\r\n '.sk-disclosure-header-icon': {\r\n '@apply w-32 h-32': {},\r\n },\r\n },\r\n '&[data-variant=\"alt\"]': {},\r\n },\r\n '&-md': {\r\n '.sk-disclosure-title': {\r\n '@apply text-h4-md font-bold': {},\r\n '&-wrapper': {\r\n '@apply gap-12': {},\r\n },\r\n },\r\n '.sk-disclosure-toggle': {\r\n '@apply gap-12': {},\r\n '.sk-icon': {\r\n '@apply w-24 min-h-24': {},\r\n },\r\n },\r\n '.sk-disclosure-support': {\r\n '@apply text-body': {},\r\n },\r\n '&[data-variant=\"default\"]': {\r\n '.sk-disclosure-toggle': {\r\n '@apply py-8': {},\r\n '@apply min-h-56': {},\r\n },\r\n '.sk-disclosure-header-icon': {\r\n '@apply w-40 h-40': {},\r\n },\r\n },\r\n },\r\n '&-lg': {\r\n '&[data-variant=\"alt\"]': {\r\n '.sk-disclosure-support': {\r\n '@apply text-large': {},\r\n },\r\n '.sk-disclosure-title': {\r\n '@apply text-h3-md font-bold': {},\r\n '&-wrapper': {\r\n '@apply gap-16': {},\r\n },\r\n },\r\n },\r\n },\r\n\r\n '&-body': {\r\n '&[data-size=\"sm\"]': {\r\n '@apply pr-12': {},\r\n },\r\n '&[data-size=\"md\"]': {\r\n '@apply pr-12': {},\r\n },\r\n '&[data-size=\"lg\"]': {\r\n '@apply pr-16': {},\r\n },\r\n '@apply text-base': {},\r\n '@apply flex flex-col': {},\r\n '@apply mb-32': {},\r\n '@apply mr-32': {},\r\n '@apply gap-8': {},\r\n '@apply py-0': {},\r\n transitionProperty: 'visibility, height, opacity, padding, margin',\r\n\r\n transitionDuration: '180ms',\r\n\r\n '&[aria-hidden=\"true\"], &[data-hidden=\"true\"]': {\r\n '@apply my-0 invisible max-h-0 opacity-0': {},\r\n },\r\n\r\n '&[aria-hidden=\"false\"], &[data-hidden=\"false\"]': {\r\n '@apply block opacity-100 visible': {},\r\n },\r\n\r\n '&[data-variant=\"alt\"]': {\r\n '@apply mt-24': {},\r\n '&[data-size=\"sm\"]': {\r\n '@apply pr-12': {},\r\n },\r\n '&[data-size=\"md\"]': {\r\n '@apply pr-12': {},\r\n },\r\n '&[data-size=\"lg\"]': {\r\n '@apply pr-16': {},\r\n },\r\n '&[data-has-icon=\"true\"]': {\r\n '&[data-size=\"sm\"]': {\r\n '@apply ml-32': {},\r\n },\r\n '&[data-size=\"md\"]': {\r\n '@apply ml-36': {},\r\n },\r\n '&[data-size=\"lg\"]': {\r\n '@apply ml-48': {},\r\n },\r\n },\r\n },\r\n },\r\n },\r\n '.sk-accordion': {\r\n '&-item': {\r\n '.sk-disclosure': {\r\n transitionProperty: 'margin',\r\n transitionDuration: '180ms',\r\n '@apply border-b-1 border-divider': {},\r\n },\r\n\r\n '&:last-child .sk-disclosure': {\r\n '@apply border-b-transparent': {},\r\n },\r\n },\r\n },\r\n\r\n '&[data-inverted=\"true\"]': {\r\n '&.sk-disclosure': {\r\n '&-icon': {\r\n '@apply text-inverted-dark-secondary': {},\r\n },\r\n\r\n '&[data-disabled=\"true\"]': {\r\n '@apply text-inverted-dark-disabled': {},\r\n '.sk-disclosure-title': {\r\n '@apply text-inverted-dark-disabled': {},\r\n },\r\n },\r\n\r\n '&-title': {\r\n '@apply text-inverted-dark-primary': {},\r\n },\r\n },\r\n '&.sk-accordion': {\r\n '&-item': {\r\n '@apply border-inverted-divider': {},\r\n },\r\n },\r\n },\r\n});\r\n"],"names":["Accordion","svg","transitionProperty","transitionDuration"],"mappings":"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"}
1
+ {"version":3,"sources":["../../../src/components/accordion.ts"],"sourcesContent":["export const Accordion = () => ({\r\n '.sk-disclosure': {\r\n '@apply mt-6 mb-8': {},\r\n '@apply text-dark-secondary': {},\r\n '&[data-inverted=\"true\"]': {\r\n '@apply text-inverted-dark-secondary': {},\r\n },\r\n '&-icon': {\r\n '@apply flex self-center': {},\r\n },\r\n '&-header': {\r\n '@apply py-8': {},\r\n '@apply flex flex-row text-left': {},\r\n '@apply cursor-pointer': {},\r\n '@apply items-center justify-between': {},\r\n '@apply gap-16': {},\r\n '&-icon': {\r\n '@apply w-32 h-32': {},\r\n '&-sm': {\r\n '@apply w-20 min-h-20': {},\r\n },\r\n '&-md': {\r\n '@apply w-24 min-h-24': {},\r\n },\r\n },\r\n\r\n '&-title': {\r\n '@apply text-dark-primary': {},\r\n '@apply w-full': {},\r\n '@apply flex flex-row': {},\r\n '@apply items-center': {},\r\n '@apply grow shrink': {},\r\n '&[data-inverted=\"true\"]': {\r\n '@apply text-inverted-dark-primary': {},\r\n },\r\n '*': {\r\n '@apply m-0': {},\r\n '@apply text-inherit': {},\r\n fontSize: 'inherit',\r\n FontFamily: 'inherit',\r\n lineHeight: 'inherit',\r\n },\r\n '&-disabled': {\r\n '@apply text-dark-disabled': {},\r\n '&[data-inverted=\"true\"]': {\r\n '@apply text-inverted-dark-disabled': {},\r\n },\r\n },\r\n '&-sm': {\r\n '@apply gap-16': {},\r\n '@apply text-h4-sm': {},\r\n '&[data-variant=\"alt\"]': {\r\n '@apply gap-12': {},\r\n },\r\n },\r\n '&-md': {\r\n '@apply gap-16': {},\r\n '@apply text-h4-md': {},\r\n '&[data-variant=\"alt\"]': {\r\n '@apply gap-12': {},\r\n },\r\n },\r\n '&-lg': {\r\n '@apply gap-16': {},\r\n '&[data-variant=\"alt\"]': {\r\n '@apply gap-16': {},\r\n '@apply text-h3-md': {},\r\n },\r\n },\r\n '&-divider': {\r\n '@apply border-divider': {},\r\n '&[data-inverted=\"true\"]': {\r\n '@apply border-inverted-divider': {},\r\n },\r\n },\r\n },\r\n\r\n '&:focus-visible': {\r\n '@apply outline-0': {},\r\n },\r\n '&[aria-disabled=\"true\"]': {\r\n '@apply text-dark-disabled': {},\r\n '@apply cursor-default': {},\r\n '*': {\r\n '@apply cursor-default': {},\r\n },\r\n '&[data-inverted=\"true\"]': {\r\n '@apply text-inverted-dark-disabled': {},\r\n },\r\n },\r\n '&-sm': {\r\n '@apply gap-16': {},\r\n '@apply h-32': {},\r\n '&[data-variant=\"alt\"]': {\r\n '@apply gap-12': {},\r\n },\r\n '&[data-variant=\"default\"]': {\r\n '@apply min-h-40': {},\r\n },\r\n },\r\n '&-md': {\r\n '@apply gap-16': {},\r\n '&[data-variant=\"alt\"]': {\r\n '@apply gap-12': {},\r\n },\r\n '&[data-variant=\"default\"]': {\r\n '@apply min-h-56': {},\r\n },\r\n },\r\n '&-lg': {\r\n '@apply gap-16': {},\r\n '.sk-disclosure-header-icon': {\r\n '@apply w-32 min-h-32': {},\r\n },\r\n '&[data-variant=\"alt\"]': {\r\n '@apply gap-16': {},\r\n },\r\n },\r\n },\r\n '&[data-variant=\"alt\"]': {\r\n '.sk-disclosure-header': {\r\n '@apply py-0': {},\r\n '@apply h-32': {},\r\n },\r\n },\r\n '&-label': {\r\n '@apply shrink-0': {},\r\n },\r\n\r\n '&-md': {\r\n '&[data-variant=\"default\"]': {\r\n '.sk-disclosure-header': {\r\n '@apply py-8': {},\r\n '@apply min-h-56': {},\r\n },\r\n '.sk-disclosure-header-button': {\r\n '@apply w-40 h-40': {},\r\n },\r\n },\r\n },\r\n\r\n '&-body': {\r\n '&[data-size=\"sm\"]': {\r\n '@apply pr-12': {},\r\n },\r\n '&[data-size=\"md\"]': {\r\n '@apply pr-12': {},\r\n },\r\n '&[data-size=\"lg\"]': {\r\n '@apply pr-16': {},\r\n },\r\n '@apply text-base': {},\r\n '@apply flex flex-col': {},\r\n '@apply mb-32': {},\r\n '@apply mr-32': {},\r\n '@apply gap-8': {},\r\n '@apply py-0': {},\r\n transitionProperty: 'height, opacity, padding, margin',\r\n\r\n transitionDuration: '180ms',\r\n\r\n '&[aria-hidden=\"true\"]': {\r\n '@apply my-0 overflow-hidden max-h-0 opacity-0': {},\r\n },\r\n\r\n '&[aria-hidden=\"false\"]': {\r\n '@apply block opacity-100': {},\r\n },\r\n\r\n '&[data-variant=\"alt\"]': {\r\n '@apply mt-24': {},\r\n '&[data-size=\"sm\"]': {\r\n '@apply pr-12': {},\r\n },\r\n '&[data-size=\"md\"]': {\r\n '@apply pr-12': {},\r\n },\r\n '&[data-size=\"lg\"]': {\r\n '@apply pr-16': {},\r\n },\r\n '&[data-has-icon=\"true\"]': {\r\n '&[data-size=\"sm\"]': {\r\n '@apply ml-32': {},\r\n },\r\n '&[data-size=\"md\"]': {\r\n '@apply ml-36': {},\r\n },\r\n '&[data-size=\"lg\"]': {\r\n '@apply ml-48': {},\r\n },\r\n },\r\n },\r\n },\r\n },\r\n '.sk-accordion': {\r\n '&-item': {\r\n '.sk-disclosure': {\r\n transitionProperty: 'margin',\r\n transitionDuration: '180ms',\r\n '@apply border-b-1 border-divider': {},\r\n '&[data-inverted=\"true\"]': {\r\n '@apply border-inverted-divider': {},\r\n },\r\n },\r\n\r\n '&:last-child .sk-disclosure': {\r\n '@apply border-b-transparent': {},\r\n },\r\n },\r\n },\r\n});\r\n"],"names":["Accordion","fontSize","FontFamily","lineHeight","transitionProperty","transitionDuration"],"mappings":"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"}
@@ -30,6 +30,15 @@ const Forms = ()=>({
30
30
  '.sk-form-helper-text, .sk-form-error-message': {
31
31
  '@apply font-normal': {},
32
32
  '@apply text-small': {}
33
+ },
34
+ '.sk-form-error-message': {
35
+ '@apply text-error': {},
36
+ '@apply flex items-start gap-8': {},
37
+ '@apply self-stretch': {}
38
+ },
39
+ '.sk-form-error-message-icon': {
40
+ '@apply shrink-0': {},
41
+ '@apply pt-1': {}
33
42
  }
34
43
  });
35
44
 
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/forms.ts"],"sourcesContent":["export const Forms = () => ({\r\n '.sk-form-control': {\r\n '@apply flex flex-col gap-8 w-fit': {},\r\n },\r\n\r\n '.sk-form-label': {\r\n '@apply font-bold': {},\r\n '&-sm': {\r\n '@apply text-label-small': {},\r\n },\r\n '&-md': {\r\n '@apply text-label-medium': {},\r\n },\r\n '&-lg': {\r\n '@apply text-label-large': {},\r\n },\r\n },\r\n\r\n 'legend.sk-form-label': {\r\n display: 'contents',\r\n },\r\n\r\n '.sk-form-helper-text, .sk-form-error-message': {\r\n '@apply font-normal': {},\r\n '@apply text-small': {},\r\n },\r\n});\r\n"],"names":["Forms","display"],"mappings":";;;;+BAAaA;;;eAAAA;;;AAAN,MAAMA,QAAQ,IAAO,CAAA;QAC1B,oBAAoB;YAClB,oCAAoC,CAAC;QACvC;QAEA,kBAAkB;YAChB,oBAAoB,CAAC;YACrB,QAAQ;gBACN,2BAA2B,CAAC;YAC9B;YACA,QAAQ;gBACN,4BAA4B,CAAC;YAC/B;YACA,QAAQ;gBACN,2BAA2B,CAAC;YAC9B;QACF;QAEA,wBAAwB;YACtBC,SAAS;QACX;QAEA,gDAAgD;YAC9C,sBAAsB,CAAC;YACvB,qBAAqB,CAAC;QACxB;IACF,CAAA"}
1
+ {"version":3,"sources":["../../../src/components/forms.ts"],"sourcesContent":["export const Forms = () => ({\r\n '.sk-form-control': {\r\n '@apply flex flex-col gap-8 w-fit': {},\r\n },\r\n\r\n '.sk-form-label': {\r\n '@apply font-bold': {},\r\n '&-sm': {\r\n '@apply text-label-small': {},\r\n },\r\n '&-md': {\r\n '@apply text-label-medium': {},\r\n },\r\n '&-lg': {\r\n '@apply text-label-large': {},\r\n },\r\n },\r\n\r\n 'legend.sk-form-label': {\r\n display: 'contents',\r\n },\r\n\r\n '.sk-form-helper-text, .sk-form-error-message': {\r\n '@apply font-normal': {},\r\n '@apply text-small': {},\r\n },\r\n '.sk-form-error-message': {\r\n '@apply text-error': {},\r\n '@apply flex items-start gap-8': {},\r\n '@apply self-stretch': {},\r\n },\r\n '.sk-form-error-message-icon': {\r\n '@apply shrink-0': {},\r\n '@apply pt-1': {},\r\n },\r\n});\r\n"],"names":["Forms","display"],"mappings":";;;;+BAAaA;;;eAAAA;;;AAAN,MAAMA,QAAQ,IAAO,CAAA;QAC1B,oBAAoB;YAClB,oCAAoC,CAAC;QACvC;QAEA,kBAAkB;YAChB,oBAAoB,CAAC;YACrB,QAAQ;gBACN,2BAA2B,CAAC;YAC9B;YACA,QAAQ;gBACN,4BAA4B,CAAC;YAC/B;YACA,QAAQ;gBACN,2BAA2B,CAAC;YAC9B;QACF;QAEA,wBAAwB;YACtBC,SAAS;QACX;QAEA,gDAAgD;YAC9C,sBAAsB,CAAC;YACvB,qBAAqB,CAAC;QACxB;QACA,0BAA0B;YACxB,qBAAqB,CAAC;YACtB,iCAAiC,CAAC;YAClC,uBAAuB,CAAC;QAC1B;QACA,+BAA+B;YAC7B,mBAAmB,CAAC;YACpB,eAAe,CAAC;QAClB;IACF,CAAA"}
@@ -177,53 +177,57 @@ function addon() {
177
177
  function inputGroup() {
178
178
  return {
179
179
  '&-group': {
180
- '&-wrapper': {
181
- '@apply flex gap-0 max-w-full': {}
182
- },
183
- '@apply flex relative grow': {},
184
- '@apply items-center': {},
185
- '@apply focus-within:ring': {},
186
- '@apply focus-within:ring-ring': {},
187
- '@apply text-dark-secondary': {},
188
- //Focus
189
- '@apply focus-within:border-input-field-surface': {},
190
- '&:not(:invalid):not([aria-invalid="true"])': {
191
- '@apply focus-within:border-input-field-surface': {}
192
- },
193
- '&&-lg': {
194
- '@apply text-input-large': {},
195
- '@apply rounded-button-lg': {},
196
- '@apply h-48': {}
197
- },
198
- '&&-md': {
199
- '@apply text-input-medium': {},
200
- '@apply rounded-button-md': {},
201
- '@apply h-40': {}
202
- },
203
- '&&-sm': {
204
- '@apply text-input-small': {},
205
- '@apply rounded-button-sm': {},
206
- '@apply h-32': {}
207
- },
208
- '&[data-hasleftaddon="true"]': {
209
- '@apply pl-0': {},
210
- '@apply rounded-l-0': {},
211
- '@apply border-l-0': {}
212
- },
213
- '&[data-hasrightaddon="true"]': {
214
- '@apply pr-0': {},
215
- '@apply rounded-r-0': {},
216
- '@apply border-r-0': {}
180
+ '&-outer': {
181
+ '@apply flex gap-0 max-w-full': {},
182
+ '&[data-hasleftaddon="true"]': {
183
+ '.sk-form-input, .sk-form-input-group-inner': {
184
+ '@apply rounded-l-0': {},
185
+ '@apply border-l-0': {}
186
+ }
187
+ },
188
+ '&[data-hasrightaddon="true"]': {
189
+ '.sk-form-input, .sk-form-input-group-inner': {
190
+ '@apply rounded-r-0': {},
191
+ '@apply border-r-0': {}
192
+ }
193
+ }
217
194
  },
218
- ...inputStandards(),
219
- '.sk-form-input': {
220
- '@apply rounded-0': {},
221
- '@apply border-0': {},
222
- '@apply focus:ring-0': {},
223
- '@apply focus:ring-offset-0': {},
224
- '@apply bg-transparent': {},
225
- '@apply dark:bg-transparent': {},
226
- '@apply grow': {}
195
+ '&-inner': {
196
+ '@apply flex relative grow': {},
197
+ '@apply items-center': {},
198
+ '@apply focus-within:ring': {},
199
+ '@apply focus-within:ring-ring': {},
200
+ '@apply text-dark-secondary': {},
201
+ //Focus
202
+ '@apply focus-within:border-input-field-surface': {},
203
+ '&:not(:invalid):not([aria-invalid="true"])': {
204
+ '@apply focus-within:border-input-field-surface': {}
205
+ },
206
+ '&&-lg': {
207
+ '@apply text-input-large': {},
208
+ '@apply rounded-button-lg': {},
209
+ '@apply h-48': {}
210
+ },
211
+ '&&-md': {
212
+ '@apply text-input-medium': {},
213
+ '@apply rounded-button-md': {},
214
+ '@apply h-40': {}
215
+ },
216
+ '&&-sm': {
217
+ '@apply text-input-small': {},
218
+ '@apply rounded-button-sm': {},
219
+ '@apply h-32': {}
220
+ },
221
+ ...inputStandards(),
222
+ '.sk-form-input': {
223
+ '@apply rounded-0': {},
224
+ '@apply border-0': {},
225
+ '@apply focus:ring-0': {},
226
+ '@apply focus:ring-offset-0': {},
227
+ '@apply bg-transparent': {},
228
+ '@apply dark:bg-transparent': {},
229
+ '@apply grow': {}
230
+ }
227
231
  }
228
232
  }
229
233
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/input.ts"],"sourcesContent":["function calendar() {\r\n return `<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='18' height='18' x='3' y='4' rx='2' ry='2' /><line x1='16' x2='16' y1='2' y2='6' /><line x1='8' x2='8' y1='2' y2='6' /><line x1='3' x2='21' y1='10' y2='10' /></svg>`;\r\n}\r\nfunction clock() {\r\n return `<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10' /><polyline points='12 6 12 12 16 14' /></svg>`;\r\n}\r\n\r\nfunction inputStandards() {\r\n return {\r\n '@apply border-1': {},\r\n '@apply border-input-field-outline': {},\r\n '@apply hover:border-input-field-outline-hover': {},\r\n\r\n '@apply placeholder:text-dark-placeholder': {},\r\n\r\n '@apply bg-input-field-surface': {},\r\n\r\n //Invalid\r\n '&:invalid, &[aria-invalid=\"true\"]': {\r\n '@apply border-2 border-error-surface-primary': {},\r\n },\r\n\r\n //Disabled\r\n '&:disabled, &[aria-disabled=\"true\"]': {\r\n '@apply bg-input-field-surface-disabled': {},\r\n '@apply border-input-field-outline-disabled': {},\r\n '@apply hover:border-input-field-outline-disabled': {},\r\n '@apply text-dark-disabled': {},\r\n },\r\n\r\n //readOnly\r\n '&:read-only': {\r\n '@apply bg-input-field-surface': {},\r\n '@apply border-input-field-outline-disabled': {},\r\n '@apply text-dark-secondary': {},\r\n '@apply placeholder:text-dark-secondary': {},\r\n },\r\n };\r\n}\r\n\r\nfunction addin() {\r\n return {\r\n '&-addin': {\r\n '@apply bg-transparent': {},\r\n '@apply flex': {},\r\n '@apply justify-start items-center': {},\r\n '&-sm': {\r\n '@apply px-6 gap-6': {},\r\n '&.sk-form-input-addin-left': {\r\n '@apply -mr-12': {},\r\n '@apply pl-10': {},\r\n },\r\n '&.sk-form-input-addin-right': {\r\n '@apply -ml-12': {},\r\n '@apply pr-10': {},\r\n },\r\n svg: {\r\n '@apply w-16 h-16': {},\r\n },\r\n },\r\n '&-md': {\r\n '@apply md:px-8 md:gap-8': {},\r\n '&.sk-form-input-addin-left': {\r\n '@apply -mr-16': {},\r\n '@apply pl-12': {},\r\n },\r\n '&.sk-form-input-addin-right': {\r\n '@apply -ml-16': {},\r\n '@apply pr-12': {},\r\n },\r\n svg: {\r\n '@apply w-20 h-20': {},\r\n },\r\n },\r\n '&-lg': {\r\n '@apply md:px-8 md:gap-8': {},\r\n '&.sk-form-input-addin-left': {\r\n '@apply -mr-20': {},\r\n '@apply pl-16': {},\r\n },\r\n '&.sk-form-input-addin-right': {\r\n '@apply -ml-20': {},\r\n '@apply pr-16': {},\r\n },\r\n svg: {\r\n '@apply w-22 h-22': {},\r\n },\r\n },\r\n },\r\n };\r\n}\r\n\r\nfunction addon() {\r\n return {\r\n '&-addon': {\r\n '@apply flex flex-none relative': {},\r\n '@apply items-center': {},\r\n '@apply focus-within:ring': {},\r\n '@apply focus-within:ring-ring': {},\r\n '@apply text-dark-secondary': {},\r\n //Focus\r\n '@apply focus-within:border-input-field-surface': {},\r\n\r\n '&:not(:invalid):not([aria-invalid=\"true\"])': {\r\n '@apply focus-within:border-input-field-surface': {},\r\n },\r\n\r\n '&&-lg': {\r\n '@apply text-input-large': {},\r\n '@apply rounded-button-lg': {},\r\n '@apply h-48': {},\r\n },\r\n '&&-md': {\r\n '@apply text-input-medium': {},\r\n '@apply rounded-button-md': {},\r\n '@apply h-40': {},\r\n },\r\n '&&-sm': {\r\n '@apply text-input-small': {},\r\n '@apply rounded-button-sm': {},\r\n '@apply h-32': {},\r\n },\r\n '&&-left': {\r\n '@apply rounded-r-0': {},\r\n '@apply border-r-0': {},\r\n },\r\n '&&-right': {\r\n '@apply rounded-l-0': {},\r\n '@apply border-l-0': {},\r\n },\r\n ...inputStandards(),\r\n '.sk-form-input': {\r\n '@apply rounded-0': {},\r\n '@apply border-0': {},\r\n '@apply focus:ring-0': {},\r\n '@apply focus:ring-offset-0': {},\r\n '@apply bg-transparent': {},\r\n '@apply dark:bg-transparent': {},\r\n '@apply grow': {},\r\n },\r\n '.sk-form-select': {\r\n '@apply rounded-0': {},\r\n '@apply border-0 hover:border-0': {},\r\n '@apply focus:ring-0 focus:z-10': {},\r\n '@apply focus:ring-offset-0': {},\r\n '@apply bg-transparent hover:bg-transparent': {},\r\n '@apply dark:bg-transparent hover:dark:bg-transparent': {},\r\n '@apply grow': {},\r\n },\r\n '&&-left .sk-form-select': {\r\n '@apply border-r-1 border-r-divider': {},\r\n '@apply focus:border-r-transparent': {},\r\n },\r\n '&&-right .sk-form-select': {\r\n '@apply border-l-1 border-l-divider': {},\r\n '@apply focus:border-l-transparent': {},\r\n },\r\n '.sk-form-combobox': {\r\n '@apply rounded-0': {},\r\n '@apply border-0': {},\r\n '@apply focus-within:ring-0': {},\r\n '@apply focus-within:ring-offset-0': {},\r\n '@apply bg-transparent': {},\r\n '@apply dark:bg-transparent': {},\r\n },\r\n '&&-left .sk-form-combobox': {\r\n '@apply border-r-1 border-r-divider': {},\r\n '@apply focus:border-r-transparent': {},\r\n },\r\n '&&-right .sk-form-combobox': {\r\n '@apply border-l-1 border-l-divider': {},\r\n '@apply focus:border-l-transparent': {},\r\n },\r\n },\r\n };\r\n}\r\nfunction inputGroup() {\r\n return {\r\n '&-group': {\r\n '&-wrapper': {\r\n '@apply flex gap-0 max-w-full': {},\r\n },\r\n '@apply flex relative grow': {},\r\n '@apply items-center': {},\r\n '@apply focus-within:ring': {},\r\n '@apply focus-within:ring-ring': {},\r\n '@apply text-dark-secondary': {},\r\n //Focus\r\n '@apply focus-within:border-input-field-surface': {},\r\n\r\n '&:not(:invalid):not([aria-invalid=\"true\"])': {\r\n '@apply focus-within:border-input-field-surface': {},\r\n },\r\n\r\n '&&-lg': {\r\n '@apply text-input-large': {},\r\n '@apply rounded-button-lg': {},\r\n '@apply h-48': {},\r\n },\r\n '&&-md': {\r\n '@apply text-input-medium': {},\r\n '@apply rounded-button-md': {},\r\n '@apply h-40': {},\r\n },\r\n '&&-sm': {\r\n '@apply text-input-small': {},\r\n '@apply rounded-button-sm': {},\r\n '@apply h-32': {},\r\n },\r\n '&[data-hasleftaddon=\"true\"]': {\r\n '@apply pl-0': {},\r\n '@apply rounded-l-0': {},\r\n '@apply border-l-0': {},\r\n },\r\n '&[data-hasrightaddon=\"true\"]': {\r\n '@apply pr-0': {},\r\n '@apply rounded-r-0': {},\r\n '@apply border-r-0': {},\r\n },\r\n ...inputStandards(),\r\n '.sk-form-input': {\r\n '@apply rounded-0': {},\r\n '@apply border-0': {},\r\n '@apply focus:ring-0': {},\r\n '@apply focus:ring-offset-0': {},\r\n '@apply bg-transparent': {},\r\n '@apply dark:bg-transparent': {},\r\n '@apply grow': {},\r\n },\r\n },\r\n };\r\n}\r\n\r\nfunction timeAndDatePicker() {\r\n return {\r\n '&::-webkit-inner-spin-button, &::-webkit-calendar-picker-indicator': {\r\n '@apply block': {},\r\n '@apply p-0': {},\r\n '@apply pl-6 md:pl-8': {},\r\n '@apply m-0': {},\r\n '@apply bg-none': {},\r\n '@apply bg-dark-secondary': {},\r\n '&.sk-form-input-sm': {\r\n '@apply w-16 h-16': {},\r\n '@apply -mr-2': {},\r\n },\r\n '&.sk-form-input-md': {\r\n '@apply -mr-4': {},\r\n '@apply w-18 h-18': {},\r\n },\r\n '&.sk-form-input-lg': {\r\n '@apply -mr-6': {},\r\n '@apply w-20 h-20': {},\r\n },\r\n },\r\n\r\n '&[type=\"date\"]::-webkit-inner-spin-button, &[type=\"date\"]::-webkit-calendar-picker-indicator': {\r\n mask: [`url(\"data:image/svg+xml;utf-8,${calendar()}\") no-repeat 100% 100%`],\r\n '-webkit-mask': [`url(\"data:image/svg+xml;utf-8,${calendar()}\") no-repeat 100% 100%`],\r\n maskSize: 'contain',\r\n '-webkit-mask-size': 'contain',\r\n },\r\n '&[type=\"datetime-local\"]::-webkit-inner-spin-button, &[type=\"datetime-local\"]::-webkit-calendar-picker-indicator':\r\n {\r\n mask: [`url(\"data:image/svg+xml;utf-8,${calendar()}\") no-repeat 100% 100%`],\r\n '-webkit-mask': [`url(\"data:image/svg+xml;utf-8,${calendar()}\") no-repeat 100% 100%`],\r\n maskSize: 'contain',\r\n '-webkit-mask-size': 'contain',\r\n },\r\n '&[type=\"time\"]::-webkit-inner-spin-button, &[type=\"time\"]::-webkit-calendar-picker-indicator': {\r\n mask: [`url(\"data:image/svg+xml;utf-8,${clock()}\") no-repeat 100% 100%`],\r\n '-webkit-mask': [`url(\"data:image/svg+xml;utf-8,${clock()}\") no-repeat 100% 100%`],\r\n maskSize: 'contain',\r\n '-webkit-mask-size': 'contain',\r\n },\r\n\r\n '&:disabled, &[aria-disabled=\"true\"]': {\r\n '&::-webkit-inner-spin-button, &::-webkit-calendar-picker-indicator': {\r\n '@apply color-black-disabled': {},\r\n },\r\n },\r\n };\r\n}\r\n\r\nexport const Input = () => ({\r\n '.sk-form-input': {\r\n '@apply grow-0': {},\r\n '@apply text-dark-primary': {},\r\n\r\n '&[data-hideextra=\"true\"]': {\r\n '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {\r\n '-webkit-appearance': 'none',\r\n display: 'none',\r\n margin: '0px',\r\n },\r\n '-moz-appearance': 'textfield',\r\n },\r\n\r\n '&&-lg': {\r\n '@apply rounded-button-lg': {},\r\n '@apply px-20': {},\r\n '@apply py-11': {},\r\n '@apply gap-8': {},\r\n '@apply text-input-large': {},\r\n '@apply h-48': {},\r\n },\r\n '&&-md': {\r\n '@apply rounded-button-md': {},\r\n '@apply px-16': {},\r\n '@apply py-7': {},\r\n '@apply gap-8': {},\r\n '@apply text-input-medium': {},\r\n '@apply h-40': {},\r\n },\r\n '&&-sm': {\r\n '@apply rounded-button-sm': {},\r\n '@apply px-12': {},\r\n '@apply py-5': {},\r\n '@apply gap-6': {},\r\n '@apply text-input-small': {},\r\n '@apply h-32': {},\r\n },\r\n '&&-textarea': {\r\n '@apply h-auto': {},\r\n '&-warning': {\r\n '@apply sr-only': {},\r\n },\r\n },\r\n\r\n //Focus\r\n '@apply focus:ring': {},\r\n '@apply focus:ring-ring': {},\r\n '@apply focus:ring-offset': {},\r\n '@apply focus:border-input-field-surface': {},\r\n '@apply focus-within:ring': {},\r\n '@apply focus-within:ring-ring': {},\r\n '@apply focus-within:ring-offset': {},\r\n '@apply focus-within:border-input-field-surface': {},\r\n '&:not(:invalid):not([aria-invalid=\"true\"])': {\r\n '@apply focus:hover:border-input-field-surface': {},\r\n },\r\n ...timeAndDatePicker(),\r\n ...inputStandards(),\r\n ...inputGroup(),\r\n ...addin(),\r\n ...addon(),\r\n },\r\n});\r\n"],"names":["Input","calendar","clock","inputStandards","addin","svg","addon","inputGroup","timeAndDatePicker","mask","maskSize","display","margin"],"mappings":"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"}
1
+ {"version":3,"sources":["../../../src/components/input.ts"],"sourcesContent":["function calendar() {\r\n return `<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='18' height='18' x='3' y='4' rx='2' ry='2' /><line x1='16' x2='16' y1='2' y2='6' /><line x1='8' x2='8' y1='2' y2='6' /><line x1='3' x2='21' y1='10' y2='10' /></svg>`;\r\n}\r\nfunction clock() {\r\n return `<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10' /><polyline points='12 6 12 12 16 14' /></svg>`;\r\n}\r\n\r\nfunction inputStandards() {\r\n return {\r\n '@apply border-1': {},\r\n '@apply border-input-field-outline': {},\r\n '@apply hover:border-input-field-outline-hover': {},\r\n\r\n '@apply placeholder:text-dark-placeholder': {},\r\n\r\n '@apply bg-input-field-surface': {},\r\n\r\n //Invalid\r\n '&:invalid, &[aria-invalid=\"true\"]': {\r\n '@apply border-2 border-error-surface-primary': {},\r\n },\r\n\r\n //Disabled\r\n '&:disabled, &[aria-disabled=\"true\"]': {\r\n '@apply bg-input-field-surface-disabled': {},\r\n '@apply border-input-field-outline-disabled': {},\r\n '@apply hover:border-input-field-outline-disabled': {},\r\n '@apply text-dark-disabled': {},\r\n },\r\n\r\n //readOnly\r\n '&:read-only': {\r\n '@apply bg-input-field-surface': {},\r\n '@apply border-input-field-outline-disabled': {},\r\n '@apply text-dark-secondary': {},\r\n '@apply placeholder:text-dark-secondary': {},\r\n },\r\n };\r\n}\r\n\r\nfunction addin() {\r\n return {\r\n '&-addin': {\r\n '@apply bg-transparent': {},\r\n '@apply flex': {},\r\n '@apply justify-start items-center': {},\r\n '&-sm': {\r\n '@apply px-6 gap-6': {},\r\n '&.sk-form-input-addin-left': {\r\n '@apply -mr-12': {},\r\n '@apply pl-10': {},\r\n },\r\n '&.sk-form-input-addin-right': {\r\n '@apply -ml-12': {},\r\n '@apply pr-10': {},\r\n },\r\n svg: {\r\n '@apply w-16 h-16': {},\r\n },\r\n },\r\n '&-md': {\r\n '@apply md:px-8 md:gap-8': {},\r\n '&.sk-form-input-addin-left': {\r\n '@apply -mr-16': {},\r\n '@apply pl-12': {},\r\n },\r\n '&.sk-form-input-addin-right': {\r\n '@apply -ml-16': {},\r\n '@apply pr-12': {},\r\n },\r\n svg: {\r\n '@apply w-20 h-20': {},\r\n },\r\n },\r\n '&-lg': {\r\n '@apply md:px-8 md:gap-8': {},\r\n '&.sk-form-input-addin-left': {\r\n '@apply -mr-20': {},\r\n '@apply pl-16': {},\r\n },\r\n '&.sk-form-input-addin-right': {\r\n '@apply -ml-20': {},\r\n '@apply pr-16': {},\r\n },\r\n svg: {\r\n '@apply w-22 h-22': {},\r\n },\r\n },\r\n },\r\n };\r\n}\r\n\r\nfunction addon() {\r\n return {\r\n '&-addon': {\r\n '@apply flex flex-none relative': {},\r\n '@apply items-center': {},\r\n '@apply focus-within:ring': {},\r\n '@apply focus-within:ring-ring': {},\r\n '@apply text-dark-secondary': {},\r\n //Focus\r\n '@apply focus-within:border-input-field-surface': {},\r\n\r\n '&:not(:invalid):not([aria-invalid=\"true\"])': {\r\n '@apply focus-within:border-input-field-surface': {},\r\n },\r\n\r\n '&&-lg': {\r\n '@apply text-input-large': {},\r\n '@apply rounded-button-lg': {},\r\n '@apply h-48': {},\r\n },\r\n '&&-md': {\r\n '@apply text-input-medium': {},\r\n '@apply rounded-button-md': {},\r\n '@apply h-40': {},\r\n },\r\n '&&-sm': {\r\n '@apply text-input-small': {},\r\n '@apply rounded-button-sm': {},\r\n '@apply h-32': {},\r\n },\r\n '&&-left': {\r\n '@apply rounded-r-0': {},\r\n '@apply border-r-0': {},\r\n },\r\n '&&-right': {\r\n '@apply rounded-l-0': {},\r\n '@apply border-l-0': {},\r\n },\r\n ...inputStandards(),\r\n '.sk-form-input': {\r\n '@apply rounded-0': {},\r\n '@apply border-0': {},\r\n '@apply focus:ring-0': {},\r\n '@apply focus:ring-offset-0': {},\r\n '@apply bg-transparent': {},\r\n '@apply dark:bg-transparent': {},\r\n '@apply grow': {},\r\n },\r\n '.sk-form-select': {\r\n '@apply rounded-0': {},\r\n '@apply border-0 hover:border-0': {},\r\n '@apply focus:ring-0 focus:z-10': {},\r\n '@apply focus:ring-offset-0': {},\r\n '@apply bg-transparent hover:bg-transparent': {},\r\n '@apply dark:bg-transparent hover:dark:bg-transparent': {},\r\n '@apply grow': {},\r\n },\r\n '&&-left .sk-form-select': {\r\n '@apply border-r-1 border-r-divider': {},\r\n '@apply focus:border-r-transparent': {},\r\n },\r\n '&&-right .sk-form-select': {\r\n '@apply border-l-1 border-l-divider': {},\r\n '@apply focus:border-l-transparent': {},\r\n },\r\n '.sk-form-combobox': {\r\n '@apply rounded-0': {},\r\n '@apply border-0': {},\r\n '@apply focus-within:ring-0': {},\r\n '@apply focus-within:ring-offset-0': {},\r\n '@apply bg-transparent': {},\r\n '@apply dark:bg-transparent': {},\r\n },\r\n '&&-left .sk-form-combobox': {\r\n '@apply border-r-1 border-r-divider': {},\r\n '@apply focus:border-r-transparent': {},\r\n },\r\n '&&-right .sk-form-combobox': {\r\n '@apply border-l-1 border-l-divider': {},\r\n '@apply focus:border-l-transparent': {},\r\n },\r\n },\r\n };\r\n}\r\nfunction inputGroup() {\r\n return {\r\n '&-group': {\r\n '&-outer': {\r\n '@apply flex gap-0 max-w-full': {},\r\n '&[data-hasleftaddon=\"true\"]': {\r\n '.sk-form-input, .sk-form-input-group-inner': {\r\n '@apply rounded-l-0': {},\r\n '@apply border-l-0': {},\r\n },\r\n },\r\n '&[data-hasrightaddon=\"true\"]': {\r\n '.sk-form-input, .sk-form-input-group-inner': {\r\n '@apply rounded-r-0': {},\r\n '@apply border-r-0': {},\r\n },\r\n },\r\n },\r\n '&-inner': {\r\n '@apply flex relative grow': {},\r\n '@apply items-center': {},\r\n '@apply focus-within:ring': {},\r\n '@apply focus-within:ring-ring': {},\r\n '@apply text-dark-secondary': {},\r\n //Focus\r\n '@apply focus-within:border-input-field-surface': {},\r\n\r\n '&:not(:invalid):not([aria-invalid=\"true\"])': {\r\n '@apply focus-within:border-input-field-surface': {},\r\n },\r\n\r\n '&&-lg': {\r\n '@apply text-input-large': {},\r\n '@apply rounded-button-lg': {},\r\n '@apply h-48': {},\r\n },\r\n '&&-md': {\r\n '@apply text-input-medium': {},\r\n '@apply rounded-button-md': {},\r\n '@apply h-40': {},\r\n },\r\n '&&-sm': {\r\n '@apply text-input-small': {},\r\n '@apply rounded-button-sm': {},\r\n '@apply h-32': {},\r\n },\r\n\r\n ...inputStandards(),\r\n '.sk-form-input': {\r\n '@apply rounded-0': {},\r\n '@apply border-0': {},\r\n '@apply focus:ring-0': {},\r\n '@apply focus:ring-offset-0': {},\r\n '@apply bg-transparent': {},\r\n '@apply dark:bg-transparent': {},\r\n '@apply grow': {},\r\n },\r\n },\r\n },\r\n };\r\n}\r\n\r\nfunction timeAndDatePicker() {\r\n return {\r\n '&::-webkit-inner-spin-button, &::-webkit-calendar-picker-indicator': {\r\n '@apply block': {},\r\n '@apply p-0': {},\r\n '@apply pl-6 md:pl-8': {},\r\n '@apply m-0': {},\r\n '@apply bg-none': {},\r\n '@apply bg-dark-secondary': {},\r\n '&.sk-form-input-sm': {\r\n '@apply w-16 h-16': {},\r\n '@apply -mr-2': {},\r\n },\r\n '&.sk-form-input-md': {\r\n '@apply -mr-4': {},\r\n '@apply w-18 h-18': {},\r\n },\r\n '&.sk-form-input-lg': {\r\n '@apply -mr-6': {},\r\n '@apply w-20 h-20': {},\r\n },\r\n },\r\n\r\n '&[type=\"date\"]::-webkit-inner-spin-button, &[type=\"date\"]::-webkit-calendar-picker-indicator': {\r\n mask: [`url(\"data:image/svg+xml;utf-8,${calendar()}\") no-repeat 100% 100%`],\r\n '-webkit-mask': [`url(\"data:image/svg+xml;utf-8,${calendar()}\") no-repeat 100% 100%`],\r\n maskSize: 'contain',\r\n '-webkit-mask-size': 'contain',\r\n },\r\n '&[type=\"datetime-local\"]::-webkit-inner-spin-button, &[type=\"datetime-local\"]::-webkit-calendar-picker-indicator':\r\n {\r\n mask: [`url(\"data:image/svg+xml;utf-8,${calendar()}\") no-repeat 100% 100%`],\r\n '-webkit-mask': [`url(\"data:image/svg+xml;utf-8,${calendar()}\") no-repeat 100% 100%`],\r\n maskSize: 'contain',\r\n '-webkit-mask-size': 'contain',\r\n },\r\n '&[type=\"time\"]::-webkit-inner-spin-button, &[type=\"time\"]::-webkit-calendar-picker-indicator': {\r\n mask: [`url(\"data:image/svg+xml;utf-8,${clock()}\") no-repeat 100% 100%`],\r\n '-webkit-mask': [`url(\"data:image/svg+xml;utf-8,${clock()}\") no-repeat 100% 100%`],\r\n maskSize: 'contain',\r\n '-webkit-mask-size': 'contain',\r\n },\r\n\r\n '&:disabled, &[aria-disabled=\"true\"]': {\r\n '&::-webkit-inner-spin-button, &::-webkit-calendar-picker-indicator': {\r\n '@apply color-black-disabled': {},\r\n },\r\n },\r\n };\r\n}\r\n\r\nexport const Input = () => ({\r\n '.sk-form-input': {\r\n '@apply grow-0': {},\r\n '@apply text-dark-primary': {},\r\n\r\n '&[data-hideextra=\"true\"]': {\r\n '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {\r\n '-webkit-appearance': 'none',\r\n display: 'none',\r\n margin: '0px',\r\n },\r\n '-moz-appearance': 'textfield',\r\n },\r\n\r\n '&&-lg': {\r\n '@apply rounded-button-lg': {},\r\n '@apply px-20': {},\r\n '@apply py-11': {},\r\n '@apply gap-8': {},\r\n '@apply text-input-large': {},\r\n '@apply h-48': {},\r\n },\r\n '&&-md': {\r\n '@apply rounded-button-md': {},\r\n '@apply px-16': {},\r\n '@apply py-7': {},\r\n '@apply gap-8': {},\r\n '@apply text-input-medium': {},\r\n '@apply h-40': {},\r\n },\r\n '&&-sm': {\r\n '@apply rounded-button-sm': {},\r\n '@apply px-12': {},\r\n '@apply py-5': {},\r\n '@apply gap-6': {},\r\n '@apply text-input-small': {},\r\n '@apply h-32': {},\r\n },\r\n '&&-textarea': {\r\n '@apply h-auto': {},\r\n '&-warning': {\r\n '@apply sr-only': {},\r\n },\r\n },\r\n\r\n //Focus\r\n '@apply focus:ring': {},\r\n '@apply focus:ring-ring': {},\r\n '@apply focus:ring-offset': {},\r\n '@apply focus:border-input-field-surface': {},\r\n '@apply focus-within:ring': {},\r\n '@apply focus-within:ring-ring': {},\r\n '@apply focus-within:ring-offset': {},\r\n '@apply focus-within:border-input-field-surface': {},\r\n '&:not(:invalid):not([aria-invalid=\"true\"])': {\r\n '@apply focus:hover:border-input-field-surface': {},\r\n },\r\n ...timeAndDatePicker(),\r\n ...inputStandards(),\r\n ...inputGroup(),\r\n ...addin(),\r\n ...addon(),\r\n },\r\n});\r\n"],"names":["Input","calendar","clock","inputStandards","addin","svg","addon","inputGroup","timeAndDatePicker","mask","maskSize","display","margin"],"mappings":"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"}
@@ -29,6 +29,12 @@ const ProgressBar = (colors)=>({
29
29
  '.sk-progress-bar-fill': {
30
30
  [`@apply bg-primary-surface`]: {}
31
31
  }
32
+ },
33
+ '&-sm': {
34
+ '@apply h-[4px]': {}
35
+ },
36
+ '&-md': {
37
+ '@apply h-[8px]': {}
32
38
  }
33
39
  }
34
40
  });
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/progress-bar.ts"],"sourcesContent":["export const ProgressBar = (colors: string[]) => ({\r\n '.sk-progress-bar': {\r\n '@apply flex h-4 rounded-circular bg-background-color-mixin-2': {},\r\n\r\n '&-fill': {\r\n '@apply rounded-circular': {},\r\n },\r\n\r\n ...colors.reduce(\r\n (styles, color) => ({\r\n ...styles,\r\n [`&[data-color=\"${color}\"]`]: {\r\n '.sk-progress-bar-fill': {\r\n [`@apply bg-${color}-surface-primary`]: {},\r\n },\r\n\r\n '&[data-accent=\"true\"]': {\r\n [`@apply bg-inverted-${color}-surface-primary`]: {},\r\n },\r\n },\r\n }),\r\n {}\r\n ),\r\n\r\n \"&[data-color='tertiary']\": {\r\n '.sk-progress-bar-fill': {\r\n [`@apply bg-primary-surface`]: {},\r\n },\r\n },\r\n },\r\n});\r\n"],"names":["ProgressBar","colors","reduce","styles","color"],"mappings":";;;;+BAAaA;;;eAAAA;;;AAAN,MAAMA,cAAc,CAACC,SAAsB,CAAA;QAChD,oBAAoB;YAClB,gEAAgE,CAAC;YAEjE,UAAU;gBACR,2BAA2B,CAAC;YAC9B;YAEA,GAAGA,OAAOC,MAAM,CACd,CAACC,QAAQC,QAAW,CAAA;oBAClB,GAAGD,MAAM;oBACT,CAAC,CAAC,cAAc,EAAEC,MAAM,EAAE,CAAC,CAAC,EAAE;wBAC5B,yBAAyB;4BACvB,CAAC,CAAC,UAAU,EAAEA,MAAM,gBAAgB,CAAC,CAAC,EAAE,CAAC;wBAC3C;wBAEA,yBAAyB;4BACvB,CAAC,CAAC,mBAAmB,EAAEA,MAAM,gBAAgB,CAAC,CAAC,EAAE,CAAC;wBACpD;oBACF;gBACF,CAAA,GACA,CAAC,EACF;YAED,4BAA4B;gBAC1B,yBAAyB;oBACvB,CAAC,CAAC,yBAAyB,CAAC,CAAC,EAAE,CAAC;gBAClC;YACF;QACF;IACF,CAAA"}
1
+ {"version":3,"sources":["../../../src/components/progress-bar.ts"],"sourcesContent":["export const ProgressBar = (colors: string[]) => ({\r\n '.sk-progress-bar': {\r\n '@apply flex h-4 rounded-circular bg-background-color-mixin-2': {},\r\n\r\n '&-fill': {\r\n '@apply rounded-circular': {},\r\n },\r\n\r\n ...colors.reduce(\r\n (styles, color) => ({\r\n ...styles,\r\n [`&[data-color=\"${color}\"]`]: {\r\n '.sk-progress-bar-fill': {\r\n [`@apply bg-${color}-surface-primary`]: {},\r\n },\r\n\r\n '&[data-accent=\"true\"]': {\r\n [`@apply bg-inverted-${color}-surface-primary`]: {},\r\n },\r\n },\r\n }),\r\n {}\r\n ),\r\n\r\n \"&[data-color='tertiary']\": {\r\n '.sk-progress-bar-fill': {\r\n [`@apply bg-primary-surface`]: {},\r\n },\r\n },\r\n '&-sm': {\r\n '@apply h-[4px]': {},\r\n },\r\n '&-md': {\r\n '@apply h-[8px]': {},\r\n },\r\n },\r\n});\r\n"],"names":["ProgressBar","colors","reduce","styles","color"],"mappings":";;;;+BAAaA;;;eAAAA;;;AAAN,MAAMA,cAAc,CAACC,SAAsB,CAAA;QAChD,oBAAoB;YAClB,gEAAgE,CAAC;YAEjE,UAAU;gBACR,2BAA2B,CAAC;YAC9B;YAEA,GAAGA,OAAOC,MAAM,CACd,CAACC,QAAQC,QAAW,CAAA;oBAClB,GAAGD,MAAM;oBACT,CAAC,CAAC,cAAc,EAAEC,MAAM,EAAE,CAAC,CAAC,EAAE;wBAC5B,yBAAyB;4BACvB,CAAC,CAAC,UAAU,EAAEA,MAAM,gBAAgB,CAAC,CAAC,EAAE,CAAC;wBAC3C;wBAEA,yBAAyB;4BACvB,CAAC,CAAC,mBAAmB,EAAEA,MAAM,gBAAgB,CAAC,CAAC,EAAE,CAAC;wBACpD;oBACF;gBACF,CAAA,GACA,CAAC,EACF;YAED,4BAA4B;gBAC1B,yBAAyB;oBACvB,CAAC,CAAC,yBAAyB,CAAC,CAAC,EAAE,CAAC;gBAClC;YACF;YACA,QAAQ;gBACN,kBAAkB,CAAC;YACrB;YACA,QAAQ;gBACN,kBAAkB,CAAC;YACrB;QACF;IACF,CAAA"}