gd-design-library 0.7.0 → 0.7.2

package/tokens/carousel.d.ts

@@ -1,197 +0,0 @@
-import { ButtonColorVariant, ButtonVariant, FlexDirection } from '../types';
-export declare const carousel: {
-    default: {};
-    container: {
-        default: {
-            position: string;
-            overflow: string;
-            width: string;
-            display: string;
-            zIndex: number;
-            gap: string;
-        };
-        variant: {
-            cards: {
-                gap: string;
-            };
-            single: {
-                '.embla__slide': {
-                    padding: number;
-                };
-            };
-        };
-        layout: {
-            horizontal: {
-                flexDirection: string;
-            };
-            vertical: {
-                flexDirection: string;
-                height: string;
-            };
-        };
-    };
-    contentContainer: {
-        flexDirection: string;
-        height: string;
-        width: string;
-        position: string;
-        justifyContent: string;
-        alignItems: string;
-        zIndex: string;
-    };
-    carouselViewport: {
-        overflow: string;
-    };
-    carouselViewportSlideWrapper: {
-        display: string;
-    };
-    carouselSlide: {
-        flex: string;
-        width: string;
-        padding: number;
-        '& img': {
-            width: string;
-            height: string;
-            objectFit: string;
-            borderRadius: number;
-        };
-    };
-    footer: {
-        display: string;
-        justifyContent: string;
-        alignItems: string;
-    };
-    footerControls: {
-        display: string;
-    };
-    contentSlide: {
-        display: string;
-        paddingLeft: string;
-        '&:first-child': {
-            paddingLeft: number;
-        };
-    };
-    carouselControlsWrapper: {
-        position: string;
-    };
-    carouselControls: {
-        display: string;
-        justifyContent: string;
-        alignItems: string;
-        position: string;
-        top: string;
-        left: number;
-        transform: string;
-        width: string;
-        padding: string;
-        zIndex: number;
-    };
-    carouselDots: {
-        display: string;
-        justifyContent: string;
-        gap: string;
-        marginTop: string;
-    };
-    carouselDot: {
-        default: {
-            width: string;
-            height: string;
-            border: string;
-            cursor: string;
-            transition: string;
-        };
-        active: {
-            backgroundColor: string;
-            width: string;
-            '&:hover': {};
-        };
-        nonActive: {
-            backgroundColor: string;
-            '&:hover': {};
-        };
-    };
-    carouselThumbs: {
-        default: {
-            display: string;
-            justifyContent: string;
-            gap: string;
-        };
-        vertical: {
-            flexDirection: FlexDirection;
-            flex: string;
-            overflowX: string;
-            alignItems: string;
-        };
-        horizontal: {
-            overflowX: string;
-        };
-    };
-    carouselThumbsViewport: {
-        default: {
-            overflow: string;
-        };
-        vertical: {
-            maxHeight: string;
-        };
-        horizontal: {
-            width: string;
-        };
-    };
-    carouselThumbsWrapper: {
-        default: {};
-        vertical: {
-            display: string;
-            height: string;
-        };
-        horizontal: {
-            display: string;
-        };
-    };
-    carouselThumb: {
-        default: {
-            minWidth: string;
-            minHeight: string;
-            border: string;
-            padding: number;
-            background: string;
-            cursor: string;
-            opacity: number;
-            transition: string;
-            '&:hover': {
-                opacity: number;
-            };
-        };
-        active: {
-            opacity: number;
-        };
-        vertical: {
-            height: string;
-        };
-        horizontal: {
-            marginLeft: string;
-        };
-    };
-    controlsButton: {
-        default: {
-            width: string;
-            height: string;
-        };
-        attrs: {
-            variant: ButtonVariant;
-            color: ButtonColorVariant;
-            isIcon: boolean;
-        };
-    };
-    icons: {
-        base: {
-            width: number;
-            height: number;
-        };
-        controlLeft: {
-            name: string;
-        };
-        controlRight: {
-            name: string;
-        };
-    };
-};

package/tokens/carousel.js

