gd-design-library 0.0.2 → 0.0.3

package/tokens/header.d.ts

@@ -0,0 +1,108 @@
+export declare const BORDER_COLOR = "#e0e0e0";
+export declare const header: {
+    container: {
+        fontFamily: string;
+        alignItems: string;
+        backgroundColor: string;
+        maxWidth: string;
+    };
+    topBannerRow: {
+        width: string;
+        backgroundColor: string;
+        color: string;
+    };
+    searchColumn: {
+        base: {
+            flexDirection: string;
+            justifyContent: string;
+            '& a': {
+                margin: string;
+            };
+        };
+    };
+    navigationRow: {
+        base: {
+            width: string;
+            padding: string;
+            alignItems: string;
+        };
+    };
+    actionsColumn: {
+        base: {
+            flexDirection: string;
+            '& button': {
+                margin: string;
+            };
+        };
+    };
+    menuRow: {
+        base: {
+            width: string;
+            justifyContent: string;
+        };
+        column: {
+            flexDirection: string;
+            '& a': {
+                margin: string;
+            };
+        };
+    };
+    children: {
+        base: {
+            margin: string;
+        };
+    };
+    mobile: {
+        openedDropdownWrapper: {
+            position: string;
+            top: string;
+            left: string;
+            zIndex: number;
+            background: string;
+            width: string;
+            height: string;
+            padding: string;
+            overflowY: string;
+        };
+        closeMenuIconWrapper: {
+            width: string;
+            height: string;
+            display: string;
+            justifyContent: string;
+            alignItems: string;
+        };
+        openMenuIconWrapper: {
+            width: string;
+            height: string;
+            display: string;
+            justifyContent: string;
+            alignItems: string;
+        };
+        menuWrapper: {
+            margin: string;
+            borderTop: string;
+        };
+        menuItemWrapper: {
+            padding: string;
+            borderBottom: string;
+            cursor: string;
+        };
+    };
+    icons: {
+        close: {
+            name: string;
+            width: number;
+            height: number;
+        };
+        right: {
+            name: string;
+            width: number;
+            height: number;
+        };
+        menu: {
+            name: string;
+            width: number;
+            height: number;
+        };
+    };
+};

package/tokens/image.d.ts

@@ -0,0 +1,32 @@
+import { TextAlign } from '../components/core/Typography/Typography.types';
+import { FlexDirection } from '../components/layout';
+export declare const image: {
+    default: {
+        width: string;
+        height: string;
+        transition: string;
+    };
+    wrapper: {
+        position: "relative";
+        display: string;
+        flexDirection: FlexDirection;
+        alignItems: string;
+    };
+    placeholder: {
+        position: "absolute";
+        top: number;
+        left: number;
+        width: string;
+        height: string;
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+        background: string;
+    };
+    caption: {
+        marginTop: string;
+        fontSize: string;
+        color: string;
+        textAlign: TextAlign.Center;
+    };
+};

package/tokens/index.d.ts

@@ -20,11 +20,15 @@ export * from './skeleton';
 export * from './defaultTheme';
 export * from './snackbar';
 export * from './list';
+export * from './select';
+export * from './search';
 export * from './breadcrumbs';
 export * from './icon';
 export * from './reset';
 export * from './tabs';
 export * from './stepper';
