@sk-web-gui/core 2.4.0 → 3.0.1

package/dist/types/core/src/components/modal.d.ts

@@ -1,45 +0,0 @@
-export declare const Modal: () => {
-    '.sk-modal': {
-        '&-wrapper': {
-            '@apply fixed inset-0 z-20 overflow-y-auto': {};
-            '@apply bg-primitives-overlay-darken-6': {};
-            '@apply dark:bg-primitives-overlay-darken-8': {};
-            '&-inner': {
-                '@apply min-h-screen px-4 text-center': {};
-            };
-        };
-        '&-overlay': {
-            '@apply fixed inset-0': {};
-        };
-        '&-dialog': {
-            '@apply text-dark-secondary': {};
-            '@apply inline-flex flex-col': {};
-            '@apply text-left': {};
-            '@apply align-middle': {};
-            '@apply transition-all transform': {};
-            '@apply rounded-cards': {};
-            '@apply bg-background-content': {};
-            '@apply dark:bg-background-100': {};
-            '@apply px-24 pt-24 pb-40': {};
-            '@apply gap-16': {};
-            '&-header': {
-                '@apply flex justify-between items-center w-full': {};
-                '&-title': {
-                    '@apply grow': {};
-                    '@apply text-label-medium': {};
-                };
-            };
-        };
-        '&-content': {
-            '@apply flex flex-col': {};
-            '@apply py-8 pb-16 gap-12': {};
-            'h1, h2, h3, h4, h5, h6': {
-                '@apply text-dark-primary': {};
-            };
-        };
-        '&-footer': {
-            '@apply flex flex-row justify-start': {};
-            '@apply p-0 gap-12': {};
-        };
-    };
-};

package/dist/types/core/src/components/pagination.d.ts

@@ -1,101 +0,0 @@
-export declare const Pagination: () => {
-    '.sk-pagination': {
-        '@apply select-none': {};
-        '@apply text-base': {};
-        '&-list': {
-            '@apply flex justify-between items-center': {};
-            '.sk-pagination[data-hideprevnextlabel="true"] &': {
-                '@apply w-fit': {};
-            };
-            li: {
-                '@apply min-w-[4rem] text-center': {};
-            };
-            'li:first-child': {
-                '@apply text-left': {};
-            };
-            'li:last-child': {
-                '@apply text-right': {};
-            };
-        };
-        '.form-select-wrapper': {
-            '@apply w-fit': {};
-        };
-        '&-pageLabel': {
-            '@apply leading-base cursor-pointer underline text-vattjom-surface-primary': {};
-            '@apply focus-visible:ring ring-ring ring-offset': {};
-            '@apply rounded-full': {};
-            '@apply h-32 w-32': {};
-            "&[aria-current='true']": {
-                '@apply font-bold no-underline text-dark-primary': {};
-            };
-        };
-        '&-prevNextButton': {
-            '@apply text-dark-secondary': {};
-            '&.sk-btn': {
-                '@apply bg-transparent text-dark-secondary font-normal': {};
-                '&.sk-btn-disabled:disabled, .sk-btn[aria-disabled="true"]:disabled': {
-                    '@apply bg-transparent !important': {};
-                    '@apply text-dark-disabled hover:text-dark-disabled': {};
-                    '.sk-icon': {
-                        '@apply text-dark-disabled hover:text-dark-disabled': {};
-                    };
-                };
-                '.sk-icon': {
-                    '@apply bg-transparent text-dark-secondary': {};
-                };
-                '&:hover': {
-                    '@apply text-dark-primary': {};
-                    '@apply bg-tertiary-surface-hover': {};
-                    '.sk-icon': {
-                        '@apply text-dark-primary': {};
-                    };
-                };
-            };
-            '&[disabled]': {
-                '@apply cursor-default': {};
-            };
-            "&[disabled='false']": {
-                '.sk-pagination-prevNextButton-label, .sk-pagination-prevNextButton-icon': {
-                    '@apply cursor-pointer': {};
-                };
-            };
-            '&-label': {
-                '@apply hidden sm:inline ml-sm leading-none': {};
-            };
-            '&-icon': {
-                '@apply m-1 leading-none flex items-center': {};
-            };
-        };
-        '&-ellipsis': {
-            '@apply inline-block w-16 text-center': {};
-        };
-        '&.fit-content': {
-            '@apply w-full max-w-full': {};
-            '.sk-pagination-list': {
-                '@apply w-full flex justify-center': {};
-                '@apply gap-24': {};
-                '&-item': {
-                    '@apply px-0 grow-0 text-center': {};
-                    '&.ellipsis': {
-                        '@apply flex-shrink grow-0': {};
-                    };
-                    '&.prev-next': {
-                        '@apply flex-shrink grow': {};
-                        '&.prev': {
-                            '@apply text-left': {};
-                        };
-                        '&.next': {
-                            '@apply text-right': {};
-                        };
-                    };
-                    '.sk-pagination-pageLabel': {
-                        '@apply mx-xs': {};
-                    };
-                };
-            };
-            '.form-select-wrapper': {
-                '@apply w-full': {};
-            };
-        };
-    };
-};

