@sk-web-gui/core 1.0.1 → 1.0.3

package/dist/types/components/context-menu.d.ts

@@ -0,0 +1,39 @@
+declare function _exports(): {
+    '.context-menu-wrapper': {
+        '@apply relative inline': {};
+        '> a, > button': {
+            '@apply inline-flex': {};
+        };
+        '.context-menu-items': {
+            '@apply absolute rounded bg-white border border-body z-10 drop-shadow-md mt-sm flex flex-col justify-start items-start': {};
+            '.context-menu-item': {
+                '@apply text-base text-body hover:text-white focus-within:text-white min-h-[3.5rem] w-full flex justify-start items-center': {};
+                'a, button': {
+                    '@apply text-base font-normal min-h-[3.5rem] py-[0.6rem] items-center w-full rounded-none border-transparent px-md flex justify-start': {};
+                    '&.active': {
+                        '@apply bg-primary text-white': {};
+                    };
+                    '.MuiSvgIcon-root': {
+                        '@apply text-base': {};
+                    };
+                };
+                '&:first-child a,&:first-child button': {
+                    '@apply pt-[0.675rem] pb-[0.525rem]': {};
+                };
+                '&:last-child a,&:last-child button': {
+                    '@apply pt-[0.525rem] pb-[0.675rem]': {};
+                };
+                '&:only-child a,&:only-child button': {
+                    '@apply py-[0.6rem]': {};
+                };
+            };
+            hr: {
+                '@apply mx-sm w-[calc(100%_-_16px)]': {};
+            };
+            '&.right': {
+                '@apply right-0': {};
+            };
+        };
+    };
+};
+export = _exports;

package/dist/types/components/cookie-consent.d.ts

@@ -0,0 +1,36 @@
+declare function _exports(): {
+    '.sk-cookie-consent': {
+        '@apply min-w-full fixed flex justify-center z-10 bottom-0 left-0 right-0': {};
+        '@apply bg-background-content': {};
+        '@apply p-40': {};
+        '@apply pt-24': {};
+        '&-wrapper': {
+            '@apply fixed inset-0 z-20 overflow-y-auto': {};
+            '@apply bg-primitives-overlay-darken-6': {};
+            '@apply dark:bg-primitives-overlay-darken-8': {};
+        };
+        '&-close-btn': {
+            '&-icon': {};
+        };
+        '&-content-wrapper': {
+            '@apply flex flex-col gap-24 container max-w-[102.4rem] relative': {};
+        };
+        '&-body': {
+            '@apply flex flex-col gap-8': {};
+            '@apply max-w-[80rem]': {};
+        };
+        '&-title': {
+            '@apply text-h2-sm md:text-h2-md xl:text-h2-lg': {};
+        };
+        '&-custom-wrapper': {
+            '@apply flex flex-col gap-24': {};
+        };
+        '&-description': {
+            '@apply text-base flex flex-col gap-8': {};
+        };
+        '&-btn-wrapper': {
+            '@apply flex flex-col md:flex-row gap-12 flex-wrap': {};
+        };
+    };
+};
+export = _exports;

package/dist/types/components/dialog.d.ts

@@ -0,0 +1,6 @@
+declare function _exports(): {
+    '.sk-dialog': {
+        '@apply w-fit max-w-prose md:min-w-[40rem]': {};
+    };
+};
+export = _exports;

package/dist/types/components/divider.d.ts

@@ -0,0 +1,51 @@
+declare function _exports(): {
+    '.sk-divider': {
+        '@apply border-t-0 border-divider': {};
+        '&-vertical': {
+            '@apply min-h-[1em] border-l-1 border-solid h-auto ml-4 mt-8 mb-4 mr-4 self-stretch': {};
+            '&[data-strong="true"]': {
+                '@apply border-l border-solid h-auto mx-2': {};
+            };
+        };
+        '&-horizontal': {
+            '@apply flex-1 border-b-1 border-solid w-auto my-2': {};
+            '&[data-strong="true"]': {
+                '@apply border-b border-solid w-auto my-2': {};
+            };
+        };
+        '&-root': {
+            '@apply flex items-center gap-16': {};
+        };
+        '&-sm': {
+            '&.sk-divider': {
+                '&-root': {
+                    '@apply gap-[.8rem]': {};
+                };
+                '.sk-divider-text': {
+                    '@apply text-label-small': {};
+                };
+            };
+        };
+        '&-md': {
+            '&.sk-divider': {
+                '&-root': {
+                    '@apply gap-[1rem]': {};
+                };
+                '.sk-divider-text': {
+                    '@apply text-label-medium': {};
+                };
+            };
+        };
+        '&-lg': {
+            '&.sk-divider': {
+                '&-root': {
+                    '@apply gap-[1.2rem]': {};
+                };
+                '.sk-divider-text': {
+                    '@apply text-label-large': {};
+                };
+            };
+        };
+    };
+};
+export = _exports;

