@sk-web-gui/core 3.4.0 → 3.4.2

package/dist/types/core/src/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/core/src/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/core/src/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/core/src/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/core/src/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/core/src/components/dialog.d.ts

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

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

@@ -0,0 +1,50 @@
+export declare const Divider: () => {
+    '.sk-divider': {
+        '@apply border-t-0 border-divider': {};
+        '&-vertical': {
+            '@apply min-h-[1em] border-l-1 border-solid h-auto ml-4 mt-8 mb-4 mr-4 self-stretch': {};
+            '&[data-strong="true"]': {
+                '@apply border-l border-solid h-auto mx-2': {};
+            };
+        };
+        '&-horizontal': {
+            '@apply flex-1 border-b-1 border-solid w-auto my-2': {};
+            '&[data-strong="true"]': {
+                '@apply border-b border-solid w-auto my-2': {};
+            };
+        };
+        '&-root': {
+            '@apply flex items-center gap-16': {};
+        };
+        '&-sm': {
+            '&.sk-divider': {
+                '&-root': {
+                    '@apply gap-8': {};
+                };
+                '.sk-divider-text': {
+                    '@apply text-label-small': {};
+                };
+            };
+        };
+        '&-md': {
+            '&.sk-divider': {
+                '&-root': {
+                    '@apply gap-10': {};
+                };
+                '.sk-divider-text': {
+                    '@apply text-label-medium': {};
+                };
+            };
+        };
+        '&-lg': {
+            '&.sk-divider': {
+                '&-root': {
+                    '@apply gap-12': {};
+                };
+                '.sk-divider-text': {
+                    '@apply text-label-large': {};
+                };
+            };
+        };
+    };
+};

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

@@ -0,0 +1,43 @@
+export declare const Dot: (colors: string[]) => {
+    '.dot': {
+        '@apply relative inline-flex rounded-full': {};
+        '&-solid': {
+            '&.dot-bordered': {
+                '@apply border-2 border-white': {};
+                '@apply dark:border-neutral-800': {};
+            };
+            '@apply bg-neutral-500': {};
+        };
+        '&-outline': {
+            '@apply bg-white border-2 border-neutral-500': {};
+            '@apply dark:bg-neutral-800': {};
+        };
+        '&-3xs': {
+            '@apply w-1.5 h-1.5': {};
+        };
+        '&-2xs': {
+            '@apply w-2 h-2': {};
+        };
+        '&-xs': {
+            '@apply w-2.5 h-2.5': {};
+        };
+        '&-sm': {
+            '@apply w-3 h-3': {};
+        };
+        '&-md': {
+            '@apply w-3.5 h-3.5': {};
+        };
+        '&-lg': {
+            '@apply w-4 h-4': {};
+        };
+        '&-xl': {
+            '@apply w-5 h-5': {};
+        };
+        '&-2xl': {
+            '@apply w-6 h-6': {};
+        };
+        '&-3xl': {
+            '@apply w-8 h-8': {};
+        };
+    };
+};

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

@@ -0,0 +1,14 @@
+export declare const Filter: () => {
+    '.sk-filter': {
+        '@apply w-full': {};
+        '&-label': {
+            '@apply text-label-medium': {};
+        };
+        '.sk-form-checkbox-label': {
+            '@apply grow flex items-center justify-between': {};
+            '&-wrapper': {
+                '@apply w-full': {};
+            };
+        };
+    };
+};

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

