@sk-web-gui/core 0.1.84 → 0.1.86

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 (16) hide show
  1. package/dist/cjs/components/accordion.js +104 -39
  2. package/dist/cjs/components/accordion.js.map +1 -1
  3. package/dist/cjs/components/forms.js +13 -1
  4. package/dist/cjs/components/forms.js.map +1 -1
  5. package/dist/cjs/components/zebratable.js +5 -2
  6. package/dist/cjs/components/zebratable.js.map +1 -1
  7. package/dist/esm/components/accordion.js +104 -39
  8. package/dist/esm/components/accordion.js.map +1 -1
  9. package/dist/esm/components/forms.js +13 -1
  10. package/dist/esm/components/forms.js.map +1 -1
  11. package/dist/esm/components/zebratable.js +5 -2
  12. package/dist/esm/components/zebratable.js.map +1 -1
  13. package/package.json +2 -2
  14. package/src/components/accordion.js +107 -36
  15. package/src/components/forms.js +15 -1
  16. package/src/components/zebratable.js +5 -2
package/dist/cjs/components/accordion.js CHANGED
@@ -2,14 +2,23 @@
2
2
 
3
3
  module.exports = Accordion = function Accordion(colors) {
4
4
  return {
5
- '.accordion': {
5
+ '.sk-disclosure': {
6
+ '&:has(&-header:focus-visible)': {
7
+ '@apply outline': {}
8
+ },
6
9
  '&-header': {
7
10
  '@apply flex flex-col text-left': {},
8
11
  '[aria-expanded="true"] &': {
9
12
  '@apply bg-hover': {}
10
13
  },
14
+ '&:focus-visible': {
15
+ '@apply outline-0': {}
16
+ },
11
17
  '&-icon': {
12
- '@apply ml-auto !text-2xl': {}
18
+ '@apply ml-auto !text-2xl': {},
19
+ svg: {
20
+ '@apply !text-2xl': {}
21
+ }
13
22
  }
14
23
  },
15
24
  '&-is-open &-header': {
@@ -18,17 +27,10 @@ module.exports = Accordion = function Accordion(colors) {
18
27
  '&-toggle': {
19
28
  '@apply flex items-center inline-block text-lg leading-lg text-left text-lg mx-md sm:mx-lg my-md': {},
20
29
  fontWeight: 'bold',
21
- //"@apply focus-visible:shadow shadow-lg": {},
22
- '&:focus-visible': {
23
- boxShadow: '0 0 0 0.4rem #fff!important',
24
- outline: '0'
25
- //"@apply border-4": {},
26
- },
27
-
28
- '.accordion-title': {
30
+ '.sk-disclosure-title': {
29
31
  '@apply mr-md text-base leading-base md:text-lg md:leading-lg': {}
30
32
  },
31
- '.accordion-subtitle': {
33
+ '.sk-disclosure-subtitle': {
32
34
  '@apply m-0 mr-md text-sm font-normal': {}
33
35
  }
34
36
  },
@@ -46,25 +48,25 @@ module.exports = Accordion = function Accordion(colors) {
46
48
  },
47
49
  '&-solid': {
48
50
  '@apply border border-primary': {},
49
- '.accordion-header': {
51
+ '.sk-disclosure-header': {
50
52
  '@apply bg-primary text-white': {},
51
53
  '[aria-expanded="true"] &': {
52
54
  '@apply bg-hover': {}
53
55
  }
54
56
  }
55
57
  },
56
- '&-alert': {
58
+ '&-solid[data-alert="true"], &-outline[data-alert="true"]': {
57
59
  '@apply border border-warning': {},
58
- '.accordion-header': {
60
+ '.sk-disclosure-header:not([data-disabled="true"])': {
59
61
  '@apply bg-warning-light text-warning': {},
60
62
  '[aria-expanded="true"] &': {
61
63
  '@apply bg-warning-light': {}
62
64
  }
63
65
  }
64
66
  },
65
- '&-error': {
67
+ '&-solid[data-error="true"], &-outline[data-error="true"]': {
66
68
  '@apply border border-error': {},
67
- '.accordion-header': {
69
+ '.sk-disclosure-header:not([data-disabled="true"])': {
68
70
  '@apply bg-error-light text-error': {},
69
71
  '[aria-expanded="true"] &': {
70
72
  '@apply bg-error-light': {}
@@ -73,52 +75,115 @@ module.exports = Accordion = function Accordion(colors) {
73
75
  },
74
76
  '&-is-open': {
75
77
  '@apply border border-gray-stroke': {},
76
- '& .accordion-header': {
78
+ '& .sk-disclosure-header': {
77
79
  '@apply bg-hover text-white': {}
80
+ },
81
+ '&[data-alert="true"]': {
82
+ '@apply border border-warning': {},
83
+ '& .sk-disclosure-header': {
84
+ '@apply border-b border-warning': {}
85
+ }
86
+ },
87
+ '&[data-error="true"]': {
88
+ '@apply border border-error': {},
89
+ '& .sk-disclosure-header': {
90
+ '@apply border-b border-error': {}
91
+ }
78
92
  }
79
93
  },
80
- '&-is-open-alert': {
81
- '@apply border border-warning': {},
82
- '& .accordion-header': {
83
- '@apply border-b border-warning': {}
84
- }
85
- },
86
- '&-is-open-error': {
87
- '@apply border border-error': {},
88
- '& .accordion-header': {
89
- '@apply border-b border-error': {}
90
- }
91
- },
92
- '&-is-open &-body, &-is-open-alert &-body, &-is-open-error &-body': {
94
+ '&-is-open &-body': {
93
95
  '@apply overflow-visible animate-reset-overflow': {}
94
96
  },
95
97
  '&-outline': {
96
98
  '@apply border border-gray-stroke': {},
97
- '.accordion-body': {
99
+ '&:not([data-error="true"]):not([data-alert="true"]) .sk-disclosure-body': {
98
100
  '@apply mt-0': {}
99
101
  },
100
- '.accordion-toggle': {
101
- '&:focus-visible': {
102
- boxShadow: '0 0 0 0.4rem #4b4b4b!important',
103
- outline: '0'
102
+ '.sk-disclosure-toggle': {},
103
+ '.sk-disclosure-header': {
104
+ '@apply bg-transparent text-body': {},
105
+ '[aria-expanded="true"] &': {
106
+ '@apply bg-hover': {}
104
107
  }
108
+ }
109
+ },
110
+ '&-plain': {
111
+ '@apply border-0': {},
112
+ '&:has(.sk-disclosure-header:focus-visible)': {
113
+ '@apply outline-offset-4': {}
105
114
  },
106
- '.accordion-header': {
115
+ '.sk-disclosure-header': {
107
116
  '@apply bg-transparent text-body': {},
108
117
  '[aria-expanded="true"] &': {
109
118
  '@apply bg-hover': {}
119
+ },
120
+ '&[data-disabled="true"]': {
121
+ '@apply bg-transparent text-gray-stroke': {}
122
+ },
123
+ '.sk-disclosure-toggle': {
124
+ '@apply mx-0': {}
125
+ }
126
+ },
127
+ '.sk-disclosure-body': {
128
+ '@apply m-0': {}
129
+ },
130
+ '&[data-alert="true"]': {
131
+ '@apply border-0': {},
132
+ '.sk-disclosure-header': {
133
+ '@apply border-0 text-warning': {}
134
+ }
135
+ },
136
+ '&[data-error="true"]': {
137
+ '@apply border-0': {},
138
+ '.sk-disclosure-header': {
139
+ '@apply border-0 text-error': {}
110
140
  }
111
141
  }
112
142
  },
113
- '&-disabled, &-disabled button': {
143
+ '&-disabled, &-disabled [role="button"]': {
114
144
  '@apply disabled:cursor-not-allowed cursor-not-allowed': {}
115
145
  },
116
- '&-disabled &-header': {
117
- '@apply bg-gray-lighter text-gray': {}
146
+ '&-header[data-disabled="true"]': {
147
+ '@apply bg-gray-lighter text-gray-stroke': {}
118
148
  },
119
149
  '&-disabled, &&-disabled': {
120
150
  '@apply border-gray': {}
121
151
  }
152
+ },
153
+ '.sk-accordion': {
154
+ '&-item': {
155
+ '.sk-disclosure': {
156
+ transitionProperty: 'margin',
157
+ transitionDuration: '180ms',
158
+ '&-disabled': {
159
+ '@apply border-x-transparent border-y-transparent': {}
160
+ },
161
+ '&-plain, &-plain[data-disabled="true"]': {
162
+ '@apply border border-transparent border-b-gray-stroke': {}
163
+ },
164
+ '&-solid[data-open="false"]': {
165
+ '@apply border-white': {},
166
+ '&[data-disabled="true"]': {
167
+ '@apply border-x-transparent border-y-transparent': {}
168
+ }
169
+ },
170
+ '&[data-open="true"]:not(&-plain)': {
171
+ '@apply mt-md mb-md': {}
172
+ }
173
+ },
174
+ '&:not(:first-child)': {
175
+ '@apply mt-[-1px]': {}
176
+ },
177
+ '&:first-child .sk-disclosure[data-open="true"]:not(.sk-disclosure-plain)': {
178
+ '@apply mt-0 mb-md': {}
179
+ },
180
+ '&:last-child .sk-disclosure[data-open="true"]:not(.sk-disclosure-plain)': {
181
+ '@apply mt-md mb-0': {}
182
+ },
183
+ '&:last-child .sk-disclosure-plain': {
184
+ '@apply border-b-transparent': {}
185
+ }
186
+ }
122
187
  }
123
188
  };
124
189
  };
package/dist/cjs/components/accordion.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"accordion.js","names":["module","exports","Accordion","colors","fontWeight","boxShadow","outline","transitionProperty","transitionTimingFunction","transitionDuration"],"sources":["../../../src/components/accordion.js"],"sourcesContent":["module.exports = Accordion = (colors) => ({\r\n '.accordion': {\r\n '&-header': {\r\n '@apply flex flex-col text-left': {},\r\n\r\n '[aria-expanded=\"true\"] &': {\r\n '@apply bg-hover': {},\r\n },\r\n\r\n '&-icon': {\r\n '@apply ml-auto !text-2xl': {},\r\n },\r\n },\r\n\r\n '&-is-open &-header': {\r\n '@apply bg-hover': {},\r\n },\r\n\r\n '&-toggle': {\r\n '@apply flex items-center inline-block text-lg leading-lg text-left text-lg mx-md sm:mx-lg my-md': {},\r\n fontWeight: 'bold',\r\n //\"@apply focus-visible:shadow shadow-lg\": {},\r\n '&:focus-visible': {\r\n boxShadow: '0 0 0 0.4rem #fff!important',\r\n outline: '0',\r\n //\"@apply border-4\": {},\r\n },\r\n '.accordion-title': {\r\n '@apply mr-md text-base leading-base md:text-lg md:leading-lg': {},\r\n },\r\n '.accordion-subtitle': {\r\n '@apply m-0 mr-md text-sm font-normal': {},\r\n },\r\n },\r\n\r\n '&-body': {\r\n '@apply h-0 overflow-hidden': {},\r\n transitionProperty: 'visibility, height, padding, margin',\r\n transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',\r\n transitionDuration: '180ms',\r\n\r\n '&[aria-hidden=\"true\"], &[data-hidden=\"true\"]': {\r\n '@apply my-0 invisible': {},\r\n },\r\n\r\n '&[aria-hidden=\"false\"], &[data-hidden=\"false\"]': {\r\n '@apply block h-auto visible': {},\r\n },\r\n },\r\n\r\n '&-solid': {\r\n '@apply border border-primary': {},\r\n '.accordion-header': {\r\n '@apply bg-primary text-white': {},\r\n\r\n '[aria-expanded=\"true\"] &': {\r\n '@apply bg-hover': {},\r\n },\r\n },\r\n },\r\n\r\n '&-alert': {\r\n '@apply border border-warning': {},\r\n '.accordion-header': {\r\n '@apply bg-warning-light text-warning': {},\r\n\r\n '[aria-expanded=\"true\"] &': {\r\n '@apply bg-warning-light': {},\r\n },\r\n },\r\n },\r\n '&-error': {\r\n '@apply border border-error': {},\r\n '.accordion-header': {\r\n '@apply bg-error-light text-error': {},\r\n\r\n '[aria-expanded=\"true\"] &': {\r\n '@apply bg-error-light': {},\r\n },\r\n },\r\n },\r\n\r\n '&-is-open': {\r\n '@apply border border-gray-stroke': {},\r\n '& .accordion-header': {\r\n '@apply bg-hover text-white': {},\r\n },\r\n },\r\n\r\n '&-is-open-alert': {\r\n '@apply border border-warning': {},\r\n '& .accordion-header': {\r\n '@apply border-b border-warning': {},\r\n },\r\n },\r\n\r\n '&-is-open-error': {\r\n '@apply border border-error': {},\r\n '& .accordion-header': {\r\n '@apply border-b border-error': {},\r\n },\r\n },\r\n\r\n '&-is-open &-body, &-is-open-alert &-body, &-is-open-error &-body': {\r\n '@apply overflow-visible animate-reset-overflow': {},\r\n },\r\n\r\n '&-outline': {\r\n '@apply border border-gray-stroke': {},\r\n '.accordion-body': {\r\n '@apply mt-0': {},\r\n },\r\n '.accordion-toggle': {\r\n '&:focus-visible': {\r\n boxShadow: '0 0 0 0.4rem #4b4b4b!important',\r\n outline: '0',\r\n },\r\n },\r\n '.accordion-header': {\r\n '@apply bg-transparent text-body': {},\r\n\r\n '[aria-expanded=\"true\"] &': {\r\n '@apply bg-hover': {},\r\n },\r\n },\r\n },\r\n\r\n '&-disabled, &-disabled button': {\r\n '@apply disabled:cursor-not-allowed cursor-not-allowed': {},\r\n },\r\n\r\n '&-disabled &-header': {\r\n '@apply bg-gray-lighter text-gray': {},\r\n },\r\n\r\n '&-disabled, &&-disabled': {\r\n '@apply border-gray': {},\r\n },\r\n },\r\n});\r\n"],"mappings":"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"}
1
+ {"version":3,"file":"accordion.js","names":["module","exports","Accordion","colors","svg","fontWeight","transitionProperty","transitionTimingFunction","transitionDuration"],"sources":["../../../src/components/accordion.js"],"sourcesContent":["module.exports = Accordion = (colors) => ({\r\n '.sk-disclosure': {\r\n '&:has(&-header:focus-visible)': {\r\n '@apply outline': {},\r\n },\r\n '&-header': {\r\n '@apply flex flex-col text-left': {},\r\n\r\n '[aria-expanded=\"true\"] &': {\r\n '@apply bg-hover': {},\r\n },\r\n\r\n '&:focus-visible': {\r\n '@apply outline-0': {},\r\n },\r\n\r\n '&-icon': {\r\n '@apply ml-auto !text-2xl': {},\r\n svg: {\r\n '@apply !text-2xl': {},\r\n },\r\n },\r\n },\r\n\r\n '&-is-open &-header': {\r\n '@apply bg-hover': {},\r\n },\r\n\r\n '&-toggle': {\r\n '@apply flex items-center inline-block text-lg leading-lg text-left text-lg mx-md sm:mx-lg my-md': {},\r\n fontWeight: 'bold',\r\n\r\n '.sk-disclosure-title': {\r\n '@apply mr-md text-base leading-base md:text-lg md:leading-lg': {},\r\n },\r\n '.sk-disclosure-subtitle': {\r\n '@apply m-0 mr-md text-sm font-normal': {},\r\n },\r\n },\r\n\r\n '&-body': {\r\n '@apply h-0 overflow-hidden': {},\r\n transitionProperty: 'visibility, height, padding, margin',\r\n transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',\r\n transitionDuration: '180ms',\r\n\r\n '&[aria-hidden=\"true\"], &[data-hidden=\"true\"]': {\r\n '@apply my-0 invisible': {},\r\n },\r\n\r\n '&[aria-hidden=\"false\"], &[data-hidden=\"false\"]': {\r\n '@apply block h-auto visible': {},\r\n },\r\n },\r\n\r\n '&-solid': {\r\n '@apply border border-primary': {},\r\n '.sk-disclosure-header': {\r\n '@apply bg-primary text-white': {},\r\n\r\n '[aria-expanded=\"true\"] &': {\r\n '@apply bg-hover': {},\r\n },\r\n },\r\n },\r\n\r\n '&-solid[data-alert=\"true\"], &-outline[data-alert=\"true\"]': {\r\n '@apply border border-warning': {},\r\n\r\n '.sk-disclosure-header:not([data-disabled=\"true\"])': {\r\n '@apply bg-warning-light text-warning': {},\r\n\r\n '[aria-expanded=\"true\"] &': {\r\n '@apply bg-warning-light': {},\r\n },\r\n },\r\n },\r\n '&-solid[data-error=\"true\"], &-outline[data-error=\"true\"]': {\r\n '@apply border border-error': {},\r\n '.sk-disclosure-header:not([data-disabled=\"true\"])': {\r\n '@apply bg-error-light text-error': {},\r\n\r\n '[aria-expanded=\"true\"] &': {\r\n '@apply bg-error-light': {},\r\n },\r\n },\r\n },\r\n\r\n '&-is-open': {\r\n '@apply border border-gray-stroke': {},\r\n '& .sk-disclosure-header': {\r\n '@apply bg-hover text-white': {},\r\n },\r\n\r\n '&[data-alert=\"true\"]': {\r\n '@apply border border-warning': {},\r\n '& .sk-disclosure-header': {\r\n '@apply border-b border-warning': {},\r\n },\r\n },\r\n\r\n '&[data-error=\"true\"]': {\r\n '@apply border border-error': {},\r\n '& .sk-disclosure-header': {\r\n '@apply border-b border-error': {},\r\n },\r\n },\r\n },\r\n '&-is-open &-body': {\r\n '@apply overflow-visible animate-reset-overflow': {},\r\n },\r\n\r\n '&-outline': {\r\n '@apply border border-gray-stroke': {},\r\n '&:not([data-error=\"true\"]):not([data-alert=\"true\"]) .sk-disclosure-body': {\r\n '@apply mt-0': {},\r\n },\r\n '.sk-disclosure-toggle': {},\r\n '.sk-disclosure-header': {\r\n '@apply bg-transparent text-body': {},\r\n\r\n '[aria-expanded=\"true\"] &': {\r\n '@apply bg-hover': {},\r\n },\r\n },\r\n },\r\n\r\n '&-plain': {\r\n '@apply border-0': {},\r\n '&:has(.sk-disclosure-header:focus-visible)': {\r\n '@apply outline-offset-4': {},\r\n },\r\n '.sk-disclosure-header': {\r\n '@apply bg-transparent text-body': {},\r\n\r\n '[aria-expanded=\"true\"] &': {\r\n '@apply bg-hover': {},\r\n },\r\n '&[data-disabled=\"true\"]': {\r\n '@apply bg-transparent text-gray-stroke': {},\r\n },\r\n '.sk-disclosure-toggle': {\r\n '@apply mx-0': {},\r\n },\r\n },\r\n '.sk-disclosure-body': {\r\n '@apply m-0': {},\r\n },\r\n '&[data-alert=\"true\"]': {\r\n '@apply border-0': {},\r\n '.sk-disclosure-header': {\r\n '@apply border-0 text-warning': {},\r\n },\r\n },\r\n '&[data-error=\"true\"]': {\r\n '@apply border-0': {},\r\n '.sk-disclosure-header': {\r\n '@apply border-0 text-error': {},\r\n },\r\n },\r\n },\r\n\r\n '&-disabled, &-disabled [role=\"button\"]': {\r\n '@apply disabled:cursor-not-allowed cursor-not-allowed': {},\r\n },\r\n\r\n '&-header[data-disabled=\"true\"]': {\r\n '@apply bg-gray-lighter text-gray-stroke': {},\r\n },\r\n\r\n '&-disabled, &&-disabled': {\r\n '@apply border-gray': {},\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 '&-disabled': {\r\n '@apply border-x-transparent border-y-transparent': {},\r\n },\r\n '&-plain, &-plain[data-disabled=\"true\"]': {\r\n '@apply border border-transparent border-b-gray-stroke': {},\r\n },\r\n\r\n '&-solid[data-open=\"false\"]': {\r\n '@apply border-white': {},\r\n '&[data-disabled=\"true\"]': {\r\n '@apply border-x-transparent border-y-transparent': {},\r\n },\r\n },\r\n '&[data-open=\"true\"]:not(&-plain)': {\r\n '@apply mt-md mb-md': {},\r\n },\r\n },\r\n '&:not(:first-child)': {\r\n '@apply mt-[-1px]': {},\r\n },\r\n '&:first-child .sk-disclosure[data-open=\"true\"]:not(.sk-disclosure-plain)': {\r\n '@apply mt-0 mb-md': {},\r\n },\r\n '&:last-child .sk-disclosure[data-open=\"true\"]:not(.sk-disclosure-plain)': {\r\n '@apply mt-md mb-0': {},\r\n },\r\n '&:last-child .sk-disclosure-plain': {\r\n '@apply border-b-transparent': {},\r\n },\r\n },\r\n },\r\n});\r\n"],"mappings":"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"}
package/dist/cjs/components/forms.js CHANGED
@@ -242,6 +242,15 @@ module.exports = Forms = function Forms(colors) {
242
242
  }
243
243
  }
244
244
  },
245
+ '.form-select-list-transition': {
246
+ '@apply absolute z-50 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm': {},
247
+ '&.showabove': {
248
+ '@apply mb-1 bottom-full': {}
249
+ },
250
+ '&:not(.showabove)': {
251
+ '@apply mt-1 top-full': {}
252
+ }
253
+ },
245
254
  '.form-select': {
246
255
  '@apply justify-between items-center grow text-body bg-white caret-transparent select-none cursor-pointer border-gray-stroke': {},
247
256
  'background-image': 'none',
@@ -252,7 +261,10 @@ module.exports = Forms = function Forms(colors) {
252
261
  '@apply grow-0': {}
253
262
  },
254
263
  '&-list': {
255
- '@apply z-10 absolute overflow-y-auto w-full bg-white mt-0 border border-gray-stroke border-t-0': {}
264
+ '@apply z-10 absolute overflow-y-auto w-full bg-white mt-0 border border-gray-stroke border-t-0 border-b': {},
265
+ '&.showabove': {
266
+ '@apply border-t border-b-0': {}
267
+ }
256
268
  },
257
269
  '&-has-multiple-choices': {
258
270
  '@apply flex w-full h-full justify-between items-center pr-md': {}
package/dist/cjs/components/forms.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"forms.js","names":["fieldOutline","colors","_extends","reduce","styles","color","_ref","_extends2","fieldSolid","_ref2","_extends3","formControl","formInputGroup","module","exports","Forms","maxHeight"],"sources":["../../../src/components/forms.js"],"sourcesContent":["function fieldOutline(colors) {\r\n return {\r\n '&-outline': {\r\n '@apply border shadow-sm border-gray-stroke': {},\r\n '@apply text-gray bg-white': {},\r\n\r\n ...colors.reduce(\r\n (styles, color) => ({\r\n ...styles,\r\n [`&[data-color=\"${color}\"]`]: {\r\n [`@apply focus-visible:border-${color} focus-visible:ring-${color}`]: {},\r\n [`@apply dark:focus-visible:border-${color} dark:focus-visible:ring-${color}`]: {},\r\n },\r\n }),\r\n {}\r\n ),\r\n\r\n '&[aria-invalid=true]': {\r\n '@apply border-error ring-error': {},\r\n\r\n '&:focus-visible': {\r\n '@apply border-error ring-error': {},\r\n },\r\n },\r\n },\r\n };\r\n}\r\n\r\nfunction fieldSolid(colors) {\r\n return {\r\n '&-solid': {\r\n '@apply border border-transparent': {},\r\n '@apply text-black bg-gray-light': {},\r\n\r\n ...colors.reduce(\r\n (styles, color) => ({\r\n ...styles,\r\n [`&[data-color=\"${color}\"]`]: {\r\n [`@apply focus-visible:border-${color} focus-visible:ring-${color}`]: {},\r\n [`@apply dark:focus-visible:border-${color} dark:focus-visible:ring-${color}`]: {},\r\n },\r\n }),\r\n {}\r\n ),\r\n\r\n '&[aria-invalid=true]': {\r\n '@apply border-error ring-error': {},\r\n\r\n '&:focus-visible': {\r\n '@apply border-error ring-error': {},\r\n },\r\n },\r\n },\r\n };\r\n}\r\n\r\nfunction formControl() {\r\n return {\r\n '.form-control': {\r\n '@apply w-full relative': {},\r\n },\r\n '.form-helper-text': {\r\n '@apply mt-1.5 leading-none text-gray dark:text-white/60': {},\r\n },\r\n '.form-error-message': {\r\n '@apply mt-1.5 leading-none flex items-center text-sm text-error': {},\r\n },\r\n '.form-label': {\r\n '@apply text-sm font-medium text-left align-middle block mb-1.5': {},\r\n },\r\n '.form-required-indicator': {\r\n '@apply ml-1 text-sm': {},\r\n '--tw-text-opacity': '1',\r\n color: 'rgba(239, 68, 68, var(--tw-text-opacity))',\r\n '.dark &': {\r\n '--tw-text-opacity': '1',\r\n color: 'rgba(252, 165, 165, var(--tw-text-opacity))',\r\n },\r\n },\r\n };\r\n}\r\n\r\nfunction formInputGroup() {\r\n return {\r\n '.form-input-group': {\r\n '@apply flex relative bg-white h-fit w-full rounded-[0.2rem] border border-gray-stroke': {},\r\n\r\n '&:focus-within': {\r\n '@apply border border-primary ring-primary ring-1': {},\r\n },\r\n\r\n '> *': {\r\n '@apply border-0 ring-0 shadow-none': {},\r\n\r\n '&:focus': {\r\n '@apply ring-0': {},\r\n },\r\n },\r\n\r\n '&-sm': {\r\n '@apply min-h-[4rem] max-h-[4rem]': {},\r\n\r\n '.form-field': {\r\n '@apply min-h-[3.8rem] max-h-[3.8rem]': {},\r\n },\r\n },\r\n\r\n '&-md': {\r\n '@apply min-h-[4.4rem] max-h-[4.4rem]': {},\r\n\r\n '.form-field': {\r\n '@apply min-h-[4.2rem] max-h-[4.2rem]': {},\r\n },\r\n },\r\n\r\n '&-lg': {\r\n '@apply min-h-[4.8rem] max-h-[4.8rem]': {},\r\n\r\n '.form-field': {\r\n '@apply min-h-[4.6rem] max-h-[4.6rem]': {},\r\n },\r\n },\r\n\r\n \"&[data-rounded='true']\": {\r\n '@apply rounded-[3.2rem]': {},\r\n\r\n '> *:first-child': {\r\n '@apply rounded-[3.2rem]': {},\r\n },\r\n\r\n '> *:last-child': {\r\n '@apply rounded-[3.2rem]': {},\r\n },\r\n },\r\n\r\n '&[aria-invalid=true]': {\r\n '@apply border-error ring-error': {},\r\n },\r\n },\r\n\r\n '.form-input-element': {\r\n '@apply flex items-center justify-center absolute z-base top-0': {},\r\n\r\n '&-sm': {\r\n '@apply text-xs h-7 w-7': {},\r\n },\r\n\r\n '&-md': {\r\n '@apply text-sm h-8 w-8': {},\r\n },\r\n\r\n '&-lg': {\r\n '@apply text-base h-10 w-10': {},\r\n },\r\n },\r\n\r\n '.form-input-addon': {\r\n '@apply flex items-center w-auto shadow-sm whitespace-nowrap': {},\r\n '@apply text-neutral-600 bg-neutral-50': {},\r\n // dark colors\r\n '@apply dark:border-neutral-700': {},\r\n '@apply dark:text-neutral-100 dark:bg-white/30': {},\r\n\r\n '&-sm': {\r\n '@apply px-3 text-xs': {},\r\n },\r\n\r\n '&-md': {\r\n '@apply px-4 text-sm': {},\r\n },\r\n\r\n '&-lg': {\r\n '@apply px-4 text-base': {},\r\n },\r\n\r\n '&-left': {\r\n '@apply rounded-r-none': {},\r\n },\r\n\r\n '&-right': {\r\n '@apply rounded-l-none': {},\r\n },\r\n },\r\n '.form-input-addin': {\r\n '@apply flex items-center w-auto whitespace-nowrap': {},\r\n '@apply text-body': {},\r\n\r\n '&-sm': {\r\n '@apply px-[1.44rem] text-xs': {},\r\n },\r\n\r\n '&-md': {\r\n '@apply px-[1.6rem] text-sm': {},\r\n },\r\n\r\n '&-lg': {\r\n '@apply px-[1.76rem] text-base': {},\r\n },\r\n\r\n '&-left': {\r\n '@apply pr-0 rounded-r-none': {},\r\n },\r\n\r\n '&-right': {\r\n '@apply pl-0 rounded-l-none': {},\r\n },\r\n },\r\n };\r\n}\r\n\r\nmodule.exports = Forms = (colors) => ({\r\n '.form-field': {\r\n '@apply rounded-[0.2rem] placeholder-gray-stroke': {},\r\n '@apply relative w-full min-w-0 inline-flex items-center appearance-none focus-visible:outline-none': {},\r\n '@apply transition-colors\tduration-75 ease-out': {},\r\n\r\n '&-sm': {\r\n '@apply text-sm leading-sm': {},\r\n '@apply py-0 px-[1.44rem] min-h-[4rem] max-h-[4rem]': {},\r\n },\r\n\r\n '&-md': {\r\n '@apply text-base leading-base': {},\r\n '@apply py-0 px-[1.6rem] min-h-[4.4rem] max-h-[4.4rem]': {},\r\n },\r\n\r\n '&-lg': {\r\n '@apply text-base leading-lg': {},\r\n '@apply py-0 px-[1.76rem] min-h-[4.8rem] max-h-[4.8rem]': {},\r\n },\r\n\r\n '&-disabled, &&-disabled': {\r\n '@apply disabled:cursor-not-allowed cursor-not-allowed': {},\r\n '@apply disabled:bg-gray-lighter bg-gray-lighter': {},\r\n },\r\n\r\n \"&[data-rounded='true']\": {\r\n '@apply rounded-[3.2rem]': {},\r\n },\r\n\r\n // variants\r\n ...fieldOutline(colors),\r\n ...fieldSolid(colors),\r\n },\r\n\r\n '.form-button': {\r\n '@apply text-[1.1433em] border-0 ml-auto text-primary hover:text-white': {},\r\n\r\n '&[data-icon=true]': {\r\n '@apply p-[0.2em]': {},\r\n },\r\n\r\n '&-icon': {\r\n '@apply inline-flex': {},\r\n },\r\n\r\n '&-wrapper': {\r\n '@apply flex items-center absolute inset-y-0 right-sm': {},\r\n },\r\n },\r\n\r\n '.form-textarea': {\r\n maxHeight: 'none',\r\n '&.form-field': {\r\n '&-sm': {\r\n '@apply py-[0.85rem] min-h-[4rem]': {},\r\n },\r\n\r\n '&-md': {\r\n '@apply py-[0.9rem] min-h-[4.4rem]': {},\r\n },\r\n\r\n '&-lg': {\r\n '@apply py-[1.1rem] min-h-[4.8rem]': {},\r\n },\r\n },\r\n '&-counter': {\r\n '@apply mt-xs text-right': {},\r\n },\r\n },\r\n '.dropdown-search': {\r\n '@apply block w-full relative': {},\r\n '&-results': {\r\n '@apply w-full flex justify-between items-center': {},\r\n '&-text': {\r\n '@apply truncate text-left grow': {},\r\n },\r\n '&-counter': {\r\n '@apply grow-0': {},\r\n },\r\n },\r\n\r\n '&[data-expanded=true]': {\r\n '.form-input-group[data-rounded=true]': {\r\n '@apply rounded-t-[2rem] rounded-bl-none rounded-br-none': {},\r\n\r\n '> *:first-child': {\r\n '@apply rounded-t-[2rem] rounded-bl-none rounded-br-none': {},\r\n },\r\n\r\n '> *:last-child': {\r\n '@apply rounded-t-[2rem] rounded-bl-none rounded-br-none': {},\r\n },\r\n\r\n '& ~ #dropdown-search-results': {\r\n '@apply rounded-b-[1.6rem]': {},\r\n },\r\n },\r\n },\r\n },\r\n\r\n '.form-select': {\r\n '@apply justify-between items-center grow text-body bg-white caret-transparent select-none cursor-pointer border-gray-stroke':\r\n {},\r\n 'background-image': 'none',\r\n '&-wrapper': {\r\n '@apply block w-full relative': {},\r\n },\r\n '&-icon': {\r\n '@apply grow-0': {},\r\n },\r\n '&-list': {\r\n '@apply z-10 absolute overflow-y-auto w-full bg-white mt-0 border border-gray-stroke border-t-0': {},\r\n },\r\n '&-has-multiple-choices': {\r\n '@apply flex w-full h-full justify-between items-center pr-md': {},\r\n },\r\n '&-multiple-chioces': {\r\n '@apply truncate pr-md': {},\r\n },\r\n\r\n '&-option': {\r\n '@apply text-body rounded-none cursor-default hover:text-white focus-visible:text-white hover:bg-primary focus-visible:bg-primary flex items-center':\r\n {},\r\n\r\n '&.multiple.selected': {\r\n '@apply bg-background-one': {},\r\n },\r\n '&.active': {\r\n '@apply bg-primary text-white': {},\r\n },\r\n '&.active.selected': {\r\n '@apply bg-gray text-white': {},\r\n },\r\n '&.disabled': {\r\n '@apply opacity-75 cursor-not-allowed hover:bg-white hover:text-black': {},\r\n },\r\n '&-remove-button': {\r\n '@apply w-full flex justify-between items-center': {},\r\n '&-text': {\r\n '@apply truncate grow text-left': {},\r\n },\r\n },\r\n },\r\n },\r\n\r\n ...formInputGroup(),\r\n ...formControl(),\r\n});\r\n"],"mappings":"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"}
1
+ {"version":3,"file":"forms.js","names":["fieldOutline","colors","_extends","reduce","styles","color","_ref","_extends2","fieldSolid","_ref2","_extends3","formControl","formInputGroup","module","exports","Forms","maxHeight"],"sources":["../../../src/components/forms.js"],"sourcesContent":["function fieldOutline(colors) {\r\n return {\r\n '&-outline': {\r\n '@apply border shadow-sm border-gray-stroke': {},\r\n '@apply text-gray bg-white': {},\r\n\r\n ...colors.reduce(\r\n (styles, color) => ({\r\n ...styles,\r\n [`&[data-color=\"${color}\"]`]: {\r\n [`@apply focus-visible:border-${color} focus-visible:ring-${color}`]: {},\r\n [`@apply dark:focus-visible:border-${color} dark:focus-visible:ring-${color}`]: {},\r\n },\r\n }),\r\n {}\r\n ),\r\n\r\n '&[aria-invalid=true]': {\r\n '@apply border-error ring-error': {},\r\n\r\n '&:focus-visible': {\r\n '@apply border-error ring-error': {},\r\n },\r\n },\r\n },\r\n };\r\n}\r\n\r\nfunction fieldSolid(colors) {\r\n return {\r\n '&-solid': {\r\n '@apply border border-transparent': {},\r\n '@apply text-black bg-gray-light': {},\r\n\r\n ...colors.reduce(\r\n (styles, color) => ({\r\n ...styles,\r\n [`&[data-color=\"${color}\"]`]: {\r\n [`@apply focus-visible:border-${color} focus-visible:ring-${color}`]: {},\r\n [`@apply dark:focus-visible:border-${color} dark:focus-visible:ring-${color}`]: {},\r\n },\r\n }),\r\n {}\r\n ),\r\n\r\n '&[aria-invalid=true]': {\r\n '@apply border-error ring-error': {},\r\n\r\n '&:focus-visible': {\r\n '@apply border-error ring-error': {},\r\n },\r\n },\r\n },\r\n };\r\n}\r\n\r\nfunction formControl() {\r\n return {\r\n '.form-control': {\r\n '@apply w-full relative': {},\r\n },\r\n '.form-helper-text': {\r\n '@apply mt-1.5 leading-none text-gray dark:text-white/60': {},\r\n },\r\n '.form-error-message': {\r\n '@apply mt-1.5 leading-none flex items-center text-sm text-error': {},\r\n },\r\n '.form-label': {\r\n '@apply text-sm font-medium text-left align-middle block mb-1.5': {},\r\n },\r\n '.form-required-indicator': {\r\n '@apply ml-1 text-sm': {},\r\n '--tw-text-opacity': '1',\r\n color: 'rgba(239, 68, 68, var(--tw-text-opacity))',\r\n '.dark &': {\r\n '--tw-text-opacity': '1',\r\n color: 'rgba(252, 165, 165, var(--tw-text-opacity))',\r\n },\r\n },\r\n };\r\n}\r\n\r\nfunction formInputGroup() {\r\n return {\r\n '.form-input-group': {\r\n '@apply flex relative bg-white h-fit w-full rounded-[0.2rem] border border-gray-stroke': {},\r\n\r\n '&:focus-within': {\r\n '@apply border border-primary ring-primary ring-1': {},\r\n },\r\n\r\n '> *': {\r\n '@apply border-0 ring-0 shadow-none': {},\r\n\r\n '&:focus': {\r\n '@apply ring-0': {},\r\n },\r\n },\r\n\r\n '&-sm': {\r\n '@apply min-h-[4rem] max-h-[4rem]': {},\r\n\r\n '.form-field': {\r\n '@apply min-h-[3.8rem] max-h-[3.8rem]': {},\r\n },\r\n },\r\n\r\n '&-md': {\r\n '@apply min-h-[4.4rem] max-h-[4.4rem]': {},\r\n\r\n '.form-field': {\r\n '@apply min-h-[4.2rem] max-h-[4.2rem]': {},\r\n },\r\n },\r\n\r\n '&-lg': {\r\n '@apply min-h-[4.8rem] max-h-[4.8rem]': {},\r\n\r\n '.form-field': {\r\n '@apply min-h-[4.6rem] max-h-[4.6rem]': {},\r\n },\r\n },\r\n\r\n \"&[data-rounded='true']\": {\r\n '@apply rounded-[3.2rem]': {},\r\n\r\n '> *:first-child': {\r\n '@apply rounded-[3.2rem]': {},\r\n },\r\n\r\n '> *:last-child': {\r\n '@apply rounded-[3.2rem]': {},\r\n },\r\n },\r\n\r\n '&[aria-invalid=true]': {\r\n '@apply border-error ring-error': {},\r\n },\r\n },\r\n\r\n '.form-input-element': {\r\n '@apply flex items-center justify-center absolute z-base top-0': {},\r\n\r\n '&-sm': {\r\n '@apply text-xs h-7 w-7': {},\r\n },\r\n\r\n '&-md': {\r\n '@apply text-sm h-8 w-8': {},\r\n },\r\n\r\n '&-lg': {\r\n '@apply text-base h-10 w-10': {},\r\n },\r\n },\r\n\r\n '.form-input-addon': {\r\n '@apply flex items-center w-auto shadow-sm whitespace-nowrap': {},\r\n '@apply text-neutral-600 bg-neutral-50': {},\r\n // dark colors\r\n '@apply dark:border-neutral-700': {},\r\n '@apply dark:text-neutral-100 dark:bg-white/30': {},\r\n\r\n '&-sm': {\r\n '@apply px-3 text-xs': {},\r\n },\r\n\r\n '&-md': {\r\n '@apply px-4 text-sm': {},\r\n },\r\n\r\n '&-lg': {\r\n '@apply px-4 text-base': {},\r\n },\r\n\r\n '&-left': {\r\n '@apply rounded-r-none': {},\r\n },\r\n\r\n '&-right': {\r\n '@apply rounded-l-none': {},\r\n },\r\n },\r\n '.form-input-addin': {\r\n '@apply flex items-center w-auto whitespace-nowrap': {},\r\n '@apply text-body': {},\r\n\r\n '&-sm': {\r\n '@apply px-[1.44rem] text-xs': {},\r\n },\r\n\r\n '&-md': {\r\n '@apply px-[1.6rem] text-sm': {},\r\n },\r\n\r\n '&-lg': {\r\n '@apply px-[1.76rem] text-base': {},\r\n },\r\n\r\n '&-left': {\r\n '@apply pr-0 rounded-r-none': {},\r\n },\r\n\r\n '&-right': {\r\n '@apply pl-0 rounded-l-none': {},\r\n },\r\n },\r\n };\r\n}\r\n\r\nmodule.exports = Forms = (colors) => ({\r\n '.form-field': {\r\n '@apply rounded-[0.2rem] placeholder-gray-stroke': {},\r\n '@apply relative w-full min-w-0 inline-flex items-center appearance-none focus-visible:outline-none': {},\r\n '@apply transition-colors\tduration-75 ease-out': {},\r\n\r\n '&-sm': {\r\n '@apply text-sm leading-sm': {},\r\n '@apply py-0 px-[1.44rem] min-h-[4rem] max-h-[4rem]': {},\r\n },\r\n\r\n '&-md': {\r\n '@apply text-base leading-base': {},\r\n '@apply py-0 px-[1.6rem] min-h-[4.4rem] max-h-[4.4rem]': {},\r\n },\r\n\r\n '&-lg': {\r\n '@apply text-base leading-lg': {},\r\n '@apply py-0 px-[1.76rem] min-h-[4.8rem] max-h-[4.8rem]': {},\r\n },\r\n\r\n '&-disabled, &&-disabled': {\r\n '@apply disabled:cursor-not-allowed cursor-not-allowed': {},\r\n '@apply disabled:bg-gray-lighter bg-gray-lighter': {},\r\n },\r\n\r\n \"&[data-rounded='true']\": {\r\n '@apply rounded-[3.2rem]': {},\r\n },\r\n\r\n // variants\r\n ...fieldOutline(colors),\r\n ...fieldSolid(colors),\r\n },\r\n\r\n '.form-button': {\r\n '@apply text-[1.1433em] border-0 ml-auto text-primary hover:text-white': {},\r\n\r\n '&[data-icon=true]': {\r\n '@apply p-[0.2em]': {},\r\n },\r\n\r\n '&-icon': {\r\n '@apply inline-flex': {},\r\n },\r\n\r\n '&-wrapper': {\r\n '@apply flex items-center absolute inset-y-0 right-sm': {},\r\n },\r\n },\r\n\r\n '.form-textarea': {\r\n maxHeight: 'none',\r\n '&.form-field': {\r\n '&-sm': {\r\n '@apply py-[0.85rem] min-h-[4rem]': {},\r\n },\r\n\r\n '&-md': {\r\n '@apply py-[0.9rem] min-h-[4.4rem]': {},\r\n },\r\n\r\n '&-lg': {\r\n '@apply py-[1.1rem] min-h-[4.8rem]': {},\r\n },\r\n },\r\n '&-counter': {\r\n '@apply mt-xs text-right': {},\r\n },\r\n },\r\n '.dropdown-search': {\r\n '@apply block w-full relative': {},\r\n '&-results': {\r\n '@apply w-full flex justify-between items-center': {},\r\n '&-text': {\r\n '@apply truncate text-left grow': {},\r\n },\r\n '&-counter': {\r\n '@apply grow-0': {},\r\n },\r\n },\r\n\r\n '&[data-expanded=true]': {\r\n '.form-input-group[data-rounded=true]': {\r\n '@apply rounded-t-[2rem] rounded-bl-none rounded-br-none': {},\r\n\r\n '> *:first-child': {\r\n '@apply rounded-t-[2rem] rounded-bl-none rounded-br-none': {},\r\n },\r\n\r\n '> *:last-child': {\r\n '@apply rounded-t-[2rem] rounded-bl-none rounded-br-none': {},\r\n },\r\n\r\n '& ~ #dropdown-search-results': {\r\n '@apply rounded-b-[1.6rem]': {},\r\n },\r\n },\r\n },\r\n },\r\n\r\n '.form-select-list-transition': {\r\n '@apply absolute z-50 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm': {},\r\n '&.showabove': {\r\n '@apply mb-1 bottom-full': {}\r\n },\r\n '&:not(.showabove)': {\r\n '@apply mt-1 top-full': {}\r\n }\r\n },\r\n\r\n '.form-select': {\r\n '@apply justify-between items-center grow text-body bg-white caret-transparent select-none cursor-pointer border-gray-stroke':\r\n {},\r\n 'background-image': 'none',\r\n '&-wrapper': {\r\n '@apply block w-full relative': {},\r\n },\r\n '&-icon': {\r\n '@apply grow-0': {},\r\n },\r\n '&-list': {\r\n '@apply z-10 absolute overflow-y-auto w-full bg-white mt-0 border border-gray-stroke border-t-0 border-b': {\r\n },\r\n '&.showabove': {\r\n '@apply border-t border-b-0': {}\r\n }\r\n },\r\n '&-has-multiple-choices': {\r\n '@apply flex w-full h-full justify-between items-center pr-md': {},\r\n },\r\n '&-multiple-chioces': {\r\n '@apply truncate pr-md': {},\r\n },\r\n\r\n '&-option': {\r\n '@apply text-body rounded-none cursor-default hover:text-white focus-visible:text-white hover:bg-primary focus-visible:bg-primary flex items-center':\r\n {},\r\n\r\n '&.multiple.selected': {\r\n '@apply bg-background-one': {},\r\n },\r\n '&.active': {\r\n '@apply bg-primary text-white': {},\r\n },\r\n '&.active.selected': {\r\n '@apply bg-gray text-white': {},\r\n },\r\n '&.disabled': {\r\n '@apply opacity-75 cursor-not-allowed hover:bg-white hover:text-black': {},\r\n },\r\n '&-remove-button': {\r\n '@apply w-full flex justify-between items-center': {},\r\n '&-text': {\r\n '@apply truncate grow text-left': {},\r\n },\r\n },\r\n },\r\n },\r\n\r\n ...formInputGroup(),\r\n ...formControl(),\r\n});\r\n"],"mappings":"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"}
package/dist/cjs/components/zebratable.js CHANGED
@@ -57,8 +57,11 @@ module.exports = ZebraTable = function ZebraTable() {
57
57
  '&-pagination': {
58
58
  '@apply grow': {}
59
59
  },
60
- '&.-pagination-pagesizes': {
61
- '@apply grow-0': {},
60
+ '&-pagination-pagesizes': {
61
+ '@apply grow-0 flex gap-xs flex-row justify-end items-center': {},
62
+ '&-label': {
63
+ '@apply font-bold': {}
64
+ },
62
65
  '&.-select': {
63
66
  '@apply w-auto': {}
64
67
  }
package/dist/cjs/components/zebratable.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"zebratable.js","names":["module","exports","ZebraTable","fontSize"],"sources":["../../../src/components/zebratable.js"],"sourcesContent":["module.exports = ZebraTable = () => ({\r\n '.sk-zebratable': {\r\n '@apply w-full text-left table-auto': {},\r\n\r\n '&-thead': {\r\n '&-tr': {\r\n '@apply text-sm hidden lg:table-row': {},\r\n },\r\n\r\n '&-th': {\r\n '@apply py-sm first-of-type:pl-lg': {},\r\n\r\n \"&[data-isColumnSortable='true']\": {\r\n '@apply py-sm cursor-pointer': {},\r\n },\r\n },\r\n },\r\n\r\n '&-sortbutton': {\r\n '@apply flex items-center': {},\r\n\r\n '&-icon': {\r\n '@apply inline-flex pl-sm': {},\r\n\r\n '.MuiSvgIcon-root': {\r\n '@apply !text-lg': {},\r\n },\r\n\r\n '&-sort': {\r\n '@apply text-black transform': {},\r\n\r\n \"&[data-sortmodeascending='true']\": {\r\n '@apply -rotate-90': {},\r\n },\r\n\r\n \"&[data-sortmodeascending='false']\": {\r\n '@apply rotate-90': {},\r\n },\r\n },\r\n\r\n '&-more': {\r\n '@apply text-gray': {},\r\n },\r\n },\r\n },\r\n\r\n '.material-icons-outlined': {\r\n fontSize: '1.25em',\r\n },\r\n\r\n '&-tbody': {\r\n '@apply text-body lg:bg-white': {},\r\n\r\n '&-tr': {\r\n '@apply transition-all bg-white lg:even:bg-white lg:odd:bg-gray-100 px-md py-md md:px-lg md:py-lg my-lg first-of-type:mt-0 block shadow-md lg:shadow-none lg:table-row lg:my-0 lg:py-0 lg:px-lg':\r\n {},\r\n\r\n '&.highlighted': {\r\n '@apply lg:border-4 lg:border-hover': {},\r\n },\r\n },\r\n\r\n '&-td': {\r\n '@apply empty:hidden py-4 px-sm lg:px-0 first-of-type:pl-sm lg:first-of-type:pl-lg last-of-type:px-0 lg:last-of-type:pr-lg last-of-type:text-right block lg:table-cell even:bg-white odd:bg-gray-100 last-of-type:bg-transparent lg:even:bg-transparent lg:odd:bg-transparent':\r\n {},\r\n },\r\n },\r\n\r\n '&-paginationwrapper': {\r\n '@apply w-full text-lg flex justify-center lg:justify-start': {},\r\n },\r\n '&-pagination': {\r\n '@apply grow': {},\r\n },\r\n '&.-pagination-pagesizes': {\r\n '@apply grow-0': {},\r\n '&.-select': {\r\n '@apply w-auto': {},\r\n },\r\n },\r\n\r\n '&-bottomwrapper': {\r\n '@apply mt-lg px-lg flex items-center justify-end': {},\r\n },\r\n },\r\n});\r\n"],"mappings":";;AAAAA,MAAM,CAACC,OAAO,GAAGC,UAAU,GAAG,SAAAA,WAAA;EAAA,OAAO;IACnC,gBAAgB,EAAE;MAChB,oCAAoC,EAAE,CAAC,CAAC;MAExC,SAAS,EAAE;QACT,MAAM,EAAE;UACN,oCAAoC,EAAE,CAAC;QACzC,CAAC;QAED,MAAM,EAAE;UACN,kCAAkC,EAAE,CAAC,CAAC;UAEtC,iCAAiC,EAAE;YACjC,6BAA6B,EAAE,CAAC;UAClC;QACF;MACF,CAAC;MAED,cAAc,EAAE;QACd,0BAA0B,EAAE,CAAC,CAAC;QAE9B,QAAQ,EAAE;UACR,0BAA0B,EAAE,CAAC,CAAC;UAE9B,kBAAkB,EAAE;YAClB,iBAAiB,EAAE,CAAC;UACtB,CAAC;UAED,QAAQ,EAAE;YACR,6BAA6B,EAAE,CAAC,CAAC;YAEjC,kCAAkC,EAAE;cAClC,mBAAmB,EAAE,CAAC;YACxB,CAAC;YAED,mCAAmC,EAAE;cACnC,kBAAkB,EAAE,CAAC;YACvB;UACF,CAAC;UAED,QAAQ,EAAE;YACR,kBAAkB,EAAE,CAAC;UACvB;QACF;MACF,CAAC;MAED,0BAA0B,EAAE;QAC1BC,QAAQ,EAAE;MACZ,CAAC;MAED,SAAS,EAAE;QACT,8BAA8B,EAAE,CAAC,CAAC;QAElC,MAAM,EAAE;UACN,gMAAgM,EAC9L,CAAC,CAAC;UAEJ,eAAe,EAAE;YACf,oCAAoC,EAAE,CAAC;UACzC;QACF,CAAC;QAED,MAAM,EAAE;UACN,8QAA8Q,EAC5Q,CAAC;QACL;MACF,CAAC;MAED,qBAAqB,EAAE;QACrB,4DAA4D,EAAE,CAAC;MACjE,CAAC;MACD,cAAc,EAAE;QACd,aAAa,EAAE,CAAC;MAClB,CAAC;MACD,yBAAyB,EAAE;QACzB,eAAe,EAAE,CAAC,CAAC;QACnB,WAAW,EAAE;UACX,eAAe,EAAE,CAAC;QACpB;MACF,CAAC;MAED,iBAAiB,EAAE;QACjB,kDAAkD,EAAE,CAAC;MACvD;IACF;EACF,CAAC;AAAA,CAAC"}
1
+ {"version":3,"file":"zebratable.js","names":["module","exports","ZebraTable","fontSize"],"sources":["../../../src/components/zebratable.js"],"sourcesContent":["module.exports = ZebraTable = () => ({\r\n '.sk-zebratable': {\r\n '@apply w-full text-left table-auto': {},\r\n\r\n '&-thead': {\r\n '&-tr': {\r\n '@apply text-sm hidden lg:table-row': {},\r\n },\r\n\r\n '&-th': {\r\n '@apply py-sm first-of-type:pl-lg': {},\r\n\r\n \"&[data-isColumnSortable='true']\": {\r\n '@apply py-sm cursor-pointer': {},\r\n },\r\n },\r\n },\r\n\r\n '&-sortbutton': {\r\n '@apply flex items-center': {},\r\n\r\n '&-icon': {\r\n '@apply inline-flex pl-sm': {},\r\n\r\n '.MuiSvgIcon-root': {\r\n '@apply !text-lg': {},\r\n },\r\n\r\n '&-sort': {\r\n '@apply text-black transform': {},\r\n\r\n \"&[data-sortmodeascending='true']\": {\r\n '@apply -rotate-90': {},\r\n },\r\n\r\n \"&[data-sortmodeascending='false']\": {\r\n '@apply rotate-90': {},\r\n },\r\n },\r\n\r\n '&-more': {\r\n '@apply text-gray': {},\r\n },\r\n },\r\n },\r\n\r\n '.material-icons-outlined': {\r\n fontSize: '1.25em',\r\n },\r\n\r\n '&-tbody': {\r\n '@apply text-body lg:bg-white': {},\r\n\r\n '&-tr': {\r\n '@apply transition-all bg-white lg:even:bg-white lg:odd:bg-gray-100 px-md py-md md:px-lg md:py-lg my-lg first-of-type:mt-0 block shadow-md lg:shadow-none lg:table-row lg:my-0 lg:py-0 lg:px-lg':\r\n {},\r\n\r\n '&.highlighted': {\r\n '@apply lg:border-4 lg:border-hover': {},\r\n },\r\n },\r\n\r\n '&-td': {\r\n '@apply empty:hidden py-4 px-sm lg:px-0 first-of-type:pl-sm lg:first-of-type:pl-lg last-of-type:px-0 lg:last-of-type:pr-lg last-of-type:text-right block lg:table-cell even:bg-white odd:bg-gray-100 last-of-type:bg-transparent lg:even:bg-transparent lg:odd:bg-transparent':\r\n {},\r\n },\r\n },\r\n\r\n '&-paginationwrapper': {\r\n '@apply w-full text-lg flex justify-center lg:justify-start': {},\r\n },\r\n '&-pagination': {\r\n '@apply grow': {},\r\n },\r\n '&-pagination-pagesizes': {\r\n '@apply grow-0 flex gap-xs flex-row justify-end items-center': {},\r\n '&-label': {\r\n '@apply font-bold': {},\r\n },\r\n '&.-select': {\r\n '@apply w-auto': {},\r\n },\r\n },\r\n\r\n '&-bottomwrapper': {\r\n '@apply mt-lg px-lg flex items-center justify-end': {},\r\n },\r\n },\r\n});\r\n"],"mappings":";;AAAAA,MAAM,CAACC,OAAO,GAAGC,UAAU,GAAG,SAAAA,WAAA;EAAA,OAAO;IACnC,gBAAgB,EAAE;MAChB,oCAAoC,EAAE,CAAC,CAAC;MAExC,SAAS,EAAE;QACT,MAAM,EAAE;UACN,oCAAoC,EAAE,CAAC;QACzC,CAAC;QAED,MAAM,EAAE;UACN,kCAAkC,EAAE,CAAC,CAAC;UAEtC,iCAAiC,EAAE;YACjC,6BAA6B,EAAE,CAAC;UAClC;QACF;MACF,CAAC;MAED,cAAc,EAAE;QACd,0BAA0B,EAAE,CAAC,CAAC;QAE9B,QAAQ,EAAE;UACR,0BAA0B,EAAE,CAAC,CAAC;UAE9B,kBAAkB,EAAE;YAClB,iBAAiB,EAAE,CAAC;UACtB,CAAC;UAED,QAAQ,EAAE;YACR,6BAA6B,EAAE,CAAC,CAAC;YAEjC,kCAAkC,EAAE;cAClC,mBAAmB,EAAE,CAAC;YACxB,CAAC;YAED,mCAAmC,EAAE;cACnC,kBAAkB,EAAE,CAAC;YACvB;UACF,CAAC;UAED,QAAQ,EAAE;YACR,kBAAkB,EAAE,CAAC;UACvB;QACF;MACF,CAAC;MAED,0BAA0B,EAAE;QAC1BC,QAAQ,EAAE;MACZ,CAAC;MAED,SAAS,EAAE;QACT,8BAA8B,EAAE,CAAC,CAAC;QAElC,MAAM,EAAE;UACN,gMAAgM,EAC9L,CAAC,CAAC;UAEJ,eAAe,EAAE;YACf,oCAAoC,EAAE,CAAC;UACzC;QACF,CAAC;QAED,MAAM,EAAE;UACN,8QAA8Q,EAC5Q,CAAC;QACL;MACF,CAAC;MAED,qBAAqB,EAAE;QACrB,4DAA4D,EAAE,CAAC;MACjE,CAAC;MACD,cAAc,EAAE;QACd,aAAa,EAAE,CAAC;MAClB,CAAC;MACD,wBAAwB,EAAE;QACxB,6DAA6D,EAAE,CAAC,CAAC;QACjE,SAAS,EAAE;UACT,kBAAkB,EAAE,CAAC;QACvB,CAAC;QACD,WAAW,EAAE;UACX,eAAe,EAAE,CAAC;QACpB;MACF,CAAC;MAED,iBAAiB,EAAE;QACjB,kDAAkD,EAAE,CAAC;MACvD;IACF;EACF,CAAC;AAAA,CAAC"}
package/dist/esm/components/accordion.js CHANGED
@@ -1,12 +1,21 @@
1
1
  module.exports = Accordion = colors => ({
2
- '.accordion': {
2
+ '.sk-disclosure': {
3
+ '&:has(&-header:focus-visible)': {
4
+ '@apply outline': {}
5
+ },
3
6
  '&-header': {
4
7
  '@apply flex flex-col text-left': {},
5
8
  '[aria-expanded="true"] &': {
6
9
  '@apply bg-hover': {}
7
10
  },
11
+ '&:focus-visible': {
12
+ '@apply outline-0': {}
13
+ },
8
14
  '&-icon': {
9
- '@apply ml-auto !text-2xl': {}
15
+ '@apply ml-auto !text-2xl': {},
16
+ svg: {
17
+ '@apply !text-2xl': {}
18
+ }
10
19
  }
11
20
  },
12
21
  '&-is-open &-header': {
@@ -15,17 +24,10 @@ module.exports = Accordion = colors => ({
15
24
  '&-toggle': {
16
25
  '@apply flex items-center inline-block text-lg leading-lg text-left text-lg mx-md sm:mx-lg my-md': {},
17
26
  fontWeight: 'bold',
18
- //"@apply focus-visible:shadow shadow-lg": {},
19
- '&:focus-visible': {
20
- boxShadow: '0 0 0 0.4rem #fff!important',
21
- outline: '0'
22
- //"@apply border-4": {},
23
- },
24
-
25
- '.accordion-title': {
27
+ '.sk-disclosure-title': {
26
28
  '@apply mr-md text-base leading-base md:text-lg md:leading-lg': {}
27
29
  },
28
- '.accordion-subtitle': {
30
+ '.sk-disclosure-subtitle': {
29
31
  '@apply m-0 mr-md text-sm font-normal': {}
30
32
  }
31
33
  },
@@ -43,25 +45,25 @@ module.exports = Accordion = colors => ({
43
45
  },
44
46
  '&-solid': {
45
47
  '@apply border border-primary': {},
46
- '.accordion-header': {
48
+ '.sk-disclosure-header': {
47
49
  '@apply bg-primary text-white': {},
48
50
  '[aria-expanded="true"] &': {
49
51
  '@apply bg-hover': {}
50
52
  }
51
53
  }
52
54
  },
53
- '&-alert': {
55
+ '&-solid[data-alert="true"], &-outline[data-alert="true"]': {
54
56
  '@apply border border-warning': {},
55
- '.accordion-header': {
57
+ '.sk-disclosure-header:not([data-disabled="true"])': {
56
58
  '@apply bg-warning-light text-warning': {},
57
59
  '[aria-expanded="true"] &': {
58
60
  '@apply bg-warning-light': {}
59
61
  }
60
62
  }
61
63
  },
62
- '&-error': {
64
+ '&-solid[data-error="true"], &-outline[data-error="true"]': {
63
65
  '@apply border border-error': {},
64
- '.accordion-header': {
66
+ '.sk-disclosure-header:not([data-disabled="true"])': {
65
67
  '@apply bg-error-light text-error': {},
66
68
  '[aria-expanded="true"] &': {
67
69
  '@apply bg-error-light': {}
@@ -70,52 +72,115 @@ module.exports = Accordion = colors => ({
70
72
  },
71
73
  '&-is-open': {
72
74
  '@apply border border-gray-stroke': {},
73
- '& .accordion-header': {
75
+ '& .sk-disclosure-header': {
74
76
  '@apply bg-hover text-white': {}
77
+ },
78
+ '&[data-alert="true"]': {
79
+ '@apply border border-warning': {},
80
+ '& .sk-disclosure-header': {
81
+ '@apply border-b border-warning': {}
82
+ }
83
+ },
84
+ '&[data-error="true"]': {
85
+ '@apply border border-error': {},
86
+ '& .sk-disclosure-header': {
87
+ '@apply border-b border-error': {}
88
+ }
75
89
  }
76
90
  },
77
- '&-is-open-alert': {
78
- '@apply border border-warning': {},
79
- '& .accordion-header': {
80
- '@apply border-b border-warning': {}
81
- }
82
- },
83
- '&-is-open-error': {
84
- '@apply border border-error': {},
85
- '& .accordion-header': {
86
- '@apply border-b border-error': {}
87
- }
88
- },
89
- '&-is-open &-body, &-is-open-alert &-body, &-is-open-error &-body': {
91
+ '&-is-open &-body': {
90
92
  '@apply overflow-visible animate-reset-overflow': {}
91
93
  },
92
94
  '&-outline': {
93
95
  '@apply border border-gray-stroke': {},
94
- '.accordion-body': {
96
+ '&:not([data-error="true"]):not([data-alert="true"]) .sk-disclosure-body': {
95
97
  '@apply mt-0': {}
96
98
  },
97
- '.accordion-toggle': {
98
- '&:focus-visible': {
99
- boxShadow: '0 0 0 0.4rem #4b4b4b!important',
100
- outline: '0'
99
+ '.sk-disclosure-toggle': {},
100
+ '.sk-disclosure-header': {
101
+ '@apply bg-transparent text-body': {},
102
+ '[aria-expanded="true"] &': {
103
+ '@apply bg-hover': {}
101
104
  }
105
+ }
106
+ },
107
+ '&-plain': {
108
+ '@apply border-0': {},
109
+ '&:has(.sk-disclosure-header:focus-visible)': {
110
+ '@apply outline-offset-4': {}
102
111
  },
103
- '.accordion-header': {
112
+ '.sk-disclosure-header': {
104
113
  '@apply bg-transparent text-body': {},
105
114
  '[aria-expanded="true"] &': {
106
115
  '@apply bg-hover': {}
116
+ },
117
+ '&[data-disabled="true"]': {
118
+ '@apply bg-transparent text-gray-stroke': {}
119
+ },
120
+ '.sk-disclosure-toggle': {
121
+ '@apply mx-0': {}
122
+ }
123
+ },
124
+ '.sk-disclosure-body': {
125
+ '@apply m-0': {}
126
+ },
127
+ '&[data-alert="true"]': {
128
+ '@apply border-0': {},
129
+ '.sk-disclosure-header': {
130
+ '@apply border-0 text-warning': {}
131
+ }
132
+ },
133
+ '&[data-error="true"]': {
134
+ '@apply border-0': {},
135
+ '.sk-disclosure-header': {
136
+ '@apply border-0 text-error': {}
107
137
  }
108
138
  }
109
139
  },
110
- '&-disabled, &-disabled button': {
140
+ '&-disabled, &-disabled [role="button"]': {
111
141
  '@apply disabled:cursor-not-allowed cursor-not-allowed': {}
112
142
  },
113
- '&-disabled &-header': {
114
- '@apply bg-gray-lighter text-gray': {}
143
+ '&-header[data-disabled="true"]': {
144
+ '@apply bg-gray-lighter text-gray-stroke': {}
115
145
  },
116
146
  '&-disabled, &&-disabled': {
117
147
  '@apply border-gray': {}
118
148
  }
149
+ },
150
+ '.sk-accordion': {
151
+ '&-item': {
152
+ '.sk-disclosure': {
153
+ transitionProperty: 'margin',
154
+ transitionDuration: '180ms',
155
+ '&-disabled': {
156
+ '@apply border-x-transparent border-y-transparent': {}
157
+ },
158
+ '&-plain, &-plain[data-disabled="true"]': {
159
+ '@apply border border-transparent border-b-gray-stroke': {}
160
+ },
161
+ '&-solid[data-open="false"]': {
162
+ '@apply border-white': {},
163
+ '&[data-disabled="true"]': {
164
+ '@apply border-x-transparent border-y-transparent': {}
165
+ }
166
+ },
167
+ '&[data-open="true"]:not(&-plain)': {
168
+ '@apply mt-md mb-md': {}
169
+ }
170
+ },
171
+ '&:not(:first-child)': {
172
+ '@apply mt-[-1px]': {}
173
+ },
174
+ '&:first-child .sk-disclosure[data-open="true"]:not(.sk-disclosure-plain)': {
175
+ '@apply mt-0 mb-md': {}
176
+ },
177
+ '&:last-child .sk-disclosure[data-open="true"]:not(.sk-disclosure-plain)': {
178
+ '@apply mt-md mb-0': {}
179
+ },
180
+ '&:last-child .sk-disclosure-plain': {
181
+ '@apply border-b-transparent': {}
182
+ }
183
+ }
119
184
  }
120
185
  });
121
186
  //# sourceMappingURL=accordion.js.map
package/dist/esm/components/accordion.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"accordion.js","names":["module","exports","Accordion","colors","fontWeight","boxShadow","outline","transitionProperty","transitionTimingFunction","transitionDuration"],"sources":["../../../src/components/accordion.js"],"sourcesContent":["module.exports = Accordion = (colors) => ({\r\n '.accordion': {\r\n '&-header': {\r\n '@apply flex flex-col text-left': {},\r\n\r\n '[aria-expanded=\"true\"] &': {\r\n '@apply bg-hover': {},\r\n },\r\n\r\n '&-icon': {\r\n '@apply ml-auto !text-2xl': {},\r\n },\r\n },\r\n\r\n '&-is-open &-header': {\r\n '@apply bg-hover': {},\r\n },\r\n\r\n '&-toggle': {\r\n '@apply flex items-center inline-block text-lg leading-lg text-left text-lg mx-md sm:mx-lg my-md': {},\r\n fontWeight: 'bold',\r\n //\"@apply focus-visible:shadow shadow-lg\": {},\r\n '&:focus-visible': {\r\n boxShadow: '0 0 0 0.4rem #fff!important',\r\n outline: '0',\r\n //\"@apply border-4\": {},\r\n },\r\n '.accordion-title': {\r\n '@apply mr-md text-base leading-base md:text-lg md:leading-lg': {},\r\n },\r\n '.accordion-subtitle': {\r\n '@apply m-0 mr-md text-sm font-normal': {},\r\n },\r\n },\r\n\r\n '&-body': {\r\n '@apply h-0 overflow-hidden': {},\r\n transitionProperty: 'visibility, height, padding, margin',\r\n transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',\r\n transitionDuration: '180ms',\r\n\r\n '&[aria-hidden=\"true\"], &[data-hidden=\"true\"]': {\r\n '@apply my-0 invisible': {},\r\n },\r\n\r\n '&[aria-hidden=\"false\"], &[data-hidden=\"false\"]': {\r\n '@apply block h-auto visible': {},\r\n },\r\n },\r\n\r\n '&-solid': {\r\n '@apply border border-primary': {},\r\n '.accordion-header': {\r\n '@apply bg-primary text-white': {},\r\n\r\n '[aria-expanded=\"true\"] &': {\r\n '@apply bg-hover': {},\r\n },\r\n },\r\n },\r\n\r\n '&-alert': {\r\n '@apply border border-warning': {},\r\n '.accordion-header': {\r\n '@apply bg-warning-light text-warning': {},\r\n\r\n '[aria-expanded=\"true\"] &': {\r\n '@apply bg-warning-light': {},\r\n },\r\n },\r\n },\r\n '&-error': {\r\n '@apply border border-error': {},\r\n '.accordion-header': {\r\n '@apply bg-error-light text-error': {},\r\n\r\n '[aria-expanded=\"true\"] &': {\r\n '@apply bg-error-light': {},\r\n },\r\n },\r\n },\r\n\r\n '&-is-open': {\r\n '@apply border border-gray-stroke': {},\r\n '& .accordion-header': {\r\n '@apply bg-hover text-white': {},\r\n },\r\n },\r\n\r\n '&-is-open-alert': {\r\n '@apply border border-warning': {},\r\n '& .accordion-header': {\r\n '@apply border-b border-warning': {},\r\n },\r\n },\r\n\r\n '&-is-open-error': {\r\n '@apply border border-error': {},\r\n '& .accordion-header': {\r\n '@apply border-b border-error': {},\r\n },\r\n },\r\n\r\n '&-is-open &-body, &-is-open-alert &-body, &-is-open-error &-body': {\r\n '@apply overflow-visible animate-reset-overflow': {},\r\n },\r\n\r\n '&-outline': {\r\n '@apply border border-gray-stroke': {},\r\n '.accordion-body': {\r\n '@apply mt-0': {},\r\n },\r\n '.accordion-toggle': {\r\n '&:focus-visible': {\r\n boxShadow: '0 0 0 0.4rem #4b4b4b!important',\r\n outline: '0',\r\n },\r\n },\r\n '.accordion-header': {\r\n '@apply bg-transparent text-body': {},\r\n\r\n '[aria-expanded=\"true\"] &': {\r\n '@apply bg-hover': {},\r\n },\r\n },\r\n },\r\n\r\n '&-disabled, &-disabled button': {\r\n '@apply disabled:cursor-not-allowed cursor-not-allowed': {},\r\n },\r\n\r\n '&-disabled &-header': {\r\n '@apply bg-gray-lighter text-gray': {},\r\n },\r\n\r\n '&-disabled, &&-disabled': {\r\n '@apply border-gray': {},\r\n },\r\n },\r\n});\r\n"],"mappings":"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"}
1
+ {"version":3,"file":"accordion.js","names":["module","exports","Accordion","colors","svg","fontWeight","transitionProperty","transitionTimingFunction","transitionDuration"],"sources":["../../../src/components/accordion.js"],"sourcesContent":["module.exports = Accordion = (colors) => ({\r\n '.sk-disclosure': {\r\n '&:has(&-header:focus-visible)': {\r\n '@apply outline': {},\r\n },\r\n '&-header': {\r\n '@apply flex flex-col text-left': {},\r\n\r\n '[aria-expanded=\"true\"] &': {\r\n '@apply bg-hover': {},\r\n },\r\n\r\n '&:focus-visible': {\r\n '@apply outline-0': {},\r\n },\r\n\r\n '&-icon': {\r\n '@apply ml-auto !text-2xl': {},\r\n svg: {\r\n '@apply !text-2xl': {},\r\n },\r\n },\r\n },\r\n\r\n '&-is-open &-header': {\r\n '@apply bg-hover': {},\r\n },\r\n\r\n '&-toggle': {\r\n '@apply flex items-center inline-block text-lg leading-lg text-left text-lg mx-md sm:mx-lg my-md': {},\r\n fontWeight: 'bold',\r\n\r\n '.sk-disclosure-title': {\r\n '@apply mr-md text-base leading-base md:text-lg md:leading-lg': {},\r\n },\r\n '.sk-disclosure-subtitle': {\r\n '@apply m-0 mr-md text-sm font-normal': {},\r\n },\r\n },\r\n\r\n '&-body': {\r\n '@apply h-0 overflow-hidden': {},\r\n transitionProperty: 'visibility, height, padding, margin',\r\n transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',\r\n transitionDuration: '180ms',\r\n\r\n '&[aria-hidden=\"true\"], &[data-hidden=\"true\"]': {\r\n '@apply my-0 invisible': {},\r\n },\r\n\r\n '&[aria-hidden=\"false\"], &[data-hidden=\"false\"]': {\r\n '@apply block h-auto visible': {},\r\n },\r\n },\r\n\r\n '&-solid': {\r\n '@apply border border-primary': {},\r\n '.sk-disclosure-header': {\r\n '@apply bg-primary text-white': {},\r\n\r\n '[aria-expanded=\"true\"] &': {\r\n '@apply bg-hover': {},\r\n },\r\n },\r\n },\r\n\r\n '&-solid[data-alert=\"true\"], &-outline[data-alert=\"true\"]': {\r\n '@apply border border-warning': {},\r\n\r\n '.sk-disclosure-header:not([data-disabled=\"true\"])': {\r\n '@apply bg-warning-light text-warning': {},\r\n\r\n '[aria-expanded=\"true\"] &': {\r\n '@apply bg-warning-light': {},\r\n },\r\n },\r\n },\r\n '&-solid[data-error=\"true\"], &-outline[data-error=\"true\"]': {\r\n '@apply border border-error': {},\r\n '.sk-disclosure-header:not([data-disabled=\"true\"])': {\r\n '@apply bg-error-light text-error': {},\r\n\r\n '[aria-expanded=\"true\"] &': {\r\n '@apply bg-error-light': {},\r\n },\r\n },\r\n },\r\n\r\n '&-is-open': {\r\n '@apply border border-gray-stroke': {},\r\n '& .sk-disclosure-header': {\r\n '@apply bg-hover text-white': {},\r\n },\r\n\r\n '&[data-alert=\"true\"]': {\r\n '@apply border border-warning': {},\r\n '& .sk-disclosure-header': {\r\n '@apply border-b border-warning': {},\r\n },\r\n },\r\n\r\n '&[data-error=\"true\"]': {\r\n '@apply border border-error': {},\r\n '& .sk-disclosure-header': {\r\n '@apply border-b border-error': {},\r\n },\r\n },\r\n },\r\n '&-is-open &-body': {\r\n '@apply overflow-visible animate-reset-overflow': {},\r\n },\r\n\r\n '&-outline': {\r\n '@apply border border-gray-stroke': {},\r\n '&:not([data-error=\"true\"]):not([data-alert=\"true\"]) .sk-disclosure-body': {\r\n '@apply mt-0': {},\r\n },\r\n '.sk-disclosure-toggle': {},\r\n '.sk-disclosure-header': {\r\n '@apply bg-transparent text-body': {},\r\n\r\n '[aria-expanded=\"true\"] &': {\r\n '@apply bg-hover': {},\r\n },\r\n },\r\n },\r\n\r\n '&-plain': {\r\n '@apply border-0': {},\r\n '&:has(.sk-disclosure-header:focus-visible)': {\r\n '@apply outline-offset-4': {},\r\n },\r\n '.sk-disclosure-header': {\r\n '@apply bg-transparent text-body': {},\r\n\r\n '[aria-expanded=\"true\"] &': {\r\n '@apply bg-hover': {},\r\n },\r\n '&[data-disabled=\"true\"]': {\r\n '@apply bg-transparent text-gray-stroke': {},\r\n },\r\n '.sk-disclosure-toggle': {\r\n '@apply mx-0': {},\r\n },\r\n },\r\n '.sk-disclosure-body': {\r\n '@apply m-0': {},\r\n },\r\n '&[data-alert=\"true\"]': {\r\n '@apply border-0': {},\r\n '.sk-disclosure-header': {\r\n '@apply border-0 text-warning': {},\r\n },\r\n },\r\n '&[data-error=\"true\"]': {\r\n '@apply border-0': {},\r\n '.sk-disclosure-header': {\r\n '@apply border-0 text-error': {},\r\n },\r\n },\r\n },\r\n\r\n '&-disabled, &-disabled [role=\"button\"]': {\r\n '@apply disabled:cursor-not-allowed cursor-not-allowed': {},\r\n },\r\n\r\n '&-header[data-disabled=\"true\"]': {\r\n '@apply bg-gray-lighter text-gray-stroke': {},\r\n },\r\n\r\n '&-disabled, &&-disabled': {\r\n '@apply border-gray': {},\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 '&-disabled': {\r\n '@apply border-x-transparent border-y-transparent': {},\r\n },\r\n '&-plain, &-plain[data-disabled=\"true\"]': {\r\n '@apply border border-transparent border-b-gray-stroke': {},\r\n },\r\n\r\n '&-solid[data-open=\"false\"]': {\r\n '@apply border-white': {},\r\n '&[data-disabled=\"true\"]': {\r\n '@apply border-x-transparent border-y-transparent': {},\r\n },\r\n },\r\n '&[data-open=\"true\"]:not(&-plain)': {\r\n '@apply mt-md mb-md': {},\r\n },\r\n },\r\n '&:not(:first-child)': {\r\n '@apply mt-[-1px]': {},\r\n },\r\n '&:first-child .sk-disclosure[data-open=\"true\"]:not(.sk-disclosure-plain)': {\r\n '@apply mt-0 mb-md': {},\r\n },\r\n '&:last-child .sk-disclosure[data-open=\"true\"]:not(.sk-disclosure-plain)': {\r\n '@apply mt-md mb-0': {},\r\n },\r\n '&:last-child .sk-disclosure-plain': {\r\n '@apply border-b-transparent': {},\r\n },\r\n },\r\n },\r\n});\r\n"],"mappings":"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"}
package/dist/esm/components/forms.js CHANGED
@@ -243,6 +243,15 @@ module.exports = Forms = colors => _extends({
243
243
  }
244
244
  }
245
245
  },
246
+ '.form-select-list-transition': {
247
+ '@apply absolute z-50 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm': {},
248
+ '&.showabove': {
249
+ '@apply mb-1 bottom-full': {}
250
+ },
251
+ '&:not(.showabove)': {
252
+ '@apply mt-1 top-full': {}
253
+ }
254
+ },
246
255
  '.form-select': {
247
256
  '@apply justify-between items-center grow text-body bg-white caret-transparent select-none cursor-pointer border-gray-stroke': {},
248
257
  'background-image': 'none',
@@ -253,7 +262,10 @@ module.exports = Forms = colors => _extends({
253
262
  '@apply grow-0': {}
254
263
  },
255
264
  '&-list': {
256
- '@apply z-10 absolute overflow-y-auto w-full bg-white mt-0 border border-gray-stroke border-t-0': {}
265
+ '@apply z-10 absolute overflow-y-auto w-full bg-white mt-0 border border-gray-stroke border-t-0 border-b': {},
266
+ '&.showabove': {
267
+ '@apply border-t border-b-0': {}
268
+ }
257
269
  },
258
270
  '&-has-multiple-choices': {
259
271
  '@apply flex w-full h-full justify-between items-center pr-md': {}
package/dist/esm/components/forms.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"forms.js","names":["fieldOutline","colors","_extends","reduce","styles","color","fieldSolid","formControl","formInputGroup","module","exports","Forms","maxHeight"],"sources":["../../../src/components/forms.js"],"sourcesContent":["function fieldOutline(colors) {\r\n return {\r\n '&-outline': {\r\n '@apply border shadow-sm border-gray-stroke': {},\r\n '@apply text-gray bg-white': {},\r\n\r\n ...colors.reduce(\r\n (styles, color) => ({\r\n ...styles,\r\n [`&[data-color=\"${color}\"]`]: {\r\n [`@apply focus-visible:border-${color} focus-visible:ring-${color}`]: {},\r\n [`@apply dark:focus-visible:border-${color} dark:focus-visible:ring-${color}`]: {},\r\n },\r\n }),\r\n {}\r\n ),\r\n\r\n '&[aria-invalid=true]': {\r\n '@apply border-error ring-error': {},\r\n\r\n '&:focus-visible': {\r\n '@apply border-error ring-error': {},\r\n },\r\n },\r\n },\r\n };\r\n}\r\n\r\nfunction fieldSolid(colors) {\r\n return {\r\n '&-solid': {\r\n '@apply border border-transparent': {},\r\n '@apply text-black bg-gray-light': {},\r\n\r\n ...colors.reduce(\r\n (styles, color) => ({\r\n ...styles,\r\n [`&[data-color=\"${color}\"]`]: {\r\n [`@apply focus-visible:border-${color} focus-visible:ring-${color}`]: {},\r\n [`@apply dark:focus-visible:border-${color} dark:focus-visible:ring-${color}`]: {},\r\n },\r\n }),\r\n {}\r\n ),\r\n\r\n '&[aria-invalid=true]': {\r\n '@apply border-error ring-error': {},\r\n\r\n '&:focus-visible': {\r\n '@apply border-error ring-error': {},\r\n },\r\n },\r\n },\r\n };\r\n}\r\n\r\nfunction formControl() {\r\n return {\r\n '.form-control': {\r\n '@apply w-full relative': {},\r\n },\r\n '.form-helper-text': {\r\n '@apply mt-1.5 leading-none text-gray dark:text-white/60': {},\r\n },\r\n '.form-error-message': {\r\n '@apply mt-1.5 leading-none flex items-center text-sm text-error': {},\r\n },\r\n '.form-label': {\r\n '@apply text-sm font-medium text-left align-middle block mb-1.5': {},\r\n },\r\n '.form-required-indicator': {\r\n '@apply ml-1 text-sm': {},\r\n '--tw-text-opacity': '1',\r\n color: 'rgba(239, 68, 68, var(--tw-text-opacity))',\r\n '.dark &': {\r\n '--tw-text-opacity': '1',\r\n color: 'rgba(252, 165, 165, var(--tw-text-opacity))',\r\n },\r\n },\r\n };\r\n}\r\n\r\nfunction formInputGroup() {\r\n return {\r\n '.form-input-group': {\r\n '@apply flex relative bg-white h-fit w-full rounded-[0.2rem] border border-gray-stroke': {},\r\n\r\n '&:focus-within': {\r\n '@apply border border-primary ring-primary ring-1': {},\r\n },\r\n\r\n '> *': {\r\n '@apply border-0 ring-0 shadow-none': {},\r\n\r\n '&:focus': {\r\n '@apply ring-0': {},\r\n },\r\n },\r\n\r\n '&-sm': {\r\n '@apply min-h-[4rem] max-h-[4rem]': {},\r\n\r\n '.form-field': {\r\n '@apply min-h-[3.8rem] max-h-[3.8rem]': {},\r\n },\r\n },\r\n\r\n '&-md': {\r\n '@apply min-h-[4.4rem] max-h-[4.4rem]': {},\r\n\r\n '.form-field': {\r\n '@apply min-h-[4.2rem] max-h-[4.2rem]': {},\r\n },\r\n },\r\n\r\n '&-lg': {\r\n '@apply min-h-[4.8rem] max-h-[4.8rem]': {},\r\n\r\n '.form-field': {\r\n '@apply min-h-[4.6rem] max-h-[4.6rem]': {},\r\n },\r\n },\r\n\r\n \"&[data-rounded='true']\": {\r\n '@apply rounded-[3.2rem]': {},\r\n\r\n '> *:first-child': {\r\n '@apply rounded-[3.2rem]': {},\r\n },\r\n\r\n '> *:last-child': {\r\n '@apply rounded-[3.2rem]': {},\r\n },\r\n },\r\n\r\n '&[aria-invalid=true]': {\r\n '@apply border-error ring-error': {},\r\n },\r\n },\r\n\r\n '.form-input-element': {\r\n '@apply flex items-center justify-center absolute z-base top-0': {},\r\n\r\n '&-sm': {\r\n '@apply text-xs h-7 w-7': {},\r\n },\r\n\r\n '&-md': {\r\n '@apply text-sm h-8 w-8': {},\r\n },\r\n\r\n '&-lg': {\r\n '@apply text-base h-10 w-10': {},\r\n },\r\n },\r\n\r\n '.form-input-addon': {\r\n '@apply flex items-center w-auto shadow-sm whitespace-nowrap': {},\r\n '@apply text-neutral-600 bg-neutral-50': {},\r\n // dark colors\r\n '@apply dark:border-neutral-700': {},\r\n '@apply dark:text-neutral-100 dark:bg-white/30': {},\r\n\r\n '&-sm': {\r\n '@apply px-3 text-xs': {},\r\n },\r\n\r\n '&-md': {\r\n '@apply px-4 text-sm': {},\r\n },\r\n\r\n '&-lg': {\r\n '@apply px-4 text-base': {},\r\n },\r\n\r\n '&-left': {\r\n '@apply rounded-r-none': {},\r\n },\r\n\r\n '&-right': {\r\n '@apply rounded-l-none': {},\r\n },\r\n },\r\n '.form-input-addin': {\r\n '@apply flex items-center w-auto whitespace-nowrap': {},\r\n '@apply text-body': {},\r\n\r\n '&-sm': {\r\n '@apply px-[1.44rem] text-xs': {},\r\n },\r\n\r\n '&-md': {\r\n '@apply px-[1.6rem] text-sm': {},\r\n },\r\n\r\n '&-lg': {\r\n '@apply px-[1.76rem] text-base': {},\r\n },\r\n\r\n '&-left': {\r\n '@apply pr-0 rounded-r-none': {},\r\n },\r\n\r\n '&-right': {\r\n '@apply pl-0 rounded-l-none': {},\r\n },\r\n },\r\n };\r\n}\r\n\r\nmodule.exports = Forms = (colors) => ({\r\n '.form-field': {\r\n '@apply rounded-[0.2rem] placeholder-gray-stroke': {},\r\n '@apply relative w-full min-w-0 inline-flex items-center appearance-none focus-visible:outline-none': {},\r\n '@apply transition-colors\tduration-75 ease-out': {},\r\n\r\n '&-sm': {\r\n '@apply text-sm leading-sm': {},\r\n '@apply py-0 px-[1.44rem] min-h-[4rem] max-h-[4rem]': {},\r\n },\r\n\r\n '&-md': {\r\n '@apply text-base leading-base': {},\r\n '@apply py-0 px-[1.6rem] min-h-[4.4rem] max-h-[4.4rem]': {},\r\n },\r\n\r\n '&-lg': {\r\n '@apply text-base leading-lg': {},\r\n '@apply py-0 px-[1.76rem] min-h-[4.8rem] max-h-[4.8rem]': {},\r\n },\r\n\r\n '&-disabled, &&-disabled': {\r\n '@apply disabled:cursor-not-allowed cursor-not-allowed': {},\r\n '@apply disabled:bg-gray-lighter bg-gray-lighter': {},\r\n },\r\n\r\n \"&[data-rounded='true']\": {\r\n '@apply rounded-[3.2rem]': {},\r\n },\r\n\r\n // variants\r\n ...fieldOutline(colors),\r\n ...fieldSolid(colors),\r\n },\r\n\r\n '.form-button': {\r\n '@apply text-[1.1433em] border-0 ml-auto text-primary hover:text-white': {},\r\n\r\n '&[data-icon=true]': {\r\n '@apply p-[0.2em]': {},\r\n },\r\n\r\n '&-icon': {\r\n '@apply inline-flex': {},\r\n },\r\n\r\n '&-wrapper': {\r\n '@apply flex items-center absolute inset-y-0 right-sm': {},\r\n },\r\n },\r\n\r\n '.form-textarea': {\r\n maxHeight: 'none',\r\n '&.form-field': {\r\n '&-sm': {\r\n '@apply py-[0.85rem] min-h-[4rem]': {},\r\n },\r\n\r\n '&-md': {\r\n '@apply py-[0.9rem] min-h-[4.4rem]': {},\r\n },\r\n\r\n '&-lg': {\r\n '@apply py-[1.1rem] min-h-[4.8rem]': {},\r\n },\r\n },\r\n '&-counter': {\r\n '@apply mt-xs text-right': {},\r\n },\r\n },\r\n '.dropdown-search': {\r\n '@apply block w-full relative': {},\r\n '&-results': {\r\n '@apply w-full flex justify-between items-center': {},\r\n '&-text': {\r\n '@apply truncate text-left grow': {},\r\n },\r\n '&-counter': {\r\n '@apply grow-0': {},\r\n },\r\n },\r\n\r\n '&[data-expanded=true]': {\r\n '.form-input-group[data-rounded=true]': {\r\n '@apply rounded-t-[2rem] rounded-bl-none rounded-br-none': {},\r\n\r\n '> *:first-child': {\r\n '@apply rounded-t-[2rem] rounded-bl-none rounded-br-none': {},\r\n },\r\n\r\n '> *:last-child': {\r\n '@apply rounded-t-[2rem] rounded-bl-none rounded-br-none': {},\r\n },\r\n\r\n '& ~ #dropdown-search-results': {\r\n '@apply rounded-b-[1.6rem]': {},\r\n },\r\n },\r\n },\r\n },\r\n\r\n '.form-select': {\r\n '@apply justify-between items-center grow text-body bg-white caret-transparent select-none cursor-pointer border-gray-stroke':\r\n {},\r\n 'background-image': 'none',\r\n '&-wrapper': {\r\n '@apply block w-full relative': {},\r\n },\r\n '&-icon': {\r\n '@apply grow-0': {},\r\n },\r\n '&-list': {\r\n '@apply z-10 absolute overflow-y-auto w-full bg-white mt-0 border border-gray-stroke border-t-0': {},\r\n },\r\n '&-has-multiple-choices': {\r\n '@apply flex w-full h-full justify-between items-center pr-md': {},\r\n },\r\n '&-multiple-chioces': {\r\n '@apply truncate pr-md': {},\r\n },\r\n\r\n '&-option': {\r\n '@apply text-body rounded-none cursor-default hover:text-white focus-visible:text-white hover:bg-primary focus-visible:bg-primary flex items-center':\r\n {},\r\n\r\n '&.multiple.selected': {\r\n '@apply bg-background-one': {},\r\n },\r\n '&.active': {\r\n '@apply bg-primary text-white': {},\r\n },\r\n '&.active.selected': {\r\n '@apply bg-gray text-white': {},\r\n },\r\n '&.disabled': {\r\n '@apply opacity-75 cursor-not-allowed hover:bg-white hover:text-black': {},\r\n },\r\n '&-remove-button': {\r\n '@apply w-full flex justify-between items-center': {},\r\n '&-text': {\r\n '@apply truncate grow text-left': {},\r\n },\r\n },\r\n },\r\n },\r\n\r\n ...formInputGroup(),\r\n ...formControl(),\r\n});\r\n"],"mappings":"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"}
1
+ {"version":3,"file":"forms.js","names":["fieldOutline","colors","_extends","reduce","styles","color","fieldSolid","formControl","formInputGroup","module","exports","Forms","maxHeight"],"sources":["../../../src/components/forms.js"],"sourcesContent":["function fieldOutline(colors) {\r\n return {\r\n '&-outline': {\r\n '@apply border shadow-sm border-gray-stroke': {},\r\n '@apply text-gray bg-white': {},\r\n\r\n ...colors.reduce(\r\n (styles, color) => ({\r\n ...styles,\r\n [`&[data-color=\"${color}\"]`]: {\r\n [`@apply focus-visible:border-${color} focus-visible:ring-${color}`]: {},\r\n [`@apply dark:focus-visible:border-${color} dark:focus-visible:ring-${color}`]: {},\r\n },\r\n }),\r\n {}\r\n ),\r\n\r\n '&[aria-invalid=true]': {\r\n '@apply border-error ring-error': {},\r\n\r\n '&:focus-visible': {\r\n '@apply border-error ring-error': {},\r\n },\r\n },\r\n },\r\n };\r\n}\r\n\r\nfunction fieldSolid(colors) {\r\n return {\r\n '&-solid': {\r\n '@apply border border-transparent': {},\r\n '@apply text-black bg-gray-light': {},\r\n\r\n ...colors.reduce(\r\n (styles, color) => ({\r\n ...styles,\r\n [`&[data-color=\"${color}\"]`]: {\r\n [`@apply focus-visible:border-${color} focus-visible:ring-${color}`]: {},\r\n [`@apply dark:focus-visible:border-${color} dark:focus-visible:ring-${color}`]: {},\r\n },\r\n }),\r\n {}\r\n ),\r\n\r\n '&[aria-invalid=true]': {\r\n '@apply border-error ring-error': {},\r\n\r\n '&:focus-visible': {\r\n '@apply border-error ring-error': {},\r\n },\r\n },\r\n },\r\n };\r\n}\r\n\r\nfunction formControl() {\r\n return {\r\n '.form-control': {\r\n '@apply w-full relative': {},\r\n },\r\n '.form-helper-text': {\r\n '@apply mt-1.5 leading-none text-gray dark:text-white/60': {},\r\n },\r\n '.form-error-message': {\r\n '@apply mt-1.5 leading-none flex items-center text-sm text-error': {},\r\n },\r\n '.form-label': {\r\n '@apply text-sm font-medium text-left align-middle block mb-1.5': {},\r\n },\r\n '.form-required-indicator': {\r\n '@apply ml-1 text-sm': {},\r\n '--tw-text-opacity': '1',\r\n color: 'rgba(239, 68, 68, var(--tw-text-opacity))',\r\n '.dark &': {\r\n '--tw-text-opacity': '1',\r\n color: 'rgba(252, 165, 165, var(--tw-text-opacity))',\r\n },\r\n },\r\n };\r\n}\r\n\r\nfunction formInputGroup() {\r\n return {\r\n '.form-input-group': {\r\n '@apply flex relative bg-white h-fit w-full rounded-[0.2rem] border border-gray-stroke': {},\r\n\r\n '&:focus-within': {\r\n '@apply border border-primary ring-primary ring-1': {},\r\n },\r\n\r\n '> *': {\r\n '@apply border-0 ring-0 shadow-none': {},\r\n\r\n '&:focus': {\r\n '@apply ring-0': {},\r\n },\r\n },\r\n\r\n '&-sm': {\r\n '@apply min-h-[4rem] max-h-[4rem]': {},\r\n\r\n '.form-field': {\r\n '@apply min-h-[3.8rem] max-h-[3.8rem]': {},\r\n },\r\n },\r\n\r\n '&-md': {\r\n '@apply min-h-[4.4rem] max-h-[4.4rem]': {},\r\n\r\n '.form-field': {\r\n '@apply min-h-[4.2rem] max-h-[4.2rem]': {},\r\n },\r\n },\r\n\r\n '&-lg': {\r\n '@apply min-h-[4.8rem] max-h-[4.8rem]': {},\r\n\r\n '.form-field': {\r\n '@apply min-h-[4.6rem] max-h-[4.6rem]': {},\r\n },\r\n },\r\n\r\n \"&[data-rounded='true']\": {\r\n '@apply rounded-[3.2rem]': {},\r\n\r\n '> *:first-child': {\r\n '@apply rounded-[3.2rem]': {},\r\n },\r\n\r\n '> *:last-child': {\r\n '@apply rounded-[3.2rem]': {},\r\n },\r\n },\r\n\r\n '&[aria-invalid=true]': {\r\n '@apply border-error ring-error': {},\r\n },\r\n },\r\n\r\n '.form-input-element': {\r\n '@apply flex items-center justify-center absolute z-base top-0': {},\r\n\r\n '&-sm': {\r\n '@apply text-xs h-7 w-7': {},\r\n },\r\n\r\n '&-md': {\r\n '@apply text-sm h-8 w-8': {},\r\n },\r\n\r\n '&-lg': {\r\n '@apply text-base h-10 w-10': {},\r\n },\r\n },\r\n\r\n '.form-input-addon': {\r\n '@apply flex items-center w-auto shadow-sm whitespace-nowrap': {},\r\n '@apply text-neutral-600 bg-neutral-50': {},\r\n // dark colors\r\n '@apply dark:border-neutral-700': {},\r\n '@apply dark:text-neutral-100 dark:bg-white/30': {},\r\n\r\n '&-sm': {\r\n '@apply px-3 text-xs': {},\r\n },\r\n\r\n '&-md': {\r\n '@apply px-4 text-sm': {},\r\n },\r\n\r\n '&-lg': {\r\n '@apply px-4 text-base': {},\r\n },\r\n\r\n '&-left': {\r\n '@apply rounded-r-none': {},\r\n },\r\n\r\n '&-right': {\r\n '@apply rounded-l-none': {},\r\n },\r\n },\r\n '.form-input-addin': {\r\n '@apply flex items-center w-auto whitespace-nowrap': {},\r\n '@apply text-body': {},\r\n\r\n '&-sm': {\r\n '@apply px-[1.44rem] text-xs': {},\r\n },\r\n\r\n '&-md': {\r\n '@apply px-[1.6rem] text-sm': {},\r\n },\r\n\r\n '&-lg': {\r\n '@apply px-[1.76rem] text-base': {},\r\n },\r\n\r\n '&-left': {\r\n '@apply pr-0 rounded-r-none': {},\r\n },\r\n\r\n '&-right': {\r\n '@apply pl-0 rounded-l-none': {},\r\n },\r\n },\r\n };\r\n}\r\n\r\nmodule.exports = Forms = (colors) => ({\r\n '.form-field': {\r\n '@apply rounded-[0.2rem] placeholder-gray-stroke': {},\r\n '@apply relative w-full min-w-0 inline-flex items-center appearance-none focus-visible:outline-none': {},\r\n '@apply transition-colors\tduration-75 ease-out': {},\r\n\r\n '&-sm': {\r\n '@apply text-sm leading-sm': {},\r\n '@apply py-0 px-[1.44rem] min-h-[4rem] max-h-[4rem]': {},\r\n },\r\n\r\n '&-md': {\r\n '@apply text-base leading-base': {},\r\n '@apply py-0 px-[1.6rem] min-h-[4.4rem] max-h-[4.4rem]': {},\r\n },\r\n\r\n '&-lg': {\r\n '@apply text-base leading-lg': {},\r\n '@apply py-0 px-[1.76rem] min-h-[4.8rem] max-h-[4.8rem]': {},\r\n },\r\n\r\n '&-disabled, &&-disabled': {\r\n '@apply disabled:cursor-not-allowed cursor-not-allowed': {},\r\n '@apply disabled:bg-gray-lighter bg-gray-lighter': {},\r\n },\r\n\r\n \"&[data-rounded='true']\": {\r\n '@apply rounded-[3.2rem]': {},\r\n },\r\n\r\n // variants\r\n ...fieldOutline(colors),\r\n ...fieldSolid(colors),\r\n },\r\n\r\n '.form-button': {\r\n '@apply text-[1.1433em] border-0 ml-auto text-primary hover:text-white': {},\r\n\r\n '&[data-icon=true]': {\r\n '@apply p-[0.2em]': {},\r\n },\r\n\r\n '&-icon': {\r\n '@apply inline-flex': {},\r\n },\r\n\r\n '&-wrapper': {\r\n '@apply flex items-center absolute inset-y-0 right-sm': {},\r\n },\r\n },\r\n\r\n '.form-textarea': {\r\n maxHeight: 'none',\r\n '&.form-field': {\r\n '&-sm': {\r\n '@apply py-[0.85rem] min-h-[4rem]': {},\r\n },\r\n\r\n '&-md': {\r\n '@apply py-[0.9rem] min-h-[4.4rem]': {},\r\n },\r\n\r\n '&-lg': {\r\n '@apply py-[1.1rem] min-h-[4.8rem]': {},\r\n },\r\n },\r\n '&-counter': {\r\n '@apply mt-xs text-right': {},\r\n },\r\n },\r\n '.dropdown-search': {\r\n '@apply block w-full relative': {},\r\n '&-results': {\r\n '@apply w-full flex justify-between items-center': {},\r\n '&-text': {\r\n '@apply truncate text-left grow': {},\r\n },\r\n '&-counter': {\r\n '@apply grow-0': {},\r\n },\r\n },\r\n\r\n '&[data-expanded=true]': {\r\n '.form-input-group[data-rounded=true]': {\r\n '@apply rounded-t-[2rem] rounded-bl-none rounded-br-none': {},\r\n\r\n '> *:first-child': {\r\n '@apply rounded-t-[2rem] rounded-bl-none rounded-br-none': {},\r\n },\r\n\r\n '> *:last-child': {\r\n '@apply rounded-t-[2rem] rounded-bl-none rounded-br-none': {},\r\n },\r\n\r\n '& ~ #dropdown-search-results': {\r\n '@apply rounded-b-[1.6rem]': {},\r\n },\r\n },\r\n },\r\n },\r\n\r\n '.form-select-list-transition': {\r\n '@apply absolute z-50 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm': {},\r\n '&.showabove': {\r\n '@apply mb-1 bottom-full': {}\r\n },\r\n '&:not(.showabove)': {\r\n '@apply mt-1 top-full': {}\r\n }\r\n },\r\n\r\n '.form-select': {\r\n '@apply justify-between items-center grow text-body bg-white caret-transparent select-none cursor-pointer border-gray-stroke':\r\n {},\r\n 'background-image': 'none',\r\n '&-wrapper': {\r\n '@apply block w-full relative': {},\r\n },\r\n '&-icon': {\r\n '@apply grow-0': {},\r\n },\r\n '&-list': {\r\n '@apply z-10 absolute overflow-y-auto w-full bg-white mt-0 border border-gray-stroke border-t-0 border-b': {\r\n },\r\n '&.showabove': {\r\n '@apply border-t border-b-0': {}\r\n }\r\n },\r\n '&-has-multiple-choices': {\r\n '@apply flex w-full h-full justify-between items-center pr-md': {},\r\n },\r\n '&-multiple-chioces': {\r\n '@apply truncate pr-md': {},\r\n },\r\n\r\n '&-option': {\r\n '@apply text-body rounded-none cursor-default hover:text-white focus-visible:text-white hover:bg-primary focus-visible:bg-primary flex items-center':\r\n {},\r\n\r\n '&.multiple.selected': {\r\n '@apply bg-background-one': {},\r\n },\r\n '&.active': {\r\n '@apply bg-primary text-white': {},\r\n },\r\n '&.active.selected': {\r\n '@apply bg-gray text-white': {},\r\n },\r\n '&.disabled': {\r\n '@apply opacity-75 cursor-not-allowed hover:bg-white hover:text-black': {},\r\n },\r\n '&-remove-button': {\r\n '@apply w-full flex justify-between items-center': {},\r\n '&-text': {\r\n '@apply truncate grow text-left': {},\r\n },\r\n },\r\n },\r\n },\r\n\r\n ...formInputGroup(),\r\n ...formControl(),\r\n});\r\n"],"mappings":"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"}
package/dist/esm/components/zebratable.js CHANGED
@@ -54,8 +54,11 @@ module.exports = ZebraTable = () => ({
54
54
  '&-pagination': {
55
55
  '@apply grow': {}
56
56
  },
57
- '&.-pagination-pagesizes': {
58
- '@apply grow-0': {},
57
+ '&-pagination-pagesizes': {
58
+ '@apply grow-0 flex gap-xs flex-row justify-end items-center': {},
59
+ '&-label': {
60
+ '@apply font-bold': {}
61
+ },
59
62
  '&.-select': {
60
63
  '@apply w-auto': {}
61
64
  }
package/dist/esm/components/zebratable.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"zebratable.js","names":["module","exports","ZebraTable","fontSize"],"sources":["../../../src/components/zebratable.js"],"sourcesContent":["module.exports = ZebraTable = () => ({\r\n '.sk-zebratable': {\r\n '@apply w-full text-left table-auto': {},\r\n\r\n '&-thead': {\r\n '&-tr': {\r\n '@apply text-sm hidden lg:table-row': {},\r\n },\r\n\r\n '&-th': {\r\n '@apply py-sm first-of-type:pl-lg': {},\r\n\r\n \"&[data-isColumnSortable='true']\": {\r\n '@apply py-sm cursor-pointer': {},\r\n },\r\n },\r\n },\r\n\r\n '&-sortbutton': {\r\n '@apply flex items-center': {},\r\n\r\n '&-icon': {\r\n '@apply inline-flex pl-sm': {},\r\n\r\n '.MuiSvgIcon-root': {\r\n '@apply !text-lg': {},\r\n },\r\n\r\n '&-sort': {\r\n '@apply text-black transform': {},\r\n\r\n \"&[data-sortmodeascending='true']\": {\r\n '@apply -rotate-90': {},\r\n },\r\n\r\n \"&[data-sortmodeascending='false']\": {\r\n '@apply rotate-90': {},\r\n },\r\n },\r\n\r\n '&-more': {\r\n '@apply text-gray': {},\r\n },\r\n },\r\n },\r\n\r\n '.material-icons-outlined': {\r\n fontSize: '1.25em',\r\n },\r\n\r\n '&-tbody': {\r\n '@apply text-body lg:bg-white': {},\r\n\r\n '&-tr': {\r\n '@apply transition-all bg-white lg:even:bg-white lg:odd:bg-gray-100 px-md py-md md:px-lg md:py-lg my-lg first-of-type:mt-0 block shadow-md lg:shadow-none lg:table-row lg:my-0 lg:py-0 lg:px-lg':\r\n {},\r\n\r\n '&.highlighted': {\r\n '@apply lg:border-4 lg:border-hover': {},\r\n },\r\n },\r\n\r\n '&-td': {\r\n '@apply empty:hidden py-4 px-sm lg:px-0 first-of-type:pl-sm lg:first-of-type:pl-lg last-of-type:px-0 lg:last-of-type:pr-lg last-of-type:text-right block lg:table-cell even:bg-white odd:bg-gray-100 last-of-type:bg-transparent lg:even:bg-transparent lg:odd:bg-transparent':\r\n {},\r\n },\r\n },\r\n\r\n '&-paginationwrapper': {\r\n '@apply w-full text-lg flex justify-center lg:justify-start': {},\r\n },\r\n '&-pagination': {\r\n '@apply grow': {},\r\n },\r\n '&.-pagination-pagesizes': {\r\n '@apply grow-0': {},\r\n '&.-select': {\r\n '@apply w-auto': {},\r\n },\r\n },\r\n\r\n '&-bottomwrapper': {\r\n '@apply mt-lg px-lg flex items-center justify-end': {},\r\n },\r\n },\r\n});\r\n"],"mappings":"AAAAA,MAAM,CAACC,OAAO,GAAGC,UAAU,GAAGA,CAAA,MAAO;EACnC,gBAAgB,EAAE;IAChB,oCAAoC,EAAE,CAAC,CAAC;IAExC,SAAS,EAAE;MACT,MAAM,EAAE;QACN,oCAAoC,EAAE,CAAC;MACzC,CAAC;MAED,MAAM,EAAE;QACN,kCAAkC,EAAE,CAAC,CAAC;QAEtC,iCAAiC,EAAE;UACjC,6BAA6B,EAAE,CAAC;QAClC;MACF;IACF,CAAC;IAED,cAAc,EAAE;MACd,0BAA0B,EAAE,CAAC,CAAC;MAE9B,QAAQ,EAAE;QACR,0BAA0B,EAAE,CAAC,CAAC;QAE9B,kBAAkB,EAAE;UAClB,iBAAiB,EAAE,CAAC;QACtB,CAAC;QAED,QAAQ,EAAE;UACR,6BAA6B,EAAE,CAAC,CAAC;UAEjC,kCAAkC,EAAE;YAClC,mBAAmB,EAAE,CAAC;UACxB,CAAC;UAED,mCAAmC,EAAE;YACnC,kBAAkB,EAAE,CAAC;UACvB;QACF,CAAC;QAED,QAAQ,EAAE;UACR,kBAAkB,EAAE,CAAC;QACvB;MACF;IACF,CAAC;IAED,0BAA0B,EAAE;MAC1BC,QAAQ,EAAE;IACZ,CAAC;IAED,SAAS,EAAE;MACT,8BAA8B,EAAE,CAAC,CAAC;MAElC,MAAM,EAAE;QACN,gMAAgM,EAC9L,CAAC,CAAC;QAEJ,eAAe,EAAE;UACf,oCAAoC,EAAE,CAAC;QACzC;MACF,CAAC;MAED,MAAM,EAAE;QACN,8QAA8Q,EAC5Q,CAAC;MACL;IACF,CAAC;IAED,qBAAqB,EAAE;MACrB,4DAA4D,EAAE,CAAC;IACjE,CAAC;IACD,cAAc,EAAE;MACd,aAAa,EAAE,CAAC;IAClB,CAAC;IACD,yBAAyB,EAAE;MACzB,eAAe,EAAE,CAAC,CAAC;MACnB,WAAW,EAAE;QACX,eAAe,EAAE,CAAC;MACpB;IACF,CAAC;IAED,iBAAiB,EAAE;MACjB,kDAAkD,EAAE,CAAC;IACvD;EACF;AACF,CAAC,CAAC"}
1
+ {"version":3,"file":"zebratable.js","names":["module","exports","ZebraTable","fontSize"],"sources":["../../../src/components/zebratable.js"],"sourcesContent":["module.exports = ZebraTable = () => ({\r\n '.sk-zebratable': {\r\n '@apply w-full text-left table-auto': {},\r\n\r\n '&-thead': {\r\n '&-tr': {\r\n '@apply text-sm hidden lg:table-row': {},\r\n },\r\n\r\n '&-th': {\r\n '@apply py-sm first-of-type:pl-lg': {},\r\n\r\n \"&[data-isColumnSortable='true']\": {\r\n '@apply py-sm cursor-pointer': {},\r\n },\r\n },\r\n },\r\n\r\n '&-sortbutton': {\r\n '@apply flex items-center': {},\r\n\r\n '&-icon': {\r\n '@apply inline-flex pl-sm': {},\r\n\r\n '.MuiSvgIcon-root': {\r\n '@apply !text-lg': {},\r\n },\r\n\r\n '&-sort': {\r\n '@apply text-black transform': {},\r\n\r\n \"&[data-sortmodeascending='true']\": {\r\n '@apply -rotate-90': {},\r\n },\r\n\r\n \"&[data-sortmodeascending='false']\": {\r\n '@apply rotate-90': {},\r\n },\r\n },\r\n\r\n '&-more': {\r\n '@apply text-gray': {},\r\n },\r\n },\r\n },\r\n\r\n '.material-icons-outlined': {\r\n fontSize: '1.25em',\r\n },\r\n\r\n '&-tbody': {\r\n '@apply text-body lg:bg-white': {},\r\n\r\n '&-tr': {\r\n '@apply transition-all bg-white lg:even:bg-white lg:odd:bg-gray-100 px-md py-md md:px-lg md:py-lg my-lg first-of-type:mt-0 block shadow-md lg:shadow-none lg:table-row lg:my-0 lg:py-0 lg:px-lg':\r\n {},\r\n\r\n '&.highlighted': {\r\n '@apply lg:border-4 lg:border-hover': {},\r\n },\r\n },\r\n\r\n '&-td': {\r\n '@apply empty:hidden py-4 px-sm lg:px-0 first-of-type:pl-sm lg:first-of-type:pl-lg last-of-type:px-0 lg:last-of-type:pr-lg last-of-type:text-right block lg:table-cell even:bg-white odd:bg-gray-100 last-of-type:bg-transparent lg:even:bg-transparent lg:odd:bg-transparent':\r\n {},\r\n },\r\n },\r\n\r\n '&-paginationwrapper': {\r\n '@apply w-full text-lg flex justify-center lg:justify-start': {},\r\n },\r\n '&-pagination': {\r\n '@apply grow': {},\r\n },\r\n '&-pagination-pagesizes': {\r\n '@apply grow-0 flex gap-xs flex-row justify-end items-center': {},\r\n '&-label': {\r\n '@apply font-bold': {},\r\n },\r\n '&.-select': {\r\n '@apply w-auto': {},\r\n },\r\n },\r\n\r\n '&-bottomwrapper': {\r\n '@apply mt-lg px-lg flex items-center justify-end': {},\r\n },\r\n },\r\n});\r\n"],"mappings":"AAAAA,MAAM,CAACC,OAAO,GAAGC,UAAU,GAAGA,CAAA,MAAO;EACnC,gBAAgB,EAAE;IAChB,oCAAoC,EAAE,CAAC,CAAC;IAExC,SAAS,EAAE;MACT,MAAM,EAAE;QACN,oCAAoC,EAAE,CAAC;MACzC,CAAC;MAED,MAAM,EAAE;QACN,kCAAkC,EAAE,CAAC,CAAC;QAEtC,iCAAiC,EAAE;UACjC,6BAA6B,EAAE,CAAC;QAClC;MACF;IACF,CAAC;IAED,cAAc,EAAE;MACd,0BAA0B,EAAE,CAAC,CAAC;MAE9B,QAAQ,EAAE;QACR,0BAA0B,EAAE,CAAC,CAAC;QAE9B,kBAAkB,EAAE;UAClB,iBAAiB,EAAE,CAAC;QACtB,CAAC;QAED,QAAQ,EAAE;UACR,6BAA6B,EAAE,CAAC,CAAC;UAEjC,kCAAkC,EAAE;YAClC,mBAAmB,EAAE,CAAC;UACxB,CAAC;UAED,mCAAmC,EAAE;YACnC,kBAAkB,EAAE,CAAC;UACvB;QACF,CAAC;QAED,QAAQ,EAAE;UACR,kBAAkB,EAAE,CAAC;QACvB;MACF;IACF,CAAC;IAED,0BAA0B,EAAE;MAC1BC,QAAQ,EAAE;IACZ,CAAC;IAED,SAAS,EAAE;MACT,8BAA8B,EAAE,CAAC,CAAC;MAElC,MAAM,EAAE;QACN,gMAAgM,EAC9L,CAAC,CAAC;QAEJ,eAAe,EAAE;UACf,oCAAoC,EAAE,CAAC;QACzC;MACF,CAAC;MAED,MAAM,EAAE;QACN,8QAA8Q,EAC5Q,CAAC;MACL;IACF,CAAC;IAED,qBAAqB,EAAE;MACrB,4DAA4D,EAAE,CAAC;IACjE,CAAC;IACD,cAAc,EAAE;MACd,aAAa,EAAE,CAAC;IAClB,CAAC;IACD,wBAAwB,EAAE;MACxB,6DAA6D,EAAE,CAAC,CAAC;MACjE,SAAS,EAAE;QACT,kBAAkB,EAAE,CAAC;MACvB,CAAC;MACD,WAAW,EAAE;QACX,eAAe,EAAE,CAAC;MACpB;IACF,CAAC;IAED,iBAAiB,EAAE;MACjB,kDAAkD,EAAE,CAAC;IACvD;EACF;AACF,CAAC,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sk-web-gui/core",
3
- "version": "0.1.84",
3
+ "version": "0.1.86",
4
4
  "license": "MIT",
5
5
  "main": "src/index.js",
6
6
  "module": "dist/esm/index.js",
@@ -40,5 +40,5 @@
40
40
  "@sk-web-gui/theme": "0.1.13",
41
41
  "mini-svg-data-uri": "^1.4.4"
42
42
  },
43
- "gitHead": "c63b4e0ab442353c98b9dbff8658cc6729e41d12"
43
+ "gitHead": "cec368ff60c94b6dd200112b070d60f489187fb2"
44
44
  }
package/src/components/accordion.js CHANGED
@@ -1,5 +1,8 @@
1
1
  module.exports = Accordion = (colors) => ({
2
- '.accordion': {
2
+ '.sk-disclosure': {
3
+ '&:has(&-header:focus-visible)': {
4
+ '@apply outline': {},
5
+ },
3
6
  '&-header': {
4
7
  '@apply flex flex-col text-left': {},
5
8
 
@@ -7,8 +10,15 @@ module.exports = Accordion = (colors) => ({
7
10
  '@apply bg-hover': {},
8
11
  },
9
12
 
13
+ '&:focus-visible': {
14
+ '@apply outline-0': {},
15
+ },
16
+
10
17
  '&-icon': {
11
18
  '@apply ml-auto !text-2xl': {},
19
+ svg: {
20
+ '@apply !text-2xl': {},
21
+ },
12
22
  },
13
23
  },
14
24
 
@@ -19,16 +29,11 @@ module.exports = Accordion = (colors) => ({
19
29
  '&-toggle': {
20
30
  '@apply flex items-center inline-block text-lg leading-lg text-left text-lg mx-md sm:mx-lg my-md': {},
21
31
  fontWeight: 'bold',
22
- //"@apply focus-visible:shadow shadow-lg": {},
23
- '&:focus-visible': {
24
- boxShadow: '0 0 0 0.4rem #fff!important',
25
- outline: '0',
26
- //"@apply border-4": {},
27
- },
28
- '.accordion-title': {
32
+
33
+ '.sk-disclosure-title': {
29
34
  '@apply mr-md text-base leading-base md:text-lg md:leading-lg': {},
30
35
  },
31
- '.accordion-subtitle': {
36
+ '.sk-disclosure-subtitle': {
32
37
  '@apply m-0 mr-md text-sm font-normal': {},
33
38
  },
34
39
  },
@@ -50,7 +55,7 @@ module.exports = Accordion = (colors) => ({
50
55
 
51
56
  '&-solid': {
52
57
  '@apply border border-primary': {},
53
- '.accordion-header': {
58
+ '.sk-disclosure-header': {
54
59
  '@apply bg-primary text-white': {},
55
60
 
56
61
  '[aria-expanded="true"] &': {
@@ -59,9 +64,10 @@ module.exports = Accordion = (colors) => ({
59
64
  },
60
65
  },
61
66
 
62
- '&-alert': {
67
+ '&-solid[data-alert="true"], &-outline[data-alert="true"]': {
63
68
  '@apply border border-warning': {},
64
- '.accordion-header': {
69
+
70
+ '.sk-disclosure-header:not([data-disabled="true"])': {
65
71
  '@apply bg-warning-light text-warning': {},
66
72
 
67
73
  '[aria-expanded="true"] &': {
@@ -69,9 +75,9 @@ module.exports = Accordion = (colors) => ({
69
75
  },
70
76
  },
71
77
  },
72
- '&-error': {
78
+ '&-solid[data-error="true"], &-outline[data-error="true"]': {
73
79
  '@apply border border-error': {},
74
- '.accordion-header': {
80
+ '.sk-disclosure-header:not([data-disabled="true"])': {
75
81
  '@apply bg-error-light text-error': {},
76
82
 
77
83
  '[aria-expanded="true"] &': {
@@ -82,59 +88,124 @@ module.exports = Accordion = (colors) => ({
82
88
 
83
89
  '&-is-open': {
84
90
  '@apply border border-gray-stroke': {},
85
- '& .accordion-header': {
91
+ '& .sk-disclosure-header': {
86
92
  '@apply bg-hover text-white': {},
87
93
  },
88
- },
89
94
 
90
- '&-is-open-alert': {
91
- '@apply border border-warning': {},
92
- '& .accordion-header': {
93
- '@apply border-b border-warning': {},
95
+ '&[data-alert="true"]': {
96
+ '@apply border border-warning': {},
97
+ '& .sk-disclosure-header': {
98
+ '@apply border-b border-warning': {},
99
+ },
94
100
  },
95
- },
96
101
 
97
- '&-is-open-error': {
98
- '@apply border border-error': {},
99
- '& .accordion-header': {
100
- '@apply border-b border-error': {},
102
+ '&[data-error="true"]': {
103
+ '@apply border border-error': {},
104
+ '& .sk-disclosure-header': {
105
+ '@apply border-b border-error': {},
106
+ },
101
107
  },
102
108
  },
103
-
104
- '&-is-open &-body, &-is-open-alert &-body, &-is-open-error &-body': {
109
+ '&-is-open &-body': {
105
110
  '@apply overflow-visible animate-reset-overflow': {},
106
111
  },
107
112
 
108
113
  '&-outline': {
109
114
  '@apply border border-gray-stroke': {},
110
- '.accordion-body': {
115
+ '&:not([data-error="true"]):not([data-alert="true"]) .sk-disclosure-body': {
111
116
  '@apply mt-0': {},
112
117
  },
113
- '.accordion-toggle': {
114
- '&:focus-visible': {
115
- boxShadow: '0 0 0 0.4rem #4b4b4b!important',
116
- outline: '0',
118
+ '.sk-disclosure-toggle': {},
119
+ '.sk-disclosure-header': {
120
+ '@apply bg-transparent text-body': {},
121
+
122
+ '[aria-expanded="true"] &': {
123
+ '@apply bg-hover': {},
117
124
  },
118
125
  },
119
- '.accordion-header': {
126
+ },
127
+
128
+ '&-plain': {
129
+ '@apply border-0': {},
130
+ '&:has(.sk-disclosure-header:focus-visible)': {
131
+ '@apply outline-offset-4': {},
132
+ },
133
+ '.sk-disclosure-header': {
120
134
  '@apply bg-transparent text-body': {},
121
135
 
122
136
  '[aria-expanded="true"] &': {
123
137
  '@apply bg-hover': {},
124
138
  },
139
+ '&[data-disabled="true"]': {
140
+ '@apply bg-transparent text-gray-stroke': {},
141
+ },
142
+ '.sk-disclosure-toggle': {
143
+ '@apply mx-0': {},
144
+ },
145
+ },
146
+ '.sk-disclosure-body': {
147
+ '@apply m-0': {},
148
+ },
149
+ '&[data-alert="true"]': {
150
+ '@apply border-0': {},
151
+ '.sk-disclosure-header': {
152
+ '@apply border-0 text-warning': {},
153
+ },
154
+ },
155
+ '&[data-error="true"]': {
156
+ '@apply border-0': {},
157
+ '.sk-disclosure-header': {
158
+ '@apply border-0 text-error': {},
159
+ },
125
160
  },
126
161
  },
127
162
 
128
- '&-disabled, &-disabled button': {
163
+ '&-disabled, &-disabled [role="button"]': {
129
164
  '@apply disabled:cursor-not-allowed cursor-not-allowed': {},
130
165
  },
131
166
 
132
- '&-disabled &-header': {
133
- '@apply bg-gray-lighter text-gray': {},
167
+ '&-header[data-disabled="true"]': {
168
+ '@apply bg-gray-lighter text-gray-stroke': {},
134
169
  },
135
170
 
136
171
  '&-disabled, &&-disabled': {
137
172
  '@apply border-gray': {},
138
173
  },
139
174
  },
175
+ '.sk-accordion': {
176
+ '&-item': {
177
+ '.sk-disclosure': {
178
+ transitionProperty: 'margin',
179
+ transitionDuration: '180ms',
180
+ '&-disabled': {
181
+ '@apply border-x-transparent border-y-transparent': {},
182
+ },
183
+ '&-plain, &-plain[data-disabled="true"]': {
184
+ '@apply border border-transparent border-b-gray-stroke': {},
185
+ },
186
+
187
+ '&-solid[data-open="false"]': {
188
+ '@apply border-white': {},
189
+ '&[data-disabled="true"]': {
190
+ '@apply border-x-transparent border-y-transparent': {},
191
+ },
192
+ },
193
+ '&[data-open="true"]:not(&-plain)': {
194
+ '@apply mt-md mb-md': {},
195
+ },
196
+ },
197
+ '&:not(:first-child)': {
198
+ '@apply mt-[-1px]': {},
199
+ },
200
+ '&:first-child .sk-disclosure[data-open="true"]:not(.sk-disclosure-plain)': {
201
+ '@apply mt-0 mb-md': {},
202
+ },
203
+ '&:last-child .sk-disclosure[data-open="true"]:not(.sk-disclosure-plain)': {
204
+ '@apply mt-md mb-0': {},
205
+ },
206
+ '&:last-child .sk-disclosure-plain': {
207
+ '@apply border-b-transparent': {},
208
+ },
209
+ },
210
+ },
140
211
  });
package/src/components/forms.js CHANGED
@@ -309,6 +309,16 @@ module.exports = Forms = (colors) => ({
309
309
  },
310
310
  },
311
311
 
312
+ '.form-select-list-transition': {
313
+ '@apply absolute z-50 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm': {},
314
+ '&.showabove': {
315
+ '@apply mb-1 bottom-full': {}
316
+ },
317
+ '&:not(.showabove)': {
318
+ '@apply mt-1 top-full': {}
319
+ }
320
+ },
321
+
312
322
  '.form-select': {
313
323
  '@apply justify-between items-center grow text-body bg-white caret-transparent select-none cursor-pointer border-gray-stroke':
314
324
  {},
@@ -320,7 +330,11 @@ module.exports = Forms = (colors) => ({
320
330
  '@apply grow-0': {},
321
331
  },
322
332
  '&-list': {
323
- '@apply z-10 absolute overflow-y-auto w-full bg-white mt-0 border border-gray-stroke border-t-0': {},
333
+ '@apply z-10 absolute overflow-y-auto w-full bg-white mt-0 border border-gray-stroke border-t-0 border-b': {
334
+ },
335
+ '&.showabove': {
336
+ '@apply border-t border-b-0': {}
337
+ }
324
338
  },
325
339
  '&-has-multiple-choices': {
326
340
  '@apply flex w-full h-full justify-between items-center pr-md': {},
package/src/components/zebratable.js CHANGED
@@ -72,8 +72,11 @@ module.exports = ZebraTable = () => ({
72
72
  '&-pagination': {
73
73
  '@apply grow': {},
74
74
  },
75
- '&.-pagination-pagesizes': {
76
- '@apply grow-0': {},
75
+ '&-pagination-pagesizes': {
76
+ '@apply grow-0 flex gap-xs flex-row justify-end items-center': {},
77
+ '&-label': {
78
+ '@apply font-bold': {},
79
+ },
77
80
  '&.-select': {
78
81
  '@apply w-auto': {},
79
82
  },