@sk-web-gui/core 3.0.0 → 3.1.0

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

@@ -0,0 +1,174 @@
+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': {};
+            '.sk-icon': {
+                '@apply w-32 h-32': {};
+            };
+        };
+        '&-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-icon': {
+                    '@apply w-20 h-20': {};
+                };
+            };
+            '.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-icon': {
+                    '@apply w-24 h-24': {};
+                };
+            };
+            '.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 text-base': {};
+            '@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-32': {};
+                    };
+                    '&[data-size="md"]': {
+                        '@apply ml-36': {};
+                    };
+                    '&[data-size="lg"]': {
+                        '@apply ml-48': {};
+                    };
+                };
+            };
+        };
+        '&-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/components/ai/ai-feed.d.ts

@@ -0,0 +1,34 @@
+export declare const AIFeed: () => {
+    '.sk-ai-feed': {
+        '@apply mt-8 p-16 pb-24 pr-16 h-auto overflow-y-auto max-h-full flex flex-col': {};
+        '&-entry': {
+            '@apply flex items-start gap-12': {};
+            '&-avatar': {
+                '@apply grow-0 shrink-0 w-fit': {};
+            };
+            '&-container': {
+                '@apply flex flex-col pb-20 gap-20': {};
+            };
+            '&-content': {
+                '@apply break-words max-w-full flex flex-col grow gap-4': {};
+            };
+            '&-heading': {
+                '@apply text-large font-bold': {};
+            };
+            '&-references': {
+                '@apply bg-background-200 rounded-button pt-8 pb-8 pl-20 pr-12 gap-8 text-dark-primary': {};
+                '&-header': {
+                    '@apply text-dark-primary': {};
+                };
+                '&-list': {
+                    '&-item': {
+                        '@apply max-w-full w-full my-8 rounded-6 whitespace-normal text-base': {};
+                        '.sk-link': {
+                            '@apply dark:text-dark-primary': {};
+                        };
+                    };
+                };
+            };
+        };
+    };
+};

package/dist/types/components/ai/ai-module.d.ts

@@ -0,0 +1,104 @@
+export declare const AIModule: (colors: string[]) => {
+    '.sk-ai-module': {
+        '@apply fixed': {};
+        '@apply flex flex-col gap-0 items-center justify-start': {};
+        '@apply shadow-200': {};
+        '@apply overflow-hidden': {};
+        '@apply transition-all': {};
+        '@apply bottom-0 right-0': {};
+        '&-content': {
+            '@apply flex w-full gap-0 h-full justify-between': {};
+            '&-row': {
+                '@apply flex flex-col': {};
+            };
+        };
+        '&-sidebar': {
+            '@apply flex flex-col': {};
+            '@apply min-w-[22em]': {};
+            '@apply h-full': {};
+            '@apply border-r-1 border-r-divider': {};
+            '@apply pt-20 px-24 gap-16': {};
+        };
+        '&-feed': {
+            '@apply flex flex-col grow': {};
+            '@apply px-16 pt-16 pb-24 gap-16': {};
+            '&-questions': {
+                '@apply flex flex-col gap-8 w-full': {};
+                '&-title': {
+                    '@apply text-label-medium text-dark-primary': {};
+                };
+                '&-wrapper': {
+                    '@apply flex flex-col gap-16 w-full': {};
+                };
+            };
+        };
+        '&[data-fullscreen="false"]': {
+            '@apply rounded-tl-groups': {};
+            '@apply max-w-[26em]': {};
+        };
+        '&[data-fullscreen="true"]': {
+            '@apply w-full h-full': {};
+            '.sk-ai-module-feed': {
+                '@apply gap-40 grow w-full items-center': {};
+                '&-questions': {
+                    '@apply flex-row gap-16': {};
+                };
+            };
+        };
+        '&-header': {
+            '&[data-fullscreen="true"]': {
+                '@apply bg-background-content': {};
+                '@apply text-dark-primary': {};
+                '@apply px-20 pt-20 pb-12': {};
+            };
+            '@apply flex items-center justify-between': {};
+            '@apply w-full': {};
+            '@apply px-14 py-16': {};
+            '@apply transition-all': {};
+            '@apply bg-inverted-background-content': {};
+            '@apply text-inverted-dark-primary': {};
+            '&[data-docked="true"]': {
+                '@apply px-12 pt-10 pb-12': {};
+            };
+            '&-title': {
+                '@apply flex justify-start items-center': {};
+                '@apply gap-12 pr-16': {};
+            };
+            '&-heading': {
+                '@apply flex flex-col gap-0': {};
+                '&-name': {
+                    '@apply text-label-medium': {};
+                };
+                '&-subtitle': {
+                    '@apply text-small text-inverted-dark-secondary': {};
+                };
+            };
+            '&-menu': {
+                '@apply flex justify-center items-center': {};
+                '@apply gap-12': {};
+            };
+            '&[data-variant="alt"]': {
+                '@apply p-0': {};
+                '@apply bg-transparent': {};
+                '.sk-avatar': {
+                    '@apply w-56 h-56': {};
+                };
+                '.sk-ai-module-header-heading-name': {
+                    '@apply text-label-large text-dark-primary': {};
+                };
+                '.sk-ai-module-header-heading-subtitle': {
+                    '@apply text-small text-dark-secondary': {};
+                };
+            };
+        };
+        '&-sessions': {
+            '@apply px-20': {};
+            '&-history': {
+                '@apply flex flex-col p-8 gap-16': {};
+                '&-list': {
+                    '@apply flex flex-col p-0 gap-8': {};
+                };
+            };
+        };
+    };
+};