package/dist/types/core/src/components/popup-menu.d.ts

@@ -1,138 +0,0 @@
-export declare const PopupMenu: () => {
-    '.sk-popup-menu': {
-        '@apply hidden': {};
-        '&[data-open="true"]': {
-            '@apply flex': {};
-        };
-        '&[data-position="left"]': {
-            '@apply mt-0 mr-8 right-[100%]': {};
-            '&[data-align="end"]': {
-                '@apply bottom-0': {};
-            };
-            '&[data-align="start"]': {
-                '@apply top-0': {};
-            };
-        };
-        '&[data-position="right"]': {
-            '@apply mt-0 ml-8 left-[100%]': {};
-            '&[data-align="end"]': {
-                '@apply bottom-0': {};
-            };
-            '&[data-align="start"]': {
-                '@apply top-0': {};
-            };
-        };
-        '&[data-position="over"]': {
-            '@apply mt-0 mb-8 bottom-[100%]': {};
-            '&[data-align="end"]': {
-                '@apply right-0': {};
-            };
-            '&[data-align="start"]': {
-                '@apply left-0': {};
-            };
-        };
-        '&[data-position="under"]': {
-            '&[data-align="end"]': {
-                '@apply right-0': {};
-            };
-            '&[data-align="start"]': {
-                '@apply left-0': {};
-            };
-        };
-        '> *': {
-            '@apply max-w-full w-full': {};
-        };
-        '@apply absolute flex-col justify-start items-start mt-8': {};
-        '@apply w-max': {};
-        '@apply rounded-utility': {};
-        '@apply bg-background-100': {};
-        '@apply z-10': {};
-        '@apply p-8 gap-4': {};
-        '@apply shadow-100': {};
-        '@apply border-0': {};
-        '@apply focus-within:border-0': {};
-        '@apply focus:outline-0 focus-visible:outline-0 focus-visible:ring': {};
-        '.sk-form-checkbox-label-left .sk-icon': {
-            '@apply right-8': {};
-        };
-        '.sk-form-checkbox-label-right .sk-icon': {
-            '@apply left-8': {};
-        };
-        '.sk-popup-menu-item': {
-            '@apply list-none': {};
-            '@apply w-full': {};
-            '@apply h-[4rem]': {};
-            '@apply min-h-[4rem]': {};
-            '@apply bg-transparent hover:bg-primitives-gray-200': {};
-            '@apply dark:hover:bg-primitives-overlay-lighten-1': {};
-            '@apply cursor-pointer': {};
-            '@apply flex flex-row shrink-0': {};
-            '@apply pl-8 pr-8 py-4 gap-12': {};
-            '@apply ring-offset-0': {};
-            '@apply focus-visible:ring ring-ring': {};
-            '@apply rounded-utility': {};
-            '@apply text-body font-normal': {};
-            '> *': {
-                '@apply max-w-full': {};
-            };
-            '&:focus-visible, &:focus-within': {
-                '@apply bg-primitives-gray-200': {};
-                '@apply dark:bg-primitives-overlay-lighten-1': {};
-            };
-            svg: {
-                '@apply w-[2rem] h-[2rem]': {};
-            };
-            '@apply justify-start': {};
-            '@apply border-0': {};
-            '@apply items-center': {};
-            '@apply no-underline': {};
-        };
-        '&-group': {
-            '@apply w-full flex flex-col border-b-1 border-divider pb-4 pt-4 gap-4': {};
-            '&:first-child': {
-                '@apply pt-0': {};
-            };
-            '&:last-child': {
-                '@apply border-0 pb-0': {};
-            };
-        };
-        '&-items': {
-            '@apply w-full': {};
-            '@apply rounded-utility': {};
-            '@apply focus-within:ring ring-ring': {};
-            '.sk-popup-menu-item': {
-                '@apply focus-visible:ring-0 ring-transparent ring-offset-0': {};
-                '> *': {
-                    '@apply focus-visible:ring-0 ring-transparent ring-offset-0': {};
-                };
-            };
-            '&:focus-within': {
-                '.sk-popup-menu-item.active': {
-                    '@apply bg-primitives-gray-200': {};
-                    '@apply dark:bg-primitives-overlay-lighten-1': {};
-                };
-            };
-        };
-        '&-sm': {
-            '@apply p-8 gap-6': {};
-            '.sk-popup-menu-item': {
-                '@apply h-[3.2rem]': {};
-                '@apply min-h-[3.2rem]': {};
-                '@apply gap-10 pl-8 pr-8 py-4': {};
-                '@apply text-small': {};
-                '&-group': {
-                    '@apply gap-6 pb-6': {};
-                    '> *': {
-                        '@apply gap-10 pl-8 pr-8 py-4': {};
-                    };
-                };
-                svg: {
-                    '@apply w-[1.8rem] h-[1.8rem]': {};
-                };
-            };
-        };
-        '&.right': {
-            '@apply right-0': {};
-        };
-    };
-};

