@sk-web-gui/core 1.0.2 → 1.0.3

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

@@ -0,0 +1,126 @@
+declare function _exports(): {
+    '.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': {};
+            };
+        };
+    };
+};
+export = _exports;

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

@@ -0,0 +1,21 @@
+declare function _exports(): {
+    '.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]': {};
+                };
+            };
+        };
+    };
+};
+export = _exports;

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

@@ -0,0 +1,142 @@
+declare function _exports(): {
+    '.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[];
+        };
+    };
+};
+export = _exports;

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

@@ -0,0 +1,219 @@
+declare function _exports(): {
+    '.sk-sidemenu': {
+        '@apply w-[440px]': {};
+        '&-header': {
+            '@apply relative py-[2rem] px-[1.6rem] rounded-t-[.2rem] bg-primary text-white': {};
+            '.label-small': {
+                '@apply text-[1.6rem]': {};
+            };
+            '.label-button': {
+                '@apply w-full justify-between p-0 leading-[inherit]': {};
+                '&-icon': {
+                    '@apply !text-xl': {};
+                };
+            };
+            '&-label': {
+                '@apply flex items-center': {};
+                'label, .label': {
+                    '@apply text-xl font-bold flex items-center w-full': {};
+                };
+                span: {
+                    '@apply ml-auto': {};
+                };
+            };
+        };
+        '&-item': {
+            '@apply bg-white h-full': {};
+            '> ul.items': {
+                '@apply hidden': {};
+            };
+            '&.open > ul.items': {
+                '@apply block': {};
+            };
+            '&-label': {
+                '@apply flex-grow select-none flex items-center': {};
+            };
+            '&.active': {
+                '> .sk-sidemenu-wrapper': {
+                    boxShadow: string;
+                    '.sk-sidemenu-item-label': {
+                        '@apply underline': {};
+                    };
+                };
+            };
+            '& .sk-sidemenu-wrapper': {
+                '@apply min-h-[48px] max-h-[48px] relative flex flex-wrap items-center': {};
+                '.sk-sidemenu-item-link': {
+                    '@apply flex-grow relative flex items-center text-base text-left justify-start pr-sm h-full': {};
+                    '@apply focus-visible:z-base': {};
+                    '&[aria-disabled="true"]': {
+                        '@apply text-neutral-600 cursor-not-allowed': {};
+                        '.sk-sidemenu-item-label': {
+                            '@apply text-neutral-600': {};
+                        };
+                    };
+                };
+                '.expand': {
+                    '@apply w-[50px] h-full flex justify-center items-center ml-auto p-0': {};
+                    '&[aria-disabled="true"]': {
+                        '@apply !text-gray-stroke cursor-not-allowed !bg-transparent': {};
+                        path: {
+                            '@apply fill-gray-stroke': {};
+                        };
+                    };
+                    path: {
+                        '@apply fill-primary': {};
+                    };
+                    '&-button': {
+                        '@apply fill-primary flex justify-center items-center border-l border-gray-stroke h-[24px] w-[45px]': {};
+                    };
+                };
+            };
+            '&.open': {
+                '& + .menu-item > .sk-sidemenu-wrapper': {
+                    '@apply border-t': {};
+                };
+            };
+            '&.draggable': {
+                '&.dragenter': {
+                    '> .sk-sidemenu-wrapper': {
+                        '@apply h-full max-h-full': {};
+                    };
+                    "> .sk-sidemenu-wrapper > *:not([draggable='true'])": {
+                        '@apply pointer-events-none': {};
+                    };
+                    '& > .sk-sidemenu-wrapper::after': {
+                        '@apply bg-info-surface-accent block relative w-full h-[44px]': {};
+                        content: string;
+                    };
+                };
+                '&.moving': {
+                    '@apply hidden': {};
+                };
+                '& .sk-sidemenu-menuitem-movebutton': {
+                    '@apply -translate-x-full no-underline text-gray-stroke absolute py-sm inset-y-0 my-auto': {};
+                    svg: {
+                        '@apply h-full': {};
+                    };
+                    '&[aria-disabled="true"]': {
+                        '@apply !text-gray-stroke cursor-not-allowed !bg-transparent': {};
+                    };
+                };
+                '&.separator': {
+                    '@apply bg-transparent relative': {};
+                    '> div.sk-sidemenu-wrapper, > .sk-sidemenu-item-link': {
+                        '@apply h-[44px]': {};
+                    };
+                };
+            };
+            '&-separator': {
+                '@apply text-divider': {};
+                height: string;
+                width: string;
+                backgroundImage: string;
+                backgroundSize: string;
+                backgroundPosition: string;
+                backgroundRepeat: string;
+            };
+            '&.lvl-0': {
+                '&:first-child > .sk-sidemenu-wrapper': {
+                    '@apply border-t-0': {};
+                };
+                '> .sk-sidemenu-wrapper': {
+                    '@apply h-[64px] max-h-[64px] border border-divider': {};
+                    '> .sk-sidemenu-item-link': {
+                        '@apply  py-md': {};
+                        paddingLeft: string;
+                    };
+                };
+                '.sk-sidemenu-item-link': {
+                    '@apply h-[64px] max-h-[64px]': {};
+                };
+                '& + .sk-sidemenu-item > .sk-sidemenu-wrapper': {
+                    '@apply border-t-0': {};
+                };
+                '> .items': {
+                    '@apply border-l border-r border-divider': {};
+                };
+                '&.open > .items': {
+                    '@apply border-b border-divider': {};
+                };
+                '&.separator': {
+                    '& + .lvl-0': {
+                        '@apply border-t border-divider': {};
+                    };
+                };
+                '&.separator > .sk-sidemenu-wrapper': {
+                    '@apply border-0': {};
+                };
+            };
+            '&.lvl-1': {
+                '@apply bg-gray-lighter': {};
+                '> .sk-sidemenu-wrapper, .sk-sidemenu-item-link': {
+                    '@apply h-[56px] max-h-[56px]': {};
+                };
+                '&.open > .sk-sidemenu-wrapper': {
+                    '@apply border-b border-divider': {};
+                };
+                '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
+                    paddingLeft: string;
+                };
+            };
+            '&.lvl-2': {
+                '.sk-sidemenu-wrapper': {
+                    '@apply bg-gray-middle h-[48px] max-h-[48px]': {};
+                    '> .sk-sidemenu-item-link': {
+                        '@apply h-[48px] max-h-[48px]': {};
+                    };
+                };
+                '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
+                    paddingLeft: string;
+                };
+            };
+            '&.lvl-3': {
+                '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
+                    paddingLeft: string;
+                };
+            };
+            '&.lvl-4': {
+                '.sk-sidemenu-wrapper': {
+                    '@apply bg-[#d4d4d4]': {};
+                };
+                '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
+                    paddingLeft: string;
+                };
+            };
+            '&.lvl-5': {
+                '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
+                    paddingLeft: string;
+                };
+            };
+            '&.lvl-6': {
+                '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
+                    paddingLeft: string;
+                };
+            };
+            '&.lvl-7': {
+                '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
+                    paddingLeft: string;
+                };
+            };
+            '&.lvl-8': {
+                '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
+                    paddingLeft: string;
+                };
+            };
+            '&.lvl-9': {
+                '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
+                    paddingLeft: string;
+                };
+            };
+            '&.lvl-10': {
+                '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
+                    paddingLeft: string;
+                };
+            };
+        };
+    };
+};
+export = _exports;

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

