@sk-web-gui/core 1.0.1 → 1.0.3

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

@@ -0,0 +1,97 @@
+declare function _exports(): {
+    '.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': {};
+                svg: {
+                    '@apply w-20 h-20': {};
+                };
+            };
+            '&[data-disabled="true"]': {
+                '@apply text-dark-disabled': {};
+                '@apply cursor-default': {};
+                '*': {
+                    '@apply cursor-default': {};
+                };
+            };
+        };
+        '&-sm': {
+            '.sk-disclosure-title': {
+                '@apply text-h4-sm font-bold': {};
+            };
+            '.sk-disclosure-toggle': {
+                '@apply py-4': {};
+                '@apply h-40': {};
+            };
+            '.sk-disclosure-header-icon': {
+                '@apply w-32 h-32': {};
+            };
+        };
+        '&-md': {
+            '.sk-disclosure-title': {
+                '@apply text-h4-md font-bold': {};
+            };
+            '.sk-disclosure-toggle': {
+                '@apply py-8': {};
+                '@apply h-56': {};
+            };
+            '.sk-disclosure-header-icon': {
+                '@apply w-40 h-40': {};
+            };
+        };
+        '&-toggle': {
+            '@apply flex items-center justify-between': {};
+            '@apply gap-16': {};
+        };
+        '&-title': {
+            '@apply text-dark-secondary': {};
+        };
+        '&-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': {};
+            };
+        };
+        '&-is-open': {
+            '.sk-disclosure-body': {
+                '@apply overflow-visible animate-reset-overflow': {};
+            };
+            '.sk-disclosure-title': {
+                '@apply text-vattjom-text-primary': {};
+            };
+        };
+    };
+    '.sk-accordion': {
+        '&-item': {
+            '.sk-disclosure': {
+                transitionProperty: string;
+                transitionDuration: string;
+                '@apply border-b-1 border-divider': {};
+            };
+            '&:last-child .sk-disclosure': {
+                '@apply border-b-transparent': {};
+            };
+        };
+    };
+};
+export = _exports;

package/dist/types/components/alert-banner.d.ts

@@ -0,0 +1,24 @@
+declare function _exports(): {
+    '.alert-banner': {
+        '@apply p-md': {};
+        '&-content': {
+            '@apply w-full m-auto flex': {};
+            '&-wrapper': {
+                '@apply flex-grow flex': {};
+            };
+        };
+        '&-icon': {
+            '@apply mr-[10px]': {};
+        };
+        '&-children': {
+            '@apply w-full underline inline-block max-w-[800px] text-body text-base': {};
+        };
+        '&-close': {
+            '@apply p-4 -m-4 flex flex-col': {};
+        };
+    };
+    '.tab': {
+        '@apply mr-[10px] bg-white pt-4 pb-3 px-4 rounded-b-button shadow-[rgba(0,_0,_0,_0.24)_0px_1.5px_4px]': {};
+    };
+};
+export = _exports;

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

@@ -0,0 +1,10 @@
+declare function _exports(colors: any): {
+    '.alert-close-button': any;
+    '.alert-left-accent': any;
+    '.alert-solid': any;
+    '.alert-subtle': any;
+    '.alert': {
+        '@apply w-full flex items-center px-4 py-3 relative overflow-hidden text-small': {};
+    };
+};
+export = _exports;

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,172 @@
+declare function _exports(colors: any): {
+    '.sk-btn': {
+        '.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: {
+                    '@apply h-[2rem] w-[2rem]': {};
+                };
+            };
+            '&.sk-btn-md': {
+                minWidth: string;
+                width: string;
+                maxWidth: string;
+                svg: {
+                    '@apply h-[2rem] w-[2rem]': {};
+                };
+            };
+            '&.sk-btn-lg': {
+                minWidth: string;
+                width: string;
+                maxWidth: string;
+                svg: {
+                    '@apply h-[2.4rem] w-[2.4rem]': {};
+                };
+            };
+            '.btn-has-icon': {
+                '&-left': {
+                    '@apply m-0': {};
+                };
+                '&-right': {
+                    '@apply m-0': {};
+                };
+            };
+        };
+        '&-link': any;
+        '&-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': any;
+        '@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: {
+                '@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: {
+                '@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: {
+                '@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': {};
+            };
+        };
+    };
+};
+export = _exports;

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

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

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