package/dist/types/core/src/components/progress-bar.d.ts

@@ -1,13 +0,0 @@
-export declare const ProgressBar: (colors: string[]) => {
-    '.sk-progress-bar': {
-        "&[data-color='tertiary']": {
-            '.sk-progress-bar-fill': {
-                "@apply bg-primary-surface": {};
-            };
-        };
-        '@apply flex h-[.4rem] rounded-circular bg-background-color-mixin-2': {};
-        '&-fill': {
-            '@apply rounded-circular': {};
-        };
-    };
-};

package/dist/types/core/src/components/progress-stepper.d.ts

@@ -1,60 +0,0 @@
-export declare const ProgressStepper: () => {
-    '.sk-progress-stepper': {
-        '@apply flex justify-between': {};
-        hr: {
-            '@apply w-full mt-[1.9rem]': {};
-        };
-        '&-step': {
-            '@apply flex flex-col items-center': {};
-            '@apply gap-4': {};
-            '@apply w-auto': {};
-            '@apply shrink-0': {};
-            '@apply text-base leading-base text-dark-primary font-normal': {};
-            svg: {
-                '@apply w-20 h-20': {};
-            };
-            '&-wrapper': {
-                '@apply flex flex-row shrink w-full gap-4': {};
-                hr: {
-                    '@apply w-full grow shrink mt-[1.9rem]': {};
-                };
-            };
-            '&-box': {
-                '@apply box-border': {};
-                '@apply shrink-0': {};
-                '@apply h-[4rem] w-[4rem]': {};
-                '@apply bg-secondary-surface': {};
-                '@apply flex justify-center items-center': {};
-                '@apply text-label-medium': {};
-                '@apply border-2 border-secondary-outline': {};
-                '@apply text-dark-secondary': {};
-                '@apply rounded-button-sm md:rounded-button-md xl:rounded-button-lg': {};
-                '&[data-rounded="true"]': {
-                    '@apply rounded-full': {};
-                };
-                '&&-sm': {
-                    '@apply h-[3.2rem] w-[3.2rem] min-h-[2.4rem] max-h-[3.2rem] min-w-[2.4rem] max-w-[3.2rem]': {};
-                    '@apply text-label-small': {};
-                };
-                '&&-md': {
-                    '@apply h-[4rem] w-[4rem] min-h-[3.2rem] max-h-[4rem] min-w-[3.2rem] max-w-[4rem]': {};
-                };
-            };
-            '&[data-progress="current"]': {
-                '@apply font-bold': {};
-                '.sk-progress-stepper-step-box': {
-                    '@apply border-vattjom-surface-primary': {};
-                    '@apply bg-vattjom-surface-primary': {};
-                    '@apply text-vattjom-text-secondary': {};
-                };
-            };
-            '&[data-progress="done"]': {
-                '.sk-progress-stepper-step-box': {
-                    '@apply border-success-surface-primary': {};
-                    '@apply bg-success-surface-primary': {};
-                    '@apply text-success-text-secondary': {};
-                };
-            };
-        };
-    };
-};