package/dist/types/components/ai/assistant-presentation.d.ts

@@ -0,0 +1,49 @@
+export declare const AssistantPresentation: () => {
+    '.sk-ai-assistant-presentation': {
+        '@apply flex flex-col gap-16 items-center justify-center': {};
+        '@apply text-base': {};
+        '&-header': {
+            '@apply flex flex-col items-center justify-start': {};
+            '&-title': {
+                '@apply text-dark-primary text-center w-full': {};
+            };
+            '&-description': {
+                '@apply text-dark-secondary text-center w-full': {};
+            };
+        };
+        '&[data-size="lg"]': {
+            '@apply min-h-[25.5em] h-full grow': {};
+            '@apply p-24': {};
+            '@apply max-w-[27em]': {};
+            '.sk-avatar': {
+                '@apply w-90-1 h-90-1': {};
+                '@apply max-w-90-1 max-h-90-1': {};
+            };
+            '.sk-ai-assistant-presentation-header': {
+                '@apply gap-6 pb-24': {};
+                '&-title': {
+                    '@apply text-h3-lg': {};
+                };
+                '&-description': {
+                    '@apply text-lead': {};
+                };
+            };
+        };
+        '&[data-size="sm"]': {
+            '@apply min-h-[24em]': {};
+            '.sk-avatar': {
+                '@apply w-72 h-72': {};
+                '@apply max-w-72 max-h-72': {};
+            };
+            '.sk-ai-assistant-presentation-header': {
+                '@apply gap-4 pb-16': {};
+                '&-title': {
+                    '@apply text-h3-md': {};
+                };
+                '&-description': {
+                    '@apply text-small': {};
+                };
+            };
+        };
+    };
+};

package/dist/types/components/ai/bubble.d.ts

@@ -0,0 +1,30 @@
+export declare const Bubble: (colors: string[]) => {
+    '.sk-ai-bubble': {
+        '&-tail': {
+            '@apply absolute left-0 bottom-[-2rem]': {};
+            '@apply w-32 h-32': {};
+            '@apply rounded-tl-16 rounded-bl-0': {};
+            '@apply bg-transparent': {};
+            '@apply shadow-[0_-1.6rem_0_0_var(--tw-shadow-color)]': {};
+            '@apply scale-y-[25%]': {};
+            '&:before': {
+                '@apply content-[""]': {};
+                '@apply absolute left-0 bottom-[-0.25rem]': {};
+                '@apply w-32 h-32': {};
+                '@apply rounded-tl-16 rounded-bl-0': {};
+                '@apply bg-transparent': {};
+                '@apply shadow-[0_-0.25rem_0_0_rgb(0,0,0,0.2)]': {};
+                'clip-path': string;
+            };
+        };
+        '@apply inline-flex text-left items-center justify-start': {};
+        '@apply w-fit': {};
+        '@apply relative': {};
+        '@apply rounded-t-button rounded-br-button': {};
+        '@apply pt-10 pr-12 pb-10 pl-14': {};
+        '@apply gap-16': {};
+        '@apply shadow-[0_0.1rem_0_0_rgba(0,0,0,0.2)]': {};
+        '@apply text-small': {};
+        '@apply text-dark-secondary': {};
+    };
+};

package/dist/types/components/ai/feedback.d.ts

