gd-design-library 0.0.1

package/tokens/switch.d.ts

@@ -0,0 +1,8 @@
+export declare const switchToggle: {
+    default: {
+        display: string;
+        position: string;
+        padding: string;
+        border: string;
+    };
+};

package/tokens/tabs.d.ts

@@ -0,0 +1,76 @@
+export declare const tabs: {
+    default: {
+        display: string;
+        flexDirection: string;
+        width: string;
+    };
+    header: {
+        display: string;
+        flexDirection: string;
+        position: string;
+        '&::after': {
+            content: string;
+            position: string;
+            width: string;
+            bottom: number;
+            zIndex: number;
+            borderBottom: string;
+        };
+    };
+    label: {
+        default: {
+            fontWeight: number;
+            fontSize: string;
+            color: string;
+            transition: string;
+            borderBottom: string;
+            '&:hover': {
+                ".Tabs__noticeCounter": {
+                    backgroundColor: string;
+                };
+            };
+        };
+        active: {
+            borderBottomColor: string;
+        };
+        disabled: {
+            default: {
+                '&:hover': {
+                    ".Tabs__noticeCounter": {
+                        backgroundColor: string;
+                    };
+                };
+                ".Tabs__noticeCounter": {
+                    color: string;
+                };
+                borderBottom: string;
+            };
+            active: {
+                borderBottomWidth: string;
+                borderBottomColor: string;
+            };
+        };
+    };
+    panelsWrapper: {};
+    panel: {};
+    noticeCounter: {
+        default: {
+            width?: number | undefined;
+            height?: number | undefined;
+            display: string;
+            alignItems: string;
+            justifyContent: string;
+            backgroundColor: string;
+            color: string;
+            fontWeight: number;
+            fontSize: string;
+            borderRadius: string;
+        };
+        active: {
+            backgroundColor: string;
+        };
+        disabled: {
+            backgroundColor: string;
+        };
+    };
+};

package/tokens/textarea.d.ts

@@ -0,0 +1,55 @@
+export declare const textarea: {
+    default: {};
+    variants: {
+        default: {};
+        outlined: {
+            '&:hover': {};
+            '&:active': {};
+            '&:focus': {};
+            '&:disabled': {};
+            '&:read-only': {};
+            primary: {
+                '&:hover': {};
+                '&:active': {};
+                '&:focus': {};
+                '&:disabled': {};
+                '&:read-only': {};
+            };
+            secondary: {
+                '&:hover': {};
+                '&:active': {};
+                '&:focus': {};
+                '&:disabled': {};
+                '&:read-only': {};
+            };
+            default: {
+                '&:hover': {};
+                '&:active': {};
+                '&:focus': {};
+                '&:disabled': {};
+                '&:read-only': {};
+            };
+            success: {
+                '&:hover': {};
+                '&:active': {};
+                '&:focus': {};
+                '&:disabled': {};
+                '&:read-only': {};
+            };
+            warning: {
+                '&:hover': {};
+                '&:active': {};
+                '&:focus': {};
+                '&:disabled': {};
+                '&:read-only': {};
+            };
+            error: {
+                '&:hover': {};
+                '&:active': {};
+                '&:focus': {};
+                '&:disabled': {};
+                '&:read-only': {};
+            };
+        };
+    };
+};

package/tokens/tooltip.d.ts

@@ -0,0 +1,54 @@
+export declare const tooltip: {
+    default: {
+        position: "absolute";
+        display: string;
+        backgroundColor: string;
+        padding: string;
+        whiteSpace: string;
+        '&::after': {
+            position: "absolute";
+            content: string;
+            border: string;
+        };
+        '&.tooltip-bottom': {
+            transform: string;
+            '&::after': {
+                top: number;
+                left: string;
+                borderLeftColor: string;
+                borderTopColor: string;
+                transform: string;
+            };
+        };
+        '&.tooltip-top': {
+            transform: string;
+            '&::after': {
+                bottom: number;
+                left: string;
+                borderRightColor: string;
+                borderBottomColor: string;
+                transform: string;
+            };
+        };
+        '&.tooltip-left': {
+            transform: string;
+            '&::after': {
+                right: number;
+                top: string;
+                borderRightColor: string;
+                borderTopColor: string;
+                transform: string;
+            };
+        };
+        '&.tooltip-right': {
+            transform: string;
+            '&::after': {
+                left: number;
+                top: string;
+                borderLeftColor: string;
+                borderBottomColor: string;
+                transform: string;
+            };
+        };
+    };
+};

package/tokens/types/index.types.d.ts

@@ -0,0 +1,8 @@
+import { spacing } from '..';
+export type LayoutSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+export type SpacingKey = keyof typeof spacing;
+export declare enum Unit {
+    Px = "px",
+    Rem = "rem",
+    Percents = "%"
+}

