@sk-web-gui/core 2.4.0 → 3.0.1

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

@@ -1,214 +0,0 @@
-export declare const Input: () => {
-    '.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: string;
-            };
-            '-moz-appearance': string;
-        };
-        '&&-lg': {
-            '@apply rounded-button-lg': {};
-            '@apply px-20': {};
-            '@apply py-[1.1rem]': {};
-            '@apply gap-8': {};
-            '@apply text-input-large': {};
-            '@apply h-[4.8rem]': {};
-        };
-        '&&-md': {
-            '@apply rounded-button-md': {};
-            '@apply px-16': {};
-            '@apply py-[0.7rem]': {};
-            '@apply gap-8': {};
-            '@apply text-input-medium': {};
-            '@apply h-[4rem]': {};
-        };
-        '&&-sm': {
-            '@apply rounded-button-sm': {};
-            '@apply px-12': {};
-            '@apply py-[0.5rem]': {};
-            '@apply gap-6': {};
-            '@apply text-input-small': {};
-            '@apply h-[3.2rem]': {};
-        };
-        '&&-textarea': {
-            '@apply h-auto': {};
-        };
-        '@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': {};
-        '@apply focus-within:ring': {};
-        '@apply focus-within:ring-ring': {};
-        '@apply focus-within:ring-offset': {};
-        '@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:hover:border-primitives-overlay-lighten-10': {};
-            '@apply dark:focus:hover:border-primitives-overlay-darken-6': {};
-        };
-    };
-};

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

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

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

@@ -1,27 +0,0 @@
-export declare const Label: (colors: string[]) => {
-    '.sk-label': {
-        '&[data-color="tertiary"]': {
-            '@apply bg-dark-primary': {};
-            '@apply text-light-primary': {};
-            '&[data-inverted="true"]': {
-                '@apply bg-tertiary-surface': {};
-                '@apply text-dark-primary': {};
-            };
-        };
-        '@apply inline-flex flex-row': {};
-        '@apply justify-center items-center': {};
-        '@apply gap-6 px-10 py-4': {};
-        '@apply h-24 max-h-24': {};
-        '@apply text-label-small': {};
-        '@apply rounded-utility-sm md:rounded-utility-md xl:rounded-utility-lg': {};
-        '@apply bg-dark-primary': {};
-        '@apply text-light-primary': {};
-        '&[data-rounded="true"]': {
-            '@apply rounded-full': {};
-        };
-        '&[data-inverted="true"]': {
-            '@apply bg-tertiary-surface': {};
-            '@apply text-dark-primary': {};
-        };
-    };
-};

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

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

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

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

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

@@ -1,48 +0,0 @@
-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-[6rem]': {};
-            '@apply pb-4': {};
-            '.sk-logo-figure': {
-                '@apply w-auto h-[5.6rem]': {};
-            };
-        };
-        '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 text-[2.2rem] leading-[2.8rem] font-header font-bold': {};
-        };
-        '&-subtitle': {
-            '@apply text-small font-normal block': {};
-        };
-        '&-divider': {
-            '@apply pt-8 pb-4': {};
-        };
-    };
-};

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

@@ -1,215 +0,0 @@
-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-[5.2rem]': {};
-            };
-        };
-        '> 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-[2rem] ml-[2rem]': {};
-            };
-            'li ul': {
-                '@apply gap-8': {};
-                ul: {
-                    li: {
-                        '@apply text-small leading-[1.8rem]': {};
-                        '.sk-menu-vertical-item-submenu-button, .sk-menu-vertical-item-submenu-button-expand': {
-                            '@apply py-[0.6rem] px-[1.4rem]': {};
-                        };
-                    };
-                };
-                li: {
-                    '@apply relative -ml-[.4rem]': {};
-                    '&:before': {
-                        content: string;
-                        position: string;
-                        display: string;
-                        width: string;
-                        height: string;
-                        top: string;
-                        left: string;
-                        backgroundImage: string;
-                        backgroundRepeat: string;
-                    };
-                    '&:not(:last-child):after': {
-                        content: string;
-                        position: string;
-                        display: string;
-                        width: string;
-                        top: string;
-                        bottom: string;
-                        left: string;
-                        backgroundImage: string;
-                        backgroundRepeat: string;
-                    };
-                    '&:last-child:after': {
-                        content: string;
-                        position: string;
-                        display: string;
-                        width: string;
-                        top: string;
-                        bottom: string;
-                        left: string;
-                        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-[1.6rem] pb-16': {};
-            };
-            '&-item': {
-                '.sk-menu-vertical-item-submenu': {
-                    '@apply font-bold': {};
-                    '&-medium': {
-                        'button, a': {
-                            '@apply py-[0.6rem] px-[1.4rem]': {};
-                        };
-                    };
-                    '&-large': {
-                        'button, a': {
-                            '@apply text-large': {};
-                            '@apply py-[1rem] px-[1.4rem]': {};
-                        };
-                    };
-                };
-            };
-        };
-    };
-    '.sk-menu-vertical': {
-        '@apply flex flex-col': {};
-        '&.hide': {
-            '@apply hidden': {};
-        };
-        '&-backbutton': {
-            '@apply flex items-center gap-[1.6rem] 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-[4.4rem]': {};
-                '&:focus-visible': {
-                    '@apply outline outline-2 outline-ring': {};
-                };
-                '> *': {
-                    '@apply flex w-full py-[.6rem] px-[1.4rem]': {};
-                    '@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-[0.6rem] px-[1.4rem]': {};
-                    };
-                };
-                '&-large': {
-                    'button, a': {
-                        '@apply py-[1rem] px-[1.4rem]': {};
-                    };
-                };
-                '&-button, &-button-expand': {
-                    '@apply items-center': {};
-                    '@apply py-[1rem] px-[1.4rem]': {};
-                };
-                '&-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-[.6rem] rounded-groups': {};
-                '.sk-avatar': {
-                    '@apply border-2 border-background-content': {};
-                };
-            };
-        };
-    };
-};

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

@@ -1,35 +0,0 @@
-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': {};
-                };
-            };
-        };
-    };
-};