@sk-web-gui/core 4.1.1 → 4.2.0

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

@@ -1,120 +1,140 @@
 export declare const Accordion: () => {
     '.sk-disclosure': {
+        '@apply mt-6 mb-8': {};
+        '@apply text-dark-secondary': {};
+        '&[data-inverted="true"]': {
+            '@apply text-inverted-dark-secondary': {};
+        };
         '&-icon': {
             '@apply flex self-center': {};
         };
         '&-header': {
-            '@apply mt-6 mb-8': {};
-            '@apply flex flex-col text-left': {};
+            '@apply py-8': {};
+            '@apply flex flex-row text-left': {};
             '@apply cursor-pointer': {};
-            '*': {
-                '@apply cursor-pointer': {};
-            };
-            '&:focus-visible': {
-                '@apply outline-0': {};
-            };
+            '@apply items-center justify-between': {};
+            '@apply gap-16': {};
             '&-icon': {
-                '@apply ml-auto': {};
-                '@apply text-dark-secondary': {};
-                svg: {
-                    '@apply w-20 h-20': {};
+                '@apply w-32 h-32': {};
+                '&-sm': {
+                    '@apply w-20 min-h-20': {};
+                };
+                '&-md': {
+                    '@apply w-24 min-h-24': {};
                 };
             };
-            '&[data-disabled="true"]': {
-                '@apply text-dark-disabled': {};
-                '.sk-disclosure-title': {
+            '&-title': {
+                '@apply text-dark-primary': {};
+                '@apply w-full': {};
+                '@apply flex flex-row': {};
+                '@apply items-center': {};
+                '@apply grow shrink': {};
+                '&[data-inverted="true"]': {
+                    '@apply text-inverted-dark-primary': {};
+                };
+                '*': {
+                    '@apply m-0': {};
+                    '@apply text-inherit': {};
+                    fontSize: string;
+                    FontFamily: string;
+                    lineHeight: string;
+                };
+                '&-disabled': {
                     '@apply text-dark-disabled': {};
+                    '&[data-inverted="true"]': {
+                        '@apply text-inverted-dark-disabled': {};
+                    };
+                };
+                '&-sm': {
+                    '@apply gap-16': {};
+                    '@apply text-h4-sm': {};
+                    '&[data-variant="alt"]': {
+                        '@apply gap-12': {};
+                    };
+                };
+                '&-md': {
+                    '@apply gap-16': {};
+                    '@apply text-h4-md': {};
+                    '&[data-variant="alt"]': {
+                        '@apply gap-12': {};
+                    };
                 };
+                '&-lg': {
+                    '@apply gap-16': {};
+                    '&[data-variant="alt"]': {
+                        '@apply gap-16': {};
+                        '@apply text-h3-md': {};
+                    };
+                };
+                '&-divider': {
+                    '@apply border-divider': {};
+                    '&[data-inverted="true"]': {
+                        '@apply border-inverted-divider': {};
+                    };
+                };
+            };
+            '&:focus-visible': {
+                '@apply outline-0': {};
+            };
+            '&[aria-disabled="true"]': {
+                '@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': {};
+                '&[data-inverted="true"]': {
+                    '@apply text-inverted-dark-disabled': {};
                 };
             };
-            '.sk-disclosure-toggle': {
-                '@apply gap-12': {};
-                '.sk-icon': {
-                    '@apply w-20 min-h-20': {};
+            '&-sm': {
+                '@apply gap-16': {};
+                '@apply h-32': {};
+                '&[data-variant="alt"]': {
+                    '@apply gap-12': {};
                 };
-            };
-            '.sk-disclosure-support': {
-                '@apply text-small': {};
-            };
-            '&[data-variant="default"]': {
-                '.sk-disclosure-toggle': {
-                    '@apply py-4': {};
+                '&[data-variant="default"]': {
                     '@apply min-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': {
+            '&-md': {
+                '@apply gap-16': {};
+                '&[data-variant="alt"]': {
                     '@apply gap-12': {};
                 };
+                '&[data-variant="default"]': {
+                    '@apply min-h-56': {};
+                };
             };
-            '.sk-disclosure-toggle': {
-                '@apply gap-12': {};
-                '.sk-icon': {
-                    '@apply w-24 min-h-24': {};
+            '&-lg': {
+                '@apply gap-16': {};
+                '.sk-disclosure-header-icon': {
+                    '@apply w-32 min-h-32': {};
+                };
+                '&[data-variant="alt"]': {
+                    '@apply gap-16': {};
                 };
             };
-            '.sk-disclosure-support': {
-                '@apply text-body': {};
+        };
+        '&[data-variant="alt"]': {
+            '.sk-disclosure-header': {
+                '@apply py-0': {};
+                '@apply h-32': {};
             };
+        };
+        '&-label': {
+            '@apply shrink-0': {};
+        };
+        '&-md': {
             '&[data-variant="default"]': {
-                '.sk-disclosure-toggle': {
+                '.sk-disclosure-header': {
                     '@apply py-8': {};
                     '@apply min-h-56': {};
                 };
-                '.sk-disclosure-header-icon': {
+                '.sk-disclosure-header-button': {
                     '@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': {
             '&[data-size="sm"]': {
                 '@apply pr-12': {};
@@ -133,11 +153,11 @@ export declare const Accordion: () => {
             '@apply py-0': {};
             transitionProperty: string;
             transitionDuration: string;
-            '&[aria-hidden="true"], &[data-hidden="true"]': {
-                '@apply my-0 invisible max-h-0 opacity-0': {};
+            '&[aria-hidden="true"]': {
+                '@apply my-0 overflow-hidden max-h-0 opacity-0': {};
             };
-            '&[aria-hidden="false"], &[data-hidden="false"]': {
-                '@apply block opacity-100 visible': {};
+            '&[aria-hidden="false"]': {
+                '@apply block opacity-100': {};
             };
             '&[data-variant="alt"]': {
                 '@apply mt-24': {};
@@ -170,31 +190,13 @@ export declare const Accordion: () => {
                 transitionProperty: string;
                 transitionDuration: string;
                 '@apply border-b-1 border-divider': {};
+                '&[data-inverted="true"]': {
+                    '@apply border-inverted-divider': {};
+                };
             };
             '&:last-child .sk-disclosure': {
                 '@apply border-b-transparent': {};
             };
         };
     };
-    '&[data-inverted="true"]': {
-        '&.sk-disclosure': {
-            '&-icon': {
-                '@apply text-inverted-dark-secondary': {};
-            };
-            '&[data-disabled="true"]': {
-                '@apply text-inverted-dark-disabled': {};
-                '.sk-disclosure-title': {
-                    '@apply text-inverted-dark-disabled': {};
-                };
-            };
-            '&-title': {
-                '@apply text-inverted-dark-primary': {};
-            };
-        };
-        '&.sk-accordion': {
-            '&-item': {
-                '@apply border-inverted-divider': {};
-            };
-        };
-    };
 };

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

@@ -0,0 +1,79 @@
+export declare const ChatInput: () => {
+    '.sk-chat-input': {
+        '&-textarea': {
+            '@apply flex': {};
+            '@apply grow shrink': {};
+            '@apply self-start': {};
+            '&[data-wrap="true"]': {
+                '@apply w-full': {};
+            };
+            '&[data-wrap="false"]': {
+                '@apply w-auto': {};
+            };
+            '&-sm': {
+                '@apply min-h-34+1': {};
+                '@apply max-h-[11rem]': {};
+                '@apply mt-5': {};
+            };
+            '&-md': {
+                '@apply min-h-42': {};
+                '@apply max-h-[13.4rem]': {};
+                '@apply mt-4': {};
+            };
+            '&-lg': {
+                '@apply min-h-56': {};
+                '@apply max-h-[14.2rem]': {};
+                '@apply mt-6': {};
+            };
+        };
+        '&-wrapper': {
+            '@apply flex flex-row flex-wrap': {};
+            '@apply justify-end': {};
+        };
+        '&-submitbutton': {
+            '@apply shrink-0 flex justify-self-end': {};
+            '@apply relative': {};
+            '&-sm': {
+                '@apply py-5 px-7': {};
+            };
+            '&-md': {
+                '@apply py-7 px-9': {};
+            };
+            '&-lg': {
+                '@apply py-11 px-13': {};
+            };
+            '&-inner-wrapper': {
+                '@apply relative inline-flex items-center': {};
+            };
+            '&-tooltip': {
+                '@apply absolute right-full': {};
+            };
+        };
+        '&-toolbar': {
+            '@apply flex': {};
+            '@apply relative': {};
+            '@apply gap-6': {};
+            '@apply bg-transparent': {};
+            '@apply justify-start': {};
+            '@apply w-auto': {};
+            '@apply shrink grow': {};
+            '&-sm': {
+                '@apply py-5 px-7': {};
+            };
+            '&-md': {
+                '@apply py-7 px-9': {};
+            };
+            '&-lg': {
+                '@apply py-11 px-13': {};
+            };
+            '&-button': {
+                '&-wrapper': {
+                    '@apply relative inline-flex justify-center overflow-visible': {};
+                };
+                '&-tooltip': {
+                    '@apply absolute shrink-0 bottom-full w-max': {};
+                };
+            };
+        };
+    };
+};

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

@@ -0,0 +1,68 @@
+export declare const Alert: () => {
+    '.sk-alert': {
+        '@apply flex rounded-button': {};
+        '&-sm': {
+            '@apply rounded-xl gap-8 pl-10 pr-6': {};
+            '.sk-alert-icon': {
+                '@apply pt-6': {};
+            };
+        };
+        '&-md': {
+            '@apply gap-12 pl-16 pr-12 py-12': {};
+            '.sk-alert-icon': {
+                '@apply pt-6': {};
+            };
+        };
+        '&-lg': {
+            '@apply gap-12 pl-16 pr-12 py-12': {};
+            '.sk-alert-icon': {
+                '@apply pt-6': {};
+            };
+        };
+        '&-content': {
+            '@apply flex flex-col w-full grow': {};
+            '&-description': {
+                '@apply text-small': {};
+            };
+            '&-sm': {
+                '@apply py-6': {};
+                '.sk-alert-content-title': {
+                    '@apply text-small m-0': {};
+                };
+            };
+            '&-md': {
+                '@apply py-4': {};
+                '.sk-alert-content-title': {
+                    '@apply text-base': {};
+                };
+            };
+            '&-lg': {
+                '@apply py-4': {};
+                '.sk-alert-content-title': {
+                    '@apply text-large': {};
+                };
+            };
+        };
+        '&-icon': {
+            '@apply flex-none': {};
+        };
+        '&-button': {
+            '@apply flex-none justify-self-end': {};
+        };
+        '&-info': {
+            '@apply border-1 border-vattjom-surface-primary bg-vattjom-background-100': {};
+        };
+        '&-neutral': {
+            '@apply border-1 border-divider bg-background-100': {};
+        };
+        '&-success': {
+            '@apply border-1 border-gronsta-surface-primary bg-gronsta-background-100': {};
+        };
+        '&-warning': {
+            '@apply border-1 border-warning-surface-primary bg-warning-background-100': {};
+        };
+        '&-error': {
+            '@apply border-1 border-error-surface-primary bg-error-background-100': {};
+        };
+    };
+};

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

@@ -21,4 +21,13 @@ export declare const Forms: () => {
         '@apply font-normal': {};
         '@apply text-small': {};
     };
+    '.sk-form-error-message': {
+        '@apply text-error': {};
+        '@apply flex items-start gap-8': {};
+        '@apply self-stretch': {};
+    };
+    '.sk-form-error-message-icon': {
+        '@apply shrink-0': {};
+        '@apply pt-1': {};
+    };
 };

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

@@ -1,5 +1,111 @@
 export declare const Input: () => {
     '.sk-form-input': {
+        '&-textarea': {
+            '&-group-inner': {
+                '@apply h-auto': {};
+                '@apply flex-wrap': {};
+                '.sk-form-input-textarea': {
+                    '@apply w-full': {};
+                };
+                '.sk-form-textarea-counter': {
+                    '@apply w-full': {};
+                    '@apply border-t-divider border-t-1': {};
+                };
+                '&&-lg': {
+                    '@apply min-h-48 h-auto': {};
+                    '.sk-form-textarea-counter': {
+                        '@apply px-20': {};
+                        '@apply py-11': {};
+                    };
+                };
+                '&&-md': {
+                    '@apply min-h-40 h-auto': {};
+                    '.sk-form-textarea-counter': {
+                        '@apply px-16': {};
+                        '@apply py-7': {};
+                    };
+                };
+                '&&-sm': {
+                    '@apply min-h-32 h-auto': {};
+                    '.sk-form-textarea-counter': {
+                        '@apply px-12': {};
+                        '@apply py-5': {};
+                    };
+                };
+            };
+            '&-group': {
+                '&-outer': {
+                    '@apply flex gap-0 max-w-full': {};
+                    '&[data-hasleftaddon="true"]': {
+                        '.sk-form-input, .sk-form-input-group-inner': {
+                            '@apply rounded-l-0': {};
+                            '@apply border-l-0': {};
+                        };
+                    };
+                    '&[data-hasrightaddon="true"]': {
+                        '.sk-form-input, .sk-form-input-group-inner': {
+                            '@apply rounded-r-0': {};
+                            '@apply border-r-0': {};
+                        };
+                    };
+                };
+                '&-inner': {
+                    '.sk-form-input': {
+                        '@apply rounded-0': {};
+                        '@apply border-0': {};
+                        '@apply focus:ring-0': {};
+                        '@apply focus:ring-offset-0': {};
+                        '@apply bg-transparent': {};
+                        '@apply dark:bg-transparent': {};
+                        '@apply grow': {};
+                    };
+                    '@apply border-1': {};
+                    '@apply border-input-field-outline': {};
+                    '@apply hover:border-input-field-outline-hover': {};
+                    '@apply placeholder:text-dark-placeholder': {};
+                    '@apply bg-input-field-surface': {};
+                    '&:invalid, &[aria-invalid="true"]': {
+                        '@apply border-2 border-error-surface-primary': {};
+                    };
+                    '&:disabled, &[aria-disabled="true"]': {
+                        '@apply bg-input-field-surface-disabled': {};
+                        '@apply border-input-field-outline-disabled': {};
+                        '@apply hover:border-input-field-outline-disabled': {};
+                        '@apply text-dark-disabled': {};
+                    };
+                    '&:read-only': {
+                        '@apply bg-input-field-surface': {};
+                        '@apply border-input-field-outline-disabled': {};
+                        '@apply text-dark-secondary': {};
+                        '@apply placeholder:text-dark-secondary': {};
+                    };
+                    '@apply flex relative grow': {};
+                    '@apply items-center': {};
+                    '@apply focus-within:ring': {};
+                    '@apply focus-within:ring-ring': {};
+                    '@apply text-dark-secondary': {};
+                    '@apply focus-within:border-input-field-surface': {};
+                    '&:not(:invalid):not([aria-invalid="true"])': {
+                        '@apply focus-within:border-input-field-surface': {};
+                    };
+                    '&&-lg': {
+                        '@apply text-input-large': {};
+                        '@apply rounded-button-lg': {};
+                        '@apply h-48': {};
+                    };
+                    '&&-md': {
+                        '@apply text-input-medium': {};
+                        '@apply rounded-button-md': {};
+                        '@apply h-40': {};
+                    };
+                    '&&-sm': {
+                        '@apply text-input-small': {};
+                        '@apply rounded-button-sm': {};
+                        '@apply h-32': {};
+                    };
+                };
+            };
+        };
         '&-addon': {
             '.sk-form-input': {
                 '@apply rounded-0': {};

package/dist/types/components/progress-bar.d.ts

@@ -5,6 +5,12 @@ export declare const ProgressBar: (colors: string[]) => {
                 "@apply bg-primary-surface": {};
             };
         };
+        '&-sm': {
+            '@apply h-[4px]': {};
+        };
+        '&-md': {
+            '@apply h-[8px]': {};
+        };
         '@apply flex h-4 rounded-circular bg-background-color-mixin-2': {};
         '&-fill': {
             '@apply rounded-circular': {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sk-web-gui/core",
-  "version": "4.1.1",
+  "version": "4.2.0",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -41,5 +41,5 @@
     "mini-svg-data-uri": "^1.4.4",
     "tailwindcss": "^3.4.17"
   },
-  "gitHead": "184f8e279fc18f286164e8c761bf0d3a6b96d4c5"
+  "gitHead": "9759cc8217a908dd19c3de4afbbcb41a552b2ded"
 }