@sk-web-gui/core 1.0.3 → 1.1.1

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

@@ -1,4 +1,4 @@
-declare function _exports(): {
+export declare const Accordion: () => {
     '.sk-disclosure': {
         '&-header': {
             '@apply mt-6 mb-8': {};
@@ -12,48 +12,96 @@ declare function _exports(): {
             };
             '&-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': {};
+        };
+        '&-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 py-4': {};
-                '@apply h-40': {};
+                '@apply gap-12': {};
             };
-            '.sk-disclosure-header-icon': {
-                '@apply w-32 h-32': {};
+            '.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 py-8': {};
-                '@apply h-56': {};
+                '@apply gap-12': {};
             };
-            '.sk-disclosure-header-icon': {
-                '@apply w-40 h-40': {};
+            '.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': {};
+                };
             };
         };
-        '&-toggle': {
-            '@apply flex items-center justify-between': {};
-            '@apply gap-16': {};
-        };
-        '&-title': {
-            '@apply text-dark-secondary': {};
+        '&-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 flex flex-col': {};
@@ -71,13 +119,38 @@ declare function _exports(): {
             '&[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-[3.2rem]': {};
+                    };
+                    '&[data-size="md"]': {
+                        '@apply ml-[3.6rem]': {};
+                    };
+                    '&[data-size="lg"]': {
+                        '@apply ml-[4.8rem]': {};
+                    };
+                };
+            };
         };
         '&-is-open': {
             '.sk-disclosure-body': {
                 '@apply overflow-visible animate-reset-overflow': {};
             };
-            '.sk-disclosure-title': {
-                '@apply text-vattjom-text-primary': {};
+            '&[data-variant="default"]': {
+                '.sk-disclosure-title': {
+                    '@apply text-vattjom-text-primary': {};
+                };
             };
         };
     };
@@ -94,4 +167,3 @@ declare function _exports(): {
         };
     };
 };
-export = _exports;

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

@@ -1,10 +1,21 @@
-declare function _exports(colors: any): {
-    '.alert-close-button': any;
-    '.alert-left-accent': any;
-    '.alert-solid': any;
-    '.alert-subtle': any;
+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': {};
     };
 };
-export = _exports;

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

@@ -1,4 +1,26 @@
-declare function _exports(colors: any): {
-    '.sk-avatar': any;
+export declare const Avatar: (colors: string[]) => {
+    '.sk-avatar': {
+        '&-img': {
+            '@apply min-w-full min-h-full object-cover': {};
+        };
+        '@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-[3.2rem] w-[3.2rem] min-h-[2.4rem] max-h-[3.2rem] min-w-[2.4rem] max-w-[3.2rem]': {};
+            '@apply text-label-small': {};
+        };
+        '&&-md': {
+            '@apply h-[4rem] w-[4rem] min-h-[3.2rem] max-h-[4rem] min-w-[3.2rem] max-w-[4rem]': {};
+            '@apply text-label-medium': {};
+        };
+        '&&-lg': {
+            '@apply h-[6.4rem] w-[6.4rem] min-h-[4rem] max-h-[6.4rem] min-w-[4rem] max-w-[6.4rem]': {};
+            '@apply text-label-large': {};
+        };
+    };
 };
-export = _exports;

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

@@ -1,4 +1,21 @@
-declare function _exports(colors: any): {
-    '.sk-badge': any;
+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-[2.4rem] w-[2.4rem]': {};
+        '@apply text-label-small': {};
+        '&[data-rounded="true"]': {
+            '@apply rounded-circular': {};
+        };
+    };
 };
-export = _exports;

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

