@sk-web-gui/core 3.4.3 → 3.6.0

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

@@ -0,0 +1,110 @@
+export declare const AIServiceModule: (colors: string[]) => {
+    '.sk-ai-service-module': {
+        '@apply flex gap-0': {};
+        '@apply rounded-groups': {};
+        '@apply bg-background-content': {};
+        '@apply shadow-100': {};
+        '&[data-inverted="true"]': {
+            '@apply text-inverted-dark-primary': {};
+            '@apply bg-inverted-background-content': {};
+        };
+        '&-row': {
+            '@apply flex flex-col': {};
+            '@apply grow shrink': {};
+            '@apply p-16 md:p-32': {};
+            '@apply bg-transparent': {};
+            '@apply first:rounded-l-groups': {};
+            '@apply last:rounded-r-groups': {};
+        };
+        '&-content': {
+            '@apply flex flex-col gap-6 md:gap-24': {};
+            '@apply p-4 md:p-8': {};
+            '@apply w-full': {};
+        };
+        '&-header, &-header > *': {
+            '@apply font-header text-display-3-sm md:text-display-3-md xl:text-display-3-lg': {};
+        };
+        '&-form': {
+            '@apply w-full': {};
+            '@apply flex flex-col': {};
+            '@apply gap-8': {};
+            '@apply relative': {};
+            '&-control': {
+                '@apply w-full': {};
+            };
+            '&-label': {
+                '@apply text-label-large': {};
+            };
+            '&-error': {
+                '@apply text-small': {};
+            };
+            '&-input': {
+                '@apply w-full': {};
+                '&-group': {
+                    '@apply w-full': {};
+                    '.sk-form-input-addin-right': {
+                        '@apply pr-8': {};
+                    };
+                };
+                '&-wrapper': {
+                    '@apply relative': {};
+                    '@apply w-full h-48': {};
+                };
+            };
+            '&-readmore': {
+                '@apply text-small': {};
+                '@apply text-light-secondary': {};
+                '&[data-inverted="true"]': {
+                    '@apply text-inverted-light-secondary': {};
+                };
+            };
+        };
+        '&-assistant': {
+            '&-expanded': {
+                '@apply h-[35em] max-h-[35em]': {};
+                '@apply rounded-button': {};
+                '@apply overflow-hidden': {};
+                '@apply flex flex-col gap-0': {};
+                '@apply shadow-200': {};
+                '@apply bg-background-content': {};
+                '@apply absolute top-0 left-0 right-0': {};
+                '&-feed': {
+                    '@apply shrink grow': {};
+                    '@apply pl-16 pt-16 pr-48 pb-24': {};
+                    '@apply max-h-full overflow-y-auto': {};
+                    '@apply text-dark-primary': {};
+                    'sk-ai-markdown': {
+                        '@apply text-dark-secondary': {};
+                    };
+                };
+                '&[data-inverted="true"]': {
+                    '@apply bg-inverted-background-content': {};
+                    '.sk-ai-service-module-feed': {
+                        '@apply text-inverted-dark-primary': {};
+                        'sk-ai-markdown': {
+                            '@apply text-inverted-dark-secondary': {};
+                        };
+                    };
+                };
+                '&-close-button': {
+                    '@apply absolute right-12 top-12': {};
+                };
+            };
+        };
+        '&-questions': {
+            '@apply w-[22.5em] max-w-[22.5em] min-w-[22.5em]': {};
+            '@apply flex flex-col gap-12': {};
+            '@apply pb-8': {};
+            '@apply text-dark-primary': {};
+            '&-title, &-title > *': {
+                '@apply text-label-large': {};
+            };
+            '&-list': {
+                '@apply flex flex-col gap-8': {};
+            };
+            '&[data-inverted="true"]': {
+                '@apply text-inverted-dark-primary': {};
+            };
+        };
+    };
+};

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

