gd-design-library 0.7.0 → 0.7.2

package/tokens/accordion.d.ts

@@ -1,62 +0,0 @@
-import { TextAlign } from '../types';
-export declare const accordion: {
-    header: {
-        default: {
-            width: string;
-            textAlign: TextAlign;
-            cursor: string;
-            border: number;
-            backgroundColor: string;
-            paddingTop: string;
-            paddingBottom: string;
-            display: string;
-            alignItems: string;
-            ':first-child': {
-                flex: string;
-            };
-        };
-    };
-    content: {
-        default: {
-            overflow: string;
-            transition: any;
-            height: string;
-        };
-        opened: {
-            paddingTop: string;
-            paddingBottom: string;
-        };
-        closed: {
-            maxHeight: number;
-            paddingTop: number;
-            paddingBottom: number;
-        };
-    };
-    item: {
-        default: {
-            position: string;
-            padding: number;
-            '&::after': {
-                content: string;
-                position: string;
-                bottom: number;
-                left: number;
-                right: number;
-                height: string;
-                width: string;
-                backgroundColor: any;
-            };
-        };
-    };
-    icon: {
-        default: {
-            transition: any;
-        };
-        opened: {
-            transform: any;
-        };
-        closed: {
-            transform: any;
-        };
-    };
-};

package/tokens/accordion.js

@@ -1,72 +0,0 @@
-import { colors as r } from "./colors.js";
-import { flexAlignItems as e, display as i } from "./display.js";
-import { cursors as d } from "./cursors.js";
-import { spacing as o } from "./spacing.js";
-import { borders as a } from "./borders.js";
-import { values as n } from "./values.js";
-import { get as t } from "../utils/helpers.js";
-import { TextAlign as m } from "../types/typography.js";
-const x = {
-  header: {
-    default: {
-      width: "100%",
-      textAlign: m.Left,
-      cursor: d.pointer,
-      border: a.none,
-      backgroundColor: r.transparent,
-      paddingTop: o.md,
-      paddingBottom: o.md,
-      display: i.flex,
-      alignItems: e.center,
-      ":first-child": {
-        flex: "1"
-      }
-    }
-  },
-  content: {
-    default: {
-      overflow: "hidden",
-      transition: t(n, "transitions.accordion.toggle"),
-      height: "auto"
-    },
-    opened: {
-      paddingTop: o.md,
-      paddingBottom: o.md
-    },
-    closed: {
-      maxHeight: o.none,
-      paddingTop: o.none,
-      paddingBottom: o.none
-    }
-  },
-  item: {
-    default: {
-      position: "relative",
-      padding: o.none,
-      "&::after": {
-        content: '""',
-        position: "absolute",
-        bottom: o.none,
-        left: o.none,
-        right: o.none,
-        height: "1px",
-        width: "100%",
-        backgroundColor: t(r, "border.default")
-      }
-    }
-  },
-  icon: {
-    default: {
-      transition: t(n, "transitions.accordion.icon")
-    },
-    opened: {
-      transform: t(n, "transform.rotateUp")
-    },
-    closed: {
-      transform: t(n, "transform.rotateReset")
-    }
-  }
-};
-export {
-  x as accordion
-};

package/tokens/animations.d.ts

@@ -1,60 +0,0 @@
-export declare const animations: {
-    spinKeyframes: {
-        '0%': {
-            transform: string;
-        };
-        '100%': {
-            transform: string;
-        };
-    };
-    bounceKeyframes: {
-        '0%, 80%, 100%': {
-            transform: string;
-        };
-        '40%': {
-            transform: string;
-        };
-    };
-    slideIn: {
-        '0%': {
-            transform: string;
-            opacity: number;
-        };
-        '100%': {
-            transform: string;
-            opacity: number;
-        };
-    };
-    slideOut: {
-        '0%': {
-            transform: string;
-            opacity: number;
-        };
-        '100%': {
-            transform: string;
-            opacity: number;
-        };
-    };
-    blinkKeyframes: {
-        '0%': {
-            opacity: number;
-        };
-        '50%': {
-            opacity: number;
-        };
-        '100%': {
-            opacity: number;
-        };
-    };
-    progressIndeterminate: {
-        '0%': {
-            transform: string;
-        };
-        '50%': {
-            transform: string;
-        };
-        '100%': {
-            transform: string;
-        };
-    };
-};

package/tokens/animations.js

