gd-design-library 0.0.2 → 0.0.3

package/tokens/link.d.ts

@@ -58,6 +58,22 @@ export declare const link: {
             };
         };
     };
+    inverted: {
+        '&::after': {
+            content: string;
+            position: string;
+            right: string;
+            bottom: string;
+            left: string;
+            borderBottom: string;
+        };
+        '&:hover': {
+            backgroundColor: string;
+            '&::after': {
+                borderBottomColor: string;
+            };
+        };
+    };
     inherit: {
         color: string;
     };

package/tokens/list.d.ts

@@ -73,4 +73,14 @@ export declare const list: {
             };
         };
     };
+    icons: {
+        bulletDot: {
+            name: string;
+            width: number;
+            height: number;
+        };
+        bulletCheck: {
+            name: string;
+        };
+    };
 };

package/tokens/modal.d.ts

@@ -40,7 +40,7 @@ export declare const modal: {
     };
     closeButton: {
         background: string;
-        border: string;
+        border: number;
         cursor: string;
         padding: string;
     };
@@ -56,4 +56,9 @@ export declare const modal: {
         justifyContent: string;
         zIndex: number;
     };
+    icons: {
+        close: {
+            name: string;
+        };
+    };
 };

package/tokens/price.d.ts

@@ -0,0 +1,19 @@
+export declare const 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;
+    };
+};

package/tokens/rating.d.ts

@@ -0,0 +1,57 @@
+export declare const 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/search.d.ts

@@ -0,0 +1,37 @@
+export declare const 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;
+        };
+    };
+};

package/tokens/select.d.ts

@@ -0,0 +1,53 @@
+export declare const 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;
+    };
+};

package/tokens/shadow.d.ts

@@ -1,4 +1,5 @@
 export declare const DEFAULT_SHADOW: string;
+export declare const SHADOW_3: string;
 export declare const shadows: {
     modal: {
         default: string;
@@ -7,4 +8,7 @@ export declare const shadows: {
     snackbar: {
         default: string;
     };
+    select: {
+        default: string;
+    };
 };

package/tokens/skeleton.d.ts

@@ -21,4 +21,48 @@ export declare const skeleton: {
     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;
+                };
+            };
+        };
+    };
 };

package/tokens/snackbar.d.ts

@@ -10,11 +10,6 @@ export declare const snackbar: {
     spacing: {
         body: string;
     };
-    closeIcon: {
-        name: string;
-        width: number;
-        height: number;
-    };
     container: {
         position: string;
         display: string;
@@ -191,8 +186,27 @@ export declare const snackbar: {
         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;
+        };
+    };
 };

package/tokens/stepper.d.ts

@@ -107,4 +107,36 @@ export declare const stepper: {
         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;
+        };
+    };
 };

package/tokens/tabs.d.ts

@@ -24,6 +24,7 @@ export declare const tabs: {
             color: string;
             transition: string;
             borderBottom: string;
+            flex: number;
             '&:hover': {
                 ".Tabs__noticeCounter": {
                     backgroundColor: string;
@@ -73,4 +74,7 @@ export declare const tabs: {
             backgroundColor: string;
         };
     };
+    tabButton: {
+        width: string;
+    };
 };

package/tokens/tooltip.d.ts

@@ -51,4 +51,8 @@ export declare const tooltip: {
             };
         };
     };
+    wrapper: {
+        display: string;
+        position: string;
+    };
 };

package/tokens/utils.d.ts

@@ -1,14 +1,14 @@
 import { CSSObject } from 'styled-components';
+import { EnumOrPrimitive } from '../types';
 import { SpacingKey, Unit } from './types/index.types';
 import { colors } from './colors';
-import { EnumOrPrimitive } from '../types';
 export declare const generateStateStyles: (color: keyof typeof colors) => {
     focus: {
         outline: string;
     };
     disabled: {
         cursor: string;
-        border: string;
+        border: number;
     };
 };
 export declare const convertJsonToCssKeyframe: (keyframeJson?: Record<string, CSSObject>) => import('styled-components/dist/models/Keyframes').default;

package/tokens/values.d.ts

@@ -2,7 +2,7 @@ export declare const values: {
     borderThin: string;
     borderMedium: string;
     borderThick: string;
-    borderNone: string;
+    borderNone: number;
     border: {
         radius: {
             none: string;
@@ -24,5 +24,8 @@ export declare const values: {
             separator: string;
             stepIcon: string;
         };
+        rating: {
+            label: string;
+        };
     };
 };

package/utils/index.d.ts

@@ -1,2 +1,3 @@
 export * from './getCharCount';
 export * from './uniqueKeys';
+export * from './math';

package/utils/math.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export declare const convertToFormattedPercents: (props: {
+    max: number;
+    target: number;
+    formatChar?: ReactNode;
+}) => ReactNode;