@@ -1,7 +1,7 @@
 export declare const InputSection: () => {
     '.sk-ai-inputsection': {
         '@apply w-full': {};
-        '&-input': {
+        '&-input, &-group': {
             '@apply w-full': {};
         };
         '&-wrapper': {
@@ -12,5 +12,10 @@ export declare const InputSection: () => {
                 '@apply shadow-100': {};
             };
         };
+        '&-group': {
+            '.sk-form-input-addin-right': {
+                '@apply pr-4': {};
+            };
+        };
     };
 };

package/dist/types/components/ai/new-session-button.d.ts

@@ -0,0 +1,16 @@
+export declare const NewSessionButton: () => {
+    '.sk-ai-newsession': {
+        '@apply text-base max-w-[15.25em]': {};
+        '@apply flex flex-col': {};
+        '@apply py-16 gap-8': {};
+        '@apply items-center': {};
+        '&-button': {
+            '@apply grow-0': {};
+        };
+        '&-helpertext': {
+            '@apply text-dark-secondary': {};
+            '@apply text-small': {};
+            '@apply text-center': {};
+        };
+    };
+};

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

@@ -1,5 +1,11 @@
 export declare const Avatar: (colors: string[]) => {
     '.sk-avatar': {
+        '&[data-color="primary"]': {
+            '@apply bg-primary-surface  text-light-primary': {};
+            '&[data-accent="true"]': {
+                '@apply bg-inverted-primary-surface  text-inverted-light-primary': {};
+            };
+        };
         '&-img': {
             '@apply min-w-full min-h-full object-cover': {};
         };

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

@@ -72,7 +72,7 @@ export declare const Card: (colors: string[]) => {
             '&-content': {
                 '@apply w-full': {};
                 'p, a': {
-                    '@apply line-clamp-3 m-0 pt-8 text-base': {};
+                    '@apply line-clamp-3 m-0 pt-8 text-base text-body': {};
                 };
             };
             '&-icon': {

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

@@ -1,10 +1,221 @@
 export declare const Table: () => {
-    '.table': {
-        '@apply min-w-full border-collapse border-gray-stroke divide-gray-lighter table-auto': {};
-        '&-item': {
-            '@apply px-6 py-4 border border-gray-stroke whitespace-nowrap': {};
-            '&:nth-child(odd)': {
-                '@apply bg-gray-lighter': {};
+    '.sk-table-wrapper': {
+        '@apply text-base': {};
+        '@apply rounded-groups': {};
+        '@apply border-1 border-divider': {};
+        '@apply bg-background-content': {};
+        '@apply relative': {};
+        '&-inside': {
+            '@apply border-0 rounded-t-groups': {};
+            '@apply overflow-hidden': {};
+            '@apply w-full': {};
+            '@apply h-full max-h-full': {};
+            '&[data-scroll="x"]': {
+                '@apply overflow-x-auto': {};
+            };
+            '&[data-scroll="y"]': {
+                '@apply overflow-y-auto': {};
+            };
+            '&[data-scroll="true"]': {
+                '@apply overflow-auto': {};
+            };
+        };
+        '&:not([data-background="true"]):not([data-wrappingborder="true"])': {
+            '@apply border-0': {};
+            '@apply bg-transparent': {};
+        };
+        '.sk-table-wrapper-inside': {
+            '@apply border-0 rounded-b-groups': {};
+        };
+    };
+    '.sk-table': {
+        '@apply w-full text-left table-auto': {};
+        '@apply text-dark-secondary': {};
+        '&-thead': {
+            '@apply border-b-1 border-dark-primary': {};
+            '&[data-stickyheader="true"]': {
+                '@apply sticky top-0': {};
+                '@apply bg-background-content': {};
+                '@apply border-b-0': {};
+                '.sk-table-col-content': {
+                    '@apply border-b-1 border-dark-primary': {};
+                };
+            };
+            '&-tr': {
+                '@apply table-row': {};
+                '@apply text-label-small': {};
+            };
+            '.sk-table-th': {
+                '@apply h-56': {};
+                '@apply p-0': {};
+                '&:first-of-type': {
+                    '.sk-table-sticky-col': {
+                        '@apply rounded-tl-groups': {};
+                    };
+                };
+                '&:last-of-type': {
+                    '.sk-table-sticky-col': {
+                        '@apply rounded-tr-groups': {};
+                    };
+                };
+                '.sk-table-col-content': {
+                    '@apply py-4': {};
+                    '@apply px-16': {};
+                };
+                "&[data-isColumnSortable='true']": {
+                    '@apply cursor-pointer': {};
+                };
+            };
+            '@apply bg-transparent': {};
+            '&[data-background="true"]': {
+                '@apply border-b-0': {};
+                '@apply bg-vattjom-background-200 border-b-transparent': {};
+                '.sk-table-col-content': {
+                    '@apply border-b-0': {};
+                };
+                '[data-sticky="true"]': {
+                    '@apply bg-vattjom-background-200': {};
+                };
+            };
+        };
+        '&-sortbutton': {
+            '@apply flex items-center': {};
+            '@apply focus-visible:ring ring-ring ring-offset-0': {};
+            '@apply focus-visible:bg-vattjom-background-200': {};
+            '@apply rounded-utility': {};
+            '@apply pr-16': {};
+            '@apply h-40': {};
+            '&-icon': {
+                '@apply inline-flex pl-sm': {};
+                '&-sort': {
+                    '@apply text-dark-secondary': {};
+                    '@apply flex flex-col': {};
+                    svg: {
+                        '@apply h-16 w-16': {};
+                        '@apply first-of-type:-mb-4': {};
+                        '@apply last-of-type:-mt-4': {};
+                    };
+                    "&[data-sortmode='ascending']": {
+                        '> *': {
+                            '@apply last-of-type:text-dark-ghost': {};
+                        };
+                    };
+                    "&[data-sortmode='descending']": {
+                        '> *': {
+                            '@apply first-of-type:text-dark-ghost': {};
+                        };
+                    };
+                };
+            };
+        };
+        '&-tbody': {
+            '@apply text-dark-secondary bg-transparent': {};
+            '&-tr': {
+                '@apply bg-transparent': {};
+                '@apply hover:bg-background-100': {};
+                '@apply border-b-1 border-divider': {};
+                '@apply last-of-type:border-b-transparent': {};
+                '@apply focus-visible:shadow-insetring': {};
+                '&:hover': {
+                    td: {
+                        '@apply bg-background-100': {};
+                    };
+                };
+            };
+            '&-td, .sk-table-th': {
+                '@apply p-0': {};
+                '@apply text-small': {};
+                '@apply h-64-1': {};
+                '@apply min-h-64-1': {};
+                '@apply focus-visible:shadow-insetring': {};
+                '.sk-table-col-content': {
+                    '@apply py-8 px-18': {};
+                    '@apply gap-8': {};
+                };
+            };
+        };
+        '&-col-content': {
+            '@apply flex': {};
+            '@apply w-full': {};
+            '@apply justify-start items-center': {};
+            '@apply h-full': {};
+        };
+        '&[data-dense="dense"]': {
+            '.sk-table': {
+                '&-col-content': {
+                    '@apply py-0': {};
+                };
+                '&-thead': {
+                    th: {
+                        '@apply h-48': {};
+                    };
+                };
+                '&-tbody': {
+                    '&-td, .sk-table-th': {
+                        '@apply h-48-1': {};
+                        '@apply min-h-48-1': {};
+                    };
+                };
+            };
+        };
+        '[data-sticky="true"]': {
+            '@apply sticky': {};
+            '@apply bg-background-content': {};
+            '&:first-of-type': {
+                '@apply left-0': {};
+            };
+            '&:last-of-type': {
+                '@apply right-0': {};
+            };
+        };
+        '&[data-hasscroll="true"]': {
+            '[data-sticky="true"]': {
+                '&:first-of-type': {
+                    '.sk-table-col-content': {
+                        '@apply border-r-1 border-r-divider': {};
+                    };
+                };
+                '&:last-of-type': {
+                    '.sk-table-col-content': {
+                        '@apply border-l-1 border-r-divider': {};
+                    };
+                };
+                '.sk-table-col-content': {};
+            };
+        };
+        '&-paginationwrapper': {
+            '@apply max-w-[37.5em]': {};
+            '@apply shrink grow': {};
+            '@apply hidden @screen-md/footer:flex': {};
+        };
+        '&-bottom': {
+            '@apply @container/footer': {};
+            '@apply py-14 px-16': {};
+            '@apply border-t-1 border-divider': {};
+            '@apply flex flex-row': {};
+            '@apply flex-wrap': {};
+            '@apply @screen-lg/footer:gap-32': {};
+            '@apply @screen-md/footer:gap-16': {};
+            '@apply gap-8': {};
+            '@apply justify-between items-center': {};
+            '&-section': {
+                '@apply shrink-0': {};
+                '@apply flex flex-col': {};
+                '@apply justify-start items-center': {};
+                '@apply @screen-sm/footer:flex-row': {};
+                '@apply gap-8': {};
+                '&.sk-table-pagination-mobile': {
+                    '@apply @screen-md/footer:hidden': {};
+                };
+                '&-label': {
+                    '@apply font-normal': {};
+                    '@apply text-small': {};
+                    '@apply shrink-0': {};
+                };
+            };
+            '&-pagination': {
+                '@apply grow': {};
+                '@apply shrink': {};
             };
         };
     };

package/dist/types/components.d.ts

@@ -0,0 +1,8 @@
+import { CSSRuleObject, PluginAPI } from 'tailwindcss/types/config';
+export type Component = (colors: string[], theme: PluginAPI['theme']) => CSSRuleObject;
+interface ComponentWithDeps {
+    comp: Component;
+    deps?: Component[];
+}
+export declare const components: ComponentWithDeps[];
+export {};

package/dist/types/data-plugin.d.ts

@@ -1,4 +1,4 @@
 export declare const DataAttributes: {
     handler: import("tailwindcss/types/config").PluginCreator;
-    config?: Partial<import("tailwindcss/types/config").Config> | undefined;
+    config?: Partial<import("tailwindcss/types/config").Config>;
 };

package/dist/types/fonts.d.ts

@@ -0,0 +1,8 @@
+export declare const fonts: {
+    DEFAULT: string;
+    header: string;
+    display: string;
+    sans: string;
+    serif: string;
+    mono: string;
+};

package/dist/types/plugin.d.ts

@@ -1,11 +1,16 @@
-interface PluginOptions {
-    colors: string[];
-    cssBase: boolean;
+export interface PluginOptions {
+    colors?: string[];
+    cssBase?: boolean;
+    components?: string[];
 }
+export declare const pluginDefaults: {
+    cssBase: boolean;
+    colors: never[];
+};
 declare const plugin: {
     (options: PluginOptions): {
         handler: import("tailwindcss/types/config").PluginCreator;
-        config?: Partial<import("tailwindcss/types/config").Config> | undefined;
+        config?: Partial<import("tailwindcss/types/config").Config>;
     };
     __isOptionsFunction: true;
 };

package/dist/types/preset.d.ts

@@ -1,16 +1,15 @@
-declare const preset: (options?: {
-    tailwindForms: boolean;
-    tailwindContainers: boolean;
-    dataAttributes: boolean;
-    ariaAttributes: boolean;
-    plugin: {
-        colors: never[];
-        cssBase: boolean;
-    };
-}) => {
+import { type PluginOptions } from './plugin';
+interface PresetOptions {
+    tailwindForms?: boolean;
+    tailwindContainers?: boolean;
+    dataAttributes?: boolean;
+    ariaAttributes?: boolean;
+    plugin?: PluginOptions;
+}
+declare const preset: (_options: PresetOptions) => {
     plugins: ({
         handler: import("tailwindcss/types/config").PluginCreator;
-        config?: Partial<import("tailwindcss/types/config").Config> | undefined;
+        config?: Partial<import("tailwindcss/types/config").Config>;
     } | {
         handler: () => void;
     })[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sk-web-gui/core",
-  "version": "3.4.3",
+  "version": "3.6.0",
   "license": "MIT",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -25,23 +25,18 @@
     "build:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts -d dist/cjs --source-maps",
     "build:types": "tsc -p ./tsconfig.production.json --emitDeclarationOnly --declaration --declarationDir dist/types"
   },
-  "peerDependencies": {
-    "@tailwindcss/container-queries": "^0.1.1",
-    "@tailwindcss/forms": "^0.5.7",
-    "tailwindcss": "^3.4.0"
-  },
   "devDependencies": {
-    "@tailwindcss/container-queries": "^0.1.1",
-    "@tailwindcss/forms": "^0.5.7",
     "autoprefixer": "^10.4.19",
     "clean-css": "^5.3.3",
     "postcss": "^8.4.38",
-    "postcss-import": "^16.1.0",
-    "tailwindcss": "^3.4.3"
+    "postcss-import": "^16.1.0"
   },
   "dependencies": {
-    "@sk-web-gui/theme": "2.2.0",
-    "mini-svg-data-uri": "^1.4.4"
+    "@sk-web-gui/theme": "2.3.0",
+    "@tailwindcss/container-queries": "^0.1.1",
+    "@tailwindcss/forms": "^0.5.7",
+    "mini-svg-data-uri": "^1.4.4",
+    "tailwindcss": "^3.4.0"
   },
-  "gitHead": "66c4f235ad901d0af7254c32b39eeee0015d3417"
+  "gitHead": "b0878887a5416309013dfa39c8acce93825e4e73"
 }