gd-design-library 0.7.0 → 0.7.2

package/tokens/select.d.ts

@@ -1,93 +0,0 @@
-import { Cursors, FlexDirection, TextAlign, ButtonColorVariant, ButtonVariant } from '../types';
-export declare const select: {
-    default: {
-        display: string;
-        position: string;
-    };
-    initiatorWrapper: {
-        '& > *': {
-            width: string;
-        };
-        '.gd-button__content': {
-            whiteSpace: string;
-            overflow: string;
-            textOverflow: string;
-            display: string;
-        };
-    };
-    dropdown: {
-        position: string;
-        textAlign: string;
-        background: string;
-        boxShadow: string;
-        fontFamily: string;
-        fontSize: string;
-        fontWeight: number;
-        listStyleType: string;
-        margin: number;
-        padding: number;
-        zIndex: number;
-        overflowY: string;
-    };
-    button: {
-        default: {
-            borderColor: string;
-            padding: string;
-            width: string;
-            display: string;
-            flexDirection: string;
-            justifyContent: string;
-            alignItems: string;
-            textAlign: TextAlign;
-            '.gd-button__content': {
-                justifyContent: string;
-            };
-        };
-        attrs: {
-            variant: ButtonVariant;
-            color: ButtonColorVariant;
-        };
-    };
-    item: {
-        default: {
-            cursor: Cursors;
-            padding: string | number;
-            '&:hover, &.active': {
-                backgroundColor: string;
-            };
-        };
-        disabled: {
-            opacity: number;
-            cursor: Cursors;
-            pointerEvents: string;
-        };
-    };
-    arrowIconWrapper: {
-        default: {
-            transition: string;
-        };
-        transform: {
-            open: {
-                transform: string;
-            };
-            close: {
-                transform: string;
-            };
-        };
-    };
-    arrowIcon: {
-        name: string;
-        fill: string;
-        width: number;
-        height: number;
-    };
-    adornment: {
-        default: {
-            display: string;
-            alignItems: string;
-            flexDirection: FlexDirection;
-            position: string;
-            zIndex: number;
-        };
-    };
-};

package/tokens/select.js

@@ -1,108 +0,0 @@
-import { Z_INDEX as i } from "../constants/positioning.js";
-import { getSpacing as _ } from "./utils.js";
-import { values as k } from "./values.js";
-import { spacing as t } from "./spacing.js";
-import { colors as o } from "./colors.js";
-import { font as r } from "./font.js";
-import { shadows as z } from "./shadow.js";
-import { flexAlignItems as e, display as n } from "./display.js";
-import { FlexDirection as W } from "../types/layout.js";
-import { Cursors as a } from "../types/cursors.js";
-import { ButtonColorVariant as B, ButtonVariant as F } from "../types/button.js";
-import { TextAlign as O, TypographyVariant as P } from "../types/typography.js";
-var l, s, d, p, f, m, c, g, u, w, y, b, h, x, v, I, C, S, A, D, T;
-const J = {
-  default: {
-    display: "inline-block",
-    position: "relative"
-  },
-  initiatorWrapper: {
-    "& > *": {
-      width: "100%"
-    },
-    ".gd-button__content": {
-      whiteSpace: "nowrap",
-      overflow: "hidden",
-      textOverflow: "ellipsis",
-      display: "block"
-    }
-  },
-  dropdown: {
-    position: "absolute",
-    textAlign: "left",
-    background: (s = (l = o) == null ? void 0 : l.bg) == null ? void 0 : s.surface,
-    boxShadow: (p = (d = z) == null ? void 0 : d.select) == null ? void 0 : p.default,
-    fontFamily: (f = r) == null ? void 0 : f.family,
-    fontSize: (c = (m = r) == null ? void 0 : m.size) == null ? void 0 : c[P.Body1],
-    fontWeight: (u = (g = r) == null ? void 0 : g.weight) == null ? void 0 : u.normal,
-    listStyleType: "none",
-    margin: (w = t) == null ? void 0 : w.none,
-    padding: (y = t) == null ? void 0 : y.none,
-    zIndex: i.TOP,
-    overflowY: "auto"
-  },
-  button: {
-    default: {
-      borderColor: (h = (b = o) == null ? void 0 : b.border) == null ? void 0 : h.default,
-      padding: (x = t) == null ? void 0 : x.sm,
-      width: "100%",
-      display: (v = n) == null ? void 0 : v.flex,
-      flexDirection: "row",
-      justifyContent: "space-between",
-      alignItems: (I = e) == null ? void 0 : I.center,
-      textAlign: O.Left,
-      ".gd-button__content": {
-        justifyContent: e.start
-      }
-    },
-    attrs: {
-      variant: F.Outlined,
-      color: B.Primary
-    }
-  },
-  item: {
-    default: {
-      cursor: a.Pointer,
-      padding: _(2),
-      "&:hover, &.active": {
-        backgroundColor: (D = (A = (S = (C = o) == null ? void 0 : C.bg) == null ? void 0 : S.fill) == null ? void 0 : A.secondary) == null ? void 0 : D.hover
-      }
-    },
-    disabled: {
-      opacity: 0.5,
-      cursor: a.NotAllowed,
-      pointerEvents: "none"
-    }
-  },
-  arrowIconWrapper: {
-    default: {
-      transition: k.transitions.select.arrowIconWrapper
-    },
-    transform: {
-      open: {
-        transform: "rotate(180deg)"
-      },
-      close: {
-        transform: "rotate(0deg)"
-      }
-    }
-  },
-  arrowIcon: {
-    name: "arrowDown",
-    fill: (T = o) == null ? void 0 : T.neutral["grey.90"],
-    width: 18,
-    height: 18
-  },
-  adornment: {
-    default: {
-      display: n.flex,
-      alignItems: e.center,
-      flexDirection: W.Row,
-      position: "relative",
-      zIndex: i.FIRST
-    }
-  }
-};
-export {
-  J as select
-};

