@sk-web-gui/core 3.5.0 → 3.7.0

package/dist/types/components/tab-menu.d.ts

@@ -0,0 +1,57 @@
+declare function _exports(): {
+    '.sk-tab-menu': {
+        '&-wrapper': {
+            display: string;
+            flexDirection: string;
+            margin: string;
+        };
+        '&-right': {
+            '@apply justify-end': {};
+        };
+        '&-center': {
+            '@apply justify-center': {};
+        };
+        '&-list': {
+            all: string;
+            display: string;
+            '&-stretch': {
+                '@apply w-full justify-between': {};
+            };
+        };
+        '&-underline': {
+            width: string;
+            height: number;
+            '@apply bg-gray-light': {};
+        };
+        '&-item': {
+            all: string;
+            height: number;
+            display: string;
+            padding: string;
+            marginRight: string;
+            alignItems: string;
+            position: string;
+            cursor: string;
+            '&-stretch': {
+                '@apply mr-0': {};
+            };
+            '&-right': {
+                '@apply mr-0 ml-[5rem]': {};
+            };
+            '&-center:last-of-type': {
+                '@apply mr-0': {};
+            };
+            '&.active::after': {
+                content: string;
+                display: string;
+                position: string;
+                width: string;
+                height: number;
+                top: string;
+                left: number;
+                '@apply bg-primary': {};
+            };
+        };
+    };
+};
+export = _exports;

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

@@ -1,10 +1,239 @@
 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': {};
+        '&-caption': {
+            '&-sr': {
+                '@apply sr-only': {};
+            };
+            '@apply text-left': {};
+            '@apply w-full': {};
+        };
+        '&-auto': {
+            '&-cell': {
+                '@apply w-full': {};
+            };
+        };
+        '&-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': {};
+            '&[data-sronly="true"]': {
+                '@apply sr-only': {};
+            };
+            '&-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': {};
+                };
+                '&-pagesize': {
+                    '@apply max-w-60': {};
+                };
+            };
+            '&-pagination': {
+                '@apply grow': {};
+                '@apply shrink': {};
             };
         };
     };

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