package/dist/types/components/dot.d.ts

@@ -0,0 +1,35 @@
+declare function _exports(colors: any): {
+    '.dot': {
+        '@apply relative inline-flex rounded-full': {};
+        '&-solid': any;
+        '&-outline': any;
+        '&-3xs': {
+            '@apply w-1.5 h-1.5': {};
+        };
+        '&-2xs': {
+            '@apply w-2 h-2': {};
+        };
+        '&-xs': {
+            '@apply w-2.5 h-2.5': {};
+        };
+        '&-sm': {
+            '@apply w-3 h-3': {};
+        };
+        '&-md': {
+            '@apply w-3.5 h-3.5': {};
+        };
+        '&-lg': {
+            '@apply w-4 h-4': {};
+        };
+        '&-xl': {
+            '@apply w-5 h-5': {};
+        };
+        '&-2xl': {
+            '@apply w-6 h-6': {};
+        };
+        '&-3xl': {
+            '@apply w-8 h-8': {};
+        };
+    };
+};
+export = _exports;

package/dist/types/components/dropdown-filter.d.ts

@@ -0,0 +1,58 @@
+declare function _exports(): {
+    '.dropdown-filter': {
+        position: string;
+        height: number;
+        border: string;
+        display: string;
+        background: string;
+        borderRadius: number;
+        '.dropdown-button': {
+            '@apply flex justify-between items-center  grow': {};
+            '.dropdown-button-icon': {
+                '@apply justify-self-end grow-0': {};
+            };
+        };
+        '.filter-container': {
+            position: string;
+            top: string;
+            left: string;
+            zIndex: number;
+            width: string;
+            background: string;
+            border: string;
+            borderRadius: number;
+            '.filter-controls': {
+                display: string;
+                justifyContent: string;
+                button: {
+                    marginLeft: string;
+                    textDecoration: string;
+                };
+            };
+            '.filter-item': {
+                '@apply px-md': {};
+                height: number;
+                display: string;
+                justifyContent: string;
+                alignItems: string;
+                borderBottom: string;
+                '> label': {
+                    '@apply w-full': {};
+                    '> .form-checkbox-label': {
+                        '@apply flex-grow': {};
+                    };
+                };
+                '&.disabled': {
+                    color: string;
+                };
+                '&:first-of-type': {
+                    borderTop: string;
+                };
+                '&:last-child': {
+                    borderBottom: string;
+                };
+            };
+        };
+    };
+};
+export = _exports;

package/dist/types/components/filter.d.ts

@@ -0,0 +1,15 @@
+declare function _exports(): {
+    '.sk-filter': {
+        '@apply w-full': {};
+        '&-label': {
+            '@apply text-label-medium': {};
+        };
+        '.sk-form-checkbox-label': {
+            '@apply grow flex items-center justify-between': {};
+            '&-wrapper': {
+                '@apply w-full': {};
+            };
+        };
+    };
+};
+export = _exports;

package/dist/types/components/footer.d.ts

@@ -0,0 +1,28 @@
+declare function _exports(): {
+    '.sk-footer': {
+        '@apply bg-background-content': {};
+        '@apply flex justify-center': {};
+        '@apply w-full': {};
+        '@apply p-20 sm:p-32 md:p-40 lg:p-48 xl:p-80': {};
+        '@apply text-dark-secondary': {};
+        '&-innerwrapper': {
+            '@apply w-full max-w-content': {};
+            '@apply pb-20 sm:pb-32 md:pb-40 lg:pb-48 xl:pb-80': {};
+            '@apply flex flex-row flex-wrap gap-[10rem]': {};
+            '@apply justify-between': {};
+        };
+        '&-logo': {
+            '@apply max-h-[7.2rem] h-[7.2rem]': {};
+        };
+        '&-content': {
+            '@apply flex flex-row gap-36 w-fit grow-0 flex-wrap': {};
+        };
+        '&-list': {
+            '@apply flex flex-col gap-16': {};
+            '&-item': {
+                '@apply flex flex-row justify-start items-center gap-8': {};
+            };
+        };
+    };
+};
+export = _exports;

