@sk-web-gui/core 3.4.1 → 3.4.2

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

@@ -0,0 +1,64 @@
+export declare const Switch: () => {
+    '.sk-form-switch-label': {
+        '@apply inline-flex align-middle items-center': {};
+        '@apply flex-row gap-12': {};
+        '@apply font-normal text-base': {};
+        "&[type='hidden']": {
+            '@apply hidden': {};
+            '.sk-form-switch': {
+                '@apply hidden': {};
+            };
+        };
+    };
+    '.sk-form-switch': {
+        '@apply rounded-full cursor-pointer focus:outline-none': {};
+        '@apply bg-primitives-overlay-darken-3 dark:bg-primitives-overlay-lighten-3': {};
+        '@apply hover:bg-primitives-overlay-darken-5 hover:dark:bg-primitives-overlay-lighten-4': {};
+        'input[type=checkbox]:focus-visible + &': {
+            '@apply ring ring-blue-500': {};
+        };
+        'input[type=checkbox]:checked + &': {
+            "&[data-color=\"gronsta\"]": {
+                '.sk-form-switch-box': {
+                    '@apply bg-gronsta-surface-primary': {};
+                };
+            };
+            '.sk-form-switch-icon': {
+                '@apply flex': {};
+            };
+            '.sk-form-switch-box': {
+                transform: string;
+            };
+            '@apply bg-primitives-overlay-darken-4 dark:bg-primitives-overlay-lighten-5': {};
+            "&[data-disabled=\"true\"]": {
+                '.sk-form-switch-box': {
+                    '@apply bg-transparent': {};
+                    '.sk-form-switch-icon': {
+                        '@apply bg-primitives-overlay-darken-6 dark:bg-primitives-overlay-lighten-6': {};
+                        '@apply text-light-primary': {};
+                    };
+                };
+            };
+        };
+        "&[data-disabled=\"true\"]": {
+            '@apply cursor-default': {};
+            '@apply bg-primitives-overlay-darken-2 dark:bg-primitives-overlay-lighten-2': {};
+            '.sk-form-switch-box': {
+                '@apply bg-primitives-overlay-darken-6 dark:bg-primitives-overlay-lighten-6': {};
+            };
+        };
+        '@apply w-56': {};
+    };
+    '.sk-form-switch-box': {
+        '@apply transition-transform ease-in-out duration-150 transform rounded-full shadow translate-x-0 m-6': {};
+        '@apply bg-primitives-overlay-darken-7 dark:bg-primitives-overlay-lighten-7': {};
+        '@apply h-20 w-20': {};
+        '@apply flex justify-center items-center object-center': {};
+        '.sk-form-switch-icon': {
+            '@apply bg-transparent': {};
+            '@apply hidden': {};
+            '@apply w-20 h-20': {};
+            '@apply text-light-primary': {};
+        };
+    };
+};

package/dist/types/core/src/components/table-autotable.d.ts

@@ -0,0 +1,222 @@
+export declare const TableAutoTable: () => {
+    '.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"])': {
+            '@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/core/src/components/table.d.ts

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

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

@@ -0,0 +1,14 @@
+export declare const Tabs: () => {
+    '.sk-tabs': {
+        '@apply w-full': {};
+        '&-panels': {
+            '@apply p-8': {};
+            '@apply mt-8': {};
+        };
+        '&-content': {
+            '&:not([data-selected="true"])': {
+                '@apply hidden': {};
+            };
+        };
+    };
+};

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

@@ -0,0 +1,53 @@
+export declare const Tooltip: () => {
+    '.sk-tooltip': {
+        '@apply inline-flex justify-center items-center': {};
+        '@apply w-fit h-fit': {};
+        '@apply grow-0': {};
+        '&-text': {
+            '@apply inline-flex': {};
+            '@apply bg-primary-surface shadow': {};
+            '@apply px-16 py-8': {};
+            '@apply rounded-utility': {};
+            '@apply text-light-primary text-small': {};
+            '@apply font-bold': {};
+            '@apply w-fit h-fit': {};
+            '@apply grow-0': {};
+            '@apply min-h-34': {};
+        };
+        '&::after, &::before': {
+            '@apply h-0 w-0 overflow-hidden': {};
+        };
+        '&[data-position="above"]': {
+            '@apply flex-col': {};
+            '@apply pb-2': {};
+            '&::after': {
+                '@apply content-[""] border-solid border-6 border-b-0': {};
+                '@apply border-t-primary-surface border-r-transparent border-b-transparent border-l-transparent': {};
+            };
+        };
+        '&[data-position="below"]': {
+            '@apply flex-col': {};
+            '@apply pt-2': {};
+            '&::before': {
+                '@apply content-[""] border-solid border-6 border-t-0': {};
+                '@apply border-t-transparent border-r-transparent border-b-primary-surface border-l-transparent': {};
+            };
+        };
+        '&[data-position="left"]': {
+            '@apply flex-row': {};
+            '@apply pr-2 py-3': {};
+            '&::after': {
+                '@apply content-[""] border-solid border-6 border-r-0': {};
+                '@apply border-t-transparent border-r-transparent border-b-transparent border-l-primary-surface': {};
+            };
+        };
+        '&[data-position="right"]': {
+            '@apply flex-row': {};
+            '@apply pl-2 py-3': {};
+            '&::before': {
+                '@apply content-[""] border-solid border-6 border-l-0': {};
+                '@apply border-t-transparent border-r-primary-surface border-b-transparent border-l-transparent': {};
+            };
+        };
+    };
+};

package/dist/types/core/src/components/user-menu.d.ts

@@ -0,0 +1,14 @@
+export declare const UserMenu: () => {
+    '.sk-usermenu': {
+        '@apply relative': {};
+        '&-button': {
+            '@apply p-0 bg-transparent hover:bg-transparent': {};
+            '@apply border-0': {};
+            '@apply hover:border-0': {};
+            '.sk-avatar': {
+                height: string;
+                width: string;
+            };
+        };
+    };
+};

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

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

package/dist/types/core/src/index.d.ts

@@ -0,0 +1,6 @@
+import preset from './preset';
+import plugin from './plugin';
+import { AriaAttributes } from './aria-plugin';
+import { DataAttributes } from './data-plugin';
+export { preset, plugin, DataAttributes, AriaAttributes };
+export default plugin;

package/dist/types/core/src/plugin.d.ts

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

package/dist/types/core/src/preset.d.ts

@@ -0,0 +1,18 @@
+declare const preset: (options?: {
+    tailwindForms: boolean;
+    tailwindContainers: boolean;
+    dataAttributes: boolean;
+    ariaAttributes: boolean;
+    plugin: {
+        colors: never[];
+        cssBase: boolean;
+    };
+}) => {
+    plugins: ({
+        handler: import("tailwindcss/types/config").PluginCreator;
+        config?: Partial<import("tailwindcss/types/config").Config> | undefined;
+    } | {
+        handler: () => void;
+    })[];
+};
+export default preset;

package/dist/types/core/src/theme.d.ts

@@ -0,0 +1,4 @@
+import { RecursiveObject } from '@sk-web-gui/theme';
+import { Config } from 'tailwindcss/types/config';
+declare const theme: RecursiveObject<Config['theme'] | string | string[]>;
+export { theme };