@@ -0,0 +1,27 @@
+export declare const Footer: () => {
+    '.sk-footer': {
+        '@apply bg-background-content': {};
+        '@apply flex justify-center': {};
+        '@apply w-full': {};
+        '@apply p-20 sm:p-32 md:p-40 lg:p-48 xl:p-80': {};
+        '@apply text-dark-secondary': {};
+        '&-innerwrapper': {
+            '@apply w-full max-w-content': {};
+            '@apply pb-20 sm:pb-32 md:pb-40 lg:pb-48 xl:pb-80': {};
+            '@apply flex flex-row flex-wrap gap-100': {};
+            '@apply justify-between': {};
+        };
+        '&-logo': {
+            '@apply max-h-72 h-72': {};
+        };
+        '&-content': {
+            '@apply flex flex-row gap-36 w-fit grow-0 flex-wrap': {};
+        };
+        '&-list': {
+            '@apply flex flex-col gap-16': {};
+            '&-item': {
+                '@apply flex flex-row justify-start items-center gap-8': {};
+            };
+        };
+    };
+};

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

@@ -0,0 +1,24 @@
+export declare const Forms: () => {
+    '.sk-form-control': {
+        '@apply flex flex-col gap-8 w-fit': {};
+    };
+    '.sk-form-label': {
+        '@apply font-bold': {};
+        '&-sm': {
+            '@apply text-label-small': {};
+        };
+        '&-md': {
+            '@apply text-label-medium': {};
+        };
+        '&-lg': {
+            '@apply text-label-large': {};
+        };
+    };
+    'legend.sk-form-label': {
+        display: string;
+    };
+    '.sk-form-helper-text, .sk-form-error-message': {
+        '@apply font-normal': {};
+        '@apply text-small': {};
+    };
+};

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

@@ -0,0 +1,28 @@
+export declare const Header: () => {
+    '.sk-header': {
+        '@apply bg-background-content p-12 md:px-32 md:pt-24 md:pb-20 xl:pt-32 xl:pb-20 xl:px-80 xl:h-auto xl:min-h-0': {};
+        '@apply shadow-100': {};
+        '@apply flex justify-center': {};
+        '@apply w-full': {};
+        '&-container': {
+            '@apply flex flex-col gap-20 xl:gap-24': {};
+            '@apply w-full': {};
+            '@apply max-w-content': {};
+        };
+        '&-top-content': {
+            '@apply flex items-center w-full justify-between m-auto flex-shrink-0 py-4 gap-20': {};
+        };
+        '&-bottom-content': {
+            '@apply hidden md:flex items-center w-full justify-start p-8 xl:p-0': {};
+        };
+        '&-usermenu': {
+            '@apply hidden xl:flex-shrink md:flex xl:items-center xl:w-auto': {};
+            '&-content': {
+                '@apply relative flex flex-grow justify-end items-center xl:w-auto': {};
+            };
+        };
+        '&-mobilemenu': {
+            '@apply block md:hidden relative': {};
+        };
+    };
+};

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

@@ -0,0 +1,38 @@
+export declare const Icon: (colors: string[]) => {
+    '.sk-icon': {
+        "&[data-color='primary']": {
+            '&[data-inverted="true"]': {
+                '@apply text-light-primary fill-light-primary': {};
+            };
+        };
+        '@apply inline-flex items-center justify-center': {};
+        '@apply w-24 h-24': {};
+        svg: {
+            '@apply w-full h-full': {};
+        };
+        '&.sk-icon-padded': {
+            "&[data-color='primary'], &[data-color='tertiary']": {
+                '@apply bg-primary-surface text-light-primary fill-light-primary': {};
+                '&[data-inverted="true"]': {
+                    '@apply text-inverted-light-primary fill-inverted-light-primary': {};
+                    '@apply bg-tertiary-surface': {};
+                };
+            };
+            "&[data-variant='ghost']": {
+                '@apply bg-transparent text-current fill-current': {};
+                '&[data-inverted="true"]': {
+                    '@apply bg-transparent text-current fill-current': {};
+                };
+            };
+            '@apply rounded-utility': {};
+            '@apply text-light-primary fill-light-primary': {};
+            '@apply p-4': {};
+        };
+        '&[data-size="fit"]': {
+            '@apply w-fit h-fit': {};
+        };
+        '&[data-rounded="true"]': {
+            '@apply rounded-circular': {};
+        };
+    };
+};