@sk-web-gui/core 1.0.3 → 1.1.0

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

@@ -1,4 +1,4 @@
-declare function _exports(): {
+export declare const Input: () => {
     '.sk-form-input': {
         '&-addin': {
             '@apply bg-transparent': {};
@@ -165,14 +165,14 @@ declare function _exports(): {
             '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
                 '-webkit-appearance': string;
                 display: string;
-                margin: number;
+                margin: string;
             };
             '-moz-appearance': string;
         };
         '&&-lg': {
             '@apply rounded-button-lg': {};
             '@apply px-20': {};
-            '@apply py-12': {};
+            '@apply py-[1.1rem]': {};
             '@apply gap-8': {};
             '@apply text-input-large': {};
             '@apply h-[4.8rem]': {};
@@ -180,7 +180,7 @@ declare function _exports(): {
         '&&-md': {
             '@apply rounded-button-md': {};
             '@apply px-16': {};
-            '@apply py-8': {};
+            '@apply py-[0.7rem]': {};
             '@apply gap-8': {};
             '@apply text-input-medium': {};
             '@apply h-[4rem]': {};
@@ -188,11 +188,14 @@ declare function _exports(): {
         '&&-sm': {
             '@apply rounded-button-sm': {};
             '@apply px-12': {};
-            '@apply py-6': {};
+            '@apply py-[0.5rem]': {};
             '@apply gap-6': {};
             '@apply text-input-small': {};
             '@apply h-[3.2rem]': {};
         };
+        '&&-textarea': {
+            '@apply h-auto': {};
+        };
         '@apply focus:ring': {};
         '@apply focus:ring-ring': {};
         '@apply focus:ring-offset': {};
@@ -204,4 +207,3 @@ declare function _exports(): {
         };
     };
 };
-export = _exports;

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

@@ -1,8 +1,7 @@
-declare function _exports(): {
+export declare const Kbd: () => {
     '.kbd': {
         '@apply inline-flex justify-center items-center capitalize text-xs p-1 rounded h-5 whitespace-nowrap font-sans': {};
         minWidth: string;
         '@apply bg-blackAlpha-100 text-body': {};
     };
 };
-export = _exports;

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

@@ -1,4 +1,19 @@
-declare function _exports(colors: any): {
-    '.sk-label': any;
+export declare const Label: (colors: string[]) => {
+    '.sk-label': {
+        '@apply inline-flex flex-row': {};
+        '@apply justify-center items-center': {};
+        '@apply gap-6 px-10 py-4': {};
+        '@apply h-24 max-h-24': {};
+        '@apply text-label-small': {};
+        '@apply rounded-utility-sm md:rounded-utility-md xl:rounded-utility-lg': {};
+        '@apply bg-primary-surface': {};
+        '@apply text-light-primary': {};
+        '&[data-rounded="true"]': {
+            '@apply rounded-full': {};
+        };
+        '&[data-inverted="true"]': {
+            '@apply bg-inverted-primary-surface': {};
+            '@apply text-inverted-light-primary': {};
+        };
+    };
 };
-export = _exports;

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

@@ -1,4 +1,4 @@
-declare function _exports(): {
+export declare const Link: () => {
     '.sk-link': {
         '@apply underline outline-none hover:underline': {};
         '@apply rounded-utility': {};
@@ -41,4 +41,3 @@ declare function _exports(): {
         };
     };
 };
-export = _exports;

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

@@ -1,4 +1,4 @@
-declare function _exports(): {
+export declare const List: () => {
     '.sk-list': {
         li: {
             '&:before': {
@@ -50,4 +50,3 @@ declare function _exports(): {
         };
     };
 };
-export = _exports;

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

@@ -1,4 +1,4 @@
-declare function _exports(): {
+export declare const Logo: () => {
     '.sk-logo': {
         '@apply flex w-auto h-auto': {};
         '@apply items-center': {};
@@ -46,4 +46,3 @@ declare function _exports(): {
         };
     };
 };
-export = _exports;

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

@@ -1,4 +1,4 @@
-declare function _exports(): {
+export declare const MenuVertical: () => {
     '.sk-menu-vertical-sidebar': {
         '@apply rounded-button': {};
         '> ul > li > .sk-menu-vertical-item-submenu': {
@@ -57,7 +57,7 @@ declare function _exports(): {
                         display: string;
                         width: string;
                         top: string;
-                        bottom: number;
+                        bottom: string;
                         left: string;
                         backgroundImage: string;
                         backgroundRepeat: string;
@@ -68,7 +68,7 @@ declare function _exports(): {
                         display: string;
                         width: string;
                         top: string;
-                        bottom: number;
+                        bottom: string;
                         left: string;
                         backgroundImage: string;
                         backgroundRepeat: string;
@@ -113,9 +113,6 @@ declare function _exports(): {
                         };
                     };
                 };
-                '.sk-menu-vertical-item-submenu-button:not([aria-disabled="true"])': {
-                    '@apply text-dark-secondary': {};
-                };
             };
         };
     };
@@ -216,4 +213,3 @@ declare function _exports(): {
         };
     };
 };
-export = _exports;

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

@@ -1,4 +1,4 @@
-declare function _exports(colors: any): {
+export declare const MenuBar: (colors: string[]) => {
     '.sk-menubar': {
         '@apply flex flex-row': {};
         '@apply p-8 gap-16': {};
@@ -6,7 +6,30 @@ declare function _exports(colors: any): {
         '&[data-background="true"]': {
             '@apply bg-background-color-mixin-1': {};
         };
-        '&-item': any;
+        '&-item': {
+            '@apply inline-block': {};
+            '@apply relative': {};
+            '@apply h-40': {};
+            'a, button': {
+                color: string;
+            };
+            '> *:first-child': {
+                '@apply rounded-button-sm md:rounded-button-md xl:rounded-button-lg': {};
+                '@apply cursor-pointer': {};
+                '@apply bg-transparent text-dark-primary': {};
+                '@apply hover:bg-tertiary-surface': {};
+                '@apply font-bold': {};
+                '@apply gap-2 px-14 py-8': {};
+                '@apply h-full min-h-full': {};
+                '@apply text-base leading-base': {};
+                '@apply inline-flex shrink-0 flex-nowrap': {};
+                '@apply border-0': {};
+                '@apply focus-visible:bg-background-content focus-visible:ring': {};
+                '&[aria-current="page"]:not(:hover),&[aria-selected="true"]:not(:hover), ': {
+                    '@apply bg-primary-surface text-light-primary': {};
+                    '@apply focus-visible:ring': {};
+                };
+            };
+        };
     };
 };
-export = _exports;

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

@@ -1,4 +1,4 @@
-declare function _exports(): {
+export declare const Modal: () => {
     '.sk-modal': {
         '&-wrapper': {
             '@apply fixed inset-0 z-20 overflow-y-auto': {};
@@ -39,4 +39,3 @@ declare function _exports(): {
         };
     };
 };
-export = _exports;

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

@@ -1,4 +1,4 @@
-declare function _exports(): {
+export declare const Pagination: () => {
     '.sk-pagination': {
         '@apply select-none': {};
         '@apply text-base': {};
@@ -98,4 +98,3 @@ declare function _exports(): {
         };
     };
 };
-export = _exports;

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

@@ -1,4 +1,4 @@
-declare function _exports(): {
+export declare const PopupMenu: () => {
     '.sk-popup-menu-items': {
         '&[data-position="left"]': {
             '@apply mt-0 mr-8 right-[100%]': {};
@@ -103,4 +103,3 @@ declare function _exports(): {
         };
     };
 };
-export = _exports;

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

@@ -1,4 +1,13 @@
-declare function _exports(colors: any): {
-    '.sk-progress-bar': any;
+export declare const ProgressBar: (colors: string[]) => {
+    '.sk-progress-bar': {
+        "&[data-color='tertiary']": {
+            '.sk-progress-bar-fill': {
+                "@apply bg-primary-surface": {};
+            };
+        };
+        '@apply flex h-[.4rem] rounded-circular bg-background-color-mixin-2': {};
+        '&-fill': {
+            '@apply rounded-circular': {};
+        };
+    };
 };
-export = _exports;

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

@@ -1,4 +1,4 @@
-declare function _exports(): {
+export declare const ProgressStepper: () => {
     '.sk-progress-stepper': {
         '@apply flex justify-between': {};
         hr: {
@@ -48,4 +48,3 @@ declare function _exports(): {
         };
     };
 };
-export = _exports;

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

@@ -1,4 +1,4 @@
-declare function _exports(): {
+export declare const Radio: () => {
     '.sk-form-radio': {
         backgroundImage: string;
         '@apply relative': {};
@@ -123,4 +123,3 @@ declare function _exports(): {
         };
     };
 };
-export = _exports;

package/dist/types/components/search-field.d.ts

@@ -1,4 +1,4 @@
-declare function _exports(): {
+export declare const SearchField: () => {
     '.sk-search-field': {
         '&-md': {
             '.sk-search-field-icon': {
@@ -18,4 +18,3 @@ declare function _exports(): {
         };
     };
 };
-export = _exports;

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

@@ -1,4 +1,4 @@
-declare function _exports(): {
+export declare const Select: () => {
     '.sk-form-select': {
         '*': {
             '@apply bg-background-content': {};
@@ -139,4 +139,3 @@ declare function _exports(): {
         };
     };
 };
-export = _exports;

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

@@ -1,4 +1,4 @@
-declare function _exports(): {
+export declare const Snackbar: () => {
     '.sk-snackbar': {
         '@apply flex items-center gap-12 py-8 pl-16 pr-8 rounded-groups break-words max-w-[40rem]': {};
         '@apply text-label-small text-vattjom-text-secondary': {};
@@ -28,4 +28,3 @@ declare function _exports(): {
         };
     };
 };
-export = _exports;

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

@@ -1,4 +1,10 @@
-declare function _exports(colors: any): {
-    '.sk-spinner': any;
+export declare const Spinner: (colors: string[]) => {
+    '.sk-spinner': {
+        '@apply box-border': {};
+        '@apply flex justify-center items-center object-center': {};
+        '@apply overflow-hidden': {};
+        path: {
+            '@apply stroke-dark-secondary': {};
+        };
+    };
 };
-export = _exports;

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

@@ -1,4 +1,4 @@
-declare function _exports(): {
+export declare const Switch: () => {
     '.sk-form-switch-label': {
         '@apply inline-flex align-middle items-center': {};
         '@apply flex-row gap-12': {};
@@ -62,4 +62,3 @@ declare function _exports(): {
         };
     };
 };
-export = _exports;

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

@@ -1,4 +1,4 @@
-declare function _exports(): {
+export declare const Table: () => {
     '.table': {
         '@apply min-w-full border-collapse border-gray-stroke divide-gray-lighter table-auto': {};
         '&-item': {
@@ -9,4 +9,3 @@ declare function _exports(): {
         };
     };
 };
-export = _exports;

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

@@ -1,64 +1,14 @@
-declare function _exports(): {
+export declare const Tabs: () => {
     '.sk-tabs': {
-        '&-stretch': {
-            '@apply w-full': {};
+        '@apply w-full': {};
+        '&-panels': {
+            '@apply p-8': {};
+            '@apply mt-8': {};
         };
-        '&-list': {
-            '@apply  block relative w-full h-[3rem]': {};
-            '&-stretch': {
-                '@apply flex justify-between': {};
-            };
-            '&-right': {
-                '@apply text-right': {};
-            };
-            '&-center': {
-                '@apply text-center': {};
-            };
-            '&-line::after': {
-                content: string;
-                '@apply bg-gray-middle w-full h-[2px] absolute left-0 right-0 bottom-0': {};
-            };
-        };
-        '&-tab': {
-            '@apply relative mr-[3.2rem] text-base font-bold  p-0 relative h-[2.8rem] inline-block': {};
-            '@apply text-gray': {};
-            '@apply cursor-pointer': {};
-            '&.disabled': {
-                '@apply cursor-not-allowed': {};
-                '@apply text-gray-stroke': {};
-            };
-            '&.active': {
-                '@apply text-body': {};
-                '&::after': {
-                    content: string;
-                    '@apply bg-primary w-full h-[2px] absolute left-0 right-0 top-[100%] z-[1]': {};
-                };
-            };
-            '&-stretch': {
-                '@apply mr-0': {};
-            };
-            '&-header': {
-                '@apply text-large font-normal': {};
-            };
-            '&-right': {
-                '@apply mr-0 ml-lg': {};
-            };
-            '&:last-of-type': {
-                '@apply mr-0': {};
-            };
-            '&-icon': {
-                '&-with-label': {
-                    '@apply mr-sm': {};
-                };
-            };
-        };
-        '&-panel': {
-            '@apply mt-lg': {};
-            '&:not(.active)': {
-                display: string;
-                hidden: boolean;
+        '&-content': {
+            '&:not([data-selected="true"])': {
+                '@apply hidden': {};
             };
         };
     };
 };
-export = _exports;

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

@@ -1,4 +1,4 @@
-declare function _exports(): {
+export declare const Tooltip: () => {
     '.sk-tooltip': {
         '@apply inline-flex justify-center items-center': {};
         '@apply w-fit h-fit': {};
@@ -51,4 +51,3 @@ declare function _exports(): {
         };
     };
 };
-export = _exports;

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

@@ -1,4 +1,4 @@
-declare function _exports(): {
+export declare const UserMenu: () => {
     '.sk-usermenu': {
         '@apply relative': {};
         '&-button': {
@@ -11,4 +11,3 @@ declare function _exports(): {
         };
     };
 };
-export = _exports;

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

@@ -1,4 +1,4 @@
-declare function _exports(): {
+export declare const ZebraTable: () => {
     '.sk-zebratable-wrapper': {
         '@apply rounded-groups': {};
         '@apply border-1': {};
@@ -132,4 +132,3 @@ declare function _exports(): {
         };
     };
 };
-export = _exports;

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
-declare const preset: any;
-declare const plugin: any;
+import preset from './preset';
+import plugin from './plugin';
 export { preset, plugin };
 export default plugin;

package/dist/types/plugin.d.ts

@@ -1,8 +1,12 @@
-declare const _exports: {
-    (options: any): {
+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 = _exports;
+export default plugin;

package/dist/types/preset.d.ts

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