@@ -0,0 +1,134 @@
+export declare const ZebraTable: () => {
+    '.sk-zebratable-wrapper': {
+        '@apply rounded-groups': {};
+        '@apply border-1': {};
+        '@apply bg-background-content': {};
+        '&-inside': {
+            '@apply border-0 rounded-t-groups': {};
+            '@apply overflow-hidden': {};
+        };
+        '&[data-variant="table"]': {
+            '&:not([data-background="true"])': {
+                '@apply border-0': {};
+                '@apply bg-transparent': {};
+            };
+            '.sk-zebratable-wrapper-inside': {
+                '@apply border-0 rounded-b-groups': {};
+            };
+        };
+    };
+    '.sk-zebratable': {
+        '@apply w-full text-left table-auto': {};
+        '@apply text-dark-secondary': {};
+        '&-thead': {
+            '@apply border-b-1 border-dark-primary': {};
+            '@apply h-48': {};
+            '&-tr': {
+                '@apply table-row': {};
+                '@apply text-label-small': {};
+            };
+            '&-th': {
+                '@apply py-4': {};
+                "&[data-isColumnSortable='true']": {
+                    '@apply cursor-pointer': {};
+                };
+            };
+            '@apply bg-transparent': {};
+            '&[data-background="true"]': {
+                '@apply bg-vattjom-background-200 border-b-transparent': {};
+            };
+        };
+        '&-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 px-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-sortmodeascending='true']": {
+                        '> *': {
+                            '@apply last-of-type:text-dark-ghost': {};
+                        };
+                    };
+                    "&[data-sortmodeascending='false']": {
+                        '> *': {
+                            '@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': {};
+                '@apply last-of-type:border-b-transparent': {};
+            };
+            '&-td': {
+                '@apply text-small': {};
+                '&-content': {
+                    '@apply inline-flex': {};
+                    '@apply justify-start items-center': {};
+                    '@apply gap-8': {};
+                    '@apply py-8 px-18': {};
+                    '@apply h-[6.3rem]': {};
+                    '@apply min-h-[6.3rem]': {};
+                };
+            };
+        };
+        '&[data-dense="true"]': {
+            '.sk-zebratable': {
+                '&-thead': {
+                    '&-th': {
+                        '@apply py-4': {};
+                    };
+                };
+                '&-tbody': {
+                    '&-td-content': {
+                        '@apply py-0': {};
+                        '@apply h-[4.7rem]': {};
+                        '@apply min-h-[4.7rem]': {};
+                    };
+                };
+            };
+        };
+        '&-paginationwrapper': {
+            '@apply w-full max-w-[60rem]': {};
+            '@apply shrink': {};
+        };
+        '&-bottom': {
+            '@apply py-14 px-16': {};
+            '@apply border-t-1': {};
+            '@apply flex flex-row': {};
+            '@apply gap-32': {};
+            '@apply justify-between items-center': {};
+            '&-section': {
+                '@apply shrink-0': {};
+                '@apply flex flex-row': {};
+                '@apply justify-start items-center': {};
+                '@apply gap-8': {};
+                '&-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/cookie-consent/src/cookie-consent.d.ts

@@ -0,0 +1,32 @@
+import { DefaultProps } from '@sk-web-gui/utils';
+import { CookieSetOptions } from 'universal-cookie';
+import React from 'react';
+export declare const defaultCookieConsentName = "SKCookieConsent";
+export interface ConsentCookie {
+    optional: boolean;
+    displayName: string;
+    description: string;
+    cookieName: string;
+}
+export interface CheckableConsentCookie extends ConsentCookie {
+    isChecked: boolean;
+}
+export declare enum ConsentType {
+    Necessary = "Necessary",
+    All = "All",
+    Custom = "Custom"
+}
+export declare function getConsent(): string[];
+export declare function resetConsent(): void;
+export declare function getCheckableCookies(cookies: ConsentCookie[]): CheckableConsentCookie[];
+export interface CookieConsentProps extends DefaultProps, Omit<React.ComponentPropsWithRef<'div'>, 'title'> {
+    isOpen?: boolean;
+    onConsent: (cookies: ConsentCookie[]) => void;
+    cookies: ConsentCookie[];
+    title: string;
+    body: React.ReactNode;
+    resetConsentOnInit: boolean;
+    options?: CookieSetOptions;
+}
+export declare const CookieConsent: React.FC<CookieConsentProps>;
+export default CookieConsent;

package/dist/types/cookie-consent/src/index.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { ConsentType, CookieConsent, CookieConsentProps, getCheckableCookies, getConsent, resetConsent } from './cookie-consent';
+declare const CookieConsentUtils: {
+    defaultCookieConsentName: string;
+    getConsent: typeof getConsent;
+    resetConsent: typeof resetConsent;
+    getCheckableCookies: typeof getCheckableCookies;
+    ConsentType: typeof ConsentType;
+};
+export { CookieConsent, CookieConsentUtils };
+export type { CookieConsentProps };
+declare const _default: {
+    CookieConsent: import("react").FC<CookieConsentProps>;
+};
+export default _default;

package/dist/types/cookie-consent/stories/cookie-consent.stories.d.ts

@@ -0,0 +1,7 @@
+import { CookieConsentProps } from '../src';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, CookieConsentProps>;
+export default _default;
+export declare const Template: {
+    (args: CookieConsentProps): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};

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

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

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

@@ -0,0 +1,53 @@
+declare const _base: {
+    html: {
+        '@apply text-base antialiased': {};
+        fontSize: string;
+        textRendering: string;
+        touchAction: string;
+    };
+    body: {
+        '@apply text-base bg-background-content': {};
+        '@apply text-body': {};
+        position: string;
+        minHeight: string;
+        fontFeatureSettings: string;
+    };
+    '*': {
+        '@apply focus-visible:ring-ring': {};
+        '@apply focus-visible:ring-offset-background-content': {};
+        '@apply focus-visible:outline-0': {};
+    };
+    small: {
+        '@apply text-small': {};
+    };
+    a: {
+        '@apply rounded-button-sm md:rounded-button-md xl:rounded-button-lg': {};
+    };
+    h1: {
+        '@apply text-h1-sm md:text-h1-md xl:text-h1-lg': {};
+        '@apply mb-md': {};
+    };
+    h2: {
+        '@apply text-h2-sm md:text-h2-md xl:text-h2-lg': {};
+    };
+    h3: {
+        '@apply text-h3-sm md:text-h3-md xl:text-h3-lg': {};
+    };
+    'h4,h5,h6': {
+        '@apply text-h4-sm md:text-h4-md xl:text-h4-lg': {};
+    };
+    label: {
+        '@apply text-label-medium': {};
+    };
+    p: {
+        '@apply my-4': {};
+    };
+    '.text-content': {
+        '@apply max-w-content': {};
+        p: {
+            '@apply mt-sm text-base': {};
+        };
+    };
+};
+declare const base: typeof _base;
+export { base };