@sk-web-gui/core 2.4.0 → 3.0.1

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

@@ -1,164 +0,0 @@
-export declare const Accordion: () => {
-    '.sk-disclosure': {
-        '&-header': {
-            '@apply mt-6 mb-8': {};
-            '@apply flex flex-col text-left': {};
-            '@apply cursor-pointer': {};
-            '*': {
-                '@apply cursor-pointer': {};
-            };
-            '&:focus-visible': {
-                '@apply outline-0': {};
-            };
-            '&-icon': {
-                '@apply ml-auto': {};
-                '@apply text-dark-secondary': {};
-                svg: {
-                    '@apply w-20 h-20': {};
-                };
-            };
-            '&[data-disabled="true"]': {
-                '@apply text-dark-disabled': {};
-                '.sk-disclosure-title': {
-                    '@apply text-dark-disabled': {};
-                };
-                '@apply cursor-default': {};
-                '*': {
-                    '@apply cursor-default': {};
-                };
-            };
-        };
-        '&-label': {
-            '@apply shrink-0': {};
-        };
-        '&-toggle': {
-            '@apply flex items-center justify-between': {};
-            '@apply gap-16': {};
-        };
-        '&-title': {
-            '@apply text-dark-primary': {};
-            '&-wrapper': {
-                '@apply w-full': {};
-                '@apply flex flex-row': {};
-                '@apply items-center': {};
-            };
-        };
-        '&-sm': {
-            '.sk-disclosure-title': {
-                '@apply text-h4-sm font-bold': {};
-                '&-wrapper': {
-                    '@apply gap-12': {};
-                };
-            };
-            '.sk-disclosure-toggle': {
-                '@apply gap-12': {};
-            };
-            '.sk-disclosure-support': {
-                '@apply text-small': {};
-            };
-            '&[data-variant="default"]': {
-                '.sk-disclosure-toggle': {
-                    '@apply py-4': {};
-                    '@apply h-40': {};
-                };
-                '.sk-disclosure-header-icon': {
-                    '@apply w-32 h-32': {};
-                };
-            };
-            '&[data-variant="alt"]': {};
-        };
-        '&-md': {
-            '.sk-disclosure-title': {
-                '@apply text-h4-md font-bold': {};
-                '&-wrapper': {
-                    '@apply gap-12': {};
-                };
-            };
-            '.sk-disclosure-toggle': {
-                '@apply gap-12': {};
-            };
-            '.sk-disclosure-support': {
-                '@apply text-body': {};
-            };
-            '&[data-variant="default"]': {
-                '.sk-disclosure-toggle': {
-                    '@apply py-8': {};
-                    '@apply h-56': {};
-                };
-                '.sk-disclosure-header-icon': {
-                    '@apply w-40 h-40': {};
-                };
-            };
-        };
-        '&-lg': {
-            '&[data-variant="alt"]': {
-                '.sk-disclosure-support': {
-                    '@apply text-large': {};
-                };
-                '.sk-disclosure-title': {
-                    '@apply text-h3-md font-bold': {};
-                    '&-wrapper': {
-                        '@apply gap-16': {};
-                    };
-                };
-            };
-        };
-        '&-body': {
-            '@apply flex flex-col': {};
-            '@apply mb-32': {};
-            '@apply mr-32': {};
-            '@apply gap-8': {};
-            '@apply py-0': {};
-            '@apply h-0 overflow-hidden': {};
-            transitionProperty: string;
-            transitionTimingFunction: string;
-            transitionDuration: string;
-            '&[aria-hidden="true"], &[data-hidden="true"]': {
-                '@apply my-0 invisible h-0': {};
-            };
-            '&[aria-hidden="false"], &[data-hidden="false"]': {
-                '@apply block h-max visible': {};
-            };
-            '&[data-variant="alt"]': {
-                '@apply mt-24': {};
-                '&[data-size="sm"]': {
-                    '@apply pr-12': {};
-                };
-                '&[data-size="md"]': {
-                    '@apply pr-12': {};
-                };
-                '&[data-size="lg"]': {
-                    '@apply pr-16': {};
-                };
-                '&[data-has-icon="true"]': {
-                    '&[data-size="sm"]': {
-                        '@apply ml-[3.2rem]': {};
-                    };
-                    '&[data-size="md"]': {
-                        '@apply ml-[3.6rem]': {};
-                    };
-                    '&[data-size="lg"]': {
-                        '@apply ml-[4.8rem]': {};
-                    };
-                };
-            };
-        };
-        '&-is-open': {
-            '.sk-disclosure-body': {
-                '@apply overflow-visible animate-reset-overflow': {};
-            };
-        };
-    };
-    '.sk-accordion': {
-        '&-item': {
-            '.sk-disclosure': {
-                transitionProperty: string;
-                transitionDuration: string;
-                '@apply border-b-1 border-divider': {};
-            };
-            '&:last-child .sk-disclosure': {
-                '@apply border-b-transparent': {};
-            };
-        };
-    };
-};

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