package/dist/types/components/forms.d.ts

@@ -0,0 +1,25 @@
+declare function _exports(): {
+    '.sk-form-control': {
+        '@apply flex flex-col gap-8 w-fit': {};
+    };
+    '.sk-form-label': {
+        '@apply font-bold': {};
+        '&-sm': {
+            '@apply text-label-small': {};
+        };
+        '&-md': {
+            '@apply text-label-medium': {};
+        };
+        '&-lg': {
+            '@apply text-label-large': {};
+        };
+    };
+    'legend.sk-form-label': {
+        display: string;
+    };
+    '.sk-form-helper-text, .sk-form-error-message': {
+        '@apply font-normal': {};
+        '@apply text-small': {};
+    };
+};
+export = _exports;

package/dist/types/components/header.d.ts

@@ -0,0 +1,29 @@
+declare function _exports(): {
+    '.sk-header': {
+        '@apply bg-background-content p-12 md:px-32 md:pt-24 md:pb-20 xl:pt-32 xl:pb-20 xl:px-80 xl:h-auto xl:min-h-0': {};
+        '@apply shadow-100': {};
+        '@apply flex justify-center': {};
+        '@apply w-full': {};
+        '&-container': {
+            '@apply flex flex-col gap-20 xl:gap-24': {};
+            '@apply w-full': {};
+            '@apply max-w-content': {};
+        };
+        '&-top-content': {
+            '@apply flex items-center w-full justify-between m-auto flex-shrink-0 py-4 gap-20': {};
+        };
+        '&-bottom-content': {
+            '@apply hidden md:flex items-center w-full justify-start p-8 xl:p-0': {};
+        };
+        '&-usermenu': {
+            '@apply hidden xl:flex-shrink md:flex xl:items-center xl:w-auto': {};
+            '&-content': {
+                '@apply relative flex flex-grow justify-end items-center xl:w-auto': {};
+            };
+        };
+        '&-mobilemenu': {
+            '@apply block md:hidden relative': {};
+        };
+    };
+};
+export = _exports;

package/dist/types/components/icon.d.ts

@@ -0,0 +1,4 @@
+declare function _exports(colors: any): {
+    '.sk-icon': any;
+};
+export = _exports;

package/dist/types/components/input.d.ts