@@ -0,0 +1,31 @@
+declare function _exports(): {
+    '.sk-snackbar': {
+        '@apply flex items-center gap-12 py-8 pl-16 pr-8 rounded-groups break-words max-w-[40rem]': {};
+        '@apply text-label-small text-vattjom-text-secondary': {};
+        '&-text': {
+            '@apply flex-grow': {};
+        };
+        '.sk-icon': {
+            '@apply text-light-primary': {};
+        };
+        '&-content': {
+            '@apply flex-grow gap-12 py-4 flex items-center': {};
+        };
+        '&-primary': {
+            '@apply text-light-secondary bg-dark-primary': {};
+        };
+        '&-info': {
+            '@apply text-vattjom-text-secondary bg-vattjom-surface-primary': {};
+        };
+        '&-success': {
+            '@apply text-gronsta-text-secondary bg-gronsta-surface-primary': {};
+        };
+        '&-warning': {
+            '@apply text-warning-text-secondary bg-warning-surface-primary': {};
+        };
+        '&-error': {
+            '@apply text-error-text-secondary bg-error-surface-primary': {};
+        };
+    };
+};
+export = _exports;

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

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

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

@@ -0,0 +1,65 @@
+declare function _exports(): {
+    '.sk-form-switch-label': {
+        '@apply inline-flex align-middle items-center': {};
+        '@apply flex-row gap-12': {};
+        '@apply font-normal text-base': {};
+        "&[type='hidden']": {
+            '@apply hidden': {};
+            '.sk-form-switch': {
+                '@apply hidden': {};
+            };
+        };
+    };
+    '.sk-form-switch': {
+        '@apply rounded-full cursor-pointer focus:outline-none': {};
+        '@apply bg-primitives-overlay-darken-3 dark:bg-primitives-overlay-lighten-3': {};
+        '@apply hover:bg-primitives-overlay-darken-5 hover:dark:bg-primitives-overlay-lighten-4': {};
+        'input[type=checkbox]:focus-visible + &': {
+            '@apply ring ring-blue-500': {};
+        };
+        'input[type=checkbox]:checked + &': {
+            "&[data-color=\"gronsta\"]": {
+                '.sk-form-switch-box': {
+                    '@apply bg-gronsta-surface-primary': {};
+                };
+            };
+            '.sk-form-switch-icon': {
+                '@apply flex': {};
+            };
+            '.sk-form-switch-box': {
+                transform: string;
+            };
+            '@apply bg-primitives-overlay-darken-4 dark:bg-primitives-overlay-lighten-5': {};
+            "&[data-disabled=\"true\"]": {
+                '.sk-form-switch-box': {
+                    '@apply bg-transparent': {};
+                    '.sk-form-switch-icon': {
+                        '@apply bg-primitives-overlay-darken-6 dark:bg-primitives-overlay-lighten-6': {};
+                        '@apply text-light-primary': {};
+                    };
+                };
+            };
+        };
+        "&[data-disabled=\"true\"]": {
+            '@apply cursor-default': {};
+            '@apply bg-primitives-overlay-darken-2 dark:bg-primitives-overlay-lighten-2': {};
+            '.sk-form-switch-box': {
+                '@apply bg-primitives-overlay-darken-6 dark:bg-primitives-overlay-lighten-6': {};
+            };
+        };
+        width: string;
+    };
+    '.sk-form-switch-box': {
+        '@apply transition-transform ease-in-out duration-150 transform rounded-full shadow translate-x-0 m-6': {};
+        '@apply bg-primitives-overlay-darken-7 dark:bg-primitives-overlay-lighten-7': {};
+        '@apply h-20 w-20': {};
+        '@apply flex justify-center items-center object-center': {};
+        '.sk-form-switch-icon': {
+            '@apply bg-transparent': {};
+            '@apply hidden': {};
+            '@apply w-20 h-20': {};
+            '@apply text-light-primary': {};
+        };
+    };
+};
+export = _exports;

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