@@ -1,21 +0,0 @@
-export declare const Alert: (colors: string[]) => {
-    '.alert-close-button': {
-        '@apply absolute right-4 cursor-base focus-visible:outline-none': {};
-        '@apply text-neutral-600 hover:text-neutral-700': {};
-    };
-    '.alert-left-accent': {
-        '@apply border-l-2 rounded-none': {};
-        '@apply text-body': {};
-    };
-    '.alert-solid': {
-        '@apply border rounded-base': {};
-        '@apply text-white': {};
-    };
-    '.alert-subtle': {
-        '@apply border rounded-base': {};
-        '@apply text-body': {};
-    };
-    '.alert': {
-        '@apply w-full flex items-center px-4 py-3 relative overflow-hidden text-small': {};
-    };
-};

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

@@ -1,26 +0,0 @@
-export declare const Avatar: (colors: string[]) => {
-    '.sk-avatar': {
-        '&-img': {
-            '@apply min-w-full min-h-full object-cover': {};
-        };
-        '@apply inline-flex': {};
-        '@apply justify-center items-center': {};
-        '@apply rounded-button-sm md:rounded-button-md xl:rounded-button-lg': {};
-        '@apply overflow-hidden': {};
-        '&[data-rounded="true"]': {
-            '@apply rounded-circular': {};
-        };
-        '&&-sm': {
-            '@apply h-[3.2rem] w-[3.2rem] min-h-[2.4rem] max-h-[3.2rem] min-w-[2.4rem] max-w-[3.2rem]': {};
-            '@apply text-label-small': {};
-        };
-        '&&-md': {
-            '@apply h-[4rem] w-[4rem] min-h-[3.2rem] max-h-[4rem] min-w-[3.2rem] max-w-[4rem]': {};
-            '@apply text-label-medium': {};
-        };
-        '&&-lg': {
-            '@apply h-[6.4rem] w-[6.4rem] min-h-[4rem] max-h-[6.4rem] min-w-[4rem] max-w-[6.4rem]': {};
-            '@apply text-label-large': {};
-        };
-    };
-};

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

@@ -1,21 +0,0 @@
-export declare const Badge: (colors: string[]) => {
-    '.sk-badge': {
-        "&[data-color='tertiary']": {
-            '@apply bg-primary-surface': {};
-            '&[data-inverted="true"]': {
-                '@apply text-inverted-light-primary': {};
-                '@apply bg-tertiary-surface dark:bg-inverted-primary-surface': {};
-            };
-        };
-        '@apply inline-flex': {};
-        '@apply justify-center items-center': {};
-        '@apply text-light-primary': {};
-        '@apply rounded-utility': {};
-        '@apply overflow-hidden': {};
-        '@apply h-[2.4rem] w-[2.4rem]': {};
-        '@apply text-label-small': {};
-        '&[data-rounded="true"]': {
-            '@apply rounded-circular': {};
-        };
-    };
-};

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

@@ -1,28 +0,0 @@
-export declare const Breadcrumb: () => {
-    '.sk-breadcrumb': {
-        '@apply text-body relative': {};
-        '&-item': {
-            '@apply inline-flex items-center whitespace-nowrap': {};
-        };
-        '&-separator': {
-            '@apply mx-6': {};
-        };
-    };
-    '.sk-breadcrumb-item': {
-        span: {
-            '&[aria-current="page"]': {
-                '@apply font-bold': {};
-            };
-        };
-        "&[data-color=\"primary\"]": {
-            'a.sk-link': {
-                "@apply text-secondary": {};
-            };
-        };
-        "&[data-color=\"vattjom\"]": {
-            'a.sk-link': {
-                "@apply text-vattjom-text-primary": {};
-            };
-        };
-    };
-};

package/dist/types/core/src/components/button-group.d.ts