package/tokens/separator.d.ts

@@ -1,56 +0,0 @@
-import { FlexDirection, TypographyVariant } from '../types';
-export declare const separator: {
-    default: {
-        alignItems: string;
-        justifyItems: string;
-        gap: string | number;
-    };
-    horizontal: {
-        width: string;
-        display: string;
-        flexDirection: FlexDirection;
-    };
-    vertical: {
-        height: string;
-        display: string;
-        flexDirection: FlexDirection;
-    };
-    line: {
-        default: {};
-        horizontal: {
-            width: string;
-        };
-        vertical: {
-            height: string;
-        };
-    };
-    label: {
-        default: {};
-        attrs: {
-            xs: {
-                $variant: TypographyVariant;
-                $as: TypographyVariant;
-            };
-            sm: {
-                $variant: TypographyVariant;
-                $as: TypographyVariant;
-            };
-            md: {
-                $variant: TypographyVariant;
-                $as: TypographyVariant;
-            };
-            lg: {
-                $variant: TypographyVariant;
-                $as: TypographyVariant;
-            };
-            xl: {
-                $variant: TypographyVariant;
-                $as: TypographyVariant;
-            };
-            xxl: {
-                $variant: TypographyVariant;
-                $as: TypographyVariant;
-            };
-        };
-    };
-};

package/tokens/separator.js

@@ -1,63 +0,0 @@
-import { display as r, flexAlignItems as e } from "./display.js";
-import { getSpacing as n } from "./utils.js";
-import { TypographyVariant as a } from "../types/typography.js";
-import { FlexDirection as o } from "../types/layout.js";
-import { SizeVariant as t, Orientation as i } from "../types/common.js";
-const d = {
-  default: {
-    alignItems: e.center,
-    justifyItems: e.center,
-    gap: n(4)
-  },
-  [i.Horizontal]: {
-    width: "100%",
-    display: r.flex,
-    flexDirection: o.Row
-  },
-  [i.Vertical]: {
-    height: "100%",
-    display: r.flex,
-    flexDirection: o.Column
-  },
-  line: {
-    default: {},
-    [i.Horizontal]: {
-      width: "100%"
-    },
-    [i.Vertical]: {
-      height: "100%"
-    }
-  },
-  label: {
-    default: {},
-    attrs: {
-      [t.Xs]: {
-        $variant: a.Caption,
-        $as: a.Caption
-      },
-      [t.Sm]: {
-        $variant: a.Body2,
-        $as: a.Body2
-      },
-      [t.Md]: {
-        $variant: a.Body1,
-        $as: a.Body1
-      },
-      [t.Lg]: {
-        $variant: a.H6,
-        $as: a.H6
-      },
-      [t.Xl]: {
-        $variant: a.H5,
-        $as: a.H5
-      },
-      [t.Xxl]: {
-        $variant: a.H4,
-        $as: a.H4
-      }
-    }
-  }
-};
-export {
-  d as separator
-};