@@ -1,208 +0,0 @@
-import { display as e, flexAlignItems as i } from "./display.js";
-import { cursors as r } from "./cursors.js";
-import { colors as n } from "./colors.js";
-import { spacing as t } from "./spacing.js";
-import { ButtonColorVariant as s, ButtonVariant as d } from "../types/button.js";
-import { FlexDirection as c } from "../types/layout.js";
-import { calculateJustify as o } from "../utils/layout.js";
-import { Z_INDEX as a } from "../constants/positioning.js";
-import { SizeVariant as l } from "../types/common.js";
-const b = {
-  default: {},
-  container: {
-    default: {
-      position: "relative",
-      overflow: "hidden",
-      width: "100%",
-      display: e.flex,
-      zIndex: a.FIRST,
-      gap: "1rem"
-    },
-    variant: {
-      cards: {
-        gap: "1rem"
-      },
-      single: {
-        ".embla__slide": {
-          padding: 0
-        }
-      }
-    },
-    layout: {
-      horizontal: {
-        flexDirection: "column"
-      },
-      vertical: {
-        flexDirection: "row",
-        height: "100%"
-      }
-    }
-  },
-  contentContainer: {
-    flexDirection: "column",
-    height: "100%",
-    width: "100%",
-    position: "absolute",
-    justifyContent: o("center"),
-    alignItems: i.center,
-    zIndex: "100"
-  },
-  carouselViewport: {
-    overflow: "hidden"
-  },
-  carouselViewportSlideWrapper: {
-    display: e.flex
-  },
-  carouselSlide: {
-    flex: `${t.none} ${t.none} auto`,
-    width: "100%",
-    padding: t.none,
-    "& img": {
-      width: "100%",
-      height: "auto",
-      objectFit: "cover",
-      borderRadius: t.none
-    }
-  },
-  footer: {
-    display: e.flex,
-    justifyContent: o("between"),
-    alignItems: i.center
-  },
-  footerControls: {
-    display: e.flex
-  },
-  contentSlide: {
-    display: e.block,
-    paddingLeft: t.sm,
-    "&:first-child": {
-      paddingLeft: t.none
-    }
-  },
-  carouselControlsWrapper: {
-    position: "relative"
-  },
-  carouselControls: {
-    display: e.flex,
-    justifyContent: o("between"),
-    alignItems: i.center,
-    position: "absolute",
-    top: "50%",
-    left: t.none,
-    transform: "translateY(-50%)",
-    width: "100%",
-    padding: "0.5rem 1rem",
-    zIndex: a.HIGH
-  },
-  carouselDots: {
-    display: e.flex,
-    justifyContent: o("center"),
-    gap: "0.5rem",
-    marginTop: "1rem"
-  },
-  carouselDot: {
-    default: {
-      width: "8px",
-      height: "8px",
-      border: "none",
-      cursor: r.pointer,
-      transition: "width 0.3s ease"
-    },
-    active: {
-      backgroundColor: n.bg.fill.primary.default,
-      width: "32px",
-      "&:hover": {}
-    },
-    nonActive: {
-      backgroundColor: n.bg.fill.disabled,
-      "&:hover": {}
-    }
-  },
-  carouselThumbs: {
-    default: {
-      display: e.flex,
-      justifyContent: o("center"),
-      gap: "0.5rem"
-    },
-    vertical: {
-      flexDirection: c.Column,
-      flex: "0 0 50px",
-      overflowX: "hidden",
-      alignItems: i.center
-    },
-    horizontal: {
-      overflowX: "auto"
-    }
-  },
-  carouselThumbsViewport: {
-    default: {
-      overflow: "hidden"
-    },
-    vertical: {
-      maxHeight: "300px"
-    },
-    horizontal: {
-      width: "200px"
-    }
-  },
-  carouselThumbsWrapper: {
-    default: {},
-    vertical: {
-      display: e.block,
-      height: "100%"
-    },
-    horizontal: {
-      display: e.flex
-    }
-  },
-  carouselThumb: {
-    default: {
-      minWidth: "40px",
-      minHeight: "40px",
-      border: "none",
-      padding: t.none,
-      background: "none",
-      cursor: r.pointer,
-      opacity: 0.4,
-      transition: "opacity 0.3s ease-in-out",
-      "&:hover": {
-        opacity: 1
-      }
-    },
-    active: {
-      opacity: 1
-    },
-    vertical: {
-      height: "40px"
-    },
-    horizontal: {
-      marginLeft: "5px"
-    }
-  },
-  controlsButton: {
-    default: {
-      width: t[l.Xl],
-      height: t[l.Xl]
-    },
-    attrs: {
-      variant: d.Text,
-      color: s.Primary,
-      isIcon: !0
-    }
-  },
-  icons: {
-    base: {
-      width: 9,
-      height: 9
-    },
-    controlLeft: {
-      name: "arrowLeft"
-    },
-    controlRight: {
-      name: "arrowRight"
-    }
-  }
-};
-export {
-  b as carousel
-};