@@ -1,25 +0,0 @@
-export declare const ButtonGroup: () => {
-    '.sk-btn-group': {
-        '@apply inline-flex items-center': {};
-        '&.sk-btn-group-attached': {
-            '@apply rounded-groups': {};
-            '@apply bg-tertiary-surface': {};
-            '@apply py-6 px-12': {};
-            '> *': {
-                '@apply bg-transparent': {};
-            };
-            '.sk-btn[data-icon="true"] .sk-icon': {
-                '@apply bg-transparent text-dark-secondary': {};
-            };
-            '.sk-icon': {
-                '@apply p-0 w-fit h-fit': {};
-            };
-        };
-        '&-divider': {
-            '@apply grow bg-tertiary-surface px-6': {};
-            hr: {
-                '@apply h-[2rem]': {};
-            };
-        };
-    };
-};

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

@@ -1,201 +0,0 @@
-export declare const Button: (colors: string[]) => {
-    '.sk-btn': {
-        '&[data-background="false"]:not(:hover)': {
-            '@apply bg-transparent': {};
-        };
-        '.btn-has-icon': {
-            '&-left': {
-                '@apply h-full flex items-center justify-center -ml-2': {};
-                '.sk-icon': {
-                    '@apply bg-transparent': {};
-                    color: string;
-                };
-            };
-            '&-right': {
-                '@apply h-full flex items-center justify-center -mr-2': {};
-                '.sk-icon': {
-                    '@apply bg-transparent': {};
-                    color: string;
-                };
-            };
-        };
-        '&-lg .btn-has-icon-left': {
-            '@apply -ml-4': {};
-        };
-        '&-lg .btn-has-icon-right': {
-            '@apply -mr-4': {};
-        };
-        '&[data-icon=true]': {
-            '@apply p-0': {};
-            '.sk-icon': {
-                '@apply bg-transparent': {};
-                color: string;
-            };
-            "&[data-rounded='true']": {
-                '@apply rounded-full': {};
-            };
-            '&.sk-btn-sm': {
-                minWidth: string;
-                width: string;
-                maxWidth: string;
-                'svg, .sk-icon': {
-                    '@apply h-[2rem] w-[2rem]': {};
-                };
-            };
-            '&.sk-btn-md': {
-                minWidth: string;
-                width: string;
-                maxWidth: string;
-                'svg, .sk-icon': {
-                    '@apply h-[2rem] w-[2rem]': {};
-                };
-            };
-            '&.sk-btn-lg': {
-                minWidth: string;
-                width: string;
-                maxWidth: string;
-                'svg, .sk-icon': {
-                    '@apply h-[2.4rem] w-[2.4rem]': {};
-                };
-            };
-            '.btn-has-icon': {
-                '&-left': {
-                    '@apply m-0': {};
-                };
-                '&-right': {
-                    '@apply m-0': {};
-                };
-            };
-        };
-        '&-link': {
-            '@apply h-auto p-0 leading-normal text-neutral-600 hover:underline active:text-neutral-700': {};
-            '&.active': {
-                '@apply underline': {};
-            };
-            '@apply dark:text-neutral-200': {};
-            '@apply dark:active:text-neutral-500': {};
-        };
-        '&-ghost': {
-            '@apply text-dark-secondary': {};
-            '@apply bg-transparent': {};
-            '@apply border-transparent': {};
-            '@apply hover:bg-transparent': {};
-            '@apply hover:border-transparent': {};
-            '&.sk-btn-disabled, &[aria-disabled="true"]': {
-                '@apply disabled:bg-transparent bg-transparent disabled:border-transparent border-transparent !important': {};
-            };
-            '&[data-inverted="true"]': {
-                '@apply text-inverted-dark-secondary': {};
-            };
-        };
-        '&-tertiary': {
-            '@apply text-dark-secondary': {};
-            '@apply bg-tertiary-surface': {};
-            '@apply hover:bg-tertiary-surface-hover': {};
-            '&.sk-btn-disabled, &[aria-disabled="true"]': {
-                '@apply disabled:bg-tertiary-surface-disabled bg-tertiary-surface-disabled disabled:border-transparent border-transparent !important': {};
-            };
-            '&[data-inverted="true"]': {
-                '@apply text-inverted-dark-secondary': {};
-                '@apply bg-inverted-tertiary-surface': {};
-                '@apply hover:bg-inverted-tertiary-surface-hover': {};
-                '&.sk-btn-disabled, &[aria-disabled="true"]': {
-                    '@apply disabled:bg-inverted-tertiary-surface-disabled bg-inverted-tertiary-surface-disabled disabled:border-transparent border-transparent !important': {};
-                };
-            };
-        };
-        '&-secondary': {
-            '@apply border-secondary-outline': {};
-            '@apply text-dark-secondary': {};
-            '@apply bg-secondary-surface': {};
-            '@apply hover:border-secondary-outline-hover': {};
-            '@apply hover:bg-secondary-surface-hover': {};
-            '@apply focus-visible:border-background-content': {};
-            '&.sk-btn-disabled, &[aria-disabled="true"]': {
-                '@apply disabled:bg-secondary-surface-disabled bg-secondary-surface-disabled disabled:border-transparent border-transparent !important': {};
-            };
-            '&[data-inverted="true"]': {
-                '@apply border-inverted-secondary-outline': {};
-                '@apply text-inverted-dark-secondary': {};
-                '@apply bg-inverted-secondary-surface': {};
-                '@apply hover:border-inverted-secondary-outline-hover': {};
-                '@apply hover:bg-inverted-secondary-surface-hover': {};
-                '@apply focus-visible:border-inverted-background-content': {};
-                '&.sk-btn-disabled, &[aria-disabled="true"]': {
-                    '@apply disabled:bg-inverted-secondary-surface-disabled bg-inverted-secondary-surface-disabled disabled:border-transparent border-transparent !important': {};
-                };
-            };
-        };
-        '&-primary': {
-            "&[data-color='primary']": {
-                '@apply bg-primary-surface': {};
-                '@apply hover:bg-primary-surface-hover': {};
-                '&.active': {
-                    '@apply bg-primary-surface-hover': {};
-                };
-                "@apply active:bg-primary-surface-hover": {};
-                '&[data-inverted="true"]': {
-                    '@apply text-inverted-light-primary': {};
-                    '@apply bg-inverted-primary-surface': {};
-                    '@apply hover:bg-inverted-primary-surface-hover': {};
-                    '&.active': {
-                        '@apply bg-inverted-primary-surface-hover': {};
-                    };
-                    "@apply active:bg-inverted-primary-surface-hover": {};
-                };
-            };
-            '@apply text-light-primary': {};
-            '@apply hover:bg-primary-surface-hover': {};
-        };
-        '@apply box-border': {};
-        '@apply border-2 border-transparent': {};
-        '@apply cursor-pointer': {};
-        '@apply relative': {};
-        '@apply m-0': {};
-        '@apply px-24 py-8 gap-8': {};
-        '@apply inline-flex items-center justify-center flex-shrink-0 align-middle': {};
-        '@apply rounded-button': {};
-        transitionProperty: string;
-        '@apply\tduration-75 ease-out': {};
-        '@apply outline-none appearance-none select-none whitespace-nowrap': {};
-        '@apply focus-visible:outline-none': {};
-        '@apply focus-visible:ring': {};
-        "&[data-rounded='true']": {
-            '@apply rounded-circular': {};
-        };
-        '&-sm': {
-            '@apply text-label-small': {};
-            '@apply px-14 py-8 gap-6': {};
-            '@apply max-h-[3.2rem] h-[3.2rem]': {};
-            '@apply rounded-button-sm': {};
-            'svg, .sk-icon': {
-                '@apply h-[1.6rem] w-[1.6rem]': {};
-            };
-        };
-        '&-md': {
-            '@apply text-label-medium': {};
-            '@apply px-18 py-8 gap-8': {};
-            '@apply max-h-[4rem] h-[4rem]': {};
-            '@apply rounded-button-md': {};
-            'svg, .sk-icon': {
-                '@apply h-[1.8rem] w-[1.8rem]': {};
-            };
-        };
-        '&-lg': {
-            '@apply text-label-large': {};
-            '@apply px-24 py-8 gap-8': {};
-            '@apply max-h-[4.8rem] h-[4.8rem]': {};
-            '@apply rounded-button-lg': {};
-            'svg, .sk-icon': {
-                '@apply h-[2rem] w-[2rem]': {};
-            };
-        };
-        '&-disabled, &[aria-disabled="true"]': {
-            '@apply shadow-none disabled:shadow-none disabled:cursor-default cursor-default': {};
-            '@apply disabled:text-dark-disabled text-dark-disabled disabled:bg-primary-surface-disabled bg-primary-surface-disabled disabled:border-transparent border-transparent !important': {};
-            '&[data-inverted="true"]': {
-                '@apply disabled:text-inverted-dark-disabled text-inverted-dark-disabled disabled:bg-inverted-primary-surface-disabled bg-inverted-primary-surface-disabled disabled:border-transparent border-transparent !important': {};
-            };
-        };
-    };
-};

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