package/tokens/typography.d.ts

@@ -0,0 +1,116 @@
+export declare const typography: {
+    base: {
+        fontFamily: string;
+    };
+    inherit: {
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+    };
+    light: {
+        fontWeight: number;
+    };
+    normal: {
+        fontWeight: number;
+    };
+    semibold: {
+        fontWeight: number;
+    };
+    strong: {
+        fontWeight: number;
+    };
+    i: {
+        fontStyle: string;
+    };
+    uppercase: {
+        textTransform: string;
+    };
+    lowercase: {
+        textTransform: string;
+    };
+    underline: {
+        textDecoration: string;
+    };
+    strike: {
+        textDecoration: string;
+    };
+    h1: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        marginTop: string;
+        marginBottom: string;
+    };
+    h2: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        marginTop: string;
+        marginBottom: string;
+    };
+    h3: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        marginTop: string;
+        marginBottom: string;
+    };
+    h4: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        marginTop: string;
+        marginBottom: string;
+    };
+    h5: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        marginTop: string;
+        marginBottom: string;
+    };
+    h6: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        marginTop: string;
+        marginBottom: string;
+    };
+    p: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+    };
+    small: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+    };
+    caption: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+    };
+    span: {
+        xs: {
+            fontSize: string;
+            lineHeight: string;
+        };
+        sm: {
+            fontSize: string;
+            lineHeight: string;
+        };
+        md: {
+            fontSize: string;
+            lineHeight: string;
+        };
+        lg: {
+            fontSize: string;
+            lineHeight: string;
+        };
+        xl: {
+            fontSize: string;
+            lineHeight: string;
+        };
+    };
+};

package/tokens/utils.d.ts

@@ -0,0 +1,17 @@
+import { CSSObject } from 'styled-components';
+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;
+    };
+};
+export declare const convertJsonToCssKeyframe: (keyframeJson?: Record<string, CSSObject>) => import('styled-components/dist/models/Keyframes').default;
+export declare const convertToUnit: (value: string | number, unit?: EnumOrPrimitive<Unit>) => string;
+export declare const getSpacing: (sizeKey?: EnumOrPrimitive<SpacingKey> | number, unit?: EnumOrPrimitive<Unit>) => string | number;
+export declare const hexToRgba: (hex: string, alpha?: number) => string;

package/tokens/values.d.ts

@@ -0,0 +1,28 @@
+export declare const values: {
+    borderThin: string;
+    borderMedium: string;
+    borderThick: string;
+    borderNone: string;
+    border: {
+        radius: {
+            none: string;
+        };
+    };
+    screenSmall: string;
+    screenMedium: string;
+    screenLarge: string;
+    screenXLarge: string;
+    responsiveSmall: string;
+    responsiveMedium: string;
+    responsiveLarge: string;
+    responsiveXLarge: string;
+    zIndex: {
+        snackbar: number;
+    };
+    transitions: {
+        stepper: {
+            separator: string;
+            stepIcon: string;
+        };
+    };
+};

package/tokens/wrapper.d.ts

@@ -0,0 +1,29 @@
+export declare const wrapper: {
+    default: {
+        justifyContent: string;
+        alignItems: string;
+        backdropFilter: string;
+        backgroundColor: string;
+    };
+    inline: {
+        display: string;
+    };
+    section: {
+        display: string;
+        top: number;
+        left: number;
+        width: string;
+        height: string;
+        position: string;
+        zIndex: number;
+    };
+    fullPage: {
+        display: string;
+        position: string;
+        top: number;
+        left: number;
+        width: string;
+        height: string;
+        zIndex: number;
+    };
+};

package/types/accesability.d.ts

@@ -0,0 +1,5 @@
+export declare enum TabIndex {
+    Default = 0,
+    Disabled = -1,
+    HighPriority = 1
+}

package/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './misc';
+export * from './accesability';

package/types/misc.d.ts

@@ -0,0 +1,6 @@
+export type NullableType<T = undefined> = T | null;
+export type EnumOrPrimitive<T extends string | number> = T | `${T}`;
+export interface WithOptional<T = undefined> {
+    value?: T;
+}
+export type Maybe<T> = T | null;

package/utils/getCharCount.d.ts

@@ -0,0 +1,3 @@
+import { ChangeEvent } from 'react';
+import { Maybe } from '../types';
+export declare const getCharCount: <T extends HTMLTextAreaElement | HTMLInputElement>(element: Maybe<T>, event: ChangeEvent<T>, maxLength?: number) => Maybe<number>;

package/utils/index.d.ts

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

package/utils/uniqueKeys.d.ts

@@ -0,0 +1 @@
+export declare const generateUniqueId: (id?: string | number, prefix?: string) => string;