@@ -0,0 +1,57 @@
+declare function _exports(): {
+    '.sk-tab-menu': {
+        '&-wrapper': {
+            display: string;
+            flexDirection: string;
+            margin: string;
+        };
+        '&-right': {
+            '@apply justify-end': {};
+        };
+        '&-center': {
+            '@apply justify-center': {};
+        };
+        '&-list': {
+            all: string;
+            display: string;
+            '&-stretch': {
+                '@apply w-full justify-between': {};
+            };
+        };
+        '&-underline': {
+            width: string;
+            height: number;
+            '@apply bg-gray-light': {};
+        };
+        '&-item': {
+            all: string;
+            height: number;
+            display: string;
+            padding: string;
+            marginRight: string;
+            alignItems: string;
+            position: string;
+            cursor: string;
+            '&-stretch': {
+                '@apply mr-0': {};
+            };
+            '&-right': {
+                '@apply mr-0 ml-[5rem]': {};
+            };
+            '&-center:last-of-type': {
+                '@apply mr-0': {};
+            };
+            '&.active::after': {
+                content: string;
+                display: string;
+                position: string;
+                width: string;
+                height: number;
+                top: string;
+                left: number;
+                '@apply bg-primary': {};
+            };
+        };
+    };
+};
+export = _exports;

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

@@ -0,0 +1,12 @@
+declare function _exports(): {
+    '.table': {
+        '@apply min-w-full border-collapse border-gray-stroke divide-gray-lighter table-auto': {};
+        '&-item': {
+            '@apply px-6 py-4 border border-gray-stroke whitespace-nowrap': {};
+            '&:nth-child(odd)': {
+                '@apply bg-gray-lighter': {};
+            };
+        };
+    };
+};
+export = _exports;