@@ -1,135 +0,0 @@
-export declare const Card: (colors: string[]) => {
-    '.sk-card': {
-        '&.sk-card-use-hover-effect': {
-            '.sk-card-body-icon': {
-                '@apply inline-flex': {};
-                '@apply mt-auto mb-auto mr-24': {};
-            };
-        };
-        "&[data-layout=\"horizontal\"]": {
-            '@apply flex-row h-[100%]': {};
-            '.sk-card': {
-                '&-image': {
-                    '@apply h-[100%] w-[128px]': {};
-                    '@apply float-left': {};
-                    '@apply rounded-none rounded-l-cards grow-0': {};
-                };
-                '&-body': {
-                    '@apply w-[100%]': {};
-                    '@apply border-none': {};
-                    '&-wrapper': {
-                        '@apply w-[100%]': {};
-                    };
-                    '&-content': {
-                        'p, a': {
-                            '@apply text-small': {};
-                        };
-                    };
-                    '&-meta': {
-                        '@apply hidden': {};
-                    };
-                };
-            };
-        };
-        '@apply bg-white relative rounded-b-cards rounded-cards': {};
-        '@apply flex flex-col': {};
-        '@apply no-underline hover:no-underline': {};
-        '@apply h-[100%]': {};
-        '&-wrapper': {
-            '@apply grid': {};
-        };
-        '&-image': {
-            '@apply object-cover grow': {};
-            '@apply rounded-t-cards': {};
-        };
-        '&-body': {
-            '@apply px-24 pb-24 pt-16 rounded-b-cards': {};
-            '@apply shrink': {};
-            '&-wrapper': {
-                '@apply flex': {};
-            };
-            '&-meta': {
-                '@apply flex space-x-12 mt-16': {};
-                span: {
-                    '@apply flex space-x-4 items-center': {};
-                    time: {
-                        '@apply h-[23px] leading-[24px]': {};
-                    };
-                };
-                '&.sk-card-image': {
-                    backgroundColor: string;
-                    '@apply h-[278px]': {};
-                };
-            };
-            '&-header': {
-                'h1, h2, h3, h4, h5, h6, h7, a': {
-                    '@apply line-clamp-1 text-h3-md text-dark-primary mt-16': {};
-                };
-                span: {
-                    '@apply pl-12': {};
-                };
-            };
-            '&-content': {
-                '@apply w-full': {};
-                'p, a': {
-                    '@apply line-clamp-3 m-0 pt-8 text-base': {};
-                };
-            };
-            '&-icon': {
-                '@apply hidden': {};
-            };
-        };
-    };
-    '.sk-card-link': {
-        '@apply hover:cursor-pointer': {};
-        '&::after': {
-            content: string;
-            position: string;
-            left: string;
-            top: string;
-            right: string;
-            bottom: string;
-        };
-    };
-    /**
-     * Meta card
-     */
-    '.sk-meta-card': {
-        '@apply no-underline hover:no-underline': {};
-        '@apply flex bg-vattjom-surface-accent': {};
-        '@apply p-14 rounded-16 w-[454px]': {};
-        '&[data-color="mono"]': {
-            '@apply bg-primitives-overlay-darken-1 dark:bg-primitives-overlay-lighten-1': {};
-        };
-        '&[data-color="vattjom"]': {
-            '@apply bg-vattjom-background-200': {};
-        };
-        '&-text-icon': {
-            '@apply mr-12 rounded-12 p-8': {};
-            '@apply bg-primitives-gray-lightest dark:bg-primitives-gray-800': {};
-            '@apply text-dark': {};
-            svg: {
-                height: string;
-                width: string;
-            };
-        };
-        '&-body': {
-            '&-header': {
-                'h1, h2, h3, h4, h5, h6, h7, a, p': {
-                    '@apply mt-6 text-base line-clamp-1': {};
-                    '@apply text-dark-primary': {};
-                };
-            };
-            '&-content': {
-                'p, a': {
-                    '@apply text-primitives-gray-700 dark:text-primitives-gray-200': {};
-                    '@apply text-dark-secondary line-clamp-1': {};
-                };
-            };
-        };
-        '&-external-link-icon': {
-            '@apply ml-auto h-[32px] w-[32px]': {};
-            '@apply p-6 text-dark': {};
-        };
-    };
-};