@sk-web-gui/core 3.0.0 → 3.1.0

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

@@ -0,0 +1,48 @@
+export declare const Logo: () => {
+    '.sk-logo': {
+        '@apply flex w-auto h-auto': {};
+        '@apply items-center': {};
+        '@apply text-dark-primary': {};
+        '&[data-inverted="true"]': {
+            '@apply text-light-primary': {};
+            '.sk-logo-divider': {
+                '@apply border-inverted-divider': {};
+            };
+        };
+        '&-figure': {
+            '@apply w-full h-full': {};
+        };
+        '&[data-variant="service"]': {
+            '@apply flex-row gap-6': {};
+            '@apply w-max': {};
+            '@apply h-60': {};
+            '@apply pb-4': {};
+            '.sk-logo-figure': {
+                '@apply w-auto h-56': {};
+            };
+        };
+        'a:focus-within &': {
+            '@apply outline outline-2 outline-ring': {};
+        };
+        'a &': {
+            '@apply no-underline': {};
+        };
+        'a:hover &': {
+            '@apply underline': {};
+        };
+        '&-service-content': {
+            '@apply h-full w-max': {};
+            '@apply flex flex-col justify-center': {};
+            '@apply pl-2 pt-2 pr-8 pb-0': {};
+        };
+        '&-title': {
+            '@apply font-header text-logo-header': {};
+        };
+        '&-subtitle': {
+            '@apply text-small font-normal block': {};
+        };
+        '&-divider': {
+            '@apply pt-8 pb-4': {};
+        };
+    };
+};

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