package/tokens/shadow.d.ts

@@ -1,20 +0,0 @@
-export declare const DEFAULT_SHADOW: string;
-export declare const SHADOW_3: string;
-export declare const shadows: {
-    modal: {
-        default: string;
-        content: string;
-    };
-    snackbar: {
-        default: string;
-    };
-    select: {
-        default: string;
-    };
-    card: {
-        default: string;
-    };
-    inlineNotification: {
-        default: string;
-    };
-};

package/tokens/shadow.js

@@ -1,25 +0,0 @@
-import { hexToRgba as o } from "./utils.js";
-import { colors as e } from "./colors.js";
-const t = `0 4px 12px ${o(e.neutral.black, 0.1)}`, a = `0px 8px 18px 3px ${o(e.neutral.black, 0.2)}`, n = {
-  modal: {
-    default: t,
-    content: t
-  },
-  snackbar: {
-    default: t
-  },
-  select: {
-    default: a
-  },
-  card: {
-    default: a
-  },
-  inlineNotification: {
-    default: t
-  }
-};
-export {
-  t as DEFAULT_SHADOW,
-  a as SHADOW_3,
-  n as shadows
-};

package/tokens/skeleton.d.ts

@@ -1,68 +0,0 @@
-export declare const skeleton: {
-    default: {
-        display: string;
-        position: string;
-        backgroundColor: string;
-        alignItems: string;
-        justifyContent: string;
-        width: string;
-        height: string;
-        overflow: string;
-        '&:empty::before': {
-            content: string;
-        };
-    };
-    rounded: {
-        borderRadius: string;
-    };
-    rectangular: {
-        borderRadius: string;
-    };
-    circular: {
-        borderRadius: string;
-    };
-    cards: {
-        search: {
-            default: {};
-            container: {
-                padding: string;
-                boxSizing: string;
-                flexWrap: string;
-                flexDirection: string;
-            };
-            header: {
-                width: string;
-                marginBottom: string;
-            };
-            row: {
-                width: string;
-                marginBottom: string;
-                gap: string;
-            };
-            columnImage: {
-                default: {
-                    flex: number;
-                };
-                image: {
-                    width: string;
-                    height: string;
-                };
-            };
-            columnText: {
-                default: {
-                    flex: number;
-                };
-                description: {
-                    width: string;
-                    height: string;
-                    marginBottom: string;
-                };
-                price: {
-                    width: string;
-                    height: string;
-                    marginBottom: string;
-                };
-            };
-        };
-    };
-};

package/tokens/skeleton.js

@@ -1,77 +0,0 @@
-import { hexToRgba as i } from "./utils.js";
-import { radius as e } from "./radius.js";
-import { colors as a } from "./colors.js";
-import { spacing as o } from "./spacing.js";
-import { SkeletonVariant as r } from "../types/skeleton.js";
-import { SizeVariant as t } from "../types/common.js";
-const s = {
-  default: {
-    display: "flex",
-    position: "relative",
-    backgroundColor: i(a.neutral["grey.30"], 0.7),
-    alignItems: "center",
-    justifyContent: "center",
-    width: "100%",
-    height: "auto",
-    overflow: "hidden",
-    "&:empty::before": {
-      content: '" "'
-    }
-  },
-  [r.Rounded]: {
-    borderRadius: e[t.Sm]
-  },
-  [r.Rectangular]: {
-    borderRadius: e.none
-  },
-  [r.Circular]: {
-    borderRadius: e.round
-  },
-  cards: {
-    search: {
-      default: {},
-      container: {
-        padding: o.md,
-        boxSizing: "border-box",
-        flexWrap: "nowrap",
-        flexDirection: "column"
-      },
-      header: {
-        width: "100%",
-        marginBottom: o.sm
-      },
-      row: {
-        width: "100%",
-        marginBottom: o.md,
-        gap: o.xs
-      },
-      columnImage: {
-        default: {
-          flex: 1
-        },
-        image: {
-          width: "85px",
-          height: "85px"
-        }
-      },
-      columnText: {
-        default: {
-          flex: 3
-        },
-        description: {
-          width: "100%",
-          height: o[t.Lg],
-          marginBottom: o.sm
-        },
-        price: {
-          width: "50%",
-          height: o[t.Lg],
-          marginBottom: o.sm
-        }
-      }
-    }
-  }
-};
-export {
-  s as skeleton
-};