@@ -0,0 +1,106 @@
+declare function _exports(): {
+    '.sk-form-checkbox': {
+        '@apply bg-inherit': {};
+        '@apply rounded-utility': {};
+        '@apply bg-transparent border-transparent': {};
+        '&-sm': {
+            '@apply w-[2.4rem] h-[2.4rem]': {};
+        };
+        '&-md': {
+            '@apply w-[2.4rem] h-[2.4rem]': {};
+        };
+        '&-lg': {
+            '@apply w-[2.4rem] h-[2.4rem]': {};
+        };
+        '+ .sk-icon': {
+            '@apply absolute inset-0 my-auto bg-transparent': {};
+            '@apply border-[0.1rem] p-2 border-primitives-overlay-darken-6 dark:border-primitives-overlay-lighten-6': {};
+            '@apply bg-primitives-overlay-lighten-10 dark:bg-primitives-overlay-darken-6': {};
+            svg: {
+                '@apply hidden': {};
+            };
+        };
+        '&&:checked': {
+            '@apply text-light-primary bg-none': {};
+            '& + .sk-icon': {
+                '@apply text-light-primary bg-dark-primary border-dark-primary': {};
+                svg: {
+                    '@apply block': {};
+                };
+            };
+        };
+        '&&:hover:not(&&-disabled,&&:checked,&&[aria-invalid=true]),&&:hover:focus:not(&&-disabled,&&:checked,&&[aria-invalid=true])': {
+            '& + .sk-icon, &:focus + .sk-icon': {
+                '@apply text-primitives-overlay-darken-6 dark:text-primitives-overlay-lighten-5 border-primitives-overlay-darken-8 dark:border-primitives-overlay-lighten-4': {};
+                svg: {
+                    '@apply block': {};
+                };
+            };
+        };
+        '&&[aria-invalid=true]': {
+            '& + .sk-icon': {
+                '@apply border-2 border-error-surface-primary': {};
+            };
+            '&&:checked': {
+                '& + .sk-icon': {
+                    '@apply p-2 bg-background-content text-dark-primary': {};
+                    svg: {
+                        '@apply block': {};
+                    };
+                };
+            };
+        };
+        '&&-disabled,&&-disabled:hover': {
+            '@apply cursor-not-allowed': {};
+            '& + .sk-icon': {
+                '@apply bg-background-200 border-primitives-overlay-darken-3': {};
+            };
+            '&:checked': {
+                '& + .sk-icon': {
+                    '@apply bg-dark-disabled text-light-primary border-0': {};
+                };
+            };
+            '& ~ .sk-form-checkbox-label': {
+                '@apply text-dark-disabled': {};
+            };
+        };
+        '&-label-left &-label': {
+            '@apply mr-[.8rem]': {};
+        };
+        '&-label-right &-label': {
+            '@apply ml-[.8rem]': {};
+        };
+        '&-label-left': {
+            '.sk-icon': {
+                '@apply left-auto right-0': {};
+            };
+        };
+        '&-label-right': {
+            '.sk-icon': {
+                '@apply right-auto left-0': {};
+            };
+        };
+        '&-label': {
+            '@apply font-normal text-body select-none text-small': {};
+            '&-wrapper': {
+                '@apply relative inline-flex align-top items-center cursor-base': {};
+            };
+            '&-sm': {
+                '@apply text-small': {};
+            };
+            '&-md': {
+                '@apply text-base': {};
+            };
+            '&-lg': {
+                '@apply text-large': {};
+            };
+        };
+        '&-group': {
+            '@apply flex flex-col gap-16 my-12': {};
+            '&[data-direction="row"]': {
+                '@apply flex-row': {};
+            };
+        };
+    };
+};
+export = _exports;

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