@@ -0,0 +1,198 @@
+export declare const MenuVertical: () => {
+    '.sk-menu-vertical-sidebar': {
+        '@apply rounded-button': {};
+        '> ul > li > .sk-menu-vertical-item-submenu': {
+            '> .sk-menu-vertical-item-submenu-button': {
+                '@apply min-h-52': {};
+            };
+        };
+        '> ul': {
+            '@apply py-16 px-24': {};
+        };
+        '.sk-menu-vertical': {
+            '@apply gap-12': {};
+            '&-header': {
+                '@apply bg-primary-surface': {};
+                '@apply rounded-t-button': {};
+                '@apply py-20 px-32': {};
+                '&, a': {
+                    '@apply text-light-primary': {};
+                };
+                '.sk-divider': {
+                    '@apply border-inverted-divider': {};
+                };
+                '.sk-logo': {
+                    '@apply text-light-secondary': {};
+                };
+            };
+            '&.ul, & ul': {
+                '@apply py-8 pl-20 ml-20': {};
+            };
+            'li ul': {
+                '@apply gap-8': {};
+                ul: {
+                    li: {
+                        '@apply text-small leading-18': {};
+                        '.sk-menu-vertical-item-submenu-button, .sk-menu-vertical-item-submenu-button-expand': {
+                            '@apply py-6 px-14': {};
+                        };
+                    };
+                };
+                li: {
+                    '@apply relative -ml-4': {};
+                    '&:before': {
+                        '@apply content-[""] absolute inline-flex w-20 h-44 -top-8 -left-16': {};
+                        backgroundImage: string;
+                        backgroundRepeat: string;
+                    };
+                    '&:not(:last-child):after': {
+                        '@apply content-[""] absolute inline-flex w-20 -top-8 bottom-0 -left-16': {};
+                        backgroundImage: string;
+                        backgroundRepeat: string;
+                    };
+                    '&:last-child:after': {
+                        '@apply content-[""] absolute inline-flex w-20 -top-8 bottom-0 -left-16': {};
+                        backgroundImage: string;
+                        backgroundRepeat: string;
+                    };
+                };
+            };
+            '&-item': {
+                '.sk-menu-vertical-item-submenu': {
+                    '&-button': {
+                        '@apply gap-8': {};
+                        '&[aria-current="page"], &[aria-current="page"] ~ button': {
+                            '@apply font-bold': {};
+                        };
+                    };
+                };
+                '> a, > button': {
+                    '&[aria-current="page"]': {
+                        '@apply font-bold': {};
+                    };
+                };
+            };
+        };
+    };
+    '.sk-menu-vertical-nav': {
+        '.sk-menu-vertical': {
+            '@apply gap-12': {};
+            '&.ul, & ul': {
+                '@apply pt-12 pr-16 pb-16': {};
+            };
+            '&-item': {
+                '.sk-menu-vertical-item-submenu': {
+                    '@apply font-bold': {};
+                    '&-medium': {
+                        'button, a': {
+                            '@apply py-6 px-14': {};
+                        };
+                    };
+                    '&-large': {
+                        'button, a': {
+                            '@apply text-large': {};
+                            '@apply py-10 px-14': {};
+                        };
+                    };
+                };
+            };
+        };
+    };
+    '.sk-menu-vertical': {
+        '@apply flex flex-col': {};
+        '@apply text-base': {};
+        '&.hide': {
+            '@apply hidden': {};
+        };
+        '&-backbutton': {
+            '@apply flex items-center gap-16 text-lead mb-40': {};
+        };
+        '&-label': {
+            '@apply mb-24': {};
+        };
+        '&-item': {
+            '@apply flex flex-col': {};
+            '&.hide': {
+                '@apply hidden': {};
+            };
+            '[aria-disabled="true"]': {
+                '@apply cursor-default bg-transparent text-primitives-overlay-darken-6 dark:text-primitives-overlay-lighten-7': {};
+            };
+            'a, button': {
+                '@apply flex': {};
+                color: string;
+            };
+            '& > a, > button': {
+                '@apply flex items-center min-h-44': {};
+                '&:focus-visible': {
+                    '@apply outline outline-2 outline-ring': {};
+                };
+                '> *': {
+                    '@apply flex w-full py-6 px-14': {};
+                    '@apply rounded-button cursor-pointer': {};
+                };
+                '&:not([aria-disabled="true"]) > *': {
+                    '@apply bg-transparent text-dark-secondary': {};
+                };
+                '&:hover:not([aria-disabled="true"]) > *': {
+                    '@apply bg-primitives-overlay-darken-3': {};
+                };
+                '&[aria-current="page"]:not(:hover) > *': {
+                    '@apply bg-primary-surface text-light-primary': {};
+                    '@apply focus-visible:ring': {};
+                };
+            };
+            '.sk-menu-vertical-item-submenu': {
+                '@apply flex justify-between w-full': {};
+                '@apply rounded-button': {};
+                '&:hover': {
+                    '> a:not([aria-disabled="true"]), > button:not([aria-disabled="true"]), > a[aria-expanded="true"]:not([aria-disabled="true"]), > button[aria-expanded="true"]:not([aria-disabled="true"])': {
+                        '@apply text-dark-primary bg-primitives-overlay-darken-3': {};
+                    };
+                };
+                '&:focus-within': {
+                    '@apply outline outline-2 outline-ring': {};
+                    '.sk-menu-vertical-item-submenu-button, .sk-menu-vertical-item-submenu-button-expand': {
+                        '&:focus-visible': {
+                            '@apply ring-0 ring-offset-0 outline-0': {};
+                        };
+                    };
+                };
+                '&-medium': {
+                    'button, a': {
+                        '@apply py-6 px-14': {};
+                    };
+                };
+                '&-large': {
+                    'button, a': {
+                        '@apply py-10 px-14': {};
+                    };
+                };
+                '&-button, &-button-expand': {
+                    '@apply items-center': {};
+                    '@apply py-10 px-14': {};
+                };
+                '&-button-expand': {
+                    '@apply rounded-r-button rounded-l-0': {};
+                };
+                '&-button': {
+                    '@apply text-left grow rounded-l-button rounded-r-0': {};
+                    '&[aria-current="page"]:not(:hover), &[aria-current="page"]:not(:hover) ~ button:not(:hover)': {
+                        '@apply bg-primary-surface text-light-primary': {};
+                    };
+                    '&[aria-expanded="true"]': {
+                        '&:not(:hover,[aria-current="page"],[aria-disabled="true"]), &:not(:hover,[aria-current="page"],[aria-disabled="true"]) ~ button:not(:hover)': {
+                            '@apply bg-vattjom-surface-accent': {};
+                        };
+                    };
+                };
+            };
+            '.sk-menu-vertical-item-tool-item': {
+                '@apply flex items-center gap-10 p-6 rounded-groups': {};
+                '.sk-avatar': {
+                    '@apply border-2 border-background-content': {};
+                };
+            };
+        };
+    };
+};

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