package/tokens/slider.d.ts

@@ -1,58 +0,0 @@
-export declare const slider: {
-    default: {
-        position: string;
-        display: string;
-        inlineSize: string;
-        color: string;
-        cursor: string;
-        WebkitAppearance: string;
-        appearance: string;
-        padding: string;
-        backgroundColor: string;
-        outline: string;
-        '&[disabled]': {
-            opacity: string;
-            cursor: string;
-        };
-        '&::-webkit-slider-thumb': {
-            isolation: string;
-            appearance: string;
-            backgroundColor: string;
-            borderRadius: string;
-            blockSize: string;
-            inlineSize: string;
-            boxSizing: string;
-            border: string;
-            marginTop: string;
-        };
-        '&::-webkit-slider-runnable-track': {
-            blockSize: string;
-            borderRadius: string;
-            backgroundRepeat: string;
-            backgroundColor: string;
-            backgroundImage: string;
-            backgroundPositionX: string;
-            backgroundSize: string;
-        };
-        '&::-moz-range-thumb': {
-            isolation: string;
-            appearance: string;
-            backgroundColor: string;
-            borderRadius: string;
-            blockSize: string;
-            inlineSize: string;
-            boxSizing: string;
-            border: string;
-            marginTop: string;
-        };
-        '&::-moz-range-track': {
-            blockSize: string;
-            borderRadius: string;
-            backgroundRepeat: string;
-            backgroundColor: string;
-            backgroundImage: string;
-            backgroundPositionX: string;
-            backgroundSize: string;
-        };
-    };
-};

package/tokens/slider.js

@@ -1,45 +0,0 @@
-import { colors as r } from "./colors.js";
-import { cursors as e } from "./cursors.js";
-const o = {
-  isolation: "isolate",
-  appearance: "none",
-  backgroundColor: r.bg.fill.secondary.default,
-  borderRadius: "50%",
-  blockSize: "20px",
-  inlineSize: "20px",
-  boxSizing: "border-box",
-  border: "2px solid currentColor",
-  marginTop: "-6px"
-}, a = {
-  blockSize: "8px",
-  borderRadius: "inherit",
-  backgroundRepeat: "no-repeat",
-  backgroundColor: r.border.default,
-  backgroundImage: "linear-gradient(to right, transparent 0 100%), linear-gradient(to right, currentColor calc(100% * var(--gd-slider-fill-ratio)), transparent calc(100% * var(--gd-slider-fill-ratio)))",
-  backgroundPositionX: "calc((0.75rem - 8px) / 2), 0",
-  backgroundSize: "calc(100% - 0.75rem), auto"
-}, n = {
-  default: {
-    position: "relative",
-    display: "block",
-    inlineSize: "100%",
-    color: r.text.title,
-    cursor: e.pointer,
-    WebkitAppearance: "none",
-    appearance: "none",
-    padding: "0.4375rem 0",
-    backgroundColor: r.transparent,
-    outline: "none",
-    "&[disabled]": {
-      opacity: "50%",
-      cursor: e.default
-    },
-    "&::-webkit-slider-thumb": o,
-    "&::-webkit-slider-runnable-track": a,
-    "&::-moz-range-thumb": o,
-    "&::-moz-range-track": a
-  }
-};
-export {
-  n as slider
-};