+export * from './rating';
+export * from './header';
 export * from './utils';
 export * from './types/index.types';
 export declare const defaultTokens: {
@@ -235,8 +239,8 @@ export declare const defaultTokens: {
         xxl: string;
     };
     borders: {
-        none: string;
-        generic: ({ width, color, type }: {
+        none: number;
+        generic: ({ width, color, type, }: {
             width: string;
             color?: string;
             type?: string;
@@ -254,14 +258,15 @@ export declare const defaultTokens: {
     };
     button: {
         default: {
-            border: string;
-            outline: string;
+            border: number;
+            outline: number;
             padding: string;
             display: string;
             alignItems: string;
             gap: string;
             transition: string;
             cursor: string;
+            borderColor: string;
             '&:focus-visible': {
                 position: string;
                 '&::after': {
@@ -282,7 +287,9 @@ export declare const defaultTokens: {
         icon: {
             padding: string;
         };
-        content: {};
+        content: {
+            width: string;
+        };
         startIcon: {};
         endIcon: {};
         contained: {
@@ -365,7 +372,7 @@ export declare const defaultTokens: {
         base: {
             display: string;
             boxSizing: string;
-            borderRadius: string;
+            borderRadius: number;
             border: string;
             lineHeight: string;
             paddingLeft: string;
@@ -394,6 +401,11 @@ export declare const defaultTokens: {
                 border: string;
                 backgroundImage: string;
             };
+            '&[type="checkbox"]:not(:checked)': {
+                '&[readonly], &:disabled': {
+                    opacity: number;
+                };
+            };
             '&[type="checkbox"]:checked': {
                 backgroundRepeat: string;
                 backgroundPosition: string;
@@ -411,6 +423,9 @@ export declare const defaultTokens: {
                 width: string;
                 border: string;
                 backgroundImage: string;
+                '&[readonly], &:disabled': {
+                    opacity: number;
+                };
             };
             '&[type="radio"]:checked': {
                 backgroundImage: string;
@@ -434,6 +449,10 @@ export declare const defaultTokens: {
             text: {
                 '&:hover': {};
                 '&:disabled': {};
+                '& input': {
+                    verticalAlign: string;
+                    marginRight: string;
+                };
                 primary: {
                     '&:hover': {};
                     '&:disabled': {};
@@ -504,6 +523,22 @@ export declare const defaultTokens: {
                 };
             };
         };
+        inverted: {
+            '&::after': {
+                content: string;
+                position: string;
+                right: string;
+                bottom: string;
+                left: string;
+                borderBottom: string;
+            };
+            '&:hover': {
+                backgroundColor: string;
+                '&::after': {
+                    borderBottomColor: string;
+                };
+            };
+        };
         inherit: {
             color: string;
         };
@@ -784,6 +819,50 @@ export declare const defaultTokens: {
         circular: {
             borderRadius: string;
         };
+        cards: {
+            search: {
+                base: {};
+                container: {
+                    padding: string;
+                    boxSizing: string;
+                    flexWrap: string;
+                    flexDirection: string;
+                };
+                header: {
+                    width: string;
+                    marginBottom: string;
+                };
+                row: {
+                    width: string;
+                    marginBottom: string;
+                    gap: string;
+                };
+                columnImage: {
+                    base: {
+                        flex: number;
+                    };
+                    image: {
+                        width: string;
+                        height: string;
+                    };
+                };
+                columnText: {
+                    base: {
+                        flex: number;
+                    };
+                    description: {
+                        width: string;
+                        height: string;
+                        marginBottom: string;
+                    };
+                    price: {
+                        width: string;
+                        height: string;
+                        marginBottom: string;
+                    };
+                };
+            };
+        };
     };
     animations: {
         spinKeyframes: {
@@ -837,11 +916,6 @@ export declare const defaultTokens: {
         spacing: {
             body: string;
         };
-        closeIcon: {
-            name: string;
-            width: number;
-            height: number;
-        };
         container: {
             position: string;
             display: string;
@@ -1018,10 +1092,29 @@ export declare const defaultTokens: {
             top: string;
             right: string;
             background: string;
-            border: string;
+            border: number;
             cursor: string;
             padding: string;
         };
+        icons: {
+            close: {
+                name: string;
+                width: number;
+                height: number;
+            };
+            success: {
+                name: string;
+            };
+            error: {
+                name: string;
+            };
+            warning: {
+                name: string;
+            };
+            info: {
+                name: string;
+            };
+        };
     };
     list: {
         wrapper: {
@@ -1098,6 +1191,106 @@ export declare const defaultTokens: {
                 };
             };
         };
+        icons: {
+            bulletDot: {
+                name: string;
+                width: number;
+                height: number;
+            };
+            bulletCheck: {
+                name: string;
+            };
+        };
+    };
+    select: {
+        base: {
+            position: string;
+            display: string;
+        };
+        dropdown: {
+            position: string;
+            textAlign: string;
+            top: string;
+            left: string;
+            width: string;
+            background: string;
+            boxShadow: string;
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: number;
+            listStyleType: string;
+            margin: string;
+            padding: string;
+            zIndex: number;
+        };
+        button: {
+            borderColor: string;
+            padding: string;
+            width: string;
+            display: string;
+            flexDirection: string;
+            justifyContent: string;
+            alignItems: string;
+        };
+        item: {
+            base: {
+                cursor: string;
+                padding: string;
+                '&:hover, &.active': {
+                    backgroundColor: string;
+                };
+            };
+        };
+        arrowIconWrapper: {
+            transform: {
+                open: string;
+                close: string;
+                transition: string;
+            };
+        };
+        arrowIcon: {
+            name: string;
+            fill: string;
+            width: number;
+            height: number;
+        };
+    };
+    search: {
+        base: {};
+        input: {
+            width: string;
+            boxSizing: "border-box";
+        };
+        dropdownHeader: {
+            row: {};
+            link: {
+                base: {};
+                typography: {};
+            };
+            icon: {};
+        };
+        renderer: {
+            row: {
+                width: string;
+                padding: string;
+            };
+            link: {
+                display: string;
+                alignItems: string;
+                '&:after': {
+                    borderBottom: string;
+                };
+                '& svg': {
+                    marginLeft: string;
+                };
+            };
+            linkIcon: {
+                fill: string;
+                name: string;
+                width: number;
+                height: number;
+            };
+        };
     };
     breadcrumbs: {
         wrapper: {
@@ -1177,6 +1370,7 @@ export declare const defaultTokens: {
                 color: string;
                 transition: string;
                 borderBottom: string;
+                flex: number;
                 '&:hover': {
                     ".Tabs__noticeCounter": {
                         backgroundColor: string;
@@ -1226,6 +1420,9 @@ export declare const defaultTokens: {
                 backgroundColor: string;
             };
         };
+        tabButton: {
+            width: string;
+        };
     };
     stepper: {
         default: {
@@ -1335,5 +1532,201 @@ export declare const defaultTokens: {
             error: {};
             success: {};
         };
+        icons: {
+            active: {
+                width?: number | undefined;
+                height?: number | undefined;
+                name: string;
+                fill: string;
+            };
+            inactive: {
+                width?: number | undefined;
+                height?: number | undefined;
+                name: string;
+                fill: string;
+            };
+            complete: {
+                width?: number | undefined;
+                height?: number | undefined;
+                name: string;
+                fill: string;
+            };
+            error: {
+                width?: number | undefined;
+                height?: number | undefined;
+                name: string;
+                fill: string;
+            };
+            errorActive: {
+                width?: number | undefined;
+                height?: number | undefined;
+                name: string;
+                fill: string;
+            };
+        };
+    };
+    rating: {
+        default: {
+            display: string;
+            gap: number;
+            position: string;
+            overflow: string;
+        };
+        progress: {
+            position: string;
+            display: string;
+            overflow: string;
+            left: number;
+            svg: {
+                flexShrink: number;
+                flexGrow: number;
+            };
+        };
+        radioInput: {
+            display: string;
+        };
+        label: {
+            default: {
+                cursor: string;
+            };
+            active: {
+                '&:hover': {
+                    transform: string;
+                    transition: string;
+                };
+            };
+            readOnly: {
+                cursor: string;
+            };
+        };
+        size: {
+            sm: {
+                width: number;
+                height: number;
+            };
+            md: {
+                width: number;
+                height: number;
+            };
+            lg: {
+                width: number;
+                height: number;
+            };
+        };
+        icons: {
+            rateActive: {
+                name: string;
+            };
+            rateInactive: {
+                name: string;
+            };
+        };
+    };
+    header: {
+        container: {
+            fontFamily: string;
+            alignItems: string;
+            backgroundColor: string;
+            maxWidth: string;
+        };
+        topBannerRow: {
+            width: string;
+            backgroundColor: string;
+            color: string;
+        };
+        searchColumn: {
+            base: {
+                flexDirection: string;
+                justifyContent: string;
+                '& a': {
+                    margin: string;
+                };
+            };
+        };
+        navigationRow: {
+            base: {
+                width: string;
+                padding: string;
+                alignItems: string;
+            };
+        };
+        actionsColumn: {
+            base: {
+                flexDirection: string;
+                '& button': {
+                    margin: string;
+                };
+            };
+        };
+        menuRow: {
+            base: {
+                width: string;
+                justifyContent: string;
+            };
+            column: {
+                flexDirection: string;
+                '& a': {
+                    margin: string;
+                };
+            };
+        };
+        children: {
+            base: {
+                margin: string;
+            };
+        };
+        mobile: {
+            openedDropdownWrapper: {
+                position: string;
+                top: string;
+                left: string;
+                zIndex: number;
+                background: string;
+                width: string;
+                height: string;
+                padding: string;
+                overflowY: string;
+            };
+            closeMenuIconWrapper: {
+                width: string;
+                height: string;
+                display: string;
+                justifyContent: string;
+                alignItems: string;
+            };
+            openMenuIconWrapper: {
+                width: string;
+                height: string;
+                display: string;
+                justifyContent: string;
+                alignItems: string;
+            };
+            menuWrapper: {
+                margin: string;
+                borderTop: string;
+            };
+            menuItemWrapper: {
+                padding: string;
+                borderBottom: string;
+                cursor: string;
+            };
+        };
+        icons: {
+            close: {
+                name: string;
+                width: number;
+                height: number;
+            };
+            right: {
+                name: string;
+                width: number;
+                height: number;
+            };
+            menu: {
+                name: string;
+                width: number;
+                height: number;
+            };
+        };
     };
 };

package/tokens/input.d.ts

@@ -2,7 +2,7 @@ export declare const input: {
     base: {
         display: string;
         boxSizing: string;
-        borderRadius: string;
+        borderRadius: number;
         border: string;
         lineHeight: string;
         paddingLeft: string;
@@ -31,6 +31,11 @@ export declare const input: {
             border: string;
             backgroundImage: string;
         };
+        '&[type="checkbox"]:not(:checked)': {
+            '&[readonly], &:disabled': {
+                opacity: number;
+            };
+        };
         '&[type="checkbox"]:checked': {
             backgroundRepeat: string;
             backgroundPosition: string;
@@ -48,6 +53,9 @@ export declare const input: {
             width: string;
             border: string;
             backgroundImage: string;
+            '&[readonly], &:disabled': {
+                opacity: number;
+            };
         };
         '&[type="radio"]:checked': {
             backgroundImage: string;

package/tokens/label.d.ts

@@ -5,6 +5,10 @@ export declare const label: {
         text: {
             '&:hover': {};
             '&:disabled': {};
+            '& input': {
+                verticalAlign: string;
+                marginRight: string;
+            };
             primary: {
                 '&:hover': {};
                 '&:disabled': {};