@@ -1,4 +1,4 @@
-declare function _exports(): {
+export declare const Breadcrumb: () => {
     '.sk-breadcrumb': {
         '@apply text-body relative': {};
         '&-item': {
@@ -26,4 +26,3 @@ declare function _exports(): {
         };
     };
 };
-export = _exports;

package/dist/types/components/button-group.d.ts

@@ -1,4 +1,4 @@
-declare function _exports(): {
+export declare const ButtonGroup: () => {
     '.sk-btn-group': {
         '@apply inline-flex items-center': {};
         '&.sk-btn-group-attached': {
@@ -23,4 +23,3 @@ declare function _exports(): {
         };
     };
 };
-export = _exports;

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

@@ -1,4 +1,4 @@
-declare function _exports(colors: any): {
+export declare const Button: (colors: string[]) => {
     '.sk-btn': {
         '.btn-has-icon': {
             '&-left': {
@@ -64,7 +64,14 @@ declare function _exports(colors: any): {
                 };
             };
         };
-        '&-link': any;
+        '&-link': {
+            '@apply h-auto p-0 leading-normal text-neutral-600 hover:underline active:text-neutral-700': {};
+            '&.active': {
+                '@apply underline': {};
+            };
+            '@apply dark:text-neutral-200': {};
+            '@apply dark:active:text-neutral-500': {};
+        };
         '&-ghost': {
             '@apply text-dark-secondary': {};
             '@apply bg-transparent': {};
@@ -116,7 +123,27 @@ declare function _exports(colors: any): {
                 };
             };
         };
-        '&-primary': any;
+        '&-primary': {
+            "&[data-color='primary']": {
+                '@apply bg-primary-surface': {};
+                '@apply hover:bg-primary-surface-hover': {};
+                '&.active': {
+                    '@apply bg-primary-surface-hover': {};
+                };
+                "@apply active:bg-primary-surface-hover": {};
+                '&[data-inverted="true"]': {
+                    '@apply text-inverted-light-primary': {};
+                    '@apply bg-inverted-primary-surface': {};
+                    '@apply hover:bg-inverted-primary-surface-hover': {};
+                    '&.active': {
+                        '@apply bg-inverted-primary-surface-hover': {};
+                    };
+                    "@apply active:bg-inverted-primary-surface-hover": {};
+                };
+            };
+            '@apply text-light-primary': {};
+            '@apply hover:bg-primary-surface-hover': {};
+        };
         '@apply box-border': {};
         '@apply border-2 border-transparent': {};
         '@apply cursor-pointer': {};
@@ -169,4 +196,3 @@ declare function _exports(colors: any): {
         };
     };
 };
-export = _exports;

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

@@ -1,5 +1,85 @@
-declare function _exports(colors: any): {
-    '.sk-card': any;
+export declare const Card: (colors: string[]) => {
+    '.sk-card': {
+        '&.sk-card-use-hover-effect': {
+            '.sk-card-body-icon': {
+                '@apply inline-flex': {};
+                '@apply mt-auto mb-auto mr-24': {};
+            };
+        };
+        "&[data-layout=\"horizontal\"]": {
+            '@apply flex-row h-[100%]': {};
+            '.sk-card': {
+                '&-image': {
+                    '@apply h-[100%] w-[128px]': {};
+                    '@apply float-left': {};
+                    '@apply rounded-none rounded-l-cards grow-0': {};
+                };
+                '&-body': {
+                    '@apply w-[100%]': {};
+                    '@apply border-none': {};
+                    '&-wrapper': {
+                        '@apply w-[100%]': {};
+                    };
+                    '&-content': {
+                        'p, a': {
+                            '@apply text-small': {};
+                        };
+                    };
+                    '&-meta': {
+                        '@apply hidden': {};
+                    };
+                };
+            };
+        };
+        '@apply bg-white relative rounded-b-cards rounded-cards': {};
+        '@apply flex flex-col': {};
+        '@apply no-underline hover:no-underline': {};
+        '@apply h-[100%]': {};
+        '&-wrapper': {
+            '@apply grid': {};
+        };
+        '&-image': {
+            '@apply object-cover grow': {};
+            '@apply rounded-t-cards': {};
+        };
+        '&-body': {
+            '@apply px-24 pb-24 pt-16 rounded-b-cards': {};
+            '@apply shrink': {};
+            '&-wrapper': {
+                '@apply flex': {};
+            };
+            '&-meta': {
+                '@apply flex space-x-12 mt-16': {};
+                span: {
+                    '@apply flex space-x-4 items-center': {};
+                    time: {
+                        '@apply h-[23px] leading-[24px]': {};
+                    };
+                };
+                '&.sk-card-image': {
+                    backgroundColor: string;
+                    '@apply h-[278px]': {};
+                };
+            };
+            '&-header': {
+                'h1, h2, h3, h4, h5, h6, h7, a': {
+                    '@apply line-clamp-1 text-h3-md text-dark-primary mt-16': {};
+                };
+                span: {
+                    '@apply pl-12': {};
+                };
+            };
+            '&-content': {
+                '@apply w-full': {};
+                'p, a': {
+                    '@apply line-clamp-3 m-0 pt-8 text-base': {};
+                };
+            };
+            '&-icon': {
+                '@apply hidden': {};
+            };
+        };
+    };
     '.sk-card-link': {
         '@apply hover:cursor-pointer': {};
         '&::after': {
@@ -53,4 +133,3 @@ declare function _exports(colors: any): {
         };
     };
 };
-export = _exports;

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

@@ -1,4 +1,4 @@
-declare function _exports(): {
+export declare const Checkbox: () => {
     '.sk-form-checkbox': {
         '@apply bg-inherit': {};
         '@apply rounded-utility': {};
@@ -103,4 +103,3 @@ declare function _exports(): {
         };
     };
 };
-export = _exports;

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

@@ -0,0 +1,34 @@
+export declare const Chip: () => {
+    '.sk-chip': {
+        '@apply inline-flex': {};
+        '@apply items-center justify-center': {};
+        '@apply bg-secondary-surface': {};
+        '@apply hover:bg-secondary-surface-hover': {};
+        '@apply focus-visible:bg-secondary-surface-hover': {};
+        '@apply focus-visible:ring': {};
+        '@apply px-[.9rem] gap-4': {};
+        '@apply h-[3.4rem]': {};
+        '@apply text-small': {};
+        '@apply text-dark-secondary': {};
+        '@apply border-1': {};
+        '@apply border-secondary-outline': {};
+        '@apply hover:border-secondary-outline-hover': {};
+        '@apply focus-visible:border-transparent': {};
+        '@apply rounded-button': {};
+        '&[data-strong="true"]': {
+            '@apply border-2': {};
+            '@apply px-8': {};
+        };
+        '&[data-rounded="true"]': {
+            '@apply rounded-full': {};
+        };
+        '&[data-inverted="true"]': {
+            '@apply text-inverted-dark-secondary': {};
+            '@apply border-inverted-secondary-outline': {};
+            '@apply hover:border-inverted-secondary-outline-hover': {};
+            '@apply bg-inverted-secondary-surface': {};
+            '@apply hover:bg-inverted-secondary-surface-hover': {};
+            '@apply focus-visible:bg-inverted-secondary-surface-hover': {};
+        };
+    };
+};

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

@@ -1,4 +1,4 @@
-declare function _exports(): {
+export declare const Code: () => {
     '.code': {
         '@apply inline-flex justify-center items-center capitalize text-xs rounded-sm font-mono break-all': {};
         '@apply bg-neutral-200 border border-neutral-100 text-body': {};
@@ -6,4 +6,3 @@ declare function _exports(): {
         padding: string;
     };
 };
-export = _exports;

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

@@ -1,4 +1,4 @@
-declare function _exports(): {
+export declare const ComboBox: () => {
     '.sk-form-combobox': {
         '@apply focus-within:ring ring-ring ring-offset': {};
         '@apply relative w-auto': {};
@@ -27,6 +27,11 @@ declare function _exports(): {
                 '@apply pr-[6.8rem]': {};
             };
         };
+        '&:not([aria-expanded="true"])': {
+            '.sk-form-combobox-select': {
+                '@apply caret-transparent': {};
+            };
+        };
         '&-select': {
             '@apply h-full bg-right-12 bg-no-repeat': {};
             '&.sk-form-select': {
@@ -62,4 +67,3 @@ declare function _exports(): {
         };
     };
 };
-export = _exports;

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

@@ -1,4 +1,4 @@
-declare function _exports(): {
+export declare const CookieConsent: () => {
     '.sk-cookie-consent': {
         '@apply min-w-full fixed flex justify-center z-10 bottom-0 left-0 right-0': {};
         '@apply bg-background-content': {};
@@ -33,4 +33,3 @@ declare function _exports(): {
         };
     };
 };
-export = _exports;

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

@@ -1,6 +1,5 @@
-declare function _exports(): {
+export declare const Dialog: () => {
     '.sk-dialog': {
         '@apply w-fit max-w-prose md:min-w-[40rem]': {};
     };
 };
-export = _exports;

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

@@ -1,4 +1,4 @@
-declare function _exports(): {
+export declare const Divider: () => {
     '.sk-divider': {
         '@apply border-t-0 border-divider': {};
         '&-vertical': {
@@ -48,4 +48,3 @@ declare function _exports(): {
         };
     };
 };
-export = _exports;

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

@@ -1,8 +1,17 @@
-declare function _exports(colors: any): {
+export declare const Dot: (colors: string[]) => {
     '.dot': {
         '@apply relative inline-flex rounded-full': {};
-        '&-solid': any;
-        '&-outline': any;
+        '&-solid': {
+            '&.dot-bordered': {
+                '@apply border-2 border-white': {};
+                '@apply dark:border-neutral-800': {};
+            };
+            '@apply bg-neutral-500': {};
+        };
+        '&-outline': {
+            '@apply bg-white border-2 border-neutral-500': {};
+            '@apply dark:bg-neutral-800': {};
+        };
         '&-3xs': {
             '@apply w-1.5 h-1.5': {};
         };
@@ -32,4 +41,3 @@ declare function _exports(colors: any): {
         };
     };
 };
-export = _exports;

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

@@ -1,4 +1,4 @@
-declare function _exports(): {
+export declare const Filter: () => {
     '.sk-filter': {
         '@apply w-full': {};
         '&-label': {
@@ -12,4 +12,3 @@ declare function _exports(): {
         };
     };
 };
-export = _exports;

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

@@ -1,4 +1,4 @@
-declare function _exports(): {
+export declare const Footer: () => {
     '.sk-footer': {
         '@apply bg-background-content': {};
         '@apply flex justify-center': {};
@@ -25,4 +25,3 @@ declare function _exports(): {
         };
     };
 };
-export = _exports;

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

@@ -1,4 +1,4 @@
-declare function _exports(): {
+export declare const Forms: () => {
     '.sk-form-control': {
         '@apply flex flex-col gap-8 w-fit': {};
     };
@@ -22,4 +22,3 @@ declare function _exports(): {
         '@apply text-small': {};
     };
 };
-export = _exports;

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

@@ -1,4 +1,4 @@
-declare function _exports(): {
+export declare const Header: () => {
     '.sk-header': {
         '@apply bg-background-content p-12 md:px-32 md:pt-24 md:pb-20 xl:pt-32 xl:pb-20 xl:px-80 xl:h-auto xl:min-h-0': {};
         '@apply shadow-100': {};
@@ -26,4 +26,3 @@ declare function _exports(): {
         };
     };
 };
-export = _exports;

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

@@ -1,4 +1,38 @@
-declare function _exports(colors: any): {
-    '.sk-icon': any;
+export declare const Icon: (colors: string[]) => {
+    '.sk-icon': {
+        "&[data-color='primary']": {
+            '&[data-inverted="true"]': {
+                '@apply text-light-primary fill-light-primary': {};
+            };
+        };
+        '@apply inline-flex items-center justify-center': {};
+        '@apply w-24 h-24': {};
+        svg: {
+            '@apply w-full h-full': {};
+        };
+        '&.sk-icon-padded': {
+            "&[data-color='primary'], &[data-color='tertiary']": {
+                '@apply bg-primary-surface text-light-primary fill-light-primary': {};
+                '&[data-inverted="true"]': {
+                    '@apply text-inverted-light-primary fill-inverted-light-primary': {};
+                    '@apply bg-tertiary-surface': {};
+                };
+            };
+            "&[data-variant='ghost']": {
+                '@apply bg-transparent text-current fill-current': {};
+                '&[data-inverted="true"]': {
+                    '@apply bg-transparent text-current fill-current': {};
+                };
+            };
+            '@apply rounded-utility': {};
+            '@apply text-light-primary fill-light-primary': {};
+            '@apply p-[0.4rem]': {};
+        };
+        '&[data-size="fit"]': {
+            '@apply w-fit h-fit': {};
+        };
+        '&[data-rounded="true"]': {
+            '@apply rounded-circular': {};
+        };
+    };
 };
-export = _exports;