@@ -1,63 +0,0 @@
-const a = {
-  spinKeyframes: {
-    "0%": {
-      transform: "rotate(0deg)"
-    },
-    "100%": {
-      transform: "rotate(360deg)"
-    }
-  },
-  bounceKeyframes: {
-    "0%, 80%, 100%": {
-      transform: "scale(1) translateY(0)"
-    },
-    "40%": {
-      transform: "scale(1) translateY(-15px)"
-    }
-  },
-  slideIn: {
-    "0%": {
-      transform: "translateY(100%)",
-      opacity: 0
-    },
-    "100%": {
-      transform: "translateY(0)",
-      opacity: 1
-    }
-  },
-  slideOut: {
-    "0%": {
-      transform: "translateY(0)",
-      opacity: 1
-    },
-    "100%": {
-      transform: "translateY(100%)",
-      opacity: 0
-    }
-  },
-  blinkKeyframes: {
-    "0%": {
-      opacity: 1
-    },
-    "50%": {
-      opacity: 0.4
-    },
-    "100%": {
-      opacity: 1
-    }
-  },
-  progressIndeterminate: {
-    "0%": {
-      transform: "translateX(-100%)"
-    },
-    "50%": {
-      transform: "translateX(120%)"
-    },
-    "100%": {
-      transform: "translateX(350%)"
-    }
-  }
-};
-export {
-  a as animations
-};

package/tokens/avatar.d.ts

@@ -1,120 +0,0 @@
-import { TextAlign, TypographyVariant } from '../types';
-export declare const avatar: {
-    default: {
-        borderRadius: string;
-        position: string;
-        width: number;
-        height: number;
-    };
-    imageWrapper: {
-        default: {
-            borderRadius: string;
-            overflow: string;
-            height: string;
-            width: string;
-            alignContent: string;
-            backgroundColor: any;
-        };
-    };
-    badge: {
-        default: {
-            position: string;
-            borderRadius: string;
-            backgroundColor: any;
-            width: number;
-            height: number;
-            border: string;
-            top: number;
-            right: number;
-        };
-        size: {
-            xs: {
-                width: number;
-                height: number;
-                border: string;
-                top: number;
-                right: number;
-            };
-            sm: {
-                width: number;
-                height: number;
-                border: string;
-                top: number;
-                right: number;
-            };
-            md: {
-                width: number;
-                height: number;
-                border: string;
-                top: number;
-                right: number;
-            };
-            lg: {
-                width: number;
-                height: number;
-                border: string;
-                top: number;
-                right: number;
-            };
-            xl: {
-                width: number;
-                height: number;
-                border: string;
-                top: number;
-                right: number;
-            };
-        };
-    };
-    fallbackText: {
-        default: {
-            overflow: string;
-            textOverflow: string;
-            whiteSpace: string;
-        };
-        attrs: {
-            default: {
-                variant: TypographyVariant;
-                align: TextAlign;
-            };
-            size: {
-                xs: {
-                    variant: TypographyVariant;
-                };
-                sm: {
-                    variant: TypographyVariant;
-                };
-                md: {
-                    variant: TypographyVariant;
-                };
-                lg: {
-                    variant: TypographyVariant;
-                };
-                xl: {
-                    variant: TypographyVariant;
-                };
-            };
-        };
-    };
-    size: {
-        xs: {
-            width: number;
-            height: number;
-        };
-        sm: {
-            width: number;
-            height: number;
-        };
-        md: {
-            width: number;
-            height: number;
-        };
-        lg: {
-            width: number;
-            height: number;
-        };
-        xl: {
-            width: number;
-            height: number;
-        };
-    };
-};

package/tokens/avatar.js

