@sk-web-gui/core 4.0.0 → 4.1.1

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 +1 -1
  2. package/dist/cjs/components/accordion.js.map +1 -1
  3. package/dist/cjs/components/input.js +50 -46
  4. package/dist/cjs/components/input.js.map +1 -1
  5. package/dist/cjs/components/progress-stepper.js +64 -42
  6. package/dist/cjs/components/progress-stepper.js.map +1 -1
  7. package/dist/esm/components/accordion.js +1 -1
  8. package/dist/esm/components/accordion.js.map +1 -1
  9. package/dist/esm/components/input.js +50 -46
  10. package/dist/esm/components/input.js.map +1 -1
  11. package/dist/esm/components/progress-stepper.js +64 -42
  12. package/dist/esm/components/progress-stepper.js.map +1 -1
  13. package/dist/types/components/accordion.d.ts +1 -1
  14. package/dist/types/components/input.d.ts +65 -61
  15. package/dist/types/components/progress-stepper.d.ts +62 -40
  16. package/package.json +2 -2
package/dist/cjs/components/accordion.js CHANGED
@@ -147,7 +147,7 @@ const Accordion = ()=>({
147
147
  '@apply my-0 invisible max-h-0 opacity-0': {}
148
148
  },
149
149
  '&[aria-hidden="false"], &[data-hidden="false"]': {
150
- '@apply block max-h-screen opacity-100 visible': {}
150
+ '@apply block opacity-100 visible': {}
151
151
  },
152
152
  '&[data-variant="alt"]': {
153
153
  '@apply mt-24': {},
package/dist/cjs/components/accordion.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/accordion.ts"],"sourcesContent":["export const Accordion = () => ({\r\n '.sk-disclosure': {\r\n '&-icon': {\r\n '@apply flex self-center': {},\r\n },\r\n '&-header': {\r\n '@apply mt-6 mb-8': {},\r\n '@apply flex flex-col text-left': {},\r\n '@apply cursor-pointer': {},\r\n '*': {\r\n '@apply cursor-pointer': {},\r\n },\r\n '&:focus-visible': {\r\n '@apply outline-0': {},\r\n },\r\n\r\n '&-icon': {\r\n '@apply ml-auto': {},\r\n '@apply text-dark-secondary': {},\r\n svg: {\r\n '@apply w-20 h-20': {},\r\n },\r\n },\r\n '&[data-disabled=\"true\"]': {\r\n '@apply text-dark-disabled': {},\r\n '.sk-disclosure-title': {\r\n '@apply text-dark-disabled': {},\r\n },\r\n '@apply cursor-default': {},\r\n '*': {\r\n '@apply cursor-default': {},\r\n },\r\n },\r\n },\r\n '&-label': {\r\n '@apply shrink-0': {},\r\n },\r\n '&-toggle': {\r\n '@apply flex items-center justify-between': {},\r\n '@apply gap-16': {},\r\n '.sk-icon': {\r\n '@apply w-32 h-32': {},\r\n },\r\n },\r\n '&-title': {\r\n '@apply text-dark-primary': {},\r\n '&-wrapper': {\r\n '@apply w-full': {},\r\n '@apply flex flex-row': {},\r\n '@apply items-center': {},\r\n },\r\n },\r\n\r\n '&-sm': {\r\n '.sk-disclosure-title': {\r\n '@apply text-h4-sm font-bold': {},\r\n '&-wrapper': {\r\n '@apply gap-12': {},\r\n },\r\n },\r\n '.sk-disclosure-toggle': {\r\n '@apply gap-12': {},\r\n '.sk-icon': {\r\n '@apply w-20 min-h-20': {},\r\n },\r\n },\r\n '.sk-disclosure-support': {\r\n '@apply text-small': {},\r\n },\r\n '&[data-variant=\"default\"]': {\r\n '.sk-disclosure-toggle': {\r\n '@apply py-4': {},\r\n '@apply min-h-40': {},\r\n },\r\n '.sk-disclosure-header-icon': {\r\n '@apply w-32 h-32': {},\r\n },\r\n },\r\n '&[data-variant=\"alt\"]': {},\r\n },\r\n '&-md': {\r\n '.sk-disclosure-title': {\r\n '@apply text-h4-md font-bold': {},\r\n '&-wrapper': {\r\n '@apply gap-12': {},\r\n },\r\n },\r\n '.sk-disclosure-toggle': {\r\n '@apply gap-12': {},\r\n '.sk-icon': {\r\n '@apply w-24 min-h-24': {},\r\n },\r\n },\r\n '.sk-disclosure-support': {\r\n '@apply text-body': {},\r\n },\r\n '&[data-variant=\"default\"]': {\r\n '.sk-disclosure-toggle': {\r\n '@apply py-8': {},\r\n '@apply min-h-56': {},\r\n },\r\n '.sk-disclosure-header-icon': {\r\n '@apply w-40 h-40': {},\r\n },\r\n },\r\n },\r\n '&-lg': {\r\n '&[data-variant=\"alt\"]': {\r\n '.sk-disclosure-support': {\r\n '@apply text-large': {},\r\n },\r\n '.sk-disclosure-title': {\r\n '@apply text-h3-md font-bold': {},\r\n '&-wrapper': {\r\n '@apply gap-16': {},\r\n },\r\n },\r\n },\r\n },\r\n\r\n '&-body': {\r\n '&[data-size=\"sm\"]': {\r\n '@apply pr-12': {},\r\n },\r\n '&[data-size=\"md\"]': {\r\n '@apply pr-12': {},\r\n },\r\n '&[data-size=\"lg\"]': {\r\n '@apply pr-16': {},\r\n },\r\n '@apply text-base': {},\r\n '@apply flex flex-col': {},\r\n '@apply mb-32': {},\r\n '@apply mr-32': {},\r\n '@apply gap-8': {},\r\n '@apply py-0': {},\r\n transitionProperty: 'visibility, height, opacity, padding, margin',\r\n\r\n transitionDuration: '180ms',\r\n\r\n '&[aria-hidden=\"true\"], &[data-hidden=\"true\"]': {\r\n '@apply my-0 invisible max-h-0 opacity-0': {},\r\n },\r\n\r\n '&[aria-hidden=\"false\"], &[data-hidden=\"false\"]': {\r\n '@apply block max-h-screen opacity-100 visible': {},\r\n },\r\n\r\n '&[data-variant=\"alt\"]': {\r\n '@apply mt-24': {},\r\n '&[data-size=\"sm\"]': {\r\n '@apply pr-12': {},\r\n },\r\n '&[data-size=\"md\"]': {\r\n '@apply pr-12': {},\r\n },\r\n '&[data-size=\"lg\"]': {\r\n '@apply pr-16': {},\r\n },\r\n '&[data-has-icon=\"true\"]': {\r\n '&[data-size=\"sm\"]': {\r\n '@apply ml-32': {},\r\n },\r\n '&[data-size=\"md\"]': {\r\n '@apply ml-36': {},\r\n },\r\n '&[data-size=\"lg\"]': {\r\n '@apply ml-48': {},\r\n },\r\n },\r\n },\r\n },\r\n },\r\n '.sk-accordion': {\r\n '&-item': {\r\n '.sk-disclosure': {\r\n transitionProperty: 'margin',\r\n transitionDuration: '180ms',\r\n '@apply border-b-1 border-divider': {},\r\n },\r\n\r\n '&:last-child .sk-disclosure': {\r\n '@apply border-b-transparent': {},\r\n },\r\n },\r\n },\r\n\r\n '&[data-inverted=\"true\"]': {\r\n '&.sk-disclosure': {\r\n '&-icon': {\r\n '@apply text-inverted-dark-secondary': {},\r\n },\r\n\r\n '&[data-disabled=\"true\"]': {\r\n '@apply text-inverted-dark-disabled': {},\r\n '.sk-disclosure-title': {\r\n '@apply text-inverted-dark-disabled': {},\r\n },\r\n },\r\n\r\n '&-title': {\r\n '@apply text-inverted-dark-primary': {},\r\n },\r\n },\r\n '&.sk-accordion': {\r\n '&-item': {\r\n '@apply border-inverted-divider': {},\r\n },\r\n },\r\n },\r\n});\r\n"],"names":["Accordion","svg","transitionProperty","transitionDuration"],"mappings":"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"}
1
+ {"version":3,"sources":["../../../src/components/accordion.ts"],"sourcesContent":["export const Accordion = () => ({\r\n '.sk-disclosure': {\r\n '&-icon': {\r\n '@apply flex self-center': {},\r\n },\r\n '&-header': {\r\n '@apply mt-6 mb-8': {},\r\n '@apply flex flex-col text-left': {},\r\n '@apply cursor-pointer': {},\r\n '*': {\r\n '@apply cursor-pointer': {},\r\n },\r\n '&:focus-visible': {\r\n '@apply outline-0': {},\r\n },\r\n\r\n '&-icon': {\r\n '@apply ml-auto': {},\r\n '@apply text-dark-secondary': {},\r\n svg: {\r\n '@apply w-20 h-20': {},\r\n },\r\n },\r\n '&[data-disabled=\"true\"]': {\r\n '@apply text-dark-disabled': {},\r\n '.sk-disclosure-title': {\r\n '@apply text-dark-disabled': {},\r\n },\r\n '@apply cursor-default': {},\r\n '*': {\r\n '@apply cursor-default': {},\r\n },\r\n },\r\n },\r\n '&-label': {\r\n '@apply shrink-0': {},\r\n },\r\n '&-toggle': {\r\n '@apply flex items-center justify-between': {},\r\n '@apply gap-16': {},\r\n '.sk-icon': {\r\n '@apply w-32 h-32': {},\r\n },\r\n },\r\n '&-title': {\r\n '@apply text-dark-primary': {},\r\n '&-wrapper': {\r\n '@apply w-full': {},\r\n '@apply flex flex-row': {},\r\n '@apply items-center': {},\r\n },\r\n },\r\n\r\n '&-sm': {\r\n '.sk-disclosure-title': {\r\n '@apply text-h4-sm font-bold': {},\r\n '&-wrapper': {\r\n '@apply gap-12': {},\r\n },\r\n },\r\n '.sk-disclosure-toggle': {\r\n '@apply gap-12': {},\r\n '.sk-icon': {\r\n '@apply w-20 min-h-20': {},\r\n },\r\n },\r\n '.sk-disclosure-support': {\r\n '@apply text-small': {},\r\n },\r\n '&[data-variant=\"default\"]': {\r\n '.sk-disclosure-toggle': {\r\n '@apply py-4': {},\r\n '@apply min-h-40': {},\r\n },\r\n '.sk-disclosure-header-icon': {\r\n '@apply w-32 h-32': {},\r\n },\r\n },\r\n '&[data-variant=\"alt\"]': {},\r\n },\r\n '&-md': {\r\n '.sk-disclosure-title': {\r\n '@apply text-h4-md font-bold': {},\r\n '&-wrapper': {\r\n '@apply gap-12': {},\r\n },\r\n },\r\n '.sk-disclosure-toggle': {\r\n '@apply gap-12': {},\r\n '.sk-icon': {\r\n '@apply w-24 min-h-24': {},\r\n },\r\n },\r\n '.sk-disclosure-support': {\r\n '@apply text-body': {},\r\n },\r\n '&[data-variant=\"default\"]': {\r\n '.sk-disclosure-toggle': {\r\n '@apply py-8': {},\r\n '@apply min-h-56': {},\r\n },\r\n '.sk-disclosure-header-icon': {\r\n '@apply w-40 h-40': {},\r\n },\r\n },\r\n },\r\n '&-lg': {\r\n '&[data-variant=\"alt\"]': {\r\n '.sk-disclosure-support': {\r\n '@apply text-large': {},\r\n },\r\n '.sk-disclosure-title': {\r\n '@apply text-h3-md font-bold': {},\r\n '&-wrapper': {\r\n '@apply gap-16': {},\r\n },\r\n },\r\n },\r\n },\r\n\r\n '&-body': {\r\n '&[data-size=\"sm\"]': {\r\n '@apply pr-12': {},\r\n },\r\n '&[data-size=\"md\"]': {\r\n '@apply pr-12': {},\r\n },\r\n '&[data-size=\"lg\"]': {\r\n '@apply pr-16': {},\r\n },\r\n '@apply text-base': {},\r\n '@apply flex flex-col': {},\r\n '@apply mb-32': {},\r\n '@apply mr-32': {},\r\n '@apply gap-8': {},\r\n '@apply py-0': {},\r\n transitionProperty: 'visibility, height, opacity, padding, margin',\r\n\r\n transitionDuration: '180ms',\r\n\r\n '&[aria-hidden=\"true\"], &[data-hidden=\"true\"]': {\r\n '@apply my-0 invisible max-h-0 opacity-0': {},\r\n },\r\n\r\n '&[aria-hidden=\"false\"], &[data-hidden=\"false\"]': {\r\n '@apply block opacity-100 visible': {},\r\n },\r\n\r\n '&[data-variant=\"alt\"]': {\r\n '@apply mt-24': {},\r\n '&[data-size=\"sm\"]': {\r\n '@apply pr-12': {},\r\n },\r\n '&[data-size=\"md\"]': {\r\n '@apply pr-12': {},\r\n },\r\n '&[data-size=\"lg\"]': {\r\n '@apply pr-16': {},\r\n },\r\n '&[data-has-icon=\"true\"]': {\r\n '&[data-size=\"sm\"]': {\r\n '@apply ml-32': {},\r\n },\r\n '&[data-size=\"md\"]': {\r\n '@apply ml-36': {},\r\n },\r\n '&[data-size=\"lg\"]': {\r\n '@apply ml-48': {},\r\n },\r\n },\r\n },\r\n },\r\n },\r\n '.sk-accordion': {\r\n '&-item': {\r\n '.sk-disclosure': {\r\n transitionProperty: 'margin',\r\n transitionDuration: '180ms',\r\n '@apply border-b-1 border-divider': {},\r\n },\r\n\r\n '&:last-child .sk-disclosure': {\r\n '@apply border-b-transparent': {},\r\n },\r\n },\r\n },\r\n\r\n '&[data-inverted=\"true\"]': {\r\n '&.sk-disclosure': {\r\n '&-icon': {\r\n '@apply text-inverted-dark-secondary': {},\r\n },\r\n\r\n '&[data-disabled=\"true\"]': {\r\n '@apply text-inverted-dark-disabled': {},\r\n '.sk-disclosure-title': {\r\n '@apply text-inverted-dark-disabled': {},\r\n },\r\n },\r\n\r\n '&-title': {\r\n '@apply text-inverted-dark-primary': {},\r\n },\r\n },\r\n '&.sk-accordion': {\r\n '&-item': {\r\n '@apply border-inverted-divider': {},\r\n },\r\n },\r\n },\r\n});\r\n"],"names":["Accordion","svg","transitionProperty","transitionDuration"],"mappings":"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"}
package/dist/cjs/components/input.js CHANGED
@@ -177,53 +177,57 @@ function addon() {
177
177
  function inputGroup() {
178
178
  return {
179
179
  '&-group': {
180
- '&-wrapper': {
181
- '@apply flex gap-0 max-w-full': {}
182
- },
183
- '@apply flex relative grow': {},
184
- '@apply items-center': {},
185
- '@apply focus-within:ring': {},
186
- '@apply focus-within:ring-ring': {},
187
- '@apply text-dark-secondary': {},
188
- //Focus
189
- '@apply focus-within:border-input-field-surface': {},
190
- '&:not(:invalid):not([aria-invalid="true"])': {
191
- '@apply focus-within:border-input-field-surface': {}
192
- },
193
- '&&-lg': {
194
- '@apply text-input-large': {},
195
- '@apply rounded-button-lg': {},
196
- '@apply h-48': {}
197
- },
198
- '&&-md': {
199
- '@apply text-input-medium': {},
200
- '@apply rounded-button-md': {},
201
- '@apply h-40': {}
202
- },
203
- '&&-sm': {
204
- '@apply text-input-small': {},
205
- '@apply rounded-button-sm': {},
206
- '@apply h-32': {}
207
- },
208
- '&[data-hasleftaddon="true"]': {
209
- '@apply pl-0': {},
210
- '@apply rounded-l-0': {},
211
- '@apply border-l-0': {}
212
- },
213
- '&[data-hasrightaddon="true"]': {
214
- '@apply pr-0': {},
215
- '@apply rounded-r-0': {},
216
- '@apply border-r-0': {}
180
+ '&-outer': {
181
+ '@apply flex gap-0 max-w-full': {},
182
+ '&[data-hasleftaddon="true"]': {
183
+ '.sk-form-input, .sk-form-input-group-inner': {
184
+ '@apply rounded-l-0': {},
185
+ '@apply border-l-0': {}
186
+ }
187
+ },
188
+ '&[data-hasrightaddon="true"]': {
189
+ '.sk-form-input, .sk-form-input-group-inner': {
190
+ '@apply rounded-r-0': {},
191
+ '@apply border-r-0': {}
192
+ }
193
+ }
217
194
  },
218
- ...inputStandards(),
219
- '.sk-form-input': {
220
- '@apply rounded-0': {},
221
- '@apply border-0': {},
222
- '@apply focus:ring-0': {},
223
- '@apply focus:ring-offset-0': {},
224
- '@apply bg-transparent': {},
225
- '@apply dark:bg-transparent': {},
226
- '@apply grow': {}
195
+ '&-inner': {
196
+ '@apply flex relative grow': {},
197
+ '@apply items-center': {},
198
+ '@apply focus-within:ring': {},
199
+ '@apply focus-within:ring-ring': {},
200
+ '@apply text-dark-secondary': {},
201
+ //Focus
202
+ '@apply focus-within:border-input-field-surface': {},
203
+ '&:not(:invalid):not([aria-invalid="true"])': {
204
+ '@apply focus-within:border-input-field-surface': {}
205
+ },
206
+ '&&-lg': {
207
+ '@apply text-input-large': {},
208
+ '@apply rounded-button-lg': {},
209
+ '@apply h-48': {}
210
+ },
211
+ '&&-md': {
212
+ '@apply text-input-medium': {},
213
+ '@apply rounded-button-md': {},
214
+ '@apply h-40': {}
215
+ },
216
+ '&&-sm': {
217
+ '@apply text-input-small': {},
218
+ '@apply rounded-button-sm': {},
219
+ '@apply h-32': {}
220
+ },
221
+ ...inputStandards(),
222
+ '.sk-form-input': {
223
+ '@apply rounded-0': {},
224
+ '@apply border-0': {},
225
+ '@apply focus:ring-0': {},
226
+ '@apply focus:ring-offset-0': {},
227
+ '@apply bg-transparent': {},
228
+ '@apply dark:bg-transparent': {},
229
+ '@apply grow': {}
230
+ }
227
231
  }
228
232
  }
229
233
  };
package/dist/cjs/components/input.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/input.ts"],"sourcesContent":["function calendar() {\r\n return `<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='18' height='18' x='3' y='4' rx='2' ry='2' /><line x1='16' x2='16' y1='2' y2='6' /><line x1='8' x2='8' y1='2' y2='6' /><line x1='3' x2='21' y1='10' y2='10' /></svg>`;\r\n}\r\nfunction clock() {\r\n return `<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10' /><polyline points='12 6 12 12 16 14' /></svg>`;\r\n}\r\n\r\nfunction inputStandards() {\r\n return {\r\n '@apply border-1': {},\r\n '@apply border-input-field-outline': {},\r\n '@apply hover:border-input-field-outline-hover': {},\r\n\r\n '@apply placeholder:text-dark-placeholder': {},\r\n\r\n '@apply bg-input-field-surface': {},\r\n\r\n //Invalid\r\n '&:invalid, &[aria-invalid=\"true\"]': {\r\n '@apply border-2 border-error-surface-primary': {},\r\n },\r\n\r\n //Disabled\r\n '&:disabled, &[aria-disabled=\"true\"]': {\r\n '@apply bg-input-field-surface-disabled': {},\r\n '@apply border-input-field-outline-disabled': {},\r\n '@apply hover:border-input-field-outline-disabled': {},\r\n '@apply text-dark-disabled': {},\r\n },\r\n\r\n //readOnly\r\n '&:read-only': {\r\n '@apply bg-input-field-surface': {},\r\n '@apply border-input-field-outline-disabled': {},\r\n '@apply text-dark-secondary': {},\r\n '@apply placeholder:text-dark-secondary': {},\r\n },\r\n };\r\n}\r\n\r\nfunction addin() {\r\n return {\r\n '&-addin': {\r\n '@apply bg-transparent': {},\r\n '@apply flex': {},\r\n '@apply justify-start items-center': {},\r\n '&-sm': {\r\n '@apply px-6 gap-6': {},\r\n '&.sk-form-input-addin-left': {\r\n '@apply -mr-12': {},\r\n '@apply pl-10': {},\r\n },\r\n '&.sk-form-input-addin-right': {\r\n '@apply -ml-12': {},\r\n '@apply pr-10': {},\r\n },\r\n svg: {\r\n '@apply w-16 h-16': {},\r\n },\r\n },\r\n '&-md': {\r\n '@apply md:px-8 md:gap-8': {},\r\n '&.sk-form-input-addin-left': {\r\n '@apply -mr-16': {},\r\n '@apply pl-12': {},\r\n },\r\n '&.sk-form-input-addin-right': {\r\n '@apply -ml-16': {},\r\n '@apply pr-12': {},\r\n },\r\n svg: {\r\n '@apply w-20 h-20': {},\r\n },\r\n },\r\n '&-lg': {\r\n '@apply md:px-8 md:gap-8': {},\r\n '&.sk-form-input-addin-left': {\r\n '@apply -mr-20': {},\r\n '@apply pl-16': {},\r\n },\r\n '&.sk-form-input-addin-right': {\r\n '@apply -ml-20': {},\r\n '@apply pr-16': {},\r\n },\r\n svg: {\r\n '@apply w-22 h-22': {},\r\n },\r\n },\r\n },\r\n };\r\n}\r\n\r\nfunction addon() {\r\n return {\r\n '&-addon': {\r\n '@apply flex flex-none relative': {},\r\n '@apply items-center': {},\r\n '@apply focus-within:ring': {},\r\n '@apply focus-within:ring-ring': {},\r\n '@apply text-dark-secondary': {},\r\n //Focus\r\n '@apply focus-within:border-input-field-surface': {},\r\n\r\n '&:not(:invalid):not([aria-invalid=\"true\"])': {\r\n '@apply focus-within:border-input-field-surface': {},\r\n },\r\n\r\n '&&-lg': {\r\n '@apply text-input-large': {},\r\n '@apply rounded-button-lg': {},\r\n '@apply h-48': {},\r\n },\r\n '&&-md': {\r\n '@apply text-input-medium': {},\r\n '@apply rounded-button-md': {},\r\n '@apply h-40': {},\r\n },\r\n '&&-sm': {\r\n '@apply text-input-small': {},\r\n '@apply rounded-button-sm': {},\r\n '@apply h-32': {},\r\n },\r\n '&&-left': {\r\n '@apply rounded-r-0': {},\r\n '@apply border-r-0': {},\r\n },\r\n '&&-right': {\r\n '@apply rounded-l-0': {},\r\n '@apply border-l-0': {},\r\n },\r\n ...inputStandards(),\r\n '.sk-form-input': {\r\n '@apply rounded-0': {},\r\n '@apply border-0': {},\r\n '@apply focus:ring-0': {},\r\n '@apply focus:ring-offset-0': {},\r\n '@apply bg-transparent': {},\r\n '@apply dark:bg-transparent': {},\r\n '@apply grow': {},\r\n },\r\n '.sk-form-select': {\r\n '@apply rounded-0': {},\r\n '@apply border-0 hover:border-0': {},\r\n '@apply focus:ring-0 focus:z-10': {},\r\n '@apply focus:ring-offset-0': {},\r\n '@apply bg-transparent hover:bg-transparent': {},\r\n '@apply dark:bg-transparent hover:dark:bg-transparent': {},\r\n '@apply grow': {},\r\n },\r\n '&&-left .sk-form-select': {\r\n '@apply border-r-1 border-r-divider': {},\r\n '@apply focus:border-r-transparent': {},\r\n },\r\n '&&-right .sk-form-select': {\r\n '@apply border-l-1 border-l-divider': {},\r\n '@apply focus:border-l-transparent': {},\r\n },\r\n '.sk-form-combobox': {\r\n '@apply rounded-0': {},\r\n '@apply border-0': {},\r\n '@apply focus-within:ring-0': {},\r\n '@apply focus-within:ring-offset-0': {},\r\n '@apply bg-transparent': {},\r\n '@apply dark:bg-transparent': {},\r\n },\r\n '&&-left .sk-form-combobox': {\r\n '@apply border-r-1 border-r-divider': {},\r\n '@apply focus:border-r-transparent': {},\r\n },\r\n '&&-right .sk-form-combobox': {\r\n '@apply border-l-1 border-l-divider': {},\r\n '@apply focus:border-l-transparent': {},\r\n },\r\n },\r\n };\r\n}\r\nfunction inputGroup() {\r\n return {\r\n '&-group': {\r\n '&-wrapper': {\r\n '@apply flex gap-0 max-w-full': {},\r\n },\r\n '@apply flex relative grow': {},\r\n '@apply items-center': {},\r\n '@apply focus-within:ring': {},\r\n '@apply focus-within:ring-ring': {},\r\n '@apply text-dark-secondary': {},\r\n //Focus\r\n '@apply focus-within:border-input-field-surface': {},\r\n\r\n '&:not(:invalid):not([aria-invalid=\"true\"])': {\r\n '@apply focus-within:border-input-field-surface': {},\r\n },\r\n\r\n '&&-lg': {\r\n '@apply text-input-large': {},\r\n '@apply rounded-button-lg': {},\r\n '@apply h-48': {},\r\n },\r\n '&&-md': {\r\n '@apply text-input-medium': {},\r\n '@apply rounded-button-md': {},\r\n '@apply h-40': {},\r\n },\r\n '&&-sm': {\r\n '@apply text-input-small': {},\r\n '@apply rounded-button-sm': {},\r\n '@apply h-32': {},\r\n },\r\n '&[data-hasleftaddon=\"true\"]': {\r\n '@apply pl-0': {},\r\n '@apply rounded-l-0': {},\r\n '@apply border-l-0': {},\r\n },\r\n '&[data-hasrightaddon=\"true\"]': {\r\n '@apply pr-0': {},\r\n '@apply rounded-r-0': {},\r\n '@apply border-r-0': {},\r\n },\r\n ...inputStandards(),\r\n '.sk-form-input': {\r\n '@apply rounded-0': {},\r\n '@apply border-0': {},\r\n '@apply focus:ring-0': {},\r\n '@apply focus:ring-offset-0': {},\r\n '@apply bg-transparent': {},\r\n '@apply dark:bg-transparent': {},\r\n '@apply grow': {},\r\n },\r\n },\r\n };\r\n}\r\n\r\nfunction timeAndDatePicker() {\r\n return {\r\n '&::-webkit-inner-spin-button, &::-webkit-calendar-picker-indicator': {\r\n '@apply block': {},\r\n '@apply p-0': {},\r\n '@apply pl-6 md:pl-8': {},\r\n '@apply m-0': {},\r\n '@apply bg-none': {},\r\n '@apply bg-dark-secondary': {},\r\n '&.sk-form-input-sm': {\r\n '@apply w-16 h-16': {},\r\n '@apply -mr-2': {},\r\n },\r\n '&.sk-form-input-md': {\r\n '@apply -mr-4': {},\r\n '@apply w-18 h-18': {},\r\n },\r\n '&.sk-form-input-lg': {\r\n '@apply -mr-6': {},\r\n '@apply w-20 h-20': {},\r\n },\r\n },\r\n\r\n '&[type=\"date\"]::-webkit-inner-spin-button, &[type=\"date\"]::-webkit-calendar-picker-indicator': {\r\n mask: [`url(\"data:image/svg+xml;utf-8,${calendar()}\") no-repeat 100% 100%`],\r\n '-webkit-mask': [`url(\"data:image/svg+xml;utf-8,${calendar()}\") no-repeat 100% 100%`],\r\n maskSize: 'contain',\r\n '-webkit-mask-size': 'contain',\r\n },\r\n '&[type=\"datetime-local\"]::-webkit-inner-spin-button, &[type=\"datetime-local\"]::-webkit-calendar-picker-indicator':\r\n {\r\n mask: [`url(\"data:image/svg+xml;utf-8,${calendar()}\") no-repeat 100% 100%`],\r\n '-webkit-mask': [`url(\"data:image/svg+xml;utf-8,${calendar()}\") no-repeat 100% 100%`],\r\n maskSize: 'contain',\r\n '-webkit-mask-size': 'contain',\r\n },\r\n '&[type=\"time\"]::-webkit-inner-spin-button, &[type=\"time\"]::-webkit-calendar-picker-indicator': {\r\n mask: [`url(\"data:image/svg+xml;utf-8,${clock()}\") no-repeat 100% 100%`],\r\n '-webkit-mask': [`url(\"data:image/svg+xml;utf-8,${clock()}\") no-repeat 100% 100%`],\r\n maskSize: 'contain',\r\n '-webkit-mask-size': 'contain',\r\n },\r\n\r\n '&:disabled, &[aria-disabled=\"true\"]': {\r\n '&::-webkit-inner-spin-button, &::-webkit-calendar-picker-indicator': {\r\n '@apply color-black-disabled': {},\r\n },\r\n },\r\n };\r\n}\r\n\r\nexport const Input = () => ({\r\n '.sk-form-input': {\r\n '@apply grow-0': {},\r\n '@apply text-dark-primary': {},\r\n\r\n '&[data-hideextra=\"true\"]': {\r\n '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {\r\n '-webkit-appearance': 'none',\r\n display: 'none',\r\n margin: '0px',\r\n },\r\n '-moz-appearance': 'textfield',\r\n },\r\n\r\n '&&-lg': {\r\n '@apply rounded-button-lg': {},\r\n '@apply px-20': {},\r\n '@apply py-11': {},\r\n '@apply gap-8': {},\r\n '@apply text-input-large': {},\r\n '@apply h-48': {},\r\n },\r\n '&&-md': {\r\n '@apply rounded-button-md': {},\r\n '@apply px-16': {},\r\n '@apply py-7': {},\r\n '@apply gap-8': {},\r\n '@apply text-input-medium': {},\r\n '@apply h-40': {},\r\n },\r\n '&&-sm': {\r\n '@apply rounded-button-sm': {},\r\n '@apply px-12': {},\r\n '@apply py-5': {},\r\n '@apply gap-6': {},\r\n '@apply text-input-small': {},\r\n '@apply h-32': {},\r\n },\r\n '&&-textarea': {\r\n '@apply h-auto': {},\r\n '&-warning': {\r\n '@apply sr-only': {},\r\n },\r\n },\r\n\r\n //Focus\r\n '@apply focus:ring': {},\r\n '@apply focus:ring-ring': {},\r\n '@apply focus:ring-offset': {},\r\n '@apply focus:border-input-field-surface': {},\r\n '@apply focus-within:ring': {},\r\n '@apply focus-within:ring-ring': {},\r\n '@apply focus-within:ring-offset': {},\r\n '@apply focus-within:border-input-field-surface': {},\r\n '&:not(:invalid):not([aria-invalid=\"true\"])': {\r\n '@apply focus:hover:border-input-field-surface': {},\r\n },\r\n ...timeAndDatePicker(),\r\n ...inputStandards(),\r\n ...inputGroup(),\r\n ...addin(),\r\n ...addon(),\r\n },\r\n});\r\n"],"names":["Input","calendar","clock","inputStandards","addin","svg","addon","inputGroup","timeAndDatePicker","mask","maskSize","display","margin"],"mappings":"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"}
1
+ {"version":3,"sources":["../../../src/components/input.ts"],"sourcesContent":["function calendar() {\r\n return `<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='18' height='18' x='3' y='4' rx='2' ry='2' /><line x1='16' x2='16' y1='2' y2='6' /><line x1='8' x2='8' y1='2' y2='6' /><line x1='3' x2='21' y1='10' y2='10' /></svg>`;\r\n}\r\nfunction clock() {\r\n return `<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10' /><polyline points='12 6 12 12 16 14' /></svg>`;\r\n}\r\n\r\nfunction inputStandards() {\r\n return {\r\n '@apply border-1': {},\r\n '@apply border-input-field-outline': {},\r\n '@apply hover:border-input-field-outline-hover': {},\r\n\r\n '@apply placeholder:text-dark-placeholder': {},\r\n\r\n '@apply bg-input-field-surface': {},\r\n\r\n //Invalid\r\n '&:invalid, &[aria-invalid=\"true\"]': {\r\n '@apply border-2 border-error-surface-primary': {},\r\n },\r\n\r\n //Disabled\r\n '&:disabled, &[aria-disabled=\"true\"]': {\r\n '@apply bg-input-field-surface-disabled': {},\r\n '@apply border-input-field-outline-disabled': {},\r\n '@apply hover:border-input-field-outline-disabled': {},\r\n '@apply text-dark-disabled': {},\r\n },\r\n\r\n //readOnly\r\n '&:read-only': {\r\n '@apply bg-input-field-surface': {},\r\n '@apply border-input-field-outline-disabled': {},\r\n '@apply text-dark-secondary': {},\r\n '@apply placeholder:text-dark-secondary': {},\r\n },\r\n };\r\n}\r\n\r\nfunction addin() {\r\n return {\r\n '&-addin': {\r\n '@apply bg-transparent': {},\r\n '@apply flex': {},\r\n '@apply justify-start items-center': {},\r\n '&-sm': {\r\n '@apply px-6 gap-6': {},\r\n '&.sk-form-input-addin-left': {\r\n '@apply -mr-12': {},\r\n '@apply pl-10': {},\r\n },\r\n '&.sk-form-input-addin-right': {\r\n '@apply -ml-12': {},\r\n '@apply pr-10': {},\r\n },\r\n svg: {\r\n '@apply w-16 h-16': {},\r\n },\r\n },\r\n '&-md': {\r\n '@apply md:px-8 md:gap-8': {},\r\n '&.sk-form-input-addin-left': {\r\n '@apply -mr-16': {},\r\n '@apply pl-12': {},\r\n },\r\n '&.sk-form-input-addin-right': {\r\n '@apply -ml-16': {},\r\n '@apply pr-12': {},\r\n },\r\n svg: {\r\n '@apply w-20 h-20': {},\r\n },\r\n },\r\n '&-lg': {\r\n '@apply md:px-8 md:gap-8': {},\r\n '&.sk-form-input-addin-left': {\r\n '@apply -mr-20': {},\r\n '@apply pl-16': {},\r\n },\r\n '&.sk-form-input-addin-right': {\r\n '@apply -ml-20': {},\r\n '@apply pr-16': {},\r\n },\r\n svg: {\r\n '@apply w-22 h-22': {},\r\n },\r\n },\r\n },\r\n };\r\n}\r\n\r\nfunction addon() {\r\n return {\r\n '&-addon': {\r\n '@apply flex flex-none relative': {},\r\n '@apply items-center': {},\r\n '@apply focus-within:ring': {},\r\n '@apply focus-within:ring-ring': {},\r\n '@apply text-dark-secondary': {},\r\n //Focus\r\n '@apply focus-within:border-input-field-surface': {},\r\n\r\n '&:not(:invalid):not([aria-invalid=\"true\"])': {\r\n '@apply focus-within:border-input-field-surface': {},\r\n },\r\n\r\n '&&-lg': {\r\n '@apply text-input-large': {},\r\n '@apply rounded-button-lg': {},\r\n '@apply h-48': {},\r\n },\r\n '&&-md': {\r\n '@apply text-input-medium': {},\r\n '@apply rounded-button-md': {},\r\n '@apply h-40': {},\r\n },\r\n '&&-sm': {\r\n '@apply text-input-small': {},\r\n '@apply rounded-button-sm': {},\r\n '@apply h-32': {},\r\n },\r\n '&&-left': {\r\n '@apply rounded-r-0': {},\r\n '@apply border-r-0': {},\r\n },\r\n '&&-right': {\r\n '@apply rounded-l-0': {},\r\n '@apply border-l-0': {},\r\n },\r\n ...inputStandards(),\r\n '.sk-form-input': {\r\n '@apply rounded-0': {},\r\n '@apply border-0': {},\r\n '@apply focus:ring-0': {},\r\n '@apply focus:ring-offset-0': {},\r\n '@apply bg-transparent': {},\r\n '@apply dark:bg-transparent': {},\r\n '@apply grow': {},\r\n },\r\n '.sk-form-select': {\r\n '@apply rounded-0': {},\r\n '@apply border-0 hover:border-0': {},\r\n '@apply focus:ring-0 focus:z-10': {},\r\n '@apply focus:ring-offset-0': {},\r\n '@apply bg-transparent hover:bg-transparent': {},\r\n '@apply dark:bg-transparent hover:dark:bg-transparent': {},\r\n '@apply grow': {},\r\n },\r\n '&&-left .sk-form-select': {\r\n '@apply border-r-1 border-r-divider': {},\r\n '@apply focus:border-r-transparent': {},\r\n },\r\n '&&-right .sk-form-select': {\r\n '@apply border-l-1 border-l-divider': {},\r\n '@apply focus:border-l-transparent': {},\r\n },\r\n '.sk-form-combobox': {\r\n '@apply rounded-0': {},\r\n '@apply border-0': {},\r\n '@apply focus-within:ring-0': {},\r\n '@apply focus-within:ring-offset-0': {},\r\n '@apply bg-transparent': {},\r\n '@apply dark:bg-transparent': {},\r\n },\r\n '&&-left .sk-form-combobox': {\r\n '@apply border-r-1 border-r-divider': {},\r\n '@apply focus:border-r-transparent': {},\r\n },\r\n '&&-right .sk-form-combobox': {\r\n '@apply border-l-1 border-l-divider': {},\r\n '@apply focus:border-l-transparent': {},\r\n },\r\n },\r\n };\r\n}\r\nfunction inputGroup() {\r\n return {\r\n '&-group': {\r\n '&-outer': {\r\n '@apply flex gap-0 max-w-full': {},\r\n '&[data-hasleftaddon=\"true\"]': {\r\n '.sk-form-input, .sk-form-input-group-inner': {\r\n '@apply rounded-l-0': {},\r\n '@apply border-l-0': {},\r\n },\r\n },\r\n '&[data-hasrightaddon=\"true\"]': {\r\n '.sk-form-input, .sk-form-input-group-inner': {\r\n '@apply rounded-r-0': {},\r\n '@apply border-r-0': {},\r\n },\r\n },\r\n },\r\n '&-inner': {\r\n '@apply flex relative grow': {},\r\n '@apply items-center': {},\r\n '@apply focus-within:ring': {},\r\n '@apply focus-within:ring-ring': {},\r\n '@apply text-dark-secondary': {},\r\n //Focus\r\n '@apply focus-within:border-input-field-surface': {},\r\n\r\n '&:not(:invalid):not([aria-invalid=\"true\"])': {\r\n '@apply focus-within:border-input-field-surface': {},\r\n },\r\n\r\n '&&-lg': {\r\n '@apply text-input-large': {},\r\n '@apply rounded-button-lg': {},\r\n '@apply h-48': {},\r\n },\r\n '&&-md': {\r\n '@apply text-input-medium': {},\r\n '@apply rounded-button-md': {},\r\n '@apply h-40': {},\r\n },\r\n '&&-sm': {\r\n '@apply text-input-small': {},\r\n '@apply rounded-button-sm': {},\r\n '@apply h-32': {},\r\n },\r\n\r\n ...inputStandards(),\r\n '.sk-form-input': {\r\n '@apply rounded-0': {},\r\n '@apply border-0': {},\r\n '@apply focus:ring-0': {},\r\n '@apply focus:ring-offset-0': {},\r\n '@apply bg-transparent': {},\r\n '@apply dark:bg-transparent': {},\r\n '@apply grow': {},\r\n },\r\n },\r\n },\r\n };\r\n}\r\n\r\nfunction timeAndDatePicker() {\r\n return {\r\n '&::-webkit-inner-spin-button, &::-webkit-calendar-picker-indicator': {\r\n '@apply block': {},\r\n '@apply p-0': {},\r\n '@apply pl-6 md:pl-8': {},\r\n '@apply m-0': {},\r\n '@apply bg-none': {},\r\n '@apply bg-dark-secondary': {},\r\n '&.sk-form-input-sm': {\r\n '@apply w-16 h-16': {},\r\n '@apply -mr-2': {},\r\n },\r\n '&.sk-form-input-md': {\r\n '@apply -mr-4': {},\r\n '@apply w-18 h-18': {},\r\n },\r\n '&.sk-form-input-lg': {\r\n '@apply -mr-6': {},\r\n '@apply w-20 h-20': {},\r\n },\r\n },\r\n\r\n '&[type=\"date\"]::-webkit-inner-spin-button, &[type=\"date\"]::-webkit-calendar-picker-indicator': {\r\n mask: [`url(\"data:image/svg+xml;utf-8,${calendar()}\") no-repeat 100% 100%`],\r\n '-webkit-mask': [`url(\"data:image/svg+xml;utf-8,${calendar()}\") no-repeat 100% 100%`],\r\n maskSize: 'contain',\r\n '-webkit-mask-size': 'contain',\r\n },\r\n '&[type=\"datetime-local\"]::-webkit-inner-spin-button, &[type=\"datetime-local\"]::-webkit-calendar-picker-indicator':\r\n {\r\n mask: [`url(\"data:image/svg+xml;utf-8,${calendar()}\") no-repeat 100% 100%`],\r\n '-webkit-mask': [`url(\"data:image/svg+xml;utf-8,${calendar()}\") no-repeat 100% 100%`],\r\n maskSize: 'contain',\r\n '-webkit-mask-size': 'contain',\r\n },\r\n '&[type=\"time\"]::-webkit-inner-spin-button, &[type=\"time\"]::-webkit-calendar-picker-indicator': {\r\n mask: [`url(\"data:image/svg+xml;utf-8,${clock()}\") no-repeat 100% 100%`],\r\n '-webkit-mask': [`url(\"data:image/svg+xml;utf-8,${clock()}\") no-repeat 100% 100%`],\r\n maskSize: 'contain',\r\n '-webkit-mask-size': 'contain',\r\n },\r\n\r\n '&:disabled, &[aria-disabled=\"true\"]': {\r\n '&::-webkit-inner-spin-button, &::-webkit-calendar-picker-indicator': {\r\n '@apply color-black-disabled': {},\r\n },\r\n },\r\n };\r\n}\r\n\r\nexport const Input = () => ({\r\n '.sk-form-input': {\r\n '@apply grow-0': {},\r\n '@apply text-dark-primary': {},\r\n\r\n '&[data-hideextra=\"true\"]': {\r\n '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {\r\n '-webkit-appearance': 'none',\r\n display: 'none',\r\n margin: '0px',\r\n },\r\n '-moz-appearance': 'textfield',\r\n },\r\n\r\n '&&-lg': {\r\n '@apply rounded-button-lg': {},\r\n '@apply px-20': {},\r\n '@apply py-11': {},\r\n '@apply gap-8': {},\r\n '@apply text-input-large': {},\r\n '@apply h-48': {},\r\n },\r\n '&&-md': {\r\n '@apply rounded-button-md': {},\r\n '@apply px-16': {},\r\n '@apply py-7': {},\r\n '@apply gap-8': {},\r\n '@apply text-input-medium': {},\r\n '@apply h-40': {},\r\n },\r\n '&&-sm': {\r\n '@apply rounded-button-sm': {},\r\n '@apply px-12': {},\r\n '@apply py-5': {},\r\n '@apply gap-6': {},\r\n '@apply text-input-small': {},\r\n '@apply h-32': {},\r\n },\r\n '&&-textarea': {\r\n '@apply h-auto': {},\r\n '&-warning': {\r\n '@apply sr-only': {},\r\n },\r\n },\r\n\r\n //Focus\r\n '@apply focus:ring': {},\r\n '@apply focus:ring-ring': {},\r\n '@apply focus:ring-offset': {},\r\n '@apply focus:border-input-field-surface': {},\r\n '@apply focus-within:ring': {},\r\n '@apply focus-within:ring-ring': {},\r\n '@apply focus-within:ring-offset': {},\r\n '@apply focus-within:border-input-field-surface': {},\r\n '&:not(:invalid):not([aria-invalid=\"true\"])': {\r\n '@apply focus:hover:border-input-field-surface': {},\r\n },\r\n ...timeAndDatePicker(),\r\n ...inputStandards(),\r\n ...inputGroup(),\r\n ...addin(),\r\n ...addon(),\r\n },\r\n});\r\n"],"names":["Input","calendar","clock","inputStandards","addin","svg","addon","inputGroup","timeAndDatePicker","mask","maskSize","display","margin"],"mappings":"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"}
package/dist/cjs/components/progress-stepper.js CHANGED
@@ -10,69 +10,91 @@ Object.defineProperty(exports, "ProgressStepper", {
10
10
  });
11
11
  const ProgressStepper = ()=>({
12
12
  '.sk-progress-stepper': {
13
- '@apply flex justify-between': {},
14
- hr: {
15
- '@apply w-full mt-19': {}
13
+ '@apply flex justify-between items-center': {},
14
+ '&.horizontal': {
15
+ '@apply flex-row gap-16': {}
16
+ },
17
+ '&.vertical': {
18
+ '@apply flex-col gap-4 h-full': {}
16
19
  },
17
20
  '&-step': {
18
- '@apply flex flex-col items-center': {},
19
- '@apply gap-4': {},
20
- '@apply w-auto': {},
21
- '@apply shrink-0': {},
21
+ '@apply flex items-center': {},
22
22
  '@apply text-base leading-base text-dark-primary font-normal': {},
23
- svg: {
24
- '@apply w-20 h-20': {}
25
- },
26
23
  '&-wrapper': {
27
- '@apply flex flex-row shrink w-full gap-4': {},
28
- hr: {
29
- '@apply w-full grow shrink mt-19': {}
30
- }
31
- },
32
- '&:first-of-type': {
33
- '.sk-divider:first-of-type': {
34
- '@apply invisible': {}
35
- }
36
- },
37
- '&:last-of-type': {
38
- '.sk-divider:last-of-type': {
39
- '@apply invisible': {}
24
+ '@apply flex items-center gap-8': {},
25
+ '&&-top': {
26
+ '@apply flex-col-reverse': {}
27
+ },
28
+ '&&-right': {
29
+ '@apply flex-row': {}
30
+ },
31
+ '&&-bottom': {
32
+ '@apply flex-col': {}
33
+ },
34
+ '&&-left': {
35
+ '@apply flex-row-reverse': {}
40
36
  }
41
37
  },
42
38
  '&-box': {
43
- '@apply box-border': {},
44
- '@apply shrink-0': {},
45
- '@apply h-40 w-40': {},
46
- '@apply bg-secondary-surface': {},
39
+ '@apply shrink-0 rounded-lg h-32 w-32 bg-tertiary-surface': {},
47
40
  '@apply flex justify-center items-center': {},
48
- '@apply text-label-medium': {},
49
- '@apply border-2 border-secondary-outline': {},
50
- '@apply text-dark-secondary': {},
51
- '@apply rounded-button-sm md:rounded-button-md xl:rounded-button-lg': {},
52
41
  '&[data-rounded="true"]': {
53
42
  '@apply rounded-full': {}
54
43
  },
55
- '&&-sm': {
56
- '@apply h-32 w-32 min-h-24 max-h-32 min-w-24 max-w-32': {},
57
- '@apply text-label-small': {}
44
+ '&.sm': {
45
+ '@apply h-24 w-24 text-label-small': {}
58
46
  },
59
- '&&-md': {
60
- '@apply h-40 w-40 min-h-32 max-h-40 min-w-32 max-w-40': {}
47
+ '&.md': {
48
+ '@apply h-32 w-32': {}
49
+ },
50
+ '&-icon': {
51
+ '&.sm svg': {
52
+ '@apply w-16 h-16': {}
53
+ },
54
+ '&.md svg': {
55
+ '@apply w-20 h-20': {}
56
+ }
57
+ }
58
+ },
59
+ '&&-vertical': {
60
+ '@apply flex-col': {}
61
+ },
62
+ '&&-horizontal': {
63
+ '@apply flex-row gap-16': {}
64
+ },
65
+ '&&-grow': {
66
+ '@apply grow': {}
67
+ },
68
+ '&&-grow-0': {
69
+ '@apply grow-0': {}
70
+ },
71
+ '&-divider': {
72
+ '&.horizontal': {
73
+ '@apply flex w-full': {}
74
+ },
75
+ '&.vertical': {
76
+ '@apply flex w-auto h-full': {}
61
77
  }
62
78
  },
63
79
  '&[data-progress="current"]': {
64
80
  '@apply font-bold': {},
65
81
  '.sk-progress-stepper-step-box': {
66
- '@apply border-vattjom-surface-primary': {},
67
- '@apply bg-vattjom-surface-primary': {},
68
- '@apply text-vattjom-text-secondary': {}
82
+ '@apply bg-primary-surface text-light-primary': {}
69
83
  }
70
84
  },
71
85
  '&[data-progress="done"]': {
72
86
  '.sk-progress-stepper-step-box': {
73
- '@apply border-success-surface-primary': {},
74
- '@apply bg-success-surface-primary': {},
75
- '@apply text-success-text-secondary': {}
87
+ '@apply bg-gronsta-surface-accent text-gronsta-text-primary': {}
88
+ }
89
+ },
90
+ '&[data-white-space="no-wrap"]': {
91
+ '.sk-progress-stepper-step-wrapper p': {
92
+ '@apply whitespace-nowrap': {}
93
+ }
94
+ },
95
+ '&[data-white-space="normal"]': {
96
+ '.sk-progress-stepper-step-wrapper p': {
97
+ '@apply whitespace-normal': {}
76
98
  }
77
99
  }
78
100
  }
package/dist/cjs/components/progress-stepper.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/progress-stepper.ts"],"sourcesContent":["export const ProgressStepper = () => ({\r\n '.sk-progress-stepper': {\r\n '@apply flex justify-between': {},\r\n hr: {\r\n '@apply w-full mt-19': {},\r\n },\r\n '&-step': {\r\n '@apply flex flex-col items-center': {},\r\n '@apply gap-4': {},\r\n '@apply w-auto': {},\r\n '@apply shrink-0': {},\r\n '@apply text-base leading-base text-dark-primary font-normal': {},\r\n svg: {\r\n '@apply w-20 h-20': {},\r\n },\r\n '&-wrapper': {\r\n '@apply flex flex-row shrink w-full gap-4': {},\r\n hr: {\r\n '@apply w-full grow shrink mt-19': {},\r\n },\r\n },\r\n '&:first-of-type': {\r\n '.sk-divider:first-of-type': {\r\n '@apply invisible': {},\r\n },\r\n },\r\n '&:last-of-type': {\r\n '.sk-divider:last-of-type': {\r\n '@apply invisible': {},\r\n },\r\n },\r\n '&-box': {\r\n '@apply box-border': {},\r\n '@apply shrink-0': {},\r\n '@apply h-40 w-40': {},\r\n '@apply bg-secondary-surface': {},\r\n '@apply flex justify-center items-center': {},\r\n '@apply text-label-medium': {},\r\n '@apply border-2 border-secondary-outline': {},\r\n '@apply text-dark-secondary': {},\r\n '@apply rounded-button-sm md:rounded-button-md xl:rounded-button-lg': {},\r\n '&[data-rounded=\"true\"]': {\r\n '@apply rounded-full': {},\r\n },\r\n\r\n '&&-sm': {\r\n '@apply h-32 w-32 min-h-24 max-h-32 min-w-24 max-w-32': {},\r\n '@apply text-label-small': {},\r\n },\r\n '&&-md': {\r\n '@apply h-40 w-40 min-h-32 max-h-40 min-w-32 max-w-40': {},\r\n },\r\n },\r\n '&[data-progress=\"current\"]': {\r\n '@apply font-bold': {},\r\n '.sk-progress-stepper-step-box': {\r\n '@apply border-vattjom-surface-primary': {},\r\n '@apply bg-vattjom-surface-primary': {},\r\n '@apply text-vattjom-text-secondary': {},\r\n },\r\n },\r\n '&[data-progress=\"done\"]': {\r\n '.sk-progress-stepper-step-box': {\r\n '@apply border-success-surface-primary': {},\r\n '@apply bg-success-surface-primary': {},\r\n '@apply text-success-text-secondary': {},\r\n },\r\n },\r\n },\r\n },\r\n});\r\n"],"names":["ProgressStepper","hr","svg"],"mappings":";;;;+BAAaA;;;eAAAA;;;AAAN,MAAMA,kBAAkB,IAAO,CAAA;QACpC,wBAAwB;YACtB,+BAA+B,CAAC;YAChCC,IAAI;gBACF,uBAAuB,CAAC;YAC1B;YACA,UAAU;gBACR,qCAAqC,CAAC;gBACtC,gBAAgB,CAAC;gBACjB,iBAAiB,CAAC;gBAClB,mBAAmB,CAAC;gBACpB,+DAA+D,CAAC;gBAChEC,KAAK;oBACH,oBAAoB,CAAC;gBACvB;gBACA,aAAa;oBACX,4CAA4C,CAAC;oBAC7CD,IAAI;wBACF,mCAAmC,CAAC;oBACtC;gBACF;gBACA,mBAAmB;oBACjB,6BAA6B;wBAC3B,oBAAoB,CAAC;oBACvB;gBACF;gBACA,kBAAkB;oBAChB,4BAA4B;wBAC1B,oBAAoB,CAAC;oBACvB;gBACF;gBACA,SAAS;oBACP,qBAAqB,CAAC;oBACtB,mBAAmB,CAAC;oBACpB,oBAAoB,CAAC;oBACrB,+BAA+B,CAAC;oBAChC,2CAA2C,CAAC;oBAC5C,4BAA4B,CAAC;oBAC7B,4CAA4C,CAAC;oBAC7C,8BAA8B,CAAC;oBAC/B,sEAAsE,CAAC;oBACvE,0BAA0B;wBACxB,uBAAuB,CAAC;oBAC1B;oBAEA,SAAS;wBACP,wDAAwD,CAAC;wBACzD,2BAA2B,CAAC;oBAC9B;oBACA,SAAS;wBACP,wDAAwD,CAAC;oBAC3D;gBACF;gBACA,8BAA8B;oBAC5B,oBAAoB,CAAC;oBACrB,iCAAiC;wBAC/B,yCAAyC,CAAC;wBAC1C,qCAAqC,CAAC;wBACtC,sCAAsC,CAAC;oBACzC;gBACF;gBACA,2BAA2B;oBACzB,iCAAiC;wBAC/B,yCAAyC,CAAC;wBAC1C,qCAAqC,CAAC;wBACtC,sCAAsC,CAAC;oBACzC;gBACF;YACF;QACF;IACF,CAAA"}
1
+ {"version":3,"sources":["../../../src/components/progress-stepper.ts"],"sourcesContent":["export const ProgressStepper = () => ({\r\n '.sk-progress-stepper': {\r\n '@apply flex justify-between items-center': {},\r\n '&.horizontal': { '@apply flex-row gap-16': {} },\r\n '&.vertical': { '@apply flex-col gap-4 h-full': {} },\r\n '&-step': {\r\n '@apply flex items-center': {},\r\n '@apply text-base leading-base text-dark-primary font-normal': {},\r\n '&-wrapper': {\r\n '@apply flex items-center gap-8': {},\r\n '&&-top': {\r\n '@apply flex-col-reverse': {},\r\n },\r\n '&&-right': {\r\n '@apply flex-row': {},\r\n },\r\n '&&-bottom': {\r\n '@apply flex-col': {},\r\n },\r\n '&&-left': {\r\n '@apply flex-row-reverse': {},\r\n },\r\n },\r\n '&-box': {\r\n '@apply shrink-0 rounded-lg h-32 w-32 bg-tertiary-surface': {},\r\n '@apply flex justify-center items-center': {},\r\n '&[data-rounded=\"true\"]': {\r\n '@apply rounded-full': {},\r\n },\r\n '&.sm': {\r\n '@apply h-24 w-24 text-label-small': {},\r\n },\r\n '&.md': {\r\n '@apply h-32 w-32': {},\r\n },\r\n '&-icon': {\r\n '&.sm svg': {\r\n '@apply w-16 h-16': {},\r\n },\r\n '&.md svg': {\r\n '@apply w-20 h-20': {},\r\n },\r\n },\r\n },\r\n '&&-vertical': {\r\n '@apply flex-col': {},\r\n },\r\n '&&-horizontal': {\r\n '@apply flex-row gap-16': {},\r\n },\r\n '&&-grow': {\r\n '@apply grow': {},\r\n },\r\n '&&-grow-0': {\r\n '@apply grow-0': {},\r\n },\r\n '&-divider': {\r\n '&.horizontal': {\r\n '@apply flex w-full': {},\r\n },\r\n '&.vertical': {\r\n '@apply flex w-auto h-full': {},\r\n },\r\n },\r\n '&[data-progress=\"current\"]': {\r\n '@apply font-bold': {},\r\n '.sk-progress-stepper-step-box': {\r\n '@apply bg-primary-surface text-light-primary': {},\r\n },\r\n },\r\n '&[data-progress=\"done\"]': {\r\n '.sk-progress-stepper-step-box': {\r\n '@apply bg-gronsta-surface-accent text-gronsta-text-primary': {},\r\n },\r\n },\r\n '&[data-white-space=\"no-wrap\"]': {\r\n '.sk-progress-stepper-step-wrapper p': {\r\n '@apply whitespace-nowrap': {},\r\n },\r\n },\r\n '&[data-white-space=\"normal\"]': {\r\n '.sk-progress-stepper-step-wrapper p': {\r\n '@apply whitespace-normal': {},\r\n },\r\n },\r\n },\r\n },\r\n});\r\n"],"names":["ProgressStepper"],"mappings":";;;;+BAAaA;;;eAAAA;;;AAAN,MAAMA,kBAAkB,IAAO,CAAA;QACpC,wBAAwB;YACtB,4CAA4C,CAAC;YAC7C,gBAAgB;gBAAE,0BAA0B,CAAC;YAAE;YAC/C,cAAc;gBAAE,gCAAgC,CAAC;YAAE;YACnD,UAAU;gBACR,4BAA4B,CAAC;gBAC7B,+DAA+D,CAAC;gBAChE,aAAa;oBACX,kCAAkC,CAAC;oBACnC,UAAU;wBACR,2BAA2B,CAAC;oBAC9B;oBACA,YAAY;wBACV,mBAAmB,CAAC;oBACtB;oBACA,aAAa;wBACX,mBAAmB,CAAC;oBACtB;oBACA,WAAW;wBACT,2BAA2B,CAAC;oBAC9B;gBACF;gBACA,SAAS;oBACP,4DAA4D,CAAC;oBAC7D,2CAA2C,CAAC;oBAC5C,0BAA0B;wBACxB,uBAAuB,CAAC;oBAC1B;oBACA,QAAQ;wBACN,qCAAqC,CAAC;oBACxC;oBACA,QAAQ;wBACN,oBAAoB,CAAC;oBACvB;oBACA,UAAU;wBACR,YAAY;4BACV,oBAAoB,CAAC;wBACvB;wBACA,YAAY;4BACV,oBAAoB,CAAC;wBACvB;oBACF;gBACF;gBACA,eAAe;oBACb,mBAAmB,CAAC;gBACtB;gBACA,iBAAiB;oBACf,0BAA0B,CAAC;gBAC7B;gBACA,WAAW;oBACT,eAAe,CAAC;gBAClB;gBACA,aAAa;oBACX,iBAAiB,CAAC;gBACpB;gBACA,aAAa;oBACX,gBAAgB;wBACd,sBAAsB,CAAC;oBACzB;oBACA,cAAc;wBACZ,6BAA6B,CAAC;oBAChC;gBACF;gBACA,8BAA8B;oBAC5B,oBAAoB,CAAC;oBACrB,iCAAiC;wBAC/B,gDAAgD,CAAC;oBACnD;gBACF;gBACA,2BAA2B;oBACzB,iCAAiC;wBAC/B,8DAA8D,CAAC;oBACjE;gBACF;gBACA,iCAAiC;oBAC/B,uCAAuC;wBACrC,4BAA4B,CAAC;oBAC/B;gBACF;gBACA,gCAAgC;oBAC9B,uCAAuC;wBACrC,4BAA4B,CAAC;oBAC/B;gBACF;YACF;QACF;IACF,CAAA"}
package/dist/esm/components/accordion.js CHANGED
@@ -137,7 +137,7 @@ export const Accordion = ()=>({
137
137
  '@apply my-0 invisible max-h-0 opacity-0': {}
138
138
  },
139
139
  '&[aria-hidden="false"], &[data-hidden="false"]': {
140
- '@apply block max-h-screen opacity-100 visible': {}
140
+ '@apply block opacity-100 visible': {}
141
141
  },
142
142
  '&[data-variant="alt"]': {
143
143
  '@apply mt-24': {},
package/dist/esm/components/accordion.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/accordion.ts"],"sourcesContent":["export const Accordion = () => ({\r\n '.sk-disclosure': {\r\n '&-icon': {\r\n '@apply flex self-center': {},\r\n },\r\n '&-header': {\r\n '@apply mt-6 mb-8': {},\r\n '@apply flex flex-col text-left': {},\r\n '@apply cursor-pointer': {},\r\n '*': {\r\n '@apply cursor-pointer': {},\r\n },\r\n '&:focus-visible': {\r\n '@apply outline-0': {},\r\n },\r\n\r\n '&-icon': {\r\n '@apply ml-auto': {},\r\n '@apply text-dark-secondary': {},\r\n svg: {\r\n '@apply w-20 h-20': {},\r\n },\r\n },\r\n '&[data-disabled=\"true\"]': {\r\n '@apply text-dark-disabled': {},\r\n '.sk-disclosure-title': {\r\n '@apply text-dark-disabled': {},\r\n },\r\n '@apply cursor-default': {},\r\n '*': {\r\n '@apply cursor-default': {},\r\n },\r\n },\r\n },\r\n '&-label': {\r\n '@apply shrink-0': {},\r\n },\r\n '&-toggle': {\r\n '@apply flex items-center justify-between': {},\r\n '@apply gap-16': {},\r\n '.sk-icon': {\r\n '@apply w-32 h-32': {},\r\n },\r\n },\r\n '&-title': {\r\n '@apply text-dark-primary': {},\r\n '&-wrapper': {\r\n '@apply w-full': {},\r\n '@apply flex flex-row': {},\r\n '@apply items-center': {},\r\n },\r\n },\r\n\r\n '&-sm': {\r\n '.sk-disclosure-title': {\r\n '@apply text-h4-sm font-bold': {},\r\n '&-wrapper': {\r\n '@apply gap-12': {},\r\n },\r\n },\r\n '.sk-disclosure-toggle': {\r\n '@apply gap-12': {},\r\n '.sk-icon': {\r\n '@apply w-20 min-h-20': {},\r\n },\r\n },\r\n '.sk-disclosure-support': {\r\n '@apply text-small': {},\r\n },\r\n '&[data-variant=\"default\"]': {\r\n '.sk-disclosure-toggle': {\r\n '@apply py-4': {},\r\n '@apply min-h-40': {},\r\n },\r\n '.sk-disclosure-header-icon': {\r\n '@apply w-32 h-32': {},\r\n },\r\n },\r\n '&[data-variant=\"alt\"]': {},\r\n },\r\n '&-md': {\r\n '.sk-disclosure-title': {\r\n '@apply text-h4-md font-bold': {},\r\n '&-wrapper': {\r\n '@apply gap-12': {},\r\n },\r\n },\r\n '.sk-disclosure-toggle': {\r\n '@apply gap-12': {},\r\n '.sk-icon': {\r\n '@apply w-24 min-h-24': {},\r\n },\r\n },\r\n '.sk-disclosure-support': {\r\n '@apply text-body': {},\r\n },\r\n '&[data-variant=\"default\"]': {\r\n '.sk-disclosure-toggle': {\r\n '@apply py-8': {},\r\n '@apply min-h-56': {},\r\n },\r\n '.sk-disclosure-header-icon': {\r\n '@apply w-40 h-40': {},\r\n },\r\n },\r\n },\r\n '&-lg': {\r\n '&[data-variant=\"alt\"]': {\r\n '.sk-disclosure-support': {\r\n '@apply text-large': {},\r\n },\r\n '.sk-disclosure-title': {\r\n '@apply text-h3-md font-bold': {},\r\n '&-wrapper': {\r\n '@apply gap-16': {},\r\n },\r\n },\r\n },\r\n },\r\n\r\n '&-body': {\r\n '&[data-size=\"sm\"]': {\r\n '@apply pr-12': {},\r\n },\r\n '&[data-size=\"md\"]': {\r\n '@apply pr-12': {},\r\n },\r\n '&[data-size=\"lg\"]': {\r\n '@apply pr-16': {},\r\n },\r\n '@apply text-base': {},\r\n '@apply flex flex-col': {},\r\n '@apply mb-32': {},\r\n '@apply mr-32': {},\r\n '@apply gap-8': {},\r\n '@apply py-0': {},\r\n transitionProperty: 'visibility, height, opacity, padding, margin',\r\n\r\n transitionDuration: '180ms',\r\n\r\n '&[aria-hidden=\"true\"], &[data-hidden=\"true\"]': {\r\n '@apply my-0 invisible max-h-0 opacity-0': {},\r\n },\r\n\r\n '&[aria-hidden=\"false\"], &[data-hidden=\"false\"]': {\r\n '@apply block max-h-screen opacity-100 visible': {},\r\n },\r\n\r\n '&[data-variant=\"alt\"]': {\r\n '@apply mt-24': {},\r\n '&[data-size=\"sm\"]': {\r\n '@apply pr-12': {},\r\n },\r\n '&[data-size=\"md\"]': {\r\n '@apply pr-12': {},\r\n },\r\n '&[data-size=\"lg\"]': {\r\n '@apply pr-16': {},\r\n },\r\n '&[data-has-icon=\"true\"]': {\r\n '&[data-size=\"sm\"]': {\r\n '@apply ml-32': {},\r\n },\r\n '&[data-size=\"md\"]': {\r\n '@apply ml-36': {},\r\n },\r\n '&[data-size=\"lg\"]': {\r\n '@apply ml-48': {},\r\n },\r\n },\r\n },\r\n },\r\n },\r\n '.sk-accordion': {\r\n '&-item': {\r\n '.sk-disclosure': {\r\n transitionProperty: 'margin',\r\n transitionDuration: '180ms',\r\n '@apply border-b-1 border-divider': {},\r\n },\r\n\r\n '&:last-child .sk-disclosure': {\r\n '@apply border-b-transparent': {},\r\n },\r\n },\r\n },\r\n\r\n '&[data-inverted=\"true\"]': {\r\n '&.sk-disclosure': {\r\n '&-icon': {\r\n '@apply text-inverted-dark-secondary': {},\r\n },\r\n\r\n '&[data-disabled=\"true\"]': {\r\n '@apply text-inverted-dark-disabled': {},\r\n '.sk-disclosure-title': {\r\n '@apply text-inverted-dark-disabled': {},\r\n },\r\n },\r\n\r\n '&-title': {\r\n '@apply text-inverted-dark-primary': {},\r\n },\r\n },\r\n '&.sk-accordion': {\r\n '&-item': {\r\n '@apply border-inverted-divider': {},\r\n },\r\n },\r\n },\r\n});\r\n"],"names":["Accordion","svg","transitionProperty","transitionDuration"],"mappings":"AAAA,OAAO,MAAMA,YAAY,IAAO,CAAA;QAC9B,kBAAkB;YAChB,UAAU;gBACR,2BAA2B,CAAC;YAC9B;YACA,YAAY;gBACV,oBAAoB,CAAC;gBACrB,kCAAkC,CAAC;gBACnC,yBAAyB,CAAC;gBAC1B,KAAK;oBACH,yBAAyB,CAAC;gBAC5B;gBACA,mBAAmB;oBACjB,oBAAoB,CAAC;gBACvB;gBAEA,UAAU;oBACR,kBAAkB,CAAC;oBACnB,8BAA8B,CAAC;oBAC/BC,KAAK;wBACH,oBAAoB,CAAC;oBACvB;gBACF;gBACA,2BAA2B;oBACzB,6BAA6B,CAAC;oBAC9B,wBAAwB;wBACtB,6BAA6B,CAAC;oBAChC;oBACA,yBAAyB,CAAC;oBAC1B,KAAK;wBACH,yBAAyB,CAAC;oBAC5B;gBACF;YACF;YACA,WAAW;gBACT,mBAAmB,CAAC;YACtB;YACA,YAAY;gBACV,4CAA4C,CAAC;gBAC7C,iBAAiB,CAAC;gBAClB,YAAY;oBACV,oBAAoB,CAAC;gBACvB;YACF;YACA,WAAW;gBACT,4BAA4B,CAAC;gBAC7B,aAAa;oBACX,iBAAiB,CAAC;oBAClB,wBAAwB,CAAC;oBACzB,uBAAuB,CAAC;gBAC1B;YACF;YAEA,QAAQ;gBACN,wBAAwB;oBACtB,+BAA+B,CAAC;oBAChC,aAAa;wBACX,iBAAiB,CAAC;oBACpB;gBACF;gBACA,yBAAyB;oBACvB,iBAAiB,CAAC;oBAClB,YAAY;wBACV,wBAAwB,CAAC;oBAC3B;gBACF;gBACA,0BAA0B;oBACxB,qBAAqB,CAAC;gBACxB;gBACA,6BAA6B;oBAC3B,yBAAyB;wBACvB,eAAe,CAAC;wBAChB,mBAAmB,CAAC;oBACtB;oBACA,8BAA8B;wBAC5B,oBAAoB,CAAC;oBACvB;gBACF;gBACA,yBAAyB,CAAC;YAC5B;YACA,QAAQ;gBACN,wBAAwB;oBACtB,+BAA+B,CAAC;oBAChC,aAAa;wBACX,iBAAiB,CAAC;oBACpB;gBACF;gBACA,yBAAyB;oBACvB,iBAAiB,CAAC;oBAClB,YAAY;wBACV,wBAAwB,CAAC;oBAC3B;gBACF;gBACA,0BAA0B;oBACxB,oBAAoB,CAAC;gBACvB;gBACA,6BAA6B;oBAC3B,yBAAyB;wBACvB,eAAe,CAAC;wBAChB,mBAAmB,CAAC;oBACtB;oBACA,8BAA8B;wBAC5B,oBAAoB,CAAC;oBACvB;gBACF;YACF;YACA,QAAQ;gBACN,yBAAyB;oBACvB,0BAA0B;wBACxB,qBAAqB,CAAC;oBACxB;oBACA,wBAAwB;wBACtB,+BAA+B,CAAC;wBAChC,aAAa;4BACX,iBAAiB,CAAC;wBACpB;oBACF;gBACF;YACF;YAEA,UAAU;gBACR,qBAAqB;oBACnB,gBAAgB,CAAC;gBACnB;gBACA,qBAAqB;oBACnB,gBAAgB,CAAC;gBACnB;gBACA,qBAAqB;oBACnB,gBAAgB,CAAC;gBACnB;gBACA,oBAAoB,CAAC;gBACrB,wBAAwB,CAAC;gBACzB,gBAAgB,CAAC;gBACjB,gBAAgB,CAAC;gBACjB,gBAAgB,CAAC;gBACjB,eAAe,CAAC;gBAChBC,oBAAoB;gBAEpBC,oBAAoB;gBAEpB,gDAAgD;oBAC9C,2CAA2C,CAAC;gBAC9C;gBAEA,kDAAkD;oBAChD,iDAAiD,CAAC;gBACpD;gBAEA,yBAAyB;oBACvB,gBAAgB,CAAC;oBACjB,qBAAqB;wBACnB,gBAAgB,CAAC;oBACnB;oBACA,qBAAqB;wBACnB,gBAAgB,CAAC;oBACnB;oBACA,qBAAqB;wBACnB,gBAAgB,CAAC;oBACnB;oBACA,2BAA2B;wBACzB,qBAAqB;4BACnB,gBAAgB,CAAC;wBACnB;wBACA,qBAAqB;4BACnB,gBAAgB,CAAC;wBACnB;wBACA,qBAAqB;4BACnB,gBAAgB,CAAC;wBACnB;oBACF;gBACF;YACF;QACF;QACA,iBAAiB;YACf,UAAU;gBACR,kBAAkB;oBAChBD,oBAAoB;oBACpBC,oBAAoB;oBACpB,oCAAoC,CAAC;gBACvC;gBAEA,+BAA+B;oBAC7B,+BAA+B,CAAC;gBAClC;YACF;QACF;QAEA,2BAA2B;YACzB,mBAAmB;gBACjB,UAAU;oBACR,uCAAuC,CAAC;gBAC1C;gBAEA,2BAA2B;oBACzB,sCAAsC,CAAC;oBACvC,wBAAwB;wBACtB,sCAAsC,CAAC;oBACzC;gBACF;gBAEA,WAAW;oBACT,qCAAqC,CAAC;gBACxC;YACF;YACA,kBAAkB;gBAChB,UAAU;oBACR,kCAAkC,CAAC;gBACrC;YACF;QACF;IACF,CAAA,EAAG"}
1
+ {"version":3,"sources":["../../../src/components/accordion.ts"],"sourcesContent":["export const Accordion = () => ({\r\n '.sk-disclosure': {\r\n '&-icon': {\r\n '@apply flex self-center': {},\r\n },\r\n '&-header': {\r\n '@apply mt-6 mb-8': {},\r\n '@apply flex flex-col text-left': {},\r\n '@apply cursor-pointer': {},\r\n '*': {\r\n '@apply cursor-pointer': {},\r\n },\r\n '&:focus-visible': {\r\n '@apply outline-0': {},\r\n },\r\n\r\n '&-icon': {\r\n '@apply ml-auto': {},\r\n '@apply text-dark-secondary': {},\r\n svg: {\r\n '@apply w-20 h-20': {},\r\n },\r\n },\r\n '&[data-disabled=\"true\"]': {\r\n '@apply text-dark-disabled': {},\r\n '.sk-disclosure-title': {\r\n '@apply text-dark-disabled': {},\r\n },\r\n '@apply cursor-default': {},\r\n '*': {\r\n '@apply cursor-default': {},\r\n },\r\n },\r\n },\r\n '&-label': {\r\n '@apply shrink-0': {},\r\n },\r\n '&-toggle': {\r\n '@apply flex items-center justify-between': {},\r\n '@apply gap-16': {},\r\n '.sk-icon': {\r\n '@apply w-32 h-32': {},\r\n },\r\n },\r\n '&-title': {\r\n '@apply text-dark-primary': {},\r\n '&-wrapper': {\r\n '@apply w-full': {},\r\n '@apply flex flex-row': {},\r\n '@apply items-center': {},\r\n },\r\n },\r\n\r\n '&-sm': {\r\n '.sk-disclosure-title': {\r\n '@apply text-h4-sm font-bold': {},\r\n '&-wrapper': {\r\n '@apply gap-12': {},\r\n },\r\n },\r\n '.sk-disclosure-toggle': {\r\n '@apply gap-12': {},\r\n '.sk-icon': {\r\n '@apply w-20 min-h-20': {},\r\n },\r\n },\r\n '.sk-disclosure-support': {\r\n '@apply text-small': {},\r\n },\r\n '&[data-variant=\"default\"]': {\r\n '.sk-disclosure-toggle': {\r\n '@apply py-4': {},\r\n '@apply min-h-40': {},\r\n },\r\n '.sk-disclosure-header-icon': {\r\n '@apply w-32 h-32': {},\r\n },\r\n },\r\n '&[data-variant=\"alt\"]': {},\r\n },\r\n '&-md': {\r\n '.sk-disclosure-title': {\r\n '@apply text-h4-md font-bold': {},\r\n '&-wrapper': {\r\n '@apply gap-12': {},\r\n },\r\n },\r\n '.sk-disclosure-toggle': {\r\n '@apply gap-12': {},\r\n '.sk-icon': {\r\n '@apply w-24 min-h-24': {},\r\n },\r\n },\r\n '.sk-disclosure-support': {\r\n '@apply text-body': {},\r\n },\r\n '&[data-variant=\"default\"]': {\r\n '.sk-disclosure-toggle': {\r\n '@apply py-8': {},\r\n '@apply min-h-56': {},\r\n },\r\n '.sk-disclosure-header-icon': {\r\n '@apply w-40 h-40': {},\r\n },\r\n },\r\n },\r\n '&-lg': {\r\n '&[data-variant=\"alt\"]': {\r\n '.sk-disclosure-support': {\r\n '@apply text-large': {},\r\n },\r\n '.sk-disclosure-title': {\r\n '@apply text-h3-md font-bold': {},\r\n '&-wrapper': {\r\n '@apply gap-16': {},\r\n },\r\n },\r\n },\r\n },\r\n\r\n '&-body': {\r\n '&[data-size=\"sm\"]': {\r\n '@apply pr-12': {},\r\n },\r\n '&[data-size=\"md\"]': {\r\n '@apply pr-12': {},\r\n },\r\n '&[data-size=\"lg\"]': {\r\n '@apply pr-16': {},\r\n },\r\n '@apply text-base': {},\r\n '@apply flex flex-col': {},\r\n '@apply mb-32': {},\r\n '@apply mr-32': {},\r\n '@apply gap-8': {},\r\n '@apply py-0': {},\r\n transitionProperty: 'visibility, height, opacity, padding, margin',\r\n\r\n transitionDuration: '180ms',\r\n\r\n '&[aria-hidden=\"true\"], &[data-hidden=\"true\"]': {\r\n '@apply my-0 invisible max-h-0 opacity-0': {},\r\n },\r\n\r\n '&[aria-hidden=\"false\"], &[data-hidden=\"false\"]': {\r\n '@apply block opacity-100 visible': {},\r\n },\r\n\r\n '&[data-variant=\"alt\"]': {\r\n '@apply mt-24': {},\r\n '&[data-size=\"sm\"]': {\r\n '@apply pr-12': {},\r\n },\r\n '&[data-size=\"md\"]': {\r\n '@apply pr-12': {},\r\n },\r\n '&[data-size=\"lg\"]': {\r\n '@apply pr-16': {},\r\n },\r\n '&[data-has-icon=\"true\"]': {\r\n '&[data-size=\"sm\"]': {\r\n '@apply ml-32': {},\r\n },\r\n '&[data-size=\"md\"]': {\r\n '@apply ml-36': {},\r\n },\r\n '&[data-size=\"lg\"]': {\r\n '@apply ml-48': {},\r\n },\r\n },\r\n },\r\n },\r\n },\r\n '.sk-accordion': {\r\n '&-item': {\r\n '.sk-disclosure': {\r\n transitionProperty: 'margin',\r\n transitionDuration: '180ms',\r\n '@apply border-b-1 border-divider': {},\r\n },\r\n\r\n '&:last-child .sk-disclosure': {\r\n '@apply border-b-transparent': {},\r\n },\r\n },\r\n },\r\n\r\n '&[data-inverted=\"true\"]': {\r\n '&.sk-disclosure': {\r\n '&-icon': {\r\n '@apply text-inverted-dark-secondary': {},\r\n },\r\n\r\n '&[data-disabled=\"true\"]': {\r\n '@apply text-inverted-dark-disabled': {},\r\n '.sk-disclosure-title': {\r\n '@apply text-inverted-dark-disabled': {},\r\n },\r\n },\r\n\r\n '&-title': {\r\n '@apply text-inverted-dark-primary': {},\r\n },\r\n },\r\n '&.sk-accordion': {\r\n '&-item': {\r\n '@apply border-inverted-divider': {},\r\n },\r\n },\r\n },\r\n});\r\n"],"names":["Accordion","svg","transitionProperty","transitionDuration"],"mappings":"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"}
package/dist/esm/components/input.js CHANGED
@@ -167,53 +167,57 @@ function addon() {
167
167
  function inputGroup() {
168
168
  return {
169
169
  '&-group': {
170
- '&-wrapper': {
171
- '@apply flex gap-0 max-w-full': {}
172
- },
173
- '@apply flex relative grow': {},
174
- '@apply items-center': {},
175
- '@apply focus-within:ring': {},
176
- '@apply focus-within:ring-ring': {},
177
- '@apply text-dark-secondary': {},
178
- //Focus
179
- '@apply focus-within:border-input-field-surface': {},
180
- '&:not(:invalid):not([aria-invalid="true"])': {
181
- '@apply focus-within:border-input-field-surface': {}
182
- },
183
- '&&-lg': {
184
- '@apply text-input-large': {},
185
- '@apply rounded-button-lg': {},
186
- '@apply h-48': {}
187
- },
188
- '&&-md': {
189
- '@apply text-input-medium': {},
190
- '@apply rounded-button-md': {},
191
- '@apply h-40': {}
192
- },
193
- '&&-sm': {
194
- '@apply text-input-small': {},
195
- '@apply rounded-button-sm': {},
196
- '@apply h-32': {}
197
- },
198
- '&[data-hasleftaddon="true"]': {
199
- '@apply pl-0': {},
200
- '@apply rounded-l-0': {},
201
- '@apply border-l-0': {}
202
- },
203
- '&[data-hasrightaddon="true"]': {
204
- '@apply pr-0': {},
205
- '@apply rounded-r-0': {},
206
- '@apply border-r-0': {}
170
+ '&-outer': {
171
+ '@apply flex gap-0 max-w-full': {},
172
+ '&[data-hasleftaddon="true"]': {
173
+ '.sk-form-input, .sk-form-input-group-inner': {
174
+ '@apply rounded-l-0': {},
175
+ '@apply border-l-0': {}
176
+ }
177
+ },
178
+ '&[data-hasrightaddon="true"]': {
179
+ '.sk-form-input, .sk-form-input-group-inner': {
180
+ '@apply rounded-r-0': {},
181
+ '@apply border-r-0': {}
182
+ }
183
+ }
207
184
  },
208
- ...inputStandards(),
209
- '.sk-form-input': {
210
- '@apply rounded-0': {},
211
- '@apply border-0': {},
212
- '@apply focus:ring-0': {},
213
- '@apply focus:ring-offset-0': {},
214
- '@apply bg-transparent': {},
215
- '@apply dark:bg-transparent': {},
216
- '@apply grow': {}
185
+ '&-inner': {
186
+ '@apply flex relative grow': {},
187
+ '@apply items-center': {},
188
+ '@apply focus-within:ring': {},
189
+ '@apply focus-within:ring-ring': {},
190
+ '@apply text-dark-secondary': {},
191
+ //Focus
192
+ '@apply focus-within:border-input-field-surface': {},
193
+ '&:not(:invalid):not([aria-invalid="true"])': {
194
+ '@apply focus-within:border-input-field-surface': {}
195
+ },
196
+ '&&-lg': {
197
+ '@apply text-input-large': {},
198
+ '@apply rounded-button-lg': {},
199
+ '@apply h-48': {}
200
+ },
201
+ '&&-md': {
202
+ '@apply text-input-medium': {},
203
+ '@apply rounded-button-md': {},
204
+ '@apply h-40': {}
205
+ },
206
+ '&&-sm': {
207
+ '@apply text-input-small': {},
208
+ '@apply rounded-button-sm': {},
209
+ '@apply h-32': {}
210
+ },
211
+ ...inputStandards(),
212
+ '.sk-form-input': {
213
+ '@apply rounded-0': {},
214
+ '@apply border-0': {},
215
+ '@apply focus:ring-0': {},
216
+ '@apply focus:ring-offset-0': {},
217
+ '@apply bg-transparent': {},
218
+ '@apply dark:bg-transparent': {},
219
+ '@apply grow': {}
220
+ }
217
221
  }
218
222
  }
219
223
  };
package/dist/esm/components/input.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/input.ts"],"sourcesContent":["function calendar() {\r\n return `<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='18' height='18' x='3' y='4' rx='2' ry='2' /><line x1='16' x2='16' y1='2' y2='6' /><line x1='8' x2='8' y1='2' y2='6' /><line x1='3' x2='21' y1='10' y2='10' /></svg>`;\r\n}\r\nfunction clock() {\r\n return `<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10' /><polyline points='12 6 12 12 16 14' /></svg>`;\r\n}\r\n\r\nfunction inputStandards() {\r\n return {\r\n '@apply border-1': {},\r\n '@apply border-input-field-outline': {},\r\n '@apply hover:border-input-field-outline-hover': {},\r\n\r\n '@apply placeholder:text-dark-placeholder': {},\r\n\r\n '@apply bg-input-field-surface': {},\r\n\r\n //Invalid\r\n '&:invalid, &[aria-invalid=\"true\"]': {\r\n '@apply border-2 border-error-surface-primary': {},\r\n },\r\n\r\n //Disabled\r\n '&:disabled, &[aria-disabled=\"true\"]': {\r\n '@apply bg-input-field-surface-disabled': {},\r\n '@apply border-input-field-outline-disabled': {},\r\n '@apply hover:border-input-field-outline-disabled': {},\r\n '@apply text-dark-disabled': {},\r\n },\r\n\r\n //readOnly\r\n '&:read-only': {\r\n '@apply bg-input-field-surface': {},\r\n '@apply border-input-field-outline-disabled': {},\r\n '@apply text-dark-secondary': {},\r\n '@apply placeholder:text-dark-secondary': {},\r\n },\r\n };\r\n}\r\n\r\nfunction addin() {\r\n return {\r\n '&-addin': {\r\n '@apply bg-transparent': {},\r\n '@apply flex': {},\r\n '@apply justify-start items-center': {},\r\n '&-sm': {\r\n '@apply px-6 gap-6': {},\r\n '&.sk-form-input-addin-left': {\r\n '@apply -mr-12': {},\r\n '@apply pl-10': {},\r\n },\r\n '&.sk-form-input-addin-right': {\r\n '@apply -ml-12': {},\r\n '@apply pr-10': {},\r\n },\r\n svg: {\r\n '@apply w-16 h-16': {},\r\n },\r\n },\r\n '&-md': {\r\n '@apply md:px-8 md:gap-8': {},\r\n '&.sk-form-input-addin-left': {\r\n '@apply -mr-16': {},\r\n '@apply pl-12': {},\r\n },\r\n '&.sk-form-input-addin-right': {\r\n '@apply -ml-16': {},\r\n '@apply pr-12': {},\r\n },\r\n svg: {\r\n '@apply w-20 h-20': {},\r\n },\r\n },\r\n '&-lg': {\r\n '@apply md:px-8 md:gap-8': {},\r\n '&.sk-form-input-addin-left': {\r\n '@apply -mr-20': {},\r\n '@apply pl-16': {},\r\n },\r\n '&.sk-form-input-addin-right': {\r\n '@apply -ml-20': {},\r\n '@apply pr-16': {},\r\n },\r\n svg: {\r\n '@apply w-22 h-22': {},\r\n },\r\n },\r\n },\r\n };\r\n}\r\n\r\nfunction addon() {\r\n return {\r\n '&-addon': {\r\n '@apply flex flex-none relative': {},\r\n '@apply items-center': {},\r\n '@apply focus-within:ring': {},\r\n '@apply focus-within:ring-ring': {},\r\n '@apply text-dark-secondary': {},\r\n //Focus\r\n '@apply focus-within:border-input-field-surface': {},\r\n\r\n '&:not(:invalid):not([aria-invalid=\"true\"])': {\r\n '@apply focus-within:border-input-field-surface': {},\r\n },\r\n\r\n '&&-lg': {\r\n '@apply text-input-large': {},\r\n '@apply rounded-button-lg': {},\r\n '@apply h-48': {},\r\n },\r\n '&&-md': {\r\n '@apply text-input-medium': {},\r\n '@apply rounded-button-md': {},\r\n '@apply h-40': {},\r\n },\r\n '&&-sm': {\r\n '@apply text-input-small': {},\r\n '@apply rounded-button-sm': {},\r\n '@apply h-32': {},\r\n },\r\n '&&-left': {\r\n '@apply rounded-r-0': {},\r\n '@apply border-r-0': {},\r\n },\r\n '&&-right': {\r\n '@apply rounded-l-0': {},\r\n '@apply border-l-0': {},\r\n },\r\n ...inputStandards(),\r\n '.sk-form-input': {\r\n '@apply rounded-0': {},\r\n '@apply border-0': {},\r\n '@apply focus:ring-0': {},\r\n '@apply focus:ring-offset-0': {},\r\n '@apply bg-transparent': {},\r\n '@apply dark:bg-transparent': {},\r\n '@apply grow': {},\r\n },\r\n '.sk-form-select': {\r\n '@apply rounded-0': {},\r\n '@apply border-0 hover:border-0': {},\r\n '@apply focus:ring-0 focus:z-10': {},\r\n '@apply focus:ring-offset-0': {},\r\n '@apply bg-transparent hover:bg-transparent': {},\r\n '@apply dark:bg-transparent hover:dark:bg-transparent': {},\r\n '@apply grow': {},\r\n },\r\n '&&-left .sk-form-select': {\r\n '@apply border-r-1 border-r-divider': {},\r\n '@apply focus:border-r-transparent': {},\r\n },\r\n '&&-right .sk-form-select': {\r\n '@apply border-l-1 border-l-divider': {},\r\n '@apply focus:border-l-transparent': {},\r\n },\r\n '.sk-form-combobox': {\r\n '@apply rounded-0': {},\r\n '@apply border-0': {},\r\n '@apply focus-within:ring-0': {},\r\n '@apply focus-within:ring-offset-0': {},\r\n '@apply bg-transparent': {},\r\n '@apply dark:bg-transparent': {},\r\n },\r\n '&&-left .sk-form-combobox': {\r\n '@apply border-r-1 border-r-divider': {},\r\n '@apply focus:border-r-transparent': {},\r\n },\r\n '&&-right .sk-form-combobox': {\r\n '@apply border-l-1 border-l-divider': {},\r\n '@apply focus:border-l-transparent': {},\r\n },\r\n },\r\n };\r\n}\r\nfunction inputGroup() {\r\n return {\r\n '&-group': {\r\n '&-wrapper': {\r\n '@apply flex gap-0 max-w-full': {},\r\n },\r\n '@apply flex relative grow': {},\r\n '@apply items-center': {},\r\n '@apply focus-within:ring': {},\r\n '@apply focus-within:ring-ring': {},\r\n '@apply text-dark-secondary': {},\r\n //Focus\r\n '@apply focus-within:border-input-field-surface': {},\r\n\r\n '&:not(:invalid):not([aria-invalid=\"true\"])': {\r\n '@apply focus-within:border-input-field-surface': {},\r\n },\r\n\r\n '&&-lg': {\r\n '@apply text-input-large': {},\r\n '@apply rounded-button-lg': {},\r\n '@apply h-48': {},\r\n },\r\n '&&-md': {\r\n '@apply text-input-medium': {},\r\n '@apply rounded-button-md': {},\r\n '@apply h-40': {},\r\n },\r\n '&&-sm': {\r\n '@apply text-input-small': {},\r\n '@apply rounded-button-sm': {},\r\n '@apply h-32': {},\r\n },\r\n '&[data-hasleftaddon=\"true\"]': {\r\n '@apply pl-0': {},\r\n '@apply rounded-l-0': {},\r\n '@apply border-l-0': {},\r\n },\r\n '&[data-hasrightaddon=\"true\"]': {\r\n '@apply pr-0': {},\r\n '@apply rounded-r-0': {},\r\n '@apply border-r-0': {},\r\n },\r\n ...inputStandards(),\r\n '.sk-form-input': {\r\n '@apply rounded-0': {},\r\n '@apply border-0': {},\r\n '@apply focus:ring-0': {},\r\n '@apply focus:ring-offset-0': {},\r\n '@apply bg-transparent': {},\r\n '@apply dark:bg-transparent': {},\r\n '@apply grow': {},\r\n },\r\n },\r\n };\r\n}\r\n\r\nfunction timeAndDatePicker() {\r\n return {\r\n '&::-webkit-inner-spin-button, &::-webkit-calendar-picker-indicator': {\r\n '@apply block': {},\r\n '@apply p-0': {},\r\n '@apply pl-6 md:pl-8': {},\r\n '@apply m-0': {},\r\n '@apply bg-none': {},\r\n '@apply bg-dark-secondary': {},\r\n '&.sk-form-input-sm': {\r\n '@apply w-16 h-16': {},\r\n '@apply -mr-2': {},\r\n },\r\n '&.sk-form-input-md': {\r\n '@apply -mr-4': {},\r\n '@apply w-18 h-18': {},\r\n },\r\n '&.sk-form-input-lg': {\r\n '@apply -mr-6': {},\r\n '@apply w-20 h-20': {},\r\n },\r\n },\r\n\r\n '&[type=\"date\"]::-webkit-inner-spin-button, &[type=\"date\"]::-webkit-calendar-picker-indicator': {\r\n mask: [`url(\"data:image/svg+xml;utf-8,${calendar()}\") no-repeat 100% 100%`],\r\n '-webkit-mask': [`url(\"data:image/svg+xml;utf-8,${calendar()}\") no-repeat 100% 100%`],\r\n maskSize: 'contain',\r\n '-webkit-mask-size': 'contain',\r\n },\r\n '&[type=\"datetime-local\"]::-webkit-inner-spin-button, &[type=\"datetime-local\"]::-webkit-calendar-picker-indicator':\r\n {\r\n mask: [`url(\"data:image/svg+xml;utf-8,${calendar()}\") no-repeat 100% 100%`],\r\n '-webkit-mask': [`url(\"data:image/svg+xml;utf-8,${calendar()}\") no-repeat 100% 100%`],\r\n maskSize: 'contain',\r\n '-webkit-mask-size': 'contain',\r\n },\r\n '&[type=\"time\"]::-webkit-inner-spin-button, &[type=\"time\"]::-webkit-calendar-picker-indicator': {\r\n mask: [`url(\"data:image/svg+xml;utf-8,${clock()}\") no-repeat 100% 100%`],\r\n '-webkit-mask': [`url(\"data:image/svg+xml;utf-8,${clock()}\") no-repeat 100% 100%`],\r\n maskSize: 'contain',\r\n '-webkit-mask-size': 'contain',\r\n },\r\n\r\n '&:disabled, &[aria-disabled=\"true\"]': {\r\n '&::-webkit-inner-spin-button, &::-webkit-calendar-picker-indicator': {\r\n '@apply color-black-disabled': {},\r\n },\r\n },\r\n };\r\n}\r\n\r\nexport const Input = () => ({\r\n '.sk-form-input': {\r\n '@apply grow-0': {},\r\n '@apply text-dark-primary': {},\r\n\r\n '&[data-hideextra=\"true\"]': {\r\n '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {\r\n '-webkit-appearance': 'none',\r\n display: 'none',\r\n margin: '0px',\r\n },\r\n '-moz-appearance': 'textfield',\r\n },\r\n\r\n '&&-lg': {\r\n '@apply rounded-button-lg': {},\r\n '@apply px-20': {},\r\n '@apply py-11': {},\r\n '@apply gap-8': {},\r\n '@apply text-input-large': {},\r\n '@apply h-48': {},\r\n },\r\n '&&-md': {\r\n '@apply rounded-button-md': {},\r\n '@apply px-16': {},\r\n '@apply py-7': {},\r\n '@apply gap-8': {},\r\n '@apply text-input-medium': {},\r\n '@apply h-40': {},\r\n },\r\n '&&-sm': {\r\n '@apply rounded-button-sm': {},\r\n '@apply px-12': {},\r\n '@apply py-5': {},\r\n '@apply gap-6': {},\r\n '@apply text-input-small': {},\r\n '@apply h-32': {},\r\n },\r\n '&&-textarea': {\r\n '@apply h-auto': {},\r\n '&-warning': {\r\n '@apply sr-only': {},\r\n },\r\n },\r\n\r\n //Focus\r\n '@apply focus:ring': {},\r\n '@apply focus:ring-ring': {},\r\n '@apply focus:ring-offset': {},\r\n '@apply focus:border-input-field-surface': {},\r\n '@apply focus-within:ring': {},\r\n '@apply focus-within:ring-ring': {},\r\n '@apply focus-within:ring-offset': {},\r\n '@apply focus-within:border-input-field-surface': {},\r\n '&:not(:invalid):not([aria-invalid=\"true\"])': {\r\n '@apply focus:hover:border-input-field-surface': {},\r\n },\r\n ...timeAndDatePicker(),\r\n ...inputStandards(),\r\n ...inputGroup(),\r\n ...addin(),\r\n ...addon(),\r\n },\r\n});\r\n"],"names":["calendar","clock","inputStandards","addin","svg","addon","inputGroup","timeAndDatePicker","mask","maskSize","Input","display","margin"],"mappings":"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"}
1
+ {"version":3,"sources":["../../../src/components/input.ts"],"sourcesContent":["function calendar() {\r\n return `<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='18' height='18' x='3' y='4' rx='2' ry='2' /><line x1='16' x2='16' y1='2' y2='6' /><line x1='8' x2='8' y1='2' y2='6' /><line x1='3' x2='21' y1='10' y2='10' /></svg>`;\r\n}\r\nfunction clock() {\r\n return `<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10' /><polyline points='12 6 12 12 16 14' /></svg>`;\r\n}\r\n\r\nfunction inputStandards() {\r\n return {\r\n '@apply border-1': {},\r\n '@apply border-input-field-outline': {},\r\n '@apply hover:border-input-field-outline-hover': {},\r\n\r\n '@apply placeholder:text-dark-placeholder': {},\r\n\r\n '@apply bg-input-field-surface': {},\r\n\r\n //Invalid\r\n '&:invalid, &[aria-invalid=\"true\"]': {\r\n '@apply border-2 border-error-surface-primary': {},\r\n },\r\n\r\n //Disabled\r\n '&:disabled, &[aria-disabled=\"true\"]': {\r\n '@apply bg-input-field-surface-disabled': {},\r\n '@apply border-input-field-outline-disabled': {},\r\n '@apply hover:border-input-field-outline-disabled': {},\r\n '@apply text-dark-disabled': {},\r\n },\r\n\r\n //readOnly\r\n '&:read-only': {\r\n '@apply bg-input-field-surface': {},\r\n '@apply border-input-field-outline-disabled': {},\r\n '@apply text-dark-secondary': {},\r\n '@apply placeholder:text-dark-secondary': {},\r\n },\r\n };\r\n}\r\n\r\nfunction addin() {\r\n return {\r\n '&-addin': {\r\n '@apply bg-transparent': {},\r\n '@apply flex': {},\r\n '@apply justify-start items-center': {},\r\n '&-sm': {\r\n '@apply px-6 gap-6': {},\r\n '&.sk-form-input-addin-left': {\r\n '@apply -mr-12': {},\r\n '@apply pl-10': {},\r\n },\r\n '&.sk-form-input-addin-right': {\r\n '@apply -ml-12': {},\r\n '@apply pr-10': {},\r\n },\r\n svg: {\r\n '@apply w-16 h-16': {},\r\n },\r\n },\r\n '&-md': {\r\n '@apply md:px-8 md:gap-8': {},\r\n '&.sk-form-input-addin-left': {\r\n '@apply -mr-16': {},\r\n '@apply pl-12': {},\r\n },\r\n '&.sk-form-input-addin-right': {\r\n '@apply -ml-16': {},\r\n '@apply pr-12': {},\r\n },\r\n svg: {\r\n '@apply w-20 h-20': {},\r\n },\r\n },\r\n '&-lg': {\r\n '@apply md:px-8 md:gap-8': {},\r\n '&.sk-form-input-addin-left': {\r\n '@apply -mr-20': {},\r\n '@apply pl-16': {},\r\n },\r\n '&.sk-form-input-addin-right': {\r\n '@apply -ml-20': {},\r\n '@apply pr-16': {},\r\n },\r\n svg: {\r\n '@apply w-22 h-22': {},\r\n },\r\n },\r\n },\r\n };\r\n}\r\n\r\nfunction addon() {\r\n return {\r\n '&-addon': {\r\n '@apply flex flex-none relative': {},\r\n '@apply items-center': {},\r\n '@apply focus-within:ring': {},\r\n '@apply focus-within:ring-ring': {},\r\n '@apply text-dark-secondary': {},\r\n //Focus\r\n '@apply focus-within:border-input-field-surface': {},\r\n\r\n '&:not(:invalid):not([aria-invalid=\"true\"])': {\r\n '@apply focus-within:border-input-field-surface': {},\r\n },\r\n\r\n '&&-lg': {\r\n '@apply text-input-large': {},\r\n '@apply rounded-button-lg': {},\r\n '@apply h-48': {},\r\n },\r\n '&&-md': {\r\n '@apply text-input-medium': {},\r\n '@apply rounded-button-md': {},\r\n '@apply h-40': {},\r\n },\r\n '&&-sm': {\r\n '@apply text-input-small': {},\r\n '@apply rounded-button-sm': {},\r\n '@apply h-32': {},\r\n },\r\n '&&-left': {\r\n '@apply rounded-r-0': {},\r\n '@apply border-r-0': {},\r\n },\r\n '&&-right': {\r\n '@apply rounded-l-0': {},\r\n '@apply border-l-0': {},\r\n },\r\n ...inputStandards(),\r\n '.sk-form-input': {\r\n '@apply rounded-0': {},\r\n '@apply border-0': {},\r\n '@apply focus:ring-0': {},\r\n '@apply focus:ring-offset-0': {},\r\n '@apply bg-transparent': {},\r\n '@apply dark:bg-transparent': {},\r\n '@apply grow': {},\r\n },\r\n '.sk-form-select': {\r\n '@apply rounded-0': {},\r\n '@apply border-0 hover:border-0': {},\r\n '@apply focus:ring-0 focus:z-10': {},\r\n '@apply focus:ring-offset-0': {},\r\n '@apply bg-transparent hover:bg-transparent': {},\r\n '@apply dark:bg-transparent hover:dark:bg-transparent': {},\r\n '@apply grow': {},\r\n },\r\n '&&-left .sk-form-select': {\r\n '@apply border-r-1 border-r-divider': {},\r\n '@apply focus:border-r-transparent': {},\r\n },\r\n '&&-right .sk-form-select': {\r\n '@apply border-l-1 border-l-divider': {},\r\n '@apply focus:border-l-transparent': {},\r\n },\r\n '.sk-form-combobox': {\r\n '@apply rounded-0': {},\r\n '@apply border-0': {},\r\n '@apply focus-within:ring-0': {},\r\n '@apply focus-within:ring-offset-0': {},\r\n '@apply bg-transparent': {},\r\n '@apply dark:bg-transparent': {},\r\n },\r\n '&&-left .sk-form-combobox': {\r\n '@apply border-r-1 border-r-divider': {},\r\n '@apply focus:border-r-transparent': {},\r\n },\r\n '&&-right .sk-form-combobox': {\r\n '@apply border-l-1 border-l-divider': {},\r\n '@apply focus:border-l-transparent': {},\r\n },\r\n },\r\n };\r\n}\r\nfunction inputGroup() {\r\n return {\r\n '&-group': {\r\n '&-outer': {\r\n '@apply flex gap-0 max-w-full': {},\r\n '&[data-hasleftaddon=\"true\"]': {\r\n '.sk-form-input, .sk-form-input-group-inner': {\r\n '@apply rounded-l-0': {},\r\n '@apply border-l-0': {},\r\n },\r\n },\r\n '&[data-hasrightaddon=\"true\"]': {\r\n '.sk-form-input, .sk-form-input-group-inner': {\r\n '@apply rounded-r-0': {},\r\n '@apply border-r-0': {},\r\n },\r\n },\r\n },\r\n '&-inner': {\r\n '@apply flex relative grow': {},\r\n '@apply items-center': {},\r\n '@apply focus-within:ring': {},\r\n '@apply focus-within:ring-ring': {},\r\n '@apply text-dark-secondary': {},\r\n //Focus\r\n '@apply focus-within:border-input-field-surface': {},\r\n\r\n '&:not(:invalid):not([aria-invalid=\"true\"])': {\r\n '@apply focus-within:border-input-field-surface': {},\r\n },\r\n\r\n '&&-lg': {\r\n '@apply text-input-large': {},\r\n '@apply rounded-button-lg': {},\r\n '@apply h-48': {},\r\n },\r\n '&&-md': {\r\n '@apply text-input-medium': {},\r\n '@apply rounded-button-md': {},\r\n '@apply h-40': {},\r\n },\r\n '&&-sm': {\r\n '@apply text-input-small': {},\r\n '@apply rounded-button-sm': {},\r\n '@apply h-32': {},\r\n },\r\n\r\n ...inputStandards(),\r\n '.sk-form-input': {\r\n '@apply rounded-0': {},\r\n '@apply border-0': {},\r\n '@apply focus:ring-0': {},\r\n '@apply focus:ring-offset-0': {},\r\n '@apply bg-transparent': {},\r\n '@apply dark:bg-transparent': {},\r\n '@apply grow': {},\r\n },\r\n },\r\n },\r\n };\r\n}\r\n\r\nfunction timeAndDatePicker() {\r\n return {\r\n '&::-webkit-inner-spin-button, &::-webkit-calendar-picker-indicator': {\r\n '@apply block': {},\r\n '@apply p-0': {},\r\n '@apply pl-6 md:pl-8': {},\r\n '@apply m-0': {},\r\n '@apply bg-none': {},\r\n '@apply bg-dark-secondary': {},\r\n '&.sk-form-input-sm': {\r\n '@apply w-16 h-16': {},\r\n '@apply -mr-2': {},\r\n },\r\n '&.sk-form-input-md': {\r\n '@apply -mr-4': {},\r\n '@apply w-18 h-18': {},\r\n },\r\n '&.sk-form-input-lg': {\r\n '@apply -mr-6': {},\r\n '@apply w-20 h-20': {},\r\n },\r\n },\r\n\r\n '&[type=\"date\"]::-webkit-inner-spin-button, &[type=\"date\"]::-webkit-calendar-picker-indicator': {\r\n mask: [`url(\"data:image/svg+xml;utf-8,${calendar()}\") no-repeat 100% 100%`],\r\n '-webkit-mask': [`url(\"data:image/svg+xml;utf-8,${calendar()}\") no-repeat 100% 100%`],\r\n maskSize: 'contain',\r\n '-webkit-mask-size': 'contain',\r\n },\r\n '&[type=\"datetime-local\"]::-webkit-inner-spin-button, &[type=\"datetime-local\"]::-webkit-calendar-picker-indicator':\r\n {\r\n mask: [`url(\"data:image/svg+xml;utf-8,${calendar()}\") no-repeat 100% 100%`],\r\n '-webkit-mask': [`url(\"data:image/svg+xml;utf-8,${calendar()}\") no-repeat 100% 100%`],\r\n maskSize: 'contain',\r\n '-webkit-mask-size': 'contain',\r\n },\r\n '&[type=\"time\"]::-webkit-inner-spin-button, &[type=\"time\"]::-webkit-calendar-picker-indicator': {\r\n mask: [`url(\"data:image/svg+xml;utf-8,${clock()}\") no-repeat 100% 100%`],\r\n '-webkit-mask': [`url(\"data:image/svg+xml;utf-8,${clock()}\") no-repeat 100% 100%`],\r\n maskSize: 'contain',\r\n '-webkit-mask-size': 'contain',\r\n },\r\n\r\n '&:disabled, &[aria-disabled=\"true\"]': {\r\n '&::-webkit-inner-spin-button, &::-webkit-calendar-picker-indicator': {\r\n '@apply color-black-disabled': {},\r\n },\r\n },\r\n };\r\n}\r\n\r\nexport const Input = () => ({\r\n '.sk-form-input': {\r\n '@apply grow-0': {},\r\n '@apply text-dark-primary': {},\r\n\r\n '&[data-hideextra=\"true\"]': {\r\n '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {\r\n '-webkit-appearance': 'none',\r\n display: 'none',\r\n margin: '0px',\r\n },\r\n '-moz-appearance': 'textfield',\r\n },\r\n\r\n '&&-lg': {\r\n '@apply rounded-button-lg': {},\r\n '@apply px-20': {},\r\n '@apply py-11': {},\r\n '@apply gap-8': {},\r\n '@apply text-input-large': {},\r\n '@apply h-48': {},\r\n },\r\n '&&-md': {\r\n '@apply rounded-button-md': {},\r\n '@apply px-16': {},\r\n '@apply py-7': {},\r\n '@apply gap-8': {},\r\n '@apply text-input-medium': {},\r\n '@apply h-40': {},\r\n },\r\n '&&-sm': {\r\n '@apply rounded-button-sm': {},\r\n '@apply px-12': {},\r\n '@apply py-5': {},\r\n '@apply gap-6': {},\r\n '@apply text-input-small': {},\r\n '@apply h-32': {},\r\n },\r\n '&&-textarea': {\r\n '@apply h-auto': {},\r\n '&-warning': {\r\n '@apply sr-only': {},\r\n },\r\n },\r\n\r\n //Focus\r\n '@apply focus:ring': {},\r\n '@apply focus:ring-ring': {},\r\n '@apply focus:ring-offset': {},\r\n '@apply focus:border-input-field-surface': {},\r\n '@apply focus-within:ring': {},\r\n '@apply focus-within:ring-ring': {},\r\n '@apply focus-within:ring-offset': {},\r\n '@apply focus-within:border-input-field-surface': {},\r\n '&:not(:invalid):not([aria-invalid=\"true\"])': {\r\n '@apply focus:hover:border-input-field-surface': {},\r\n },\r\n ...timeAndDatePicker(),\r\n ...inputStandards(),\r\n ...inputGroup(),\r\n ...addin(),\r\n ...addon(),\r\n },\r\n});\r\n"],"names":["calendar","clock","inputStandards","addin","svg","addon","inputGroup","timeAndDatePicker","mask","maskSize","Input","display","margin"],"mappings":"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"}
package/dist/esm/components/progress-stepper.js CHANGED
@@ -1,68 +1,90 @@
1
1
  export const ProgressStepper = ()=>({
2
2
  '.sk-progress-stepper': {
3
- '@apply flex justify-between': {},
4
- hr: {
5
- '@apply w-full mt-19': {}
3
+ '@apply flex justify-between items-center': {},
4
+ '&.horizontal': {
5
+ '@apply flex-row gap-16': {}
6
+ },
7
+ '&.vertical': {
8
+ '@apply flex-col gap-4 h-full': {}
6
9
  },
7
10
  '&-step': {
8
- '@apply flex flex-col items-center': {},
9
- '@apply gap-4': {},
10
- '@apply w-auto': {},
11
- '@apply shrink-0': {},
11
+ '@apply flex items-center': {},
12
12
  '@apply text-base leading-base text-dark-primary font-normal': {},
13
- svg: {
14
- '@apply w-20 h-20': {}
15
- },
16
13
  '&-wrapper': {
17
- '@apply flex flex-row shrink w-full gap-4': {},
18
- hr: {
19
- '@apply w-full grow shrink mt-19': {}
20
- }
21
- },
22
- '&:first-of-type': {
23
- '.sk-divider:first-of-type': {
24
- '@apply invisible': {}
25
- }
26
- },
27
- '&:last-of-type': {
28
- '.sk-divider:last-of-type': {
29
- '@apply invisible': {}
14
+ '@apply flex items-center gap-8': {},
15
+ '&&-top': {
16
+ '@apply flex-col-reverse': {}
17
+ },
18
+ '&&-right': {
19
+ '@apply flex-row': {}
20
+ },
21
+ '&&-bottom': {
22
+ '@apply flex-col': {}
23
+ },
24
+ '&&-left': {
25
+ '@apply flex-row-reverse': {}
30
26
  }
31
27
  },
32
28
  '&-box': {
33
- '@apply box-border': {},
34
- '@apply shrink-0': {},
35
- '@apply h-40 w-40': {},
36
- '@apply bg-secondary-surface': {},
29
+ '@apply shrink-0 rounded-lg h-32 w-32 bg-tertiary-surface': {},
37
30
  '@apply flex justify-center items-center': {},
38
- '@apply text-label-medium': {},
39
- '@apply border-2 border-secondary-outline': {},
40
- '@apply text-dark-secondary': {},
41
- '@apply rounded-button-sm md:rounded-button-md xl:rounded-button-lg': {},
42
31
  '&[data-rounded="true"]': {
43
32
  '@apply rounded-full': {}
44
33
  },
45
- '&&-sm': {
46
- '@apply h-32 w-32 min-h-24 max-h-32 min-w-24 max-w-32': {},
47
- '@apply text-label-small': {}
34
+ '&.sm': {
35
+ '@apply h-24 w-24 text-label-small': {}
48
36
  },
49
- '&&-md': {
50
- '@apply h-40 w-40 min-h-32 max-h-40 min-w-32 max-w-40': {}
37
+ '&.md': {
38
+ '@apply h-32 w-32': {}
39
+ },
40
+ '&-icon': {
41
+ '&.sm svg': {
42
+ '@apply w-16 h-16': {}
43
+ },
44
+ '&.md svg': {
45
+ '@apply w-20 h-20': {}
46
+ }
47
+ }
48
+ },
49
+ '&&-vertical': {
50
+ '@apply flex-col': {}
51
+ },
52
+ '&&-horizontal': {
53
+ '@apply flex-row gap-16': {}
54
+ },
55
+ '&&-grow': {
56
+ '@apply grow': {}
57
+ },
58
+ '&&-grow-0': {
59
+ '@apply grow-0': {}
60
+ },
61
+ '&-divider': {
62
+ '&.horizontal': {
63
+ '@apply flex w-full': {}
64
+ },
65
+ '&.vertical': {
66
+ '@apply flex w-auto h-full': {}
51
67
  }
52
68
  },
53
69
  '&[data-progress="current"]': {
54
70
  '@apply font-bold': {},
55
71
  '.sk-progress-stepper-step-box': {
56
- '@apply border-vattjom-surface-primary': {},
57
- '@apply bg-vattjom-surface-primary': {},
58
- '@apply text-vattjom-text-secondary': {}
72
+ '@apply bg-primary-surface text-light-primary': {}
59
73
  }
60
74
  },
61
75
  '&[data-progress="done"]': {
62
76
  '.sk-progress-stepper-step-box': {
63
- '@apply border-success-surface-primary': {},
64
- '@apply bg-success-surface-primary': {},
65
- '@apply text-success-text-secondary': {}
77
+ '@apply bg-gronsta-surface-accent text-gronsta-text-primary': {}
78
+ }
79
+ },
80
+ '&[data-white-space="no-wrap"]': {
81
+ '.sk-progress-stepper-step-wrapper p': {
82
+ '@apply whitespace-nowrap': {}
83
+ }
84
+ },
85
+ '&[data-white-space="normal"]': {
86
+ '.sk-progress-stepper-step-wrapper p': {
87
+ '@apply whitespace-normal': {}
66
88
  }
67
89
  }
68
90
  }
package/dist/esm/components/progress-stepper.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/progress-stepper.ts"],"sourcesContent":["export const ProgressStepper = () => ({\r\n '.sk-progress-stepper': {\r\n '@apply flex justify-between': {},\r\n hr: {\r\n '@apply w-full mt-19': {},\r\n },\r\n '&-step': {\r\n '@apply flex flex-col items-center': {},\r\n '@apply gap-4': {},\r\n '@apply w-auto': {},\r\n '@apply shrink-0': {},\r\n '@apply text-base leading-base text-dark-primary font-normal': {},\r\n svg: {\r\n '@apply w-20 h-20': {},\r\n },\r\n '&-wrapper': {\r\n '@apply flex flex-row shrink w-full gap-4': {},\r\n hr: {\r\n '@apply w-full grow shrink mt-19': {},\r\n },\r\n },\r\n '&:first-of-type': {\r\n '.sk-divider:first-of-type': {\r\n '@apply invisible': {},\r\n },\r\n },\r\n '&:last-of-type': {\r\n '.sk-divider:last-of-type': {\r\n '@apply invisible': {},\r\n },\r\n },\r\n '&-box': {\r\n '@apply box-border': {},\r\n '@apply shrink-0': {},\r\n '@apply h-40 w-40': {},\r\n '@apply bg-secondary-surface': {},\r\n '@apply flex justify-center items-center': {},\r\n '@apply text-label-medium': {},\r\n '@apply border-2 border-secondary-outline': {},\r\n '@apply text-dark-secondary': {},\r\n '@apply rounded-button-sm md:rounded-button-md xl:rounded-button-lg': {},\r\n '&[data-rounded=\"true\"]': {\r\n '@apply rounded-full': {},\r\n },\r\n\r\n '&&-sm': {\r\n '@apply h-32 w-32 min-h-24 max-h-32 min-w-24 max-w-32': {},\r\n '@apply text-label-small': {},\r\n },\r\n '&&-md': {\r\n '@apply h-40 w-40 min-h-32 max-h-40 min-w-32 max-w-40': {},\r\n },\r\n },\r\n '&[data-progress=\"current\"]': {\r\n '@apply font-bold': {},\r\n '.sk-progress-stepper-step-box': {\r\n '@apply border-vattjom-surface-primary': {},\r\n '@apply bg-vattjom-surface-primary': {},\r\n '@apply text-vattjom-text-secondary': {},\r\n },\r\n },\r\n '&[data-progress=\"done\"]': {\r\n '.sk-progress-stepper-step-box': {\r\n '@apply border-success-surface-primary': {},\r\n '@apply bg-success-surface-primary': {},\r\n '@apply text-success-text-secondary': {},\r\n },\r\n },\r\n },\r\n },\r\n});\r\n"],"names":["ProgressStepper","hr","svg"],"mappings":"AAAA,OAAO,MAAMA,kBAAkB,IAAO,CAAA;QACpC,wBAAwB;YACtB,+BAA+B,CAAC;YAChCC,IAAI;gBACF,uBAAuB,CAAC;YAC1B;YACA,UAAU;gBACR,qCAAqC,CAAC;gBACtC,gBAAgB,CAAC;gBACjB,iBAAiB,CAAC;gBAClB,mBAAmB,CAAC;gBACpB,+DAA+D,CAAC;gBAChEC,KAAK;oBACH,oBAAoB,CAAC;gBACvB;gBACA,aAAa;oBACX,4CAA4C,CAAC;oBAC7CD,IAAI;wBACF,mCAAmC,CAAC;oBACtC;gBACF;gBACA,mBAAmB;oBACjB,6BAA6B;wBAC3B,oBAAoB,CAAC;oBACvB;gBACF;gBACA,kBAAkB;oBAChB,4BAA4B;wBAC1B,oBAAoB,CAAC;oBACvB;gBACF;gBACA,SAAS;oBACP,qBAAqB,CAAC;oBACtB,mBAAmB,CAAC;oBACpB,oBAAoB,CAAC;oBACrB,+BAA+B,CAAC;oBAChC,2CAA2C,CAAC;oBAC5C,4BAA4B,CAAC;oBAC7B,4CAA4C,CAAC;oBAC7C,8BAA8B,CAAC;oBAC/B,sEAAsE,CAAC;oBACvE,0BAA0B;wBACxB,uBAAuB,CAAC;oBAC1B;oBAEA,SAAS;wBACP,wDAAwD,CAAC;wBACzD,2BAA2B,CAAC;oBAC9B;oBACA,SAAS;wBACP,wDAAwD,CAAC;oBAC3D;gBACF;gBACA,8BAA8B;oBAC5B,oBAAoB,CAAC;oBACrB,iCAAiC;wBAC/B,yCAAyC,CAAC;wBAC1C,qCAAqC,CAAC;wBACtC,sCAAsC,CAAC;oBACzC;gBACF;gBACA,2BAA2B;oBACzB,iCAAiC;wBAC/B,yCAAyC,CAAC;wBAC1C,qCAAqC,CAAC;wBACtC,sCAAsC,CAAC;oBACzC;gBACF;YACF;QACF;IACF,CAAA,EAAG"}
1
+ {"version":3,"sources":["../../../src/components/progress-stepper.ts"],"sourcesContent":["export const ProgressStepper = () => ({\r\n '.sk-progress-stepper': {\r\n '@apply flex justify-between items-center': {},\r\n '&.horizontal': { '@apply flex-row gap-16': {} },\r\n '&.vertical': { '@apply flex-col gap-4 h-full': {} },\r\n '&-step': {\r\n '@apply flex items-center': {},\r\n '@apply text-base leading-base text-dark-primary font-normal': {},\r\n '&-wrapper': {\r\n '@apply flex items-center gap-8': {},\r\n '&&-top': {\r\n '@apply flex-col-reverse': {},\r\n },\r\n '&&-right': {\r\n '@apply flex-row': {},\r\n },\r\n '&&-bottom': {\r\n '@apply flex-col': {},\r\n },\r\n '&&-left': {\r\n '@apply flex-row-reverse': {},\r\n },\r\n },\r\n '&-box': {\r\n '@apply shrink-0 rounded-lg h-32 w-32 bg-tertiary-surface': {},\r\n '@apply flex justify-center items-center': {},\r\n '&[data-rounded=\"true\"]': {\r\n '@apply rounded-full': {},\r\n },\r\n '&.sm': {\r\n '@apply h-24 w-24 text-label-small': {},\r\n },\r\n '&.md': {\r\n '@apply h-32 w-32': {},\r\n },\r\n '&-icon': {\r\n '&.sm svg': {\r\n '@apply w-16 h-16': {},\r\n },\r\n '&.md svg': {\r\n '@apply w-20 h-20': {},\r\n },\r\n },\r\n },\r\n '&&-vertical': {\r\n '@apply flex-col': {},\r\n },\r\n '&&-horizontal': {\r\n '@apply flex-row gap-16': {},\r\n },\r\n '&&-grow': {\r\n '@apply grow': {},\r\n },\r\n '&&-grow-0': {\r\n '@apply grow-0': {},\r\n },\r\n '&-divider': {\r\n '&.horizontal': {\r\n '@apply flex w-full': {},\r\n },\r\n '&.vertical': {\r\n '@apply flex w-auto h-full': {},\r\n },\r\n },\r\n '&[data-progress=\"current\"]': {\r\n '@apply font-bold': {},\r\n '.sk-progress-stepper-step-box': {\r\n '@apply bg-primary-surface text-light-primary': {},\r\n },\r\n },\r\n '&[data-progress=\"done\"]': {\r\n '.sk-progress-stepper-step-box': {\r\n '@apply bg-gronsta-surface-accent text-gronsta-text-primary': {},\r\n },\r\n },\r\n '&[data-white-space=\"no-wrap\"]': {\r\n '.sk-progress-stepper-step-wrapper p': {\r\n '@apply whitespace-nowrap': {},\r\n },\r\n },\r\n '&[data-white-space=\"normal\"]': {\r\n '.sk-progress-stepper-step-wrapper p': {\r\n '@apply whitespace-normal': {},\r\n },\r\n },\r\n },\r\n },\r\n});\r\n"],"names":["ProgressStepper"],"mappings":"AAAA,OAAO,MAAMA,kBAAkB,IAAO,CAAA;QACpC,wBAAwB;YACtB,4CAA4C,CAAC;YAC7C,gBAAgB;gBAAE,0BAA0B,CAAC;YAAE;YAC/C,cAAc;gBAAE,gCAAgC,CAAC;YAAE;YACnD,UAAU;gBACR,4BAA4B,CAAC;gBAC7B,+DAA+D,CAAC;gBAChE,aAAa;oBACX,kCAAkC,CAAC;oBACnC,UAAU;wBACR,2BAA2B,CAAC;oBAC9B;oBACA,YAAY;wBACV,mBAAmB,CAAC;oBACtB;oBACA,aAAa;wBACX,mBAAmB,CAAC;oBACtB;oBACA,WAAW;wBACT,2BAA2B,CAAC;oBAC9B;gBACF;gBACA,SAAS;oBACP,4DAA4D,CAAC;oBAC7D,2CAA2C,CAAC;oBAC5C,0BAA0B;wBACxB,uBAAuB,CAAC;oBAC1B;oBACA,QAAQ;wBACN,qCAAqC,CAAC;oBACxC;oBACA,QAAQ;wBACN,oBAAoB,CAAC;oBACvB;oBACA,UAAU;wBACR,YAAY;4BACV,oBAAoB,CAAC;wBACvB;wBACA,YAAY;4BACV,oBAAoB,CAAC;wBACvB;oBACF;gBACF;gBACA,eAAe;oBACb,mBAAmB,CAAC;gBACtB;gBACA,iBAAiB;oBACf,0BAA0B,CAAC;gBAC7B;gBACA,WAAW;oBACT,eAAe,CAAC;gBAClB;gBACA,aAAa;oBACX,iBAAiB,CAAC;gBACpB;gBACA,aAAa;oBACX,gBAAgB;wBACd,sBAAsB,CAAC;oBACzB;oBACA,cAAc;wBACZ,6BAA6B,CAAC;oBAChC;gBACF;gBACA,8BAA8B;oBAC5B,oBAAoB,CAAC;oBACrB,iCAAiC;wBAC/B,gDAAgD,CAAC;oBACnD;gBACF;gBACA,2BAA2B;oBACzB,iCAAiC;wBAC/B,8DAA8D,CAAC;oBACjE;gBACF;gBACA,iCAAiC;oBAC/B,uCAAuC;wBACrC,4BAA4B,CAAC;oBAC/B;gBACF;gBACA,gCAAgC;oBAC9B,uCAAuC;wBACrC,4BAA4B,CAAC;oBAC/B;gBACF;YACF;QACF;IACF,CAAA,EAAG"}
package/dist/types/components/accordion.d.ts CHANGED
@@ -137,7 +137,7 @@ export declare const Accordion: () => {
137
137
  '@apply my-0 invisible max-h-0 opacity-0': {};
138
138
  };
139
139
  '&[aria-hidden="false"], &[data-hidden="false"]': {
140
- '@apply block max-h-screen opacity-100 visible': {};
140
+ '@apply block opacity-100 visible': {};
141
141
  };
142
142
  '&[data-variant="alt"]': {
143
143
  '@apply mt-24': {};
package/dist/types/components/input.d.ts CHANGED
@@ -144,71 +144,75 @@ export declare const Input: () => {
144
144
  };
145
145
  };
146
146
  '&-group': {
147
- '.sk-form-input': {
148
- '@apply rounded-0': {};
149
- '@apply border-0': {};
150
- '@apply focus:ring-0': {};
151
- '@apply focus:ring-offset-0': {};
152
- '@apply bg-transparent': {};
153
- '@apply dark:bg-transparent': {};
154
- '@apply grow': {};
155
- };
156
- '@apply border-1': {};
157
- '@apply border-input-field-outline': {};
158
- '@apply hover:border-input-field-outline-hover': {};
159
- '@apply placeholder:text-dark-placeholder': {};
160
- '@apply bg-input-field-surface': {};
161
- '&:invalid, &[aria-invalid="true"]': {
162
- '@apply border-2 border-error-surface-primary': {};
163
- };
164
- '&:disabled, &[aria-disabled="true"]': {
165
- '@apply bg-input-field-surface-disabled': {};
166
- '@apply border-input-field-outline-disabled': {};
167
- '@apply hover:border-input-field-outline-disabled': {};
168
- '@apply text-dark-disabled': {};
147
+ '&-outer': {
148
+ '@apply flex gap-0 max-w-full': {};
149
+ '&[data-hasleftaddon="true"]': {
150
+ '.sk-form-input, .sk-form-input-group-inner': {
151
+ '@apply rounded-l-0': {};
152
+ '@apply border-l-0': {};
153
+ };
154
+ };
155
+ '&[data-hasrightaddon="true"]': {
156
+ '.sk-form-input, .sk-form-input-group-inner': {
157
+ '@apply rounded-r-0': {};
158
+ '@apply border-r-0': {};
159
+ };
160
+ };
169
161
  };
170
- '&:read-only': {
162
+ '&-inner': {
163
+ '.sk-form-input': {
164
+ '@apply rounded-0': {};
165
+ '@apply border-0': {};
166
+ '@apply focus:ring-0': {};
167
+ '@apply focus:ring-offset-0': {};
168
+ '@apply bg-transparent': {};
169
+ '@apply dark:bg-transparent': {};
170
+ '@apply grow': {};
171
+ };
172
+ '@apply border-1': {};
173
+ '@apply border-input-field-outline': {};
174
+ '@apply hover:border-input-field-outline-hover': {};
175
+ '@apply placeholder:text-dark-placeholder': {};
171
176
  '@apply bg-input-field-surface': {};
172
- '@apply border-input-field-outline-disabled': {};
177
+ '&:invalid, &[aria-invalid="true"]': {
178
+ '@apply border-2 border-error-surface-primary': {};
179
+ };
180
+ '&:disabled, &[aria-disabled="true"]': {
181
+ '@apply bg-input-field-surface-disabled': {};
182
+ '@apply border-input-field-outline-disabled': {};
183
+ '@apply hover:border-input-field-outline-disabled': {};
184
+ '@apply text-dark-disabled': {};
185
+ };
186
+ '&:read-only': {
187
+ '@apply bg-input-field-surface': {};
188
+ '@apply border-input-field-outline-disabled': {};
189
+ '@apply text-dark-secondary': {};
190
+ '@apply placeholder:text-dark-secondary': {};
191
+ };
192
+ '@apply flex relative grow': {};
193
+ '@apply items-center': {};
194
+ '@apply focus-within:ring': {};
195
+ '@apply focus-within:ring-ring': {};
173
196
  '@apply text-dark-secondary': {};
174
- '@apply placeholder:text-dark-secondary': {};
175
- };
176
- '&-wrapper': {
177
- '@apply flex gap-0 max-w-full': {};
178
- };
179
- '@apply flex relative grow': {};
180
- '@apply items-center': {};
181
- '@apply focus-within:ring': {};
182
- '@apply focus-within:ring-ring': {};
183
- '@apply text-dark-secondary': {};
184
- '@apply focus-within:border-input-field-surface': {};
185
- '&:not(:invalid):not([aria-invalid="true"])': {
186
197
  '@apply focus-within:border-input-field-surface': {};
187
- };
188
- '&&-lg': {
189
- '@apply text-input-large': {};
190
- '@apply rounded-button-lg': {};
191
- '@apply h-48': {};
192
- };
193
- '&&-md': {
194
- '@apply text-input-medium': {};
195
- '@apply rounded-button-md': {};
196
- '@apply h-40': {};
197
- };
198
- '&&-sm': {
199
- '@apply text-input-small': {};
200
- '@apply rounded-button-sm': {};
201
- '@apply h-32': {};
202
- };
203
- '&[data-hasleftaddon="true"]': {
204
- '@apply pl-0': {};
205
- '@apply rounded-l-0': {};
206
- '@apply border-l-0': {};
207
- };
208
- '&[data-hasrightaddon="true"]': {
209
- '@apply pr-0': {};
210
- '@apply rounded-r-0': {};
211
- '@apply border-r-0': {};
198
+ '&:not(:invalid):not([aria-invalid="true"])': {
199
+ '@apply focus-within:border-input-field-surface': {};
200
+ };
201
+ '&&-lg': {
202
+ '@apply text-input-large': {};
203
+ '@apply rounded-button-lg': {};
204
+ '@apply h-48': {};
205
+ };
206
+ '&&-md': {
207
+ '@apply text-input-medium': {};
208
+ '@apply rounded-button-md': {};
209
+ '@apply h-40': {};
210
+ };
211
+ '&&-sm': {
212
+ '@apply text-input-small': {};
213
+ '@apply rounded-button-sm': {};
214
+ '@apply h-32': {};
215
+ };
212
216
  };
213
217
  };
214
218
  '@apply border-1': {};
package/dist/types/components/progress-stepper.d.ts CHANGED
@@ -1,68 +1,90 @@
1
1
  export declare const ProgressStepper: () => {
2
2
  '.sk-progress-stepper': {
3
- '@apply flex justify-between': {};
4
- hr: {
5
- '@apply w-full mt-19': {};
3
+ '@apply flex justify-between items-center': {};
4
+ '&.horizontal': {
5
+ '@apply flex-row gap-16': {};
6
+ };
7
+ '&.vertical': {
8
+ '@apply flex-col gap-4 h-full': {};
6
9
  };
7
10
  '&-step': {
8
- '@apply flex flex-col items-center': {};
9
- '@apply gap-4': {};
10
- '@apply w-auto': {};
11
- '@apply shrink-0': {};
11
+ '@apply flex items-center': {};
12
12
  '@apply text-base leading-base text-dark-primary font-normal': {};
13
- svg: {
14
- '@apply w-20 h-20': {};
15
- };
16
13
  '&-wrapper': {
17
- '@apply flex flex-row shrink w-full gap-4': {};
18
- hr: {
19
- '@apply w-full grow shrink mt-19': {};
14
+ '@apply flex items-center gap-8': {};
15
+ '&&-top': {
16
+ '@apply flex-col-reverse': {};
20
17
  };
21
- };
22
- '&:first-of-type': {
23
- '.sk-divider:first-of-type': {
24
- '@apply invisible': {};
18
+ '&&-right': {
19
+ '@apply flex-row': {};
25
20
  };
26
- };
27
- '&:last-of-type': {
28
- '.sk-divider:last-of-type': {
29
- '@apply invisible': {};
21
+ '&&-bottom': {
22
+ '@apply flex-col': {};
23
+ };
24
+ '&&-left': {
25
+ '@apply flex-row-reverse': {};
30
26
  };
31
27
  };
32
28
  '&-box': {
33
- '@apply box-border': {};
34
- '@apply shrink-0': {};
35
- '@apply h-40 w-40': {};
36
- '@apply bg-secondary-surface': {};
29
+ '@apply shrink-0 rounded-lg h-32 w-32 bg-tertiary-surface': {};
37
30
  '@apply flex justify-center items-center': {};
38
- '@apply text-label-medium': {};
39
- '@apply border-2 border-secondary-outline': {};
40
- '@apply text-dark-secondary': {};
41
- '@apply rounded-button-sm md:rounded-button-md xl:rounded-button-lg': {};
42
31
  '&[data-rounded="true"]': {
43
32
  '@apply rounded-full': {};
44
33
  };
45
- '&&-sm': {
46
- '@apply h-32 w-32 min-h-24 max-h-32 min-w-24 max-w-32': {};
47
- '@apply text-label-small': {};
34
+ '&.sm': {
35
+ '@apply h-24 w-24 text-label-small': {};
48
36
  };
49
- '&&-md': {
50
- '@apply h-40 w-40 min-h-32 max-h-40 min-w-32 max-w-40': {};
37
+ '&.md': {
38
+ '@apply h-32 w-32': {};
39
+ };
40
+ '&-icon': {
41
+ '&.sm svg': {
42
+ '@apply w-16 h-16': {};
43
+ };
44
+ '&.md svg': {
45
+ '@apply w-20 h-20': {};
46
+ };
47
+ };
48
+ };
49
+ '&&-vertical': {
50
+ '@apply flex-col': {};
51
+ };
52
+ '&&-horizontal': {
53
+ '@apply flex-row gap-16': {};
54
+ };
55
+ '&&-grow': {
56
+ '@apply grow': {};
57
+ };
58
+ '&&-grow-0': {
59
+ '@apply grow-0': {};
60
+ };
61
+ '&-divider': {
62
+ '&.horizontal': {
63
+ '@apply flex w-full': {};
64
+ };
65
+ '&.vertical': {
66
+ '@apply flex w-auto h-full': {};
51
67
  };
52
68
  };
53
69
  '&[data-progress="current"]': {
54
70
  '@apply font-bold': {};
55
71
  '.sk-progress-stepper-step-box': {
56
- '@apply border-vattjom-surface-primary': {};
57
- '@apply bg-vattjom-surface-primary': {};
58
- '@apply text-vattjom-text-secondary': {};
72
+ '@apply bg-primary-surface text-light-primary': {};
59
73
  };
60
74
  };
61
75
  '&[data-progress="done"]': {
62
76
  '.sk-progress-stepper-step-box': {
63
- '@apply border-success-surface-primary': {};
64
- '@apply bg-success-surface-primary': {};
65
- '@apply text-success-text-secondary': {};
77
+ '@apply bg-gronsta-surface-accent text-gronsta-text-primary': {};
78
+ };
79
+ };
80
+ '&[data-white-space="no-wrap"]': {
81
+ '.sk-progress-stepper-step-wrapper p': {
82
+ '@apply whitespace-nowrap': {};
83
+ };
84
+ };
85
+ '&[data-white-space="normal"]': {
86
+ '.sk-progress-stepper-step-wrapper p': {
87
+ '@apply whitespace-normal': {};
66
88
  };
67
89
  };
68
90
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sk-web-gui/core",
3
- "version": "4.0.0",
3
+ "version": "4.1.1",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "main": "./dist/cjs/index.js",
@@ -41,5 +41,5 @@
41
41
  "mini-svg-data-uri": "^1.4.4",
42
42
  "tailwindcss": "^3.4.17"
43
43
  },
44
- "gitHead": "ff8e72b8eb23e6cdd1a454a49eda0e614ae4bd6f"
44
+ "gitHead": "184f8e279fc18f286164e8c761bf0d3a6b96d4c5"
45
45
  }