package/dist/types/core/src/components/radio.d.ts

@@ -1,125 +0,0 @@
-export declare const Radio: () => {
-    '.sk-form-radio': {
-        backgroundImage: string;
-        '@apply relative': {};
-        '@apply box-border': {};
-        '@apply bg-primitives-overlay-lighten-10': {};
-        '@apply dark:bg-primitives-overlay-darken-6': {};
-        '@apply border-1': {};
-        '@apply border-primitives-overlay-darken-6': {};
-        '@apply dark:border-primitives-overlay-lighten-6': {};
-        '@apply m-0': {};
-        '@apply h-24 w-24': {};
-        '@apply hover:after:content-[""]': {};
-        '@apply hover:border-primitives-overlay-darken-8': {};
-        '@apply hover:dark:border-primitives-overlay-lighten-4': {};
-        '&::after': {
-            '@apply absolute': {};
-            '@apply rounded-full': {};
-            '@apply bg-dark-placeholder': {};
-            '@apply m-[0.5rem]': {};
-            '@apply top-0 left-0 bottom-0 right-0': {};
-        };
-        '@apply focus-visible:ring': {};
-        '@apply focus-visible:bg-background-content': {};
-        '@apply focus-visible:border-background-content': {};
-        '@apply focus-visible:hover:border-background-content': {};
-        '&[aria-invalid="true"]': {
-            '@apply border-2': {};
-            '@apply border-error-surface-primary': {};
-            '@apply hover:border-2': {};
-            '@apply hover:border-error-surface-primary': {};
-        };
-        '&:checked, &[checked="true"]': {
-            '@apply bg-primitives-overlay-lighten-10': {};
-            '@apply dark:bg-primitives-overlay-darken-6': {};
-            '@apply hover:bg-primitives-overlay-lighten-10': {};
-            '@apply hover:dark:bg-primitives-overlay-darken-6': {};
-            '@apply focus:bg-primitives-overlay-lighten-10': {};
-            '@apply focus:dark:bg-primitives-overlay-darken-6': {};
-            '@apply text-primitives-overlay-lighten-10': {};
-            '@apply dark:text-primitives-overlay-darken-6': {};
-            '@apply hover:text-primitives-overlay-lighten-10': {};
-            '@apply hover:dark:text-primitives-overlay-darken-6': {};
-            '@apply focus:text-primitives-overlay-lighten-10': {};
-            '@apply focus:dark:text-primitives-overlay-darken-6': {};
-            '@apply border-primitives-overlay-darken-6': {};
-            '@apply focus:border-primitives-overlay-darken-6': {};
-            '@apply dark:border-primitives-overlay-lighten-6': {};
-            '@apply hover:border-primitives-overlay-darken-8': {};
-            '@apply hover:dark:border-primitives-overlay-lighten-4': {};
-            '@apply focus:outline-0': {};
-            '@apply focus:ring-0 focus:ring-offset-0': {};
-            '@apply focus-visible:ring': {};
-            '@apply focus-visible:border-transparent': {};
-            '@apply after:content-[""]': {};
-            '&[aria-invalid="true"]': {
-                '@apply border-2': {};
-                '@apply border-error-surface-primary': {};
-                '@apply hover:border-2': {};
-                '@apply hover:border-error-surface-primary': {};
-            };
-            '&::after': {
-                '@apply bg-dark-primary': {};
-            };
-        };
-        '&:active': {
-            '@apply ring-0 ring-offset-0': {};
-        };
-        '&:disabled, &[disabled="true"]': {
-            '@apply border-primitives-overlay-darken-3': {};
-            '@apply dark:border-primitives-overlay-lighten-3': {};
-            '@apply hover:border-primitives-overlay-darken-3': {};
-            '@apply hover:dark:border-primitives-overlay-lighten-3': {};
-            '@apply bg-background-200': {};
-            '@apply hover:bg-background-200': {};
-            '@apply cursor-not-allowed': {};
-            '&:not(:checked):not([checked="true"]):after': {
-                '@apply hidden': {};
-            };
-            '&:checked, &[checked="true"]': {
-                '&::after': {
-                    '@apply bg-dark-disabled': {};
-                };
-            };
-        };
-        '&-label': {
-            '@apply inline-flex align-top items-center': {};
-            '@apply font-normal': {};
-            '@apply p-2': {};
-            '&-sm': {
-                '@apply text-small': {};
-                '@apply h-[2.8rem]': {};
-                '@apply gap-10': {};
-            };
-            '&-md': {
-                '@apply text-base': {};
-                '@apply h-[2.8rem]': {};
-                '@apply gap-10': {};
-            };
-            '&-lg': {
-                '@apply text-large': {};
-                '@apply h-[3rem]': {};
-                '@apply gap-12': {};
-            };
-            '&[data-disabled="true"]': {
-                '@apply text-dark-disabled': {};
-            };
-        };
-        '&-group': {
-            '@apply flex flex-row': {};
-            '&[data-direction="column"]': {
-                '@apply flex-col': {};
-            };
-            '&-sm': {
-                '@apply gap-12': {};
-            };
-            '&-md': {
-                '@apply gap-16': {};
-            };
-            '&-lg': {
-                '@apply gap-16': {};
-            };
-        };
-    };
-};