@@ -1,153 +0,0 @@
-import { colors as r } from "./colors.js";
-import { borders as i } from "./borders.js";
-import { TypographyVariant as e, TextAlign as h } from "../types/typography.js";
-import { get as o } from "../utils/helpers.js";
-import { SizeVariant as t } from "../types/common.js";
-const n = {
-  default: {
-    borderRadius: "50%",
-    position: "relative",
-    // Default size variant (MD)
-    width: 42,
-    height: 42
-  },
-  imageWrapper: {
-    default: {
-      borderRadius: "50%",
-      overflow: "hidden",
-      height: "100%",
-      width: "100%",
-      alignContent: "center",
-      backgroundColor: o(r, "bg.fill.primary.default")
-    }
-  },
-  badge: {
-    default: {
-      position: "absolute",
-      borderRadius: "50%",
-      backgroundColor: o(r, "bg.fill.success.primary.default"),
-      // Default size variant (MD)
-      width: 16,
-      height: 16,
-      border: i.generic({
-        width: "2.3px",
-        color: "white",
-        type: "solid"
-      }),
-      top: -2,
-      right: 0
-    },
-    size: {
-      [t.Xs]: {
-        width: 8,
-        height: 8,
-        border: i.generic({
-          width: "1px",
-          color: "white",
-          type: "solid"
-        }),
-        top: -1,
-        right: 0
-      },
-      [t.Sm]: {
-        width: 14,
-        height: 14,
-        border: i.generic({
-          width: "2px",
-          color: "white",
-          type: "solid"
-        }),
-        top: -2,
-        right: 0
-      },
-      [t.Md]: {
-        width: 16,
-        height: 16,
-        border: i.generic({
-          width: "2.3px",
-          color: "white",
-          type: "solid"
-        }),
-        top: -2,
-        right: 0
-      },
-      [t.Lg]: {
-        width: 18,
-        height: 18,
-        border: i.generic({
-          width: "2.7px",
-          color: "white",
-          type: "solid"
-        }),
-        top: -1,
-        right: 0
-      },
-      [t.Xl]: {
-        width: 22,
-        height: 22,
-        border: i.generic({
-          width: "3px",
-          color: "white",
-          type: "solid"
-        }),
-        top: 0,
-        right: 0
-      }
-    }
-  },
-  fallbackText: {
-    default: {
-      overflow: "hidden",
-      textOverflow: "ellipsis",
-      whiteSpace: "nowrap"
-    },
-    attrs: {
-      default: {
-        variant: e.H6,
-        align: h.Center
-      },
-      size: {
-        [t.Xs]: {
-          variant: e.Caption
-        },
-        [t.Sm]: {
-          variant: e.Body2
-        },
-        [t.Md]: {
-          variant: e.H6
-        },
-        [t.Lg]: {
-          variant: e.H5
-        },
-        [t.Xl]: {
-          variant: e.H4
-        }
-      }
-    }
-  },
-  size: {
-    [t.Xs]: {
-      width: 24,
-      height: 24
-    },
-    [t.Sm]: {
-      width: 38,
-      height: 38
-    },
-    [t.Md]: {
-      width: 42,
-      height: 42
-    },
-    [t.Lg]: {
-      width: 52,
-      height: 52
-    },
-    [t.Xl]: {
-      width: 80,
-      height: 80
-    }
-  }
-};
-export {
-  n as avatar
-};

package/tokens/borders.d.ts

@@ -1,9 +0,0 @@
-export declare const borders: {
-    none: number;
-    generic: ({ width, color, type, }?: {
-        width?: string;
-        color?: string;
-        type?: string;
-    }) => string;
-    focus: string;
-};

package/tokens/borders.js

@@ -1,17 +0,0 @@
-import { colors as r } from "./colors.js";
-import { get as c } from "../utils/helpers.js";
-const o = ({
-  width: t = "1px",
-  color: e = r.transparent,
-  type: s = "solid"
-} = {}) => `${t} ${s} ${e}`, i = {
-  none: 0,
-  generic: o,
-  focus: o({
-    width: "2px",
-    color: c(r, "border.focus")
-  })
-};
-export {
-  i as borders
-};

package/tokens/breadcrumbs.d.ts

@@ -1,30 +0,0 @@
-export declare const breadcrumbs: {
-    default: {
-        display: string;
-        alignItems: string;
-        gap: number;
-    };
-    bordered: {
-        padding: string;
-        border: string;
-    };
-    item: {
-        itemStart: {
-            default: {
-                color: any;
-            };
-        };
-        itemEnd: {
-            default: {
-                color: any;
-            };
-        };
-    };
-    separator: {
-        default: {
-            display: string;
-            alignItems: string;
-            color: any;
-        };
-    };
-};

package/tokens/breadcrumbs.js

@@ -1,37 +0,0 @@
-import { spacing as e } from "./spacing.js";
-import { colors as t } from "./colors.js";
-import { get as a } from "../utils/helpers.js";
-import { SizeVariant as o } from "../types/common.js";
-const r = a(t, "icon.primary.default"), f = {
-  default: {
-    display: "flex",
-    alignItems: "center",
-    gap: 10
-  },
-  bordered: {
-    padding: `${e[o.Md]} ${e[o.Lg]}`,
-    border: `1px solid ${t.border.default}`
-  },
-  item: {
-    itemStart: {
-      default: {
-        color: r
-      }
-    },
-    itemEnd: {
-      default: {
-        color: r
-      }
-    }
-  },
-  separator: {
-    default: {
-      display: "flex",
-      alignItems: "center",
-      color: r
-    }
-  }
-};
-export {
-  f as breadcrumbs
-};

package/tokens/breakpoints.d.ts

@@ -1,8 +0,0 @@
-export declare const breakpoints: {
-    xs: string;
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    xxl: string;
-};

package/tokens/breakpoints.js

@@ -1,12 +0,0 @@
-import { SizeVariant as p } from "../types/common.js";
-const o = {
-  [p.Xs]: "320px",
-  [p.Sm]: "480px",
-  [p.Md]: "768px",
-  [p.Lg]: "1024px",
-  [p.Xl]: "1280px",
-  [p.Xxl]: "1536px"
-};
-export {
-  o as breakpoints
-};