@@ -0,0 +1,207 @@
+declare function _exports(): {
+    '.sk-form-input': {
+        '&-addin': {
+            '@apply bg-transparent': {};
+            '@apply flex': {};
+            '@apply justify-start items-center': {};
+            '&-sm': {
+                '@apply px-6 gap-6': {};
+                '&.sk-form-input-addin-left': {
+                    '@apply -mr-12': {};
+                    '@apply pl-10': {};
+                };
+                '&.sk-form-input-addin-right': {
+                    '@apply -ml-12': {};
+                    '@apply pr-10': {};
+                };
+                svg: {
+                    '@apply w-[1.6rem] h-[1.6rem]': {};
+                };
+            };
+            '&-md': {
+                '@apply md:px-8 md:gap-8': {};
+                '&.sk-form-input-addin-left': {
+                    '@apply -mr-16': {};
+                    '@apply pl-12': {};
+                };
+                '&.sk-form-input-addin-right': {
+                    '@apply -ml-16': {};
+                    '@apply pr-12': {};
+                };
+                svg: {
+                    '@apply w-[2rem] h-[2rem]': {};
+                };
+            };
+            '&-lg': {
+                '@apply md:px-8 md:gap-8': {};
+                '&.sk-form-input-addin-left': {
+                    '@apply -mr-20': {};
+                    '@apply pl-16': {};
+                };
+                '&.sk-form-input-addin-right': {
+                    '@apply -ml-20': {};
+                    '@apply pr-16': {};
+                };
+                svg: {
+                    '@apply w-[2.2rem] h-[2.2rem]': {};
+                };
+            };
+        };
+        '&-group': {
+            '.sk-form-input': {
+                '@apply rounded-0': {};
+                '@apply border-0': {};
+                '@apply focus:ring-0': {};
+                '@apply focus:ring-offset-0': {};
+                '@apply bg-transparent': {};
+                '@apply dark:bg-transparent': {};
+                '@apply grow': {};
+            };
+            '@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 placeholder:text-dark-placeholder': {};
+            '@apply bg-primitives-overlay-lighten-10': {};
+            '@apply dark:bg-primitives-overlay-darken-6': {};
+            '&:invalid, &[aria-invalid="true"]': {
+                '@apply border-2 border-error-surface-primary': {};
+            };
+            '&:disabled, &[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': {};
+                '@apply text-dark-disabled': {};
+            };
+            '@apply flex relative': {};
+            '@apply items-center': {};
+            '@apply focus-within:ring': {};
+            '@apply focus-within:ring-ring': {};
+            '@apply text-dark-secondary': {};
+            '@apply focus-within:border-primitives-overlay-lighten-10': {};
+            '@apply dark:focus-within:border-primitives-overlay-darken-6': {};
+            '&:not(:invalid):not([aria-invalid="true"])': {
+                '@apply focus-within:hover:border-primitives-overlay-lighten-10': {};
+                '@apply dark:focus-within:hover:border-primitives-overlay-darken-6': {};
+            };
+            '&&-lg': {
+                '@apply text-input-large': {};
+                '@apply rounded-button-lg': {};
+            };
+            '&&-md': {
+                '@apply text-input-medium': {};
+                '@apply rounded-button-md': {};
+            };
+            '&&-sm': {
+                '@apply text-input-small': {};
+                '@apply rounded-button-sm': {};
+            };
+        };
+        '@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 placeholder:text-dark-placeholder': {};
+        '@apply bg-primitives-overlay-lighten-10': {};
+        '@apply dark:bg-primitives-overlay-darken-6': {};
+        '&:invalid, &[aria-invalid="true"]': {
+            '@apply border-2 border-error-surface-primary': {};
+        };
+        '&:disabled, &[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': {};
+            '@apply text-dark-disabled': {};
+        };
+        '&::-webkit-inner-spin-button, &::-webkit-calendar-picker-indicator': {
+            '@apply block': {};
+            '@apply p-0': {};
+            '@apply pl-6 md:pl-8': {};
+            '@apply m-0': {};
+            '@apply bg-none': {};
+            '@apply bg-dark-secondary': {};
+            '&.sk-form-input-sm': {
+                '@apply w-[1.6rem] h-[1.6rem]': {};
+                '@apply -mr-2': {};
+            };
+            '&.sk-form-input-md': {
+                '@apply -mr-4': {};
+                '@apply w-[1.8rem] h-[1.8rem]': {};
+            };
+            '&.sk-form-input-lg': {
+                '@apply -mr-6': {};
+                '@apply w-[2rem] h-[2rem]': {};
+            };
+        };
+        '&[type="date"]::-webkit-inner-spin-button, &[type="date"]::-webkit-calendar-picker-indicator': {
+            mask: string[];
+            '-webkit-mask': string[];
+            maskSize: string;
+            '-webkit-mask-size': string;
+        };
+        '&[type="datetime-local"]::-webkit-inner-spin-button, &[type="datetime-local"]::-webkit-calendar-picker-indicator': {
+            mask: string[];
+            '-webkit-mask': string[];
+            maskSize: string;
+            '-webkit-mask-size': string;
+        };
+        '&[type="time"]::-webkit-inner-spin-button, &[type="time"]::-webkit-calendar-picker-indicator': {
+            mask: string[];
+            '-webkit-mask': string[];
+            maskSize: string;
+            '-webkit-mask-size': string;
+        };
+        '@apply grow-0': {};
+        '@apply text-dark-primary': {};
+        '&[data-hideextra="true"]': {
+            '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
+                '-webkit-appearance': string;
+                display: string;
+                margin: number;
+            };
+            '-moz-appearance': string;
+        };
+        '&&-lg': {
+            '@apply rounded-button-lg': {};
+            '@apply px-20': {};
+            '@apply py-12': {};
+            '@apply gap-8': {};
+            '@apply text-input-large': {};
+            '@apply h-[4.8rem]': {};
+        };
+        '&&-md': {
+            '@apply rounded-button-md': {};
+            '@apply px-16': {};
+            '@apply py-8': {};
+            '@apply gap-8': {};
+            '@apply text-input-medium': {};
+            '@apply h-[4rem]': {};
+        };
+        '&&-sm': {
+            '@apply rounded-button-sm': {};
+            '@apply px-12': {};
+            '@apply py-6': {};
+            '@apply gap-6': {};
+            '@apply text-input-small': {};
+            '@apply h-[3.2rem]': {};
+        };
+        '@apply focus:ring': {};
+        '@apply focus:ring-ring': {};
+        '@apply focus:ring-offset': {};
+        '@apply focus:border-primitives-overlay-lighten-10': {};
+        '@apply dark:focus:border-primitives-overlay-darken-6': {};
+        '&:not(:invalid):not([aria-invalid="true"])': {
+            '@apply focus:hover:border-primitives-overlay-lighten-10': {};
+            '@apply dark:focus:hover:border-primitives-overlay-darken-6': {};
+        };
+    };
+};
+export = _exports;