package/dist/types/core/src/components/search-field.d.ts

@@ -1,34 +0,0 @@
-export declare const SearchField: () => {
-    '.sk-search-field-suggestions': {
-        '&.sk-form-combobox': {
-            '@apply h-auto': {};
-        };
-        '.sk-form-combobox': {
-            '&-list': {
-                '&-option': {
-                    '.sk-icon': {
-                        '@apply hidden': {};
-                    };
-                };
-            };
-        };
-    };
-    '.sk-search-field': {
-        '&-md': {
-            '.sk-search-field-icon': {
-                '@apply w-[2rem] h-[2rem]': {};
-                svg: {
-                    '@apply w-[2rem] h-[2rem]': {};
-                };
-            };
-        };
-        '&-lg': {
-            '.sk-search-field-icon': {
-                '@apply w-[2.2rem] h-[2.2rem]': {};
-                svg: {
-                    '@apply w-[2.2rem] h-[2.2rem]': {};
-                };
-            };
-        };
-    };
-};

package/dist/types/core/src/components/select.d.ts

@@ -1,141 +0,0 @@
-export declare const Select: () => {
-    '.sk-form-select': {
-        '*': {
-            '@apply bg-background-content': {};
-        };
-        '&[aria-invalid="true"]': {
-            '@apply border-2 border-error-surface-primary': {};
-        };
-        '&[aria-disabled="true"]': {
-            '@apply opacity-100': {};
-            '@apply text-dark-disabled': {};
-            '@apply placeholder:text-dark-disabled': {};
-            '@apply bg-tertiary-surface-disabled': {};
-            backgroundImage: string[];
-        };
-        '&-sm': {
-            '@apply h-[3.2rem]': {};
-            '@apply text-label-small': {};
-            '@apply rounded-button-sm': {};
-            '*': {
-                '@apply text-input-small': {};
-            };
-        };
-        '&-md': {
-            '@apply h-[4rem]': {};
-            '@apply text-label-medium': {};
-            '@apply rounded-button-md': {};
-            '*': {
-                '@apply text-input-medium': {};
-            };
-        };
-        '&-lg': {
-            '@apply h-[4.8rem]': {};
-            '@apply text-label-large': {};
-            '@apply rounded-button-lg': {};
-            '*': {
-                '@apply text-input-large': {};
-            };
-        };
-        '&-primary': {
-            '@apply border-1': {};
-            '@apply border-primitives-overlay-darken-6': {};
-            '@apply dark:border-primitives-overlay-lighten-6': {};
-            '@apply hover:border-primitives-overlay-darken-8': {};
-            '@apply dark:hover:border-primitives-overlay-lighten-4': {};
-            '@apply bg-primitives-overlay-lighten-10': {};
-            '@apply dark:bg-primitives-overlay-darken-6': {};
-            '@apply hover:bg-primitives-overlay-lighten-10': {};
-            '@apply dark:hover:bg-primitives-overlay-darken-6': {};
-            '&.sk-form-select-sm': {
-                '@apply pl-[1.3rem]': {};
-                '@apply bg-[center_right_0.9rem]': {};
-                '@apply pr-[3.3rem]': {};
-                '&[aria-invalid="true"]': {
-                    '@apply pl-12': {};
-                    '@apply bg-right-8': {};
-                    '@apply pr-[3.2rem]': {};
-                };
-            };
-            '&.sk-form-select-md': {
-                '@apply pl-[1.7rem]': {};
-                '@apply bg-[center_right_1.3rem]': {};
-                '@apply pr-[4.3rem]': {};
-                '&[aria-invalid="true"]': {
-                    '@apply pl-16': {};
-                    '@apply bg-right-12': {};
-                    '@apply pr-[4.2rem]': {};
-                };
-            };
-            '&.sk-form-select-lg': {
-                '@apply pl-[1.9rem]': {};
-                '@apply bg-[center_right_1.7rem]': {};
-                '@apply pr-[4.9rem]': {};
-                '&[aria-invalid="true"]': {
-                    '@apply pl-18': {};
-                    '@apply bg-right-16': {};
-                    '@apply pr-[4.8rem]': {};
-                };
-            };
-            '&[aria-disabled="true"]': {
-                '@apply bg-primitives-overlay-darken-1': {};
-                '@apply dark:bg-primitives-overlay-lighten-1': {};
-                '@apply border-primitives-overlay-darken-3': {};
-                '@apply dark:border-primitives-overlay-lighten-3': {};
-                '@apply hover:border-primitives-overlay-darken-3': {};
-                '@apply dark:hover:border-primitives-overlay-lighten-3': {};
-            };
-        };
-        '&-tertiary': {
-            '@apply border-2': {};
-            '@apply bg-tertiary-surface': {};
-            '@apply hover:bg-tertiary-surface-hover': {};
-            '@apply border-transparent': {};
-            '&.sk-form-select-sm': {
-                '@apply pl-12': {};
-                '@apply bg-right-8': {};
-                '@apply pr-[3.2rem]': {};
-            };
-            '&.sk-form-select-md': {
-                '@apply pl-16': {};
-                '@apply bg-right-12': {};
-                '@apply pr-[4.2rem]': {};
-            };
-            '&.sk-form-select-lg': {
-                '@apply pl-18': {};
-                '@apply bg-right-16': {};
-                '@apply pr-[4.8rem]': {};
-            };
-            '&[aria-disabled="true"]': {
-                '@apply bg-tertiary-surface-disabled': {};
-            };
-        };
-        '@apply h-fit': {};
-        '@apply w-fit': {};
-        '@apply box-border': {};
-        '@apply focus:border-transparent': {};
-        '@apply rounded-button': {};
-        '@apply text-dark-secondary': {};
-        '@apply placeholder:text-dark-secondary': {};
-        '@apply hover:placeholder:text-dark-primary': {};
-        '@apply focus:placeholder:text-dark-primary': {};
-        '@apply hover:text-dark-primary': {};
-        '@apply focus:text-dark-primary': {};
-        '@apply py-6': {};
-        '@apply focus:ring focus:ring-ring focus:ring-offset': {};
-        '@apply focus:outline-0': {};
-        backgroundImage: string[];
-        '&:hover, &:focus': {
-            backgroundImage: string[];
-        };
-    };
-    '.dark .sk-form-select': {
-        backgroundImage: string[];
-        '&:hover, &:focus': {
-            backgroundImage: string[];
-        };
-        '&[aria-disabled="true"]': {
-            backgroundImage: string[];
-        };
-    };
-};