@sk-web-gui/core 3.0.0 → 3.1.0

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

@@ -0,0 +1,195 @@
+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': {
+                '@apply w-32 min-w-32 max-w-32': {};
+                'svg, .sk-icon': {
+                    '@apply h-20 w-20': {};
+                };
+            };
+            '&.sk-btn-md': {
+                '@apply w-40 min-w-40 max-w-40': {};
+                'svg, .sk-icon': {
+                    '@apply h-20 w-20': {};
+                };
+            };
+            '&.sk-btn-lg': {
+                '@apply w-48 min-w-48 max-w-48': {};
+                'svg, .sk-icon': {
+                    '@apply h-24 w-24': {};
+                };
+            };
+            '.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-32 h-32': {};
+            '@apply rounded-button-sm': {};
+            'svg, .sk-icon': {
+                '@apply h-16 w-16': {};
+            };
+        };
+        '&-md': {
+            '@apply text-label-medium': {};
+            '@apply px-18 py-8 gap-8': {};
+            '@apply max-h-40 h-40': {};
+            '@apply rounded-button-md': {};
+            'svg, .sk-icon': {
+                '@apply h-18 w-18': {};
+            };
+        };
+        '&-lg': {
+            '@apply text-label-large': {};
+            '@apply px-24 py-8 gap-8': {};
+            '@apply max-h-48 h-48': {};
+            '@apply rounded-button-lg': {};
+            'svg, .sk-icon': {
+                '@apply h-20 w-20': {};
+            };
+        };
+        '&-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/components/card.d.ts

@@ -0,0 +1,135 @@
+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-full': {};
+            '.sk-card': {
+                '&-image': {
+                    '@apply h-full w-[8em]': {};
+                    '@apply float-left': {};
+                    '@apply rounded-none rounded-l-cards grow-0': {};
+                };
+                '&-body': {
+                    '@apply w-full': {};
+                    '@apply border-none': {};
+                    '&-wrapper': {
+                        '@apply w-full': {};
+                    };
+                    '&-content': {
+                        'p, a': {
+                            '@apply text-small': {};
+                        };
+                    };
+                    '&-meta': {
+                        '@apply hidden': {};
+                    };
+                };
+            };
+        };
+        '@apply text-base': {};
+        '@apply bg-white relative rounded-b-cards rounded-cards': {};
+        '@apply flex flex-col': {};
+        '@apply no-underline hover:no-underline': {};
+        '@apply h-full': {};
+        '&-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 text-base': {};
+                span: {
+                    '@apply flex space-x-4 items-center': {};
+                    time: {
+                        '@apply h-24': {};
+                    };
+                };
+                '&.sk-card-image': {
+                    '@apply min-h-[12.5em] max-h-[20em]': {};
+                };
+            };
+            '&-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-groups': {};
+        '&[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 text-small': {};
+                    '@apply text-dark-secondary line-clamp-1': {};
+                };
+            };
+        };
+        '&-external-link-icon': {
+            '@apply ml-auto h-32 w-32': {};
+            '@apply p-6 text-dark': {};
+        };
+    };
+};

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

@@ -0,0 +1,108 @@
+export declare const Checkbox: () => {
+    '.sk-form-checkbox': {
+        '@apply bg-inherit': {};
+        '@apply rounded-utility': {};
+        '@apply bg-transparent border-transparent': {};
+        '&-sm': {
+            '@apply w-24 h-24': {};
+        };
+        '&-md': {
+            '@apply w-24 h-24': {};
+        };
+        '&-lg': {
+            '@apply w-24 h-24': {};
+        };
+        '+ .sk-icon': {
+            '@apply absolute inset-0 my-auto bg-transparent': {};
+            '@apply border-1 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': {};
+                };
+            };
+        };
+        '&[type="checkbox"]:checked': {
+            '@apply text-transparent': {};
+        };
+        '&&: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-8': {};
+        };
+        '&-label-right &-label': {
+            '@apply ml-8': {};
+        };
+        '&-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': {};
+            };
+        };
+    };
+};

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

@@ -0,0 +1,37 @@
+export declare const Chip: () => {
+    '.sk-chip': {
+        '@apply inline-flex': {};
+        '@apply items-center justify-center': {};
+        '@apply bg-secondary-surface': {};
+        '@apply hover:bg-secondary-surface-hover': {};
+        '@apply focus-visible:bg-secondary-surface-hover': {};
+        '@apply focus-visible:ring': {};
+        '@apply px-9 gap-4': {};
+        '@apply h-34': {};
+        '@apply text-small': {};
+        '@apply text-dark-secondary': {};
+        '@apply border-1': {};
+        '@apply border-secondary-outline': {};
+        '@apply hover:border-secondary-outline-hover': {};
+        '@apply focus-visible:border-transparent': {};
+        '@apply rounded-button': {};
+        '&[data-strong="true"]': {
+            '@apply border-2': {};
+            '@apply px-8': {};
+        };
+        '&[data-rounded="true"]': {
+            '@apply rounded-full': {};
+        };
+        '&[data-inverted="true"]': {
+            '@apply text-inverted-dark-secondary': {};
+            '@apply border-inverted-secondary-outline': {};
+            '@apply hover:border-inverted-secondary-outline-hover': {};
+            '@apply bg-inverted-secondary-surface': {};
+            '@apply hover:bg-inverted-secondary-surface-hover': {};
+            '@apply focus-visible:bg-inverted-secondary-surface-hover': {};
+        };
+        '.sk-icon': {
+            '@apply h-16 w-16': {};
+        };
+    };
+};

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

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

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