@@ -0,0 +1,19 @@
+export declare const Feedback: () => {
+    '.sk-ai-feedback': {
+        '@apply ml-24 flex gap-24 justify-end': {};
+        '&-button': {
+            '&[data-current="true"]': {
+                '@apply bg-tertiary-surface-hover': {};
+            };
+        };
+        '&-more': {
+            '@apply flex flex-col gap-8 pl-14 pr-8 pt-8 pb-14 bg-background-color-mixin-1 text-dark-primary rounded-button': {};
+            '&-header': {
+                '@apply flex flex-row items-center justify-between text-label-small': {};
+            };
+            '&-reason': {
+                '@apply flex flex-row items-center gap-8 justify-start': {};
+            };
+        };
+    };
+};

package/dist/types/components/ai/input-section.d.ts

@@ -0,0 +1,16 @@
+export declare const InputSection: () => {
+    '.sk-ai-inputsection': {
+        '@apply w-full': {};
+        '&-input': {
+            '@apply w-full': {};
+        };
+        '&-wrapper': {
+            '@apply bg-background-content': {};
+            '@apply flex items-center justify-center w-full': {};
+            '@apply px-16 py-12 gap-12': {};
+            '&[data-shadow="true"]': {
+                '@apply shadow-100': {};
+            };
+        };
+    };
+};

package/dist/types/components/ai/markdown-rendered.d.ts

@@ -0,0 +1,20 @@
+export declare const MarkdownRendered: () => {
+    '.sk-ai-markdown': {
+        '@apply flex flex-col gap-32': {};
+        '&-p': {
+            '@apply mb-32 my-0': {};
+        };
+        '&-a': {
+            '@apply my-8': {};
+        };
+        '&-ol': {
+            '@apply list-decimal ml-24 my-0': {};
+        };
+        '&-ul': {
+            '@apply list-disc ml-24 my-0': {};
+        };
+        '&-li': {
+            '@apply my-16': {};
+        };
+    };
+};

package/dist/types/components/ai/typing-bubble.d.ts

@@ -0,0 +1,15 @@
+export declare const TypingBubble: () => {
+    '.sk-ai-typing-bubble': {
+        '@apply inline-flex items-center justify-center': {};
+        '@apply p-12 gap-8 w-min': {};
+        '@apply bg-tertiary-surface': {};
+        '@apply text-dark-secondary': {};
+        '@apply rounded-button': {};
+        '&[data-position="left"]': {
+            '@apply rounded-br-0': {};
+        };
+        '&[data-position="right"]': {
+            '@apply rounded-bl-0': {};
+        };
+    };
+};

package/dist/types/components/ai/typing-sequence.d.ts

@@ -0,0 +1,22 @@
+export declare const TypingSequence: (colors: string[]) => {
+    '.sk-ai-typing-sequence': {
+        '@apply bg-transparent': {};
+        '@apply inline-flex': {};
+        '@apply h-[0.5rem] w-fit gap-6': {};
+        '&-dot': {
+            '@apply rounded-full': {};
+            '@apply block': {};
+            '@apply w-[0.5rem] h-[0.5rem]': {};
+            '@apply bg-dark-secondary': {};
+            '&[data-order="1"]': {
+                '@apply animate-typing-bounce-1': {};
+            };
+            '&[data-order="2"]': {
+                '@apply animate-typing-bounce-2': {};
+            };
+            '&[data-order="3"]': {
+                '@apply animate-typing-bounce-3': {};
+            };
+        };
+    };
+};

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,21 @@
+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/components/avatar.d.ts

@@ -0,0 +1,29 @@
+export declare const Avatar: (colors: string[]) => {
+    '.sk-avatar': {
+        '&-img': {
+            '@apply min-w-full min-h-full object-cover': {};
+        };
+        '&[data-hasimage="true"]': {
+            '@apply bg-transparent': {};
+        };
+        '@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-32 w-32 min-h-24 max-h-32 min-w-24 max-w-32': {};
+            '@apply text-label-small': {};
+        };
+        '&&-md': {
+            '@apply h-40 w-40 min-h-32 max-h-40 min-w-32 max-w-40': {};
+            '@apply text-label-medium': {};
+        };
+        '&&-lg': {
+            '@apply h-64 w-64 min-h-40 max-h-64 min-w-40 max-w-64': {};
+            '@apply text-label-large': {};
+        };
+    };
+};

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

@@ -0,0 +1,21 @@
+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-24 w-24': {};
+        '@apply text-label-small': {};
+        '&[data-rounded="true"]': {
+            '@apply rounded-circular': {};
+        };
+    };
+};

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

@@ -0,0 +1,28 @@
+export declare const Breadcrumb: () => {
+    '.sk-breadcrumb': {
+        '@apply text-body text-base 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/components/button-group.d.ts

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