gd-design-library 1.0.2 → 1.2.0

package/tokens/index.d.ts

@@ -49,6 +49,7 @@ export * from './header';
 export * from './draganddropfiles';
 export * from './slider';
 export * from './scroll';
+export * from './zIndex';
 export * from './utils';
 export * from './types/index.types';
 export declare const defaultTokens: {
@@ -113,43 +114,41 @@ export declare const defaultTokens: {
         primary: {
             color: (theme: Record<symbol, unknown>) => string;
             background: (theme: Record<symbol, unknown>) => string;
-            '&:hover': {
+            '&:hover, &.hover': {
                 background: (theme: Record<symbol, unknown>) => string;
             };
-            '&:active': {
+            '&:active, &.active': {
                 background: (theme: Record<symbol, unknown>) => string;
             };
-            '&:disabled': {
+            '&:disabled, &.disabled': {
                 background: (theme: Record<symbol, unknown>) => string;
             };
         };
         secondary: {
             color: (theme: Record<symbol, unknown>) => string;
             background: (theme: Record<symbol, unknown>) => string;
-            '&:hover': {
+            '&:hover, &.hover': {
                 background: (theme: Record<symbol, unknown>) => string;
                 color: (theme: Record<symbol, unknown>) => string;
             };
-            '&:active': {
+            '&:active, &.active': {
                 color: (theme: Record<symbol, unknown>) => string;
                 background: (theme: Record<symbol, unknown>) => string;
             };
-            '&:disabled': {
+            '&:disabled, &.disabled': {
                 background: (theme: Record<symbol, unknown>) => string;
             };
         };
         tertiary: {
             background: string;
             color: (theme: Record<symbol, unknown>) => string;
-            '&:hover': {
-                color: (theme: Record<symbol, unknown>) => string;
+            '&:hover, &.hover': {
                 background: (theme: Record<symbol, unknown>) => string;
             };
-            '&:active': {
-                color: (theme: Record<symbol, unknown>) => string;
+            '&:active, &.active': {
                 background: (theme: Record<symbol, unknown>) => string;
             };
-            '&:disabled': {
+            '&:disabled, &.disabled': {
                 background: string;
             };
         };
@@ -157,14 +156,14 @@ export declare const defaultTokens: {
             background: string;
             color: (theme: Record<symbol, unknown>) => string;
             border: (theme: Record<symbol, unknown>) => string;
-            '&:hover': {
+            '&:hover, &.hover': {
                 background: (theme: Record<symbol, unknown>) => string;
             };
-            '&:active': {
+            '&:active, &.active': {
                 color: (theme: Record<symbol, unknown>) => string;
                 background: (theme: Record<symbol, unknown>) => string;
             };
-            '&:disabled': {
+            '&:disabled, &.disabled': {
                 background: string;
                 borderColor: (theme: Record<symbol, unknown>) => string;
             };
@@ -172,20 +171,20 @@ export declare const defaultTokens: {
         text: {
             background: string;
             color: (theme: Record<symbol, unknown>) => string;
-            '&:hover': {
+            '&:hover, &.hover': {
                 color: (theme: Record<symbol, unknown>) => string;
             };
-            '&:active': {
+            '&:active, &.active': {
                 color: (theme: Record<symbol, unknown>) => string;
             };
         };
         inherit: {
             fontWeight: string;
-            '&:hover': {};
-            '&:not(:disabled):active': {
+            '&:not(:disabled):active, &.active': {
                 transform: string;
             };
-            '&:disabled': {};
+            '&:hover, &.hover': {};
+            '&:disabled, &.disabled': {};
         };
     };
     breakpoints: {
@@ -585,7 +584,7 @@ export declare const defaultTokens: {
             width: string;
             height: string;
             position: string;
-            zIndex: number;
+            zIndex: (theme: Record<symbol, unknown>) => string;
         };
     };
     carousel: {
@@ -596,7 +595,7 @@ export declare const defaultTokens: {
                 overflow: string;
                 width: string;
                 display: string;
-                zIndex: number;
+                zIndex: (theme: Record<symbol, unknown>) => string;
                 gap: string;
             };
             variant: {
@@ -673,7 +672,7 @@ export declare const defaultTokens: {
             transform: string;
             width: string;
             padding: string;
-            zIndex: number;
+            zIndex: (theme: Record<symbol, unknown>) => string;
         };
         carouselDots: {
             display: string;
@@ -1031,7 +1030,7 @@ export declare const defaultTokens: {
                 };
                 sm: (theme: Record<symbol, unknown>) => {
                     color: string;
-                    flexDirection: import('../types').FlexDirection;
+                    flexDirection: string;
                     fontSize: string;
                     fontWeight: string;
                     lineHeight: string;
@@ -1046,7 +1045,7 @@ export declare const defaultTokens: {
                 };
                 sm: (theme: Record<symbol, unknown>) => {
                     color: string;
-                    flexDirection: import('../types').FlexDirection;
+                    flexDirection: string;
                     fontSize: string;
                     fontWeight: string;
                     lineHeight: string;
@@ -1563,7 +1562,7 @@ export declare const defaultTokens: {
         content: {
             default: {
                 position: string;
-                zIndex: number;
+                zIndex: (theme: Record<symbol, unknown>) => string;
                 flex: number;
                 flexBasis: string;
                 height: string;
@@ -1574,7 +1573,7 @@ export declare const defaultTokens: {
                 position: string;
                 top: string;
                 left: string;
-                zIndex: number;
+                zIndex: (theme: Record<symbol, unknown>) => string;
                 minWidth: string;
                 minHeight: string;
                 maxWidth: string;
@@ -1608,6 +1607,16 @@ export declare const defaultTokens: {
                 right: string;
                 height: string;
             };
+            autoHide: {
+                opacity: number;
+                transition: string;
+            };
+            autoHideScrolling: {
+                opacity: number;
+                '&:hover': {
+                    opacity: number;
+                };
+            };
         };
         thumb: {
             default: {
@@ -1634,6 +1643,13 @@ export declare const defaultTokens: {
                 minWidth: (theme: Record<symbol, unknown>) => string;
                 transition: (theme: Record<symbol, unknown>) => string;
             };
+            autoHide: {
+                opacity: number;
+                transition: string;
+            };
+            autoHideScrolling: {
+                opacity: number;
+            };
         };
     };
     radius: {
@@ -1677,7 +1693,7 @@ export declare const defaultTokens: {
                 '&:not([type="radio"], [type="checkbox"], [type="range"])': {
                     height: string;
                     width: string;
-                    zIndex: number;
+                    zIndex: (theme: Record<symbol, unknown>) => string;
                 };
                 '&[type="number"]': {
                     appearance: string;
@@ -1853,7 +1869,7 @@ export declare const defaultTokens: {
                 display: string;
                 alignItems: string;
                 position: string;
-                zIndex: number;
+                zIndex: (theme: Record<symbol, unknown>) => string;
             };
         };
     };
@@ -2150,7 +2166,7 @@ export declare const defaultTokens: {
             width: string;
             height: string;
             position: string;
-            zIndex: number;
+            zIndex: (theme: Record<symbol, unknown>) => string;
         };
         fullPage: {
             display: string;
@@ -2159,13 +2175,16 @@ export declare const defaultTokens: {
             left: number;
             width: string;
             height: string;
-            zIndex: number;
+            zIndex: (theme: Record<symbol, unknown>) => string;
         };
     };
     loader: {
         default: {
             display: string;
         };
+        attrs: {
+            rounded: string;
+        };
         inline: {};
         section: {};
         fullPage: {};
@@ -2435,11 +2454,29 @@ export declare const defaultTokens: {
         };
     };
     snackbar: {
+        title: {
+            attrs: {
+                as: string;
+                align: string;
+                variant: string;
+                styleVariant: string;
+                color: string;
+            };
+        };
+        description: {
+            attrs: {
+                as: string;
+                align: string;
+                variant: string;
+                styleVariant: string;
+                color: string;
+            };
+        };
         container: {
             default: {
                 position: string;
                 display: string;
-                flexDirection: import('../types').FlexDirection;
+                flexDirection: string;
                 gap: (theme: Record<symbol, unknown>) => string;
                 padding: (theme: Record<symbol, unknown>) => string;
                 boxSizing: string;
@@ -2475,7 +2512,7 @@ export declare const defaultTokens: {
                 width: string;
                 fontSize: (theme: Record<symbol, unknown>) => string;
                 display: string;
-                flexDirection: import('../types').FlexDirection;
+                flexDirection: string;
                 gap: (theme: Record<symbol, unknown>) => string;
                 color: (theme: Record<symbol, unknown>) => string;
                 padding: (theme: Record<symbol, unknown>) => string;
@@ -2490,45 +2527,45 @@ export declare const defaultTokens: {
                 };
             };
             animation: {
-                duration: string;
-                timing: string;
+                closeEffect: string;
+                openEffect: string;
             };
         };
         positions: {
-            "top-left": {
+            'top-left': {
                 top: number;
                 left: number;
                 alignItems: string;
             };
-            "top-center": {
+            'top-center': {
                 top: (theme: Record<symbol, unknown>) => string;
                 left: string;
                 transform: string;
                 alignItems: string;
             };
-            "top-right": {
+            'top-right': {
                 top: (theme: Record<symbol, unknown>) => string;
                 right: (theme: Record<symbol, unknown>) => string;
                 alignItems: string;
             };
-            "bottom-left": {
+            'bottom-left': {
                 bottom: (theme: Record<symbol, unknown>) => string;
                 left: (theme: Record<symbol, unknown>) => string;
                 alignItems: string;
-                flexDirection: import('../types').FlexDirection;
+                flexDirection: string;
             };
-            "bottom-center": {
+            'bottom-center': {
                 bottom: (theme: Record<symbol, unknown>) => string;
                 left: string;
                 transform: string;
                 alignItems: string;
-                flexDirection: import('../types').FlexDirection;
+                flexDirection: string;
             };
-            "bottom-right": {
+            'bottom-right': {
                 bottom: (theme: Record<symbol, unknown>) => string;
                 right: (theme: Record<symbol, unknown>) => string;
                 alignItems: string;
-                flexDirection: import('../types').FlexDirection;
+                flexDirection: string;
             };
         };
         closeButton: {
@@ -2550,25 +2587,25 @@ export declare const defaultTokens: {
             };
             success: {
                 name: string;
-                fill: (theme: Record<symbol, unknown>) => string;
+                fill: string;
                 width: number;
                 height: number;
             };
             error: {
                 name: string;
-                fill: (theme: Record<symbol, unknown>) => string;
+                fill: string;
                 width: number;
                 height: number;
             };
             warning: {
                 name: string;
-                fill: (theme: Record<symbol, unknown>) => string;
+                fill: string;
                 width: number;
                 height: number;
             };
             info: {
                 name: string;
-                fill: (theme: Record<symbol, unknown>) => string;
+                fill: string;
                 width: number;
                 height: number;
             };
@@ -2580,7 +2617,7 @@ export declare const defaultTokens: {
         };
         snackbarContent: {
             display: string;
-            flexDirection: import('../types').FlexDirection;
+            flexDirection: string;
             alignItems: string;
             gap: string | number;
             flex: number;
@@ -2705,7 +2742,7 @@ export declare const defaultTokens: {
             listStyleType: string;
             margin: (theme: Record<symbol, unknown>) => string;
             padding: (theme: Record<symbol, unknown>) => string;
-            zIndex: number;
+            zIndex: (theme: Record<symbol, unknown>) => string;
             overflowY: string;
         };
         button: {
@@ -2753,11 +2790,13 @@ export declare const defaultTokens: {
                 };
             };
         };
-        arrowIcon: {
-            name: string;
-            fill: string;
-            width: number;
-            height: number;
+        icons: {
+            arrowIcon: {
+                name: string;
+                fill: string;
+                width: number;
+                height: number;
+            };
         };
         adornment: {
             default: {
@@ -2765,7 +2804,7 @@ export declare const defaultTokens: {
                 alignItems: string;
                 flexDirection: import('../types').FlexDirection;
                 position: string;
-                zIndex: number;
+                zIndex: (theme: Record<symbol, unknown>) => string;
             };
         };
     };
@@ -2881,7 +2920,7 @@ export declare const defaultTokens: {
                     position: string;
                     width: string;
                     bottom: number;
-                    zIndex: number;
+                    zIndex: (theme: Record<symbol, unknown>) => number;
                     borderBottom: (theme: Record<symbol, unknown>) => string;
                 };
             };
@@ -2963,7 +3002,7 @@ export declare const defaultTokens: {
             default: {
                 width: string;
                 position: string;
-                zIndex: number;
+                zIndex: (theme: Record<symbol, unknown>) => number;
                 top: string;
                 marginLeft: string;
                 marginRight: string;
@@ -3198,7 +3237,7 @@ export declare const defaultTokens: {
                 position: string;
                 top: (theme: Record<symbol, unknown>) => string;
                 left: (theme: Record<symbol, unknown>) => string;
-                zIndex: number;
+                zIndex: (theme: Record<symbol, unknown>) => string;
                 background: (theme: Record<symbol, unknown>) => string;
                 width: string;
                 height: string;
@@ -3319,7 +3358,6 @@ export declare const defaultTokens: {
             default: {
                 display: string;
                 position: string;
-                minHeight: string;
                 height: string;
                 width: string;
                 overflow: string;
@@ -3338,18 +3376,17 @@ export declare const defaultTokens: {
                 paddingBottom: string | number;
                 gap: string | number;
                 minHeight: number;
+                margin: string;
             };
             md: {
                 paddingLeft: string;
                 paddingRight: string;
             };
             mdXl: {
-                paddingLeft: string;
-                paddingRight: string;
+                maxWidth: string;
             };
             xl: {
-                paddingLeft: string;
-                paddingRight: string;
+                maxWidth: string;
             };
         };
         mainHeader: {
@@ -3368,52 +3405,76 @@ export declare const defaultTokens: {
             flexDirection: string;
         };
         sidebar: {
-            minWidth: string;
-            maxWidth: string;
-            overflow: string;
-            borderRight: string;
-            backgroundColor: (theme: Record<symbol, unknown>) => string;
-            borderColor: (theme: Record<symbol, unknown>) => string;
-            flex: string;
-            display: string;
-            flexDirection: string;
-            minHeight: string;
+            default: {
+                overflow: string;
+                borderRight: string;
+                position: string;
+                transition: (theme: Record<symbol, unknown>) => string;
+                backgroundColor: (theme: Record<symbol, unknown>) => string;
+                borderColor: (theme: Record<symbol, unknown>) => string;
+                display: string;
+                flexDirection: string;
+                minHeight: string;
+                transform: string;
+                pointerEvents: string;
+            };
+            open: {
+                width: string;
+            };
+            close: {
+                width: number;
+                transform: string;
+                pointerEvents: string;
+            };
+        };
+        sidebarMinified: {
+            default: {
+                overflow: string;
+                borderRight: string;
+                position: string;
+                transition: (theme: Record<symbol, unknown>) => string;
+                backgroundColor: (theme: Record<symbol, unknown>) => string;
+                borderColor: (theme: Record<symbol, unknown>) => string;
+                display: string;
+                flexDirection: string;
+                minHeight: string;
+                transform: string;
+                pointerEvents: string;
+                opacity: number;
+            };
+            open: {};
+            close: {
+                opacity: number;
+                width: number;
+                transform: string;
+                pointerEvents: string;
+            };
         };
         sidebarWrapper: {
-            default: {};
-            auto: {
-                default: {};
-                md: (theme: Record<symbol, unknown>) => {
-                    position: string;
-                    display: string;
-                    flexDirection: string;
-                    left: number;
-                    top: number;
-                    right: number;
-                    bottom: number;
-                    backgroundColor: string;
-                    zIndex: number;
-                };
+            default: {
+                transition: (theme: Record<symbol, unknown>) => string;
             };
-            desktop: {
-                default: {};
-                md: {};
+            open: {
+                opacity: number;
+                pointerEvents: string;
             };
-            drawer: {
-                default: {
-                    position: string;
-                    display: string;
-                    flexDirection: string;
-                    left: number;
-                    top: number;
-                    right: number;
-                    bottom: number;
-                    backgroundColor: (theme: Record<symbol, unknown>) => string;
-                    zIndex: number;
-                };
-                md: {};
+            close: {
+                opacity: number;
+                pointerEvents: string;
+            };
+            md: (theme: Record<symbol, unknown>) => {
+                position: string;
+                display: string;
+                flexDirection: string;
+                left: number;
+                top: number;
+                right: number;
+                bottom: number;
+                backgroundColor: string;
+                zIndex: string;
             };
         };
+        sidebarContentWrapper: {};
         sidebarHeader: {
             minHeight: string;
             height: string;
@@ -3435,7 +3496,7 @@ export declare const defaultTokens: {
                 };
             };
             attrs: {
-                variant: import('../types').ButtonVariant;
+                variant: string;
             };
             open: {
                 transform: string;
@@ -3514,6 +3575,7 @@ export declare const defaultTokens: {
             default: {
                 backgroundColor: (theme: Record<symbol, unknown>) => string;
                 position: string;
+                overflow: string;
                 boxShadow: (theme: Record<symbol, unknown>) => string;
             };
         };
@@ -3550,4 +3612,13 @@ export declare const defaultTokens: {
         '400': string;
         '500': string;
     };
+    zIndex: {
+        zero: number;
+        negative: number;
+        first: number;
+        low: number;
+        medium: number;
+        high: number;
+        top: number;
+    };
 };