package/dist/types/components/kbd.d.ts

@@ -0,0 +1,8 @@
+declare function _exports(): {
+    '.kbd': {
+        '@apply inline-flex justify-center items-center capitalize text-xs p-1 rounded h-5 whitespace-nowrap font-sans': {};
+        minWidth: string;
+        '@apply bg-blackAlpha-100 text-body': {};
+    };
+};
+export = _exports;

package/dist/types/components/label.d.ts

@@ -0,0 +1,4 @@
+declare function _exports(colors: any): {
+    '.sk-label': any;
+};
+export = _exports;

package/dist/types/components/link.d.ts

@@ -0,0 +1,44 @@
+declare function _exports(): {
+    '.sk-link': {
+        '@apply underline outline-none hover:underline': {};
+        '@apply rounded-utility': {};
+        '@apply focus-visible:ring ring-offset-[.6rem]': {};
+        '&-sm': {
+            '@apply text-small leading-[2rem]': {};
+        };
+        '&-md': {
+            '@apply text-base': {};
+        };
+        '&-lg': {
+            '@apply text-large': {};
+        };
+        '&-xl': {
+            '@apply text-lead leading-[3.2rem]': {};
+        };
+        '&-primary': {
+            '@apply text-vattjom-surface-primary': {};
+            '&:hover': {
+                '@apply text-vattjom-surface-primary-hover': {};
+            };
+        };
+        '&-tertiary': {
+            '@apply text-dark-secondary': {};
+            '&:hover': {
+                '@apply text-dark-primary': {};
+            };
+        };
+        '&.active': {
+            '@apply underline': {};
+        };
+        '& &-external-icon': {
+            '@apply w-[1em] h-[1em] leading-none ml-[.25em] align-text-top': {};
+        };
+        '&[type="button"]': {
+            '@apply inline-flex items-center align-bottom': {};
+        };
+        '&-disabled': {
+            '@apply text-dark-disabled cursor-default': {};
+        };
+    };
+};
+export = _exports;

package/dist/types/components/list.d.ts

@@ -0,0 +1,53 @@
+declare function _exports(): {
+    '.sk-list': {
+        li: {
+            '&:before': {
+                '@apply text-vattjom-surface-primary font-bold': {};
+                '@apply absolute inline-flex items-center justify-center text-center': {};
+                '@apply w-24 h-24': {};
+            };
+        };
+        '&[data-style="bullet"]': {
+            li: {
+                '&:before': {
+                    "@apply content-['\u2022'] my-[.5rem] text-[1.8rem]": {};
+                };
+            };
+        };
+        '&[data-style="numbered"]': {
+            li: {
+                counterIncrement: string;
+                '&:before': {
+                    '@apply text-small border-vattjom-surface-primary rounded-full leading-8': {};
+                    '@apply my-[.6rem] h-[2.2rem] w-[2.2rem] border-[.2rem]': {};
+                    content: string;
+                };
+            };
+        };
+        '&[data-style="stroke"]': {
+            li: {
+                '&:before': {
+                    "@apply content-['\u2013'] my-[.4rem] text-[1.6rem]": {};
+                };
+            };
+        };
+        '.sk-link': {
+            '&-tertiary': {
+                '@apply text-dark-primary': {};
+                '&:hover': {
+                    '@apply text-dark-secondary': {};
+                };
+            };
+        };
+        '&-item': {
+            '@apply pt-20': {};
+        };
+        '&-header': {
+            '@apply text-large font-bold ml-[3.2rem]': {};
+        };
+        '&-text': {
+            '@apply text-dark-secondary ml-[3.2rem]': {};
+        };
+    };
+};
+export = _exports;