@@ -0,0 +1,35 @@
+export declare const MenuBar: (colors: string[]) => {
+    '.sk-menubar': {
+        '@apply flex flex-row': {};
+        '@apply p-8 gap-16': {};
+        '@apply rounded-cards': {};
+        '&[data-background="true"]': {
+            '@apply bg-background-color-mixin-1': {};
+        };
+        '&-item': {
+            '@apply inline-block': {};
+            '@apply relative': {};
+            '@apply h-40': {};
+            'a, button': {
+                color: string;
+            };
+            '> *:first-child': {
+                '@apply rounded-button-sm md:rounded-button-md xl:rounded-button-lg': {};
+                '@apply cursor-pointer': {};
+                '@apply bg-transparent text-dark-primary': {};
+                '@apply hover:bg-tertiary-surface': {};
+                '@apply font-bold': {};
+                '@apply gap-2 px-14 py-8': {};
+                '@apply h-full min-h-full': {};
+                '@apply text-base leading-base': {};
+                '@apply inline-flex shrink-0 flex-nowrap': {};
+                '@apply border-0': {};
+                '@apply focus-visible:bg-background-content focus-visible:ring': {};
+                '&[aria-current="page"]:not(:hover),&[aria-selected="true"]:not(:hover), ': {
+                    '@apply bg-primary-surface text-light-primary': {};
+                    '@apply focus-visible:ring': {};
+                };
+            };
+        };
+    };
+};

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

@@ -0,0 +1,45 @@
+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/components/notification.d.ts

@@ -0,0 +1,48 @@
+declare function _exports(): {
+    '.notification': {
+        '@apply relative flex p-4 text-small w-96 m-2 max-w-full rounded-base shadow-sm sm:max-w-md': {};
+        '@apply text-body bg-white border border-neutral-200': {};
+        '@apply dark:text-neutral-100 dark:bg-neutral-700 dark:border-neutral-600': {};
+    };
+    '.notification-icon': {
+        '@apply flex-shrink-0 w-5 h-5 mr-3': {};
+        '&-info': {
+            '--tw-text-opacity': string;
+            color: string;
+        };
+        '&-success': {
+            '--tw-text-opacity': string;
+            color: string;
+        };
+        '&-error': {
+            '--tw-text-opacity': string;
+            color: string;
+        };
+        '&-warning': {
+            '--tw-text-opacity': string;
+            color: string;
+        };
+    };
+    '.notification-content': {
+        '@apply flex flex-col items-start flex-1 mr-2 -mt-px text-left': {};
+        '&-title': {
+            '@apply font-semibold': {};
+        };
+        '&-description': {
+            '@apply text-neutral-500 dark:text-neutral-400': {};
+        };
+    };
+    '.notification-action': {
+        '@apply absolute space-x-2': {};
+        right: number;
+        top: number;
+        '&-undo': {
+            '@apply h-auto p-0 text-small': {};
+        };
+        '&-close-button': {
+            '@apply cursor-base text-neutral-700 hover:text-body': {};
+            '@apply dark:text-neutral-400 dark:hover:text-neutral-100': {};
+        };
+    };
+};
+export = _exports;

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

@@ -0,0 +1,101 @@
+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-40 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/components/popup-menu.d.ts

@@ -0,0 +1,138 @@
+export declare const PopupMenu: () => {
+    '.sk-popup-menu': {
+        '@apply hidden': {};
+        '&[data-open="true"]': {
+            '@apply flex': {};
+        };
+        '&[data-position="left"]': {
+            '@apply mt-0 mr-8 right-full': {};
+            '&[data-align="end"]': {
+                '@apply bottom-0': {};
+            };
+            '&[data-align="start"]': {
+                '@apply top-0': {};
+            };
+        };
+        '&[data-position="right"]': {
+            '@apply mt-0 ml-8 left-full': {};
+            '&[data-align="end"]': {
+                '@apply bottom-0': {};
+            };
+            '&[data-align="start"]': {
+                '@apply top-0': {};
+            };
+        };
+        '&[data-position="over"]': {
+            '@apply mt-0 mb-8 bottom-full': {};
+            '&[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-40': {};
+            '@apply min-h-40': {};
+            '@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-20 h-20': {};
+            };
+            '@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-32': {};
+                '@apply min-h-32': {};
+                '@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-18 h-18': {};
+                };
+            };
+        };
+        '&.right': {
+            '@apply right-0': {};
+        };
+    };
+};

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

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