package/tokens/chat.d.ts

@@ -1,128 +0,0 @@
-import { ButtonVariant } from '../types';
-export declare const chat: {
-    wrapper: {
-        default: {
-            display: string;
-            position: string;
-            minHeight: string;
-            height: string;
-            width: string;
-            overflow: string;
-        };
-    };
-    content: {
-        default: {
-            boxSizing: string;
-            position: string;
-            width: string;
-            height: string;
-            display: string;
-            flexDirection: string;
-            justifyContent: string;
-            alignItems: string;
-            paddingBottom: string | number;
-            gap: string | number;
-            minHeight: number;
-            '@media (max-width: 768px)': {
-                paddingLeft: string;
-                paddingRight: string;
-            };
-            '@media (min-width: 768px) and (max-width: 1280px)': {
-                paddingLeft: string;
-                paddingRight: string;
-            };
-            '@media (min-width: 1280px)': {
-                paddingLeft: string;
-                paddingRight: string;
-            };
-        };
-    };
-    mainHeader: {
-        minHeight: string;
-        height: string;
-        display: string;
-        overflow: string;
-        alignItems: string;
-        padding: string;
-        borderBottom: string;
-        borderColor: string;
-    };
-    body: {
-        display: string;
-        flex: number;
-        flexDirection: string;
-    };
-    sidebar: {
-        minWidth: string;
-        maxWidth: string;
-        overflow: string;
-        borderRight: string;
-        backgroundColor: string;
-        borderColor: string;
-        flex: string;
-        display: string;
-        flexDirection: string;
-        minHeight: string;
-    };
-    sidebarWrapper: {
-        default: {};
-        auto: {
-            '@media (max-width: 768px)': {
-                position: string;
-                display: string;
-                flexDirection: string;
-                left: number;
-                top: number;
-                right: number;
-                bottom: number;
-                backgroundColor: string;
-                zIndex: number;
-            };
-        };
-        desktop: {};
-        drawer: {
-            position: string;
-            display: string;
-            flexDirection: string;
-            left: number;
-            top: number;
-            right: number;
-            bottom: number;
-            backgroundColor: string;
-            zIndex: number;
-        };
-    };
-    sidebarHeader: {
-        minHeight: string;
-        height: string;
-        display: string;
-        overflow: string;
-        alignItems: string;
-        padding: string;
-        borderBottom: string;
-        borderColor: string;
-    };
-    toggleButton: {
-        default: {
-            height: string;
-            backgroundColor: string;
-            padding: number;
-            transform: string;
-            '&:hover': {
-                backgroundColor: string;
-            };
-        };
-        attrs: {
-            variant: ButtonVariant;
-        };
-        open: {
-            transform: string;
-        };
-    };
-    toggleIcon: {
-        name: string;
-        fill: string;
-        width: number;
-        height: number;
-    };
-};

package/tokens/chat.js