@@ -0,0 +1,72 @@
+export declare const ComboBox: () => {
+    '.sk-combobox-base': {
+        '@apply w-auto inline-block relative': {};
+    };
+    '.sk-form-combobox': {
+        '@apply focus-within:ring ring-ring ring-offset': {};
+        '@apply relative w-auto': {};
+        '@apply inline-block': {};
+        '&-sm': {
+            '@apply h-32': {};
+            '@apply rounded-button-sm': {};
+            '.sk-form-combobox-select.active': {
+                '@apply text-input-small': {};
+                '@apply pr-52': {};
+            };
+        };
+        '&-md': {
+            '@apply h-40': {};
+            '@apply rounded-button-md': {};
+            '.sk-form-combobox-select.active': {
+                '@apply text-input-medium': {};
+                '@apply pr-62': {};
+            };
+        };
+        '&-lg': {
+            '@apply h-48': {};
+            '@apply rounded-button-lg': {};
+            '.sk-form-combobox-select.active': {
+                '@apply text-input-large': {};
+                '@apply pr-68': {};
+            };
+        };
+        '&[data-showvalue="true"]': {
+            '.sk-form-combobox-select': {
+                '@apply caret-transparent': {};
+            };
+        };
+        '&-select': {
+            '@apply 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-[15em] 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': {};
+                };
+            };
+        };
+    };
+};

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;

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

@@ -0,0 +1,39 @@
+declare function _exports(): {
+    '.context-menu-wrapper': {
+        '@apply relative inline': {};
+        '> a, > button': {
+            '@apply inline-flex': {};
+        };
+        '.context-menu-items': {
+            '@apply absolute rounded bg-white border border-body z-10 drop-shadow-md mt-sm flex flex-col justify-start items-start': {};
+            '.context-menu-item': {
+                '@apply text-base text-body hover:text-white focus-within:text-white min-h-[3.5rem] w-full flex justify-start items-center': {};
+                'a, button': {
+                    '@apply text-base font-normal min-h-[3.5rem] py-[0.6rem] items-center w-full rounded-none border-transparent px-md flex justify-start': {};
+                    '&.active': {
+                        '@apply bg-primary text-white': {};
+                    };
+                    '.MuiSvgIcon-root': {
+                        '@apply text-base': {};
+                    };
+                };
+                '&:first-child a,&:first-child button': {
+                    '@apply pt-[0.675rem] pb-[0.525rem]': {};
+                };
+                '&:last-child a,&:last-child button': {
+                    '@apply pt-[0.525rem] pb-[0.675rem]': {};
+                };
+                '&:only-child a,&:only-child button': {
+                    '@apply py-[0.6rem]': {};
+                };
+            };
+            hr: {
+                '@apply mx-sm w-[calc(100%_-_16px)]': {};
+            };
+            '&.right': {
+                '@apply right-0': {};
+            };
+        };
+    };
+};
+export = _exports;

package/dist/types/components/cookie-consent.d.ts

@@ -0,0 +1,35 @@
+export declare const CookieConsent: () => {
+    '.sk-cookie-consent': {
+        '@apply min-w-full fixed flex justify-center z-10 bottom-0 left-0 right-0': {};
+        '@apply bg-background-content': {};
+        '@apply p-40': {};
+        '@apply pt-24': {};
+        '&-wrapper': {
+            '@apply fixed inset-0 z-20 overflow-y-auto': {};
+            '@apply bg-primitives-overlay-darken-6': {};
+            '@apply dark:bg-primitives-overlay-darken-8': {};
+        };
+        '&-close-btn': {
+            '&-icon': {};
+        };
+        '&-content-wrapper': {
+            '@apply flex flex-col gap-24 container max-w-[64em] relative': {};
+        };
+        '&-body': {
+            '@apply flex flex-col gap-8': {};
+            '@apply max-w-[50em]': {};
+        };
+        '&-title': {
+            '@apply text-h2-sm md:text-h2-md xl:text-h2-lg': {};
+        };
+        '&-custom-wrapper': {
+            '@apply flex flex-col gap-24': {};
+        };
+        '&-description': {
+            '@apply text-base flex flex-col gap-8': {};
+        };
+        '&-btn-wrapper': {
+            '@apply flex flex-col md:flex-row gap-12 flex-wrap': {};
+        };
+    };
+};

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

@@ -0,0 +1,5 @@
+export declare const Dialog: () => {
+    '.sk-dialog': {
+        '@apply w-fit max-w-prose md:min-w-[25em]': {};
+    };
+};