@@ -0,0 +1,9 @@
+declare function _exports(): {
+    '.code': {
+        '@apply inline-flex justify-center items-center capitalize text-xs rounded-sm font-mono break-all': {};
+        '@apply bg-neutral-200 border border-neutral-100 text-body': {};
+        '@apply dark:bg-neutral-700 dark:border-neutral-600 dark:text-neutral-300': {};
+        padding: string;
+    };
+};
+export = _exports;

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

@@ -0,0 +1,65 @@
+declare function _exports(): {
+    '.sk-form-combobox': {
+        '@apply focus-within:ring ring-ring ring-offset': {};
+        '@apply relative w-auto': {};
+        '@apply inline-block': {};
+        '&-sm': {
+            '@apply h-[3.2rem]': {};
+            '@apply rounded-button-sm': {};
+            '.sk-form-combobox-select.active': {
+                '@apply text-input-small': {};
+                '@apply pr-[5.2rem]': {};
+            };
+        };
+        '&-md': {
+            '@apply h-[4rem]': {};
+            '@apply rounded-button-md': {};
+            '.sk-form-combobox-select.active': {
+                '@apply text-input-medium': {};
+                '@apply pr-[6.1rem]': {};
+            };
+        };
+        '&-lg': {
+            '@apply h-[4.8rem]': {};
+            '@apply rounded-button-lg': {};
+            '.sk-form-combobox-select.active': {
+                '@apply text-input-large': {};
+                '@apply pr-[6.8rem]': {};
+            };
+        };
+        '&-select': {
+            '@apply h-full bg-right-12 bg-no-repeat': {};
+            '&.sk-form-select': {
+                '@apply focus:outline-none focus:ring-0 focus:ring-transparent': {};
+            };
+            '@apply w-full': {};
+            '&:not(.active)': {
+                '@apply cursor-default': {};
+            };
+            '@apply focus:border-transparent': {};
+            '@apply focus:hover:border-transparent': {};
+            '&.active': {
+                '@apply bg-primitives-overlay-lighten-10': {};
+                '@apply dark:bg-primitives-overlay-darken-6': {};
+                '@apply placeholder:text-dark-placeholder': {};
+                '@apply text-dark-primary': {};
+                '@apply border-transparent': {};
+            };
+        };
+        '&-list': {
+            '@apply w-full': {};
+            '@apply max-h-[23rem] overflow-y-auto': {};
+            '&-option': {
+                '&.sk-popup-menu-item': {
+                    '@apply cursor-default': {};
+                    '@apply leading-none': {};
+                    '@apply h-auto': {};
+                };
+                '&-checkbox': {
+                    '@apply w-0 h-0 m-0 p-0 opacity-0': {};
+                };
+            };
+        };
+    };
+};
+export = _exports;

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

@@ -0,0 +1,30 @@
+declare function _exports(): {
+    '.comment-header': {
+        '@apply w-full flex items-center gap-8 p-16 border-b-4 border-gray-200': {};
+    };
+    '.comment-item': {
+        '@apply w-full': {};
+        '&-container': {
+            '@apply flex justify-between relative': {};
+            '&-textpic': {
+                '@apply flex gap-2': {};
+            };
+        };
+        '&-text': {
+            '@apply text-base font-bold mx-0 mb-0 mt-4': {};
+        };
+        '&-commentorpublished': {
+            '@apply float-right text-neutral-600 m-0': {};
+        };
+    };
+    '.comment-input': {
+        '@apply w-full flex gap-4 px-10 pt-8 pb-10': {};
+        '&-inactive': {
+            '@apply text-neutral-300 !text-3xl': {};
+        };
+        '&-active': {
+            '@apply text-primary !text-3xl': {};
+        };
+    };
+};
+export = _exports;