gd-design-library 0.0.2 → 0.0.3

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "gd-design-library",
-  "version": "0.0.2",
+  "version": "0.0.3",
+  "license": "MIT",
   "main": "./index.js",
   "types": "./index.d.ts",
   "exports": {
@@ -9,6 +10,12 @@
       "require": "./index.js"
     }
   },
-  "devDependencies": {
-  }
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "dependencies": {
+    "styled-components": "^6.1.15"
+  },
+  "devDependencies": {}
 }

package/tokens/borders.d.ts

@@ -1,6 +1,6 @@
 export declare const borders: {
-    none: string;
-    generic: ({ width, color, type }: {
+    none: number;
+    generic: ({ width, color, type, }: {
         width: string;
         color?: string;
         type?: string;

package/tokens/button.d.ts

@@ -1,13 +1,14 @@
 export declare const 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': {
@@ -28,7 +29,9 @@ export declare const button: {
     icon: {
         padding: string;
     };
-    content: {};
+    content: {
+        width: string;
+    };
     startIcon: {};
     endIcon: {};
     contained: {

package/tokens/defaultTheme.d.ts

@@ -119,14 +119,15 @@ export declare const defaultTheme: {
     };
     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': {
@@ -147,7 +148,9 @@ export declare const defaultTheme: {
         icon: {
             padding: string;
         };
-        content: {};
+        content: {
+            width: string;
+        };
         startIcon: {};
         endIcon: {};
         contained: {
@@ -230,7 +233,7 @@ export declare const defaultTheme: {
         base: {
             display: string;
             boxSizing: string;
-            borderRadius: string;
+            borderRadius: number;
             border: string;
             lineHeight: string;
             paddingLeft: string;
@@ -259,6 +262,11 @@ export declare const defaultTheme: {
                 border: string;
                 backgroundImage: string;
             };
+            '&[type="checkbox"]:not(:checked)': {
+                '&[readonly], &:disabled': {
+                    opacity: number;
+                };
+            };
             '&[type="checkbox"]:checked': {
                 backgroundRepeat: string;
                 backgroundPosition: string;
@@ -276,6 +284,9 @@ export declare const defaultTheme: {
                 width: string;
                 border: string;
                 backgroundImage: string;
+                '&[readonly], &:disabled': {
+                    opacity: number;
+                };
             };
             '&[type="radio"]:checked': {
                 backgroundImage: string;
@@ -299,6 +310,10 @@ export declare const defaultTheme: {
             text: {
                 '&:hover': {};
                 '&:disabled': {};
+                '& input': {
+                    verticalAlign: string;
+                    marginRight: string;
+                };
                 primary: {
                     '&:hover': {};
                     '&:disabled': {};
@@ -315,6 +330,7 @@ export declare const defaultTheme: {
             display: string;
             width: string;
             margin: string;
+            flexDirection: string;
         };
     };
     link: {
@@ -376,6 +392,22 @@ export declare const defaultTheme: {
                 };
             };
         };
+        inverted: {
+            '&::after': {
+                content: string;
+                position: string;
+                right: string;
+                bottom: string;
+                left: string;
+                borderBottom: string;
+            };
+            '&:hover': {
+                backgroundColor: string;
+                '&::after': {
+                    borderBottomColor: string;
+                };
+            };
+        };
         inherit: {
             color: string;
         };
@@ -482,7 +514,7 @@ export declare const defaultTheme: {
         borderThin: string;
         borderMedium: string;
         borderThick: string;
-        borderNone: string;
+        borderNone: number;
         border: {
             radius: {
                 none: string;
@@ -504,6 +536,9 @@ export declare const defaultTheme: {
                 separator: string;
                 stepIcon: string;
             };
+            rating: {
+                label: string;
+            };
         };
     };
     flexAlignItems: {
@@ -568,6 +603,36 @@ export declare const defaultTheme: {
             };
         };
     };
+    image: {
+        default: {
+            width: string;
+            height: string;
+            transition: string;
+        };
+        wrapper: {
+            position: "relative";
+            display: string;
+            flexDirection: import('..').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: import("..").TextAlign.Center;
+        };
+    };
     row: {
         default: {
             display: string;
@@ -639,6 +704,10 @@ export declare const defaultTheme: {
                 };
             };
         };
+        wrapper: {
+            display: string;
+            position: string;
+        };
     };
     animations: {
         spinKeyframes: {
@@ -722,7 +791,7 @@ export declare const defaultTheme: {
         };
         closeButton: {
             background: string;
-            border: string;
+            border: number;
             cursor: string;
             padding: string;
         };
@@ -738,6 +807,11 @@ export declare const defaultTheme: {
             justifyContent: string;
             zIndex: number;
         };
+        icons: {
+            close: {
+                name: string;
+            };
+        };
     };
     snackbar: {
         zIndex: number;
@@ -750,11 +824,6 @@ export declare const defaultTheme: {
         spacing: {
             body: string;
         };
-        closeIcon: {
-            name: string;
-            width: number;
-            height: number;
-        };
         container: {
             position: string;
             display: string;
@@ -931,10 +1000,29 @@ export declare const defaultTheme: {
             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;
+            };
+        };
     };
     skeleton: {
         default: {
@@ -959,6 +1047,50 @@ export declare const defaultTheme: {
         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;
+                    };
+                };
+            };
+        };
     };
     list: {
         wrapper: {
@@ -1035,6 +1167,106 @@ export declare const defaultTheme: {
                 };
             };
         };
+        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: {
@@ -1113,6 +1345,7 @@ export declare const defaultTheme: {
                 color: string;
                 transition: string;
                 borderBottom: string;
+                flex: number;
                 '&:hover': {
                     ".Tabs__noticeCounter": {
                         backgroundColor: string;
@@ -1162,6 +1395,9 @@ export declare const defaultTheme: {
                 backgroundColor: string;
             };
         };
+        tabButton: {
+            width: string;
+        };
     };
     stepper: {
         default: {
@@ -1271,6 +1507,38 @@ export declare const defaultTheme: {
             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;
+            };
+        };
     };
     colors: {
         transparent: string;
@@ -1422,4 +1690,187 @@ export declare const defaultTheme: {
             error: string;
         };
     };
+    price: {
+        default: {
+            display: string;
+            alignItems: string;
+            gap: string;
+        };
+        currentPrice: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            color: string;
+        };
+        oldPrice: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            color: 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;
+            };
+        };
+    };
+    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;
+            };
+        };
+    };
 };

package/tokens/flexContainer.d.ts

@@ -3,5 +3,6 @@ export declare const flexContainer: {
         display: string;
         width: string;
         margin: string;
+        flexDirection: string;
     };
 };