@@ -1,126 +0,0 @@
-import { hexToRgba as d, getSpacing as o } from "./utils.js";
-import { colors as e } from "./colors.js";
-import { flexAlignItems as n, display as t } from "./display.js";
-import { spacing as p } from "./spacing.js";
-import { ChatLayoutVariant as i } from "../types/chat.js";
-import { ButtonVariant as l } from "../types/button.js";
-import { Z_INDEX as m } from "../constants/positioning.js";
-const r = {
-  minHeight: "56px",
-  height: "56px",
-  display: t.flex,
-  overflow: "hidden",
-  alignItems: n.center,
-  padding: "0 24px",
-  borderBottom: "1px solid",
-  borderColor: e.neutral["grey.30"]
-}, a = {
-  position: "absolute",
-  display: t.block,
-  flexDirection: "column",
-  left: 0,
-  top: 0,
-  right: 0,
-  bottom: 0,
-  backgroundColor: d(e.neutral.black, 0.1),
-  zIndex: m.MEDIUM
-}, b = {
-  wrapper: {
-    default: {
-      display: t.flex,
-      position: "relative",
-      minHeight: "500px",
-      height: "100%",
-      width: "100%",
-      overflow: "hidden"
-    }
-  },
-  content: {
-    default: {
-      boxSizing: "border-box",
-      position: "relative",
-      width: "100%",
-      height: "100%",
-      display: t.flex,
-      flexDirection: "column",
-      justifyContent: "flex-end",
-      alignItems: n.end,
-      paddingBottom: o(8),
-      gap: o(4),
-      minHeight: 0,
-      "@media (max-width: 768px)": {
-        paddingLeft: "24px",
-        paddingRight: "24px"
-      },
-      "@media (min-width: 768px) and (max-width: 1280px)": {
-        paddingLeft: "80px",
-        paddingRight: "80px"
-      },
-      "@media (min-width: 1280px)": {
-        paddingLeft: "260px",
-        paddingRight: "260px"
-      }
-    }
-  },
-  mainHeader: {
-    ...r
-  },
-  body: {
-    display: t.flex,
-    flex: 1,
-    flexDirection: "column"
-  },
-  sidebar: {
-    minWidth: "250px",
-    maxWidth: "250px",
-    overflow: "hidden",
-    borderRight: "1px solid",
-    backgroundColor: e.neutral.white,
-    borderColor: e.neutral["grey.30"],
-    flex: "0 0 250px",
-    display: t.flex,
-    flexDirection: "column",
-    minHeight: "100%"
-  },
-  sidebarWrapper: {
-    default: {},
-    [i.Auto]: {
-      "@media (max-width: 768px)": {
-        ...a
-      }
-    },
-    [i.Desktop]: {},
-    [i.Drawer]: {
-      ...a
-    }
-  },
-  sidebarHeader: {
-    ...r
-  },
-  toggleButton: {
-    default: {
-      height: "24px",
-      backgroundColor: e.transparent,
-      padding: p.none,
-      transform: "rotate(270deg)",
-      "&:hover": {
-        backgroundColor: e.transparent
-      }
-    },
-    attrs: {
-      variant: l.Text
-    },
-    open: {
-      transform: "rotate(90deg)"
-    }
-  },
-  toggleIcon: {
-    name: "arrowDown",
-    fill: e.neutral["grey.90"],
-    width: 24,
-    height: 24
-  }
-};
-export {
-  b as chat
-};

package/tokens/chatbubble.d.ts

@@ -1,48 +0,0 @@
-import { FlexDirection } from '../types';
-export declare const chatbubble: {
-    default: {
-        fontSize: string;
-        fontWeight: number;
-        lineHeight: string;
-        display: string;
-        flexDirection: FlexDirection;
-        gap: string | number;
-        clear: string;
-        margin: string;
-    };
-    question: {
-        padding: string;
-        float: string;
-        backgroundColor: string;
-    };
-    answer: {
-        padding: string | number;
-        width: string;
-    };
-    pending: {};
-    fulfilled: {};
-    rejected: {};
-    content: {
-        default: {
-            gap: string | number;
-            display: string;
-            flexDirection: FlexDirection;
-        };
-        pending: {
-            alignItems: string;
-        };
-        fulfilled: {};
-        rejected: {};
-    };
-    actions: {
-        display: string;
-        flexDirection: FlexDirection;
-    };
-    loader: {
-        props: {
-            name: string;
-            size: string;
-            withWrapper: boolean;
-        };
-    };
-};