gd-design-library 0.7.0 → 0.7.2

package/tokens/index.js

@@ -1,145 +0,0 @@
-import { separator as r } from "./separator.js";
-import { draganddrop as o } from "./draganddrop.js";
-import { avatar as m } from "./avatar.js";
-import { chatbubble as t } from "./chatbubble.js";
-import { radiogroup as i } from "./radiogroup.js";
-import { draganddropfiles as p } from "./draganddropfiles.js";
-import { inputfile as f } from "./inputfile.js";
-import { searchModal as a } from "./searchModal.js";
-import { carousel as e } from "./carousel.js";
-import { progressbar as s } from "./progressbar.js";
-import { card as n } from "./card.js";
-import { counter as l } from "./counter.js";
-import { font as c } from "./font.js";
-import { colors as d } from "./colors.js";
-import { breakpoints as b } from "./breakpoints.js";
-import { spacing as u } from "./spacing.js";
-import { radius as g } from "./radius.js";
-import { typography as h } from "./typography.js";
-import { borders as k } from "./borders.js";
-import { button as T } from "./button.js";
-import { input as w } from "./input.js";
-import { label as x } from "./label.js";
-import { textarea as A } from "./textarea.js";
-import { link as y } from "./link.js";
-import { form as D } from "./form.js";
-import { wrapper as _ } from "./wrapper.js";
-import { loader as v } from "./loader.js";
-import { switchToggle as B } from "./toggle.js";
-import { skeleton as C } from "./skeleton.js";
-import { animations as E } from "./animations.js";
-import { snackbar as F } from "./snackbar.js";
-import { DEFAULT_SNACKBAR_WIDTH as jr } from "./snackbar.js";
-import { list as H } from "./list.js";
-import { select as I } from "./select.js";
-import { search as K } from "./search.js";
-import { breadcrumbs as L } from "./breadcrumbs.js";
-import { icon as M } from "./icon.js";
-import { reset as N } from "./reset.js";
-import { tabs as R } from "./tabs.js";
-import { stepper as S } from "./stepper.js";
-import { rating as U } from "./rating.js";
-import { header as W } from "./header.js";
-import { switchToken as j } from "./switch.js";
-import { chat as q } from "./chat.js";
-import { slider as z } from "./slider.js";
-import { menu as G } from "./menu.js";
-import { scroll as J } from "./scroll.js";
-const Sr = {
-  breakpoints: b,
-  separator: r,
-  draganddrop: o,
-  avatar: m,
-  chatbubble: t,
-  radiogroup: i,
-  draganddropfiles: p,
-  inputfile: f,
-  carousel: e,
-  searchModal: a,
-  progressbar: s,
-  card: n,
-  counter: l,
-  font: c,
-  colors: d,
-  spacing: u,
-  borders: k,
-  scroll: J,
-  radius: g,
-  button: T,
-  input: w,
-  label: x,
-  link: y,
-  form: D,
-  typography: h,
-  textarea: A,
-  wrapper: _,
-  loader: v,
-  switchToggle: B,
-  skeleton: C,
-  animations: E,
-  snackbar: F,
-  list: H,
-  select: I,
-  search: K,
-  breadcrumbs: L,
-  icon: M,
-  reset: N,
-  tabs: R,
-  stepper: S,
-  rating: U,
-  header: W,
-  switchToken: j,
-  chat: q,
-  slider: z,
-  menu: G
-};
-export {
-  jr as DEFAULT_SNACKBAR_WIDTH,
-  E as animations,
-  m as avatar,
-  k as borders,
-  L as breadcrumbs,
-  b as breakpoints,
-  T as button,
-  n as card,
-  e as carousel,
-  q as chat,
-  t as chatbubble,
-  d as colors,
-  l as counter,
-  Sr as defaultTokens,
-  o as draganddrop,
-  p as draganddropfiles,
-  c as font,
-  D as form,
-  W as header,
-  M as icon,
-  w as input,
-  f as inputfile,
-  x as label,
-  y as link,
-  H as list,
-  v as loader,
-  G as menu,
-  s as progressbar,
-  i as radiogroup,
-  g as radius,
-  U as rating,
-  N as reset,
-  J as scroll,
-  K as search,
-  a as searchModal,
-  I as select,
-  r as separator,
-  C as skeleton,
-  z as slider,
-  F as snackbar,
-  u as spacing,
-  S as stepper,
-  B as switchToggle,
-  j as switchToken,
-  R as tabs,
-  A as textarea,
-  h as typography,
-  _ as wrapper
-};

package/tokens/inlineNotification.d.ts

@@ -1,62 +0,0 @@
-export declare const inlineNotification: {
-    default: {
-        wrapper: {
-            display: string;
-            alignItems: string;
-            gap: string;
-            width: string;
-        };
-        content: {
-            flex: number;
-            fontFamily: string;
-            fontWeight: number;
-            fontSize: string;
-            lineHeight: string;
-        };
-    };
-    success: {
-        wrapper: {};
-        content: {};
-        icon: {
-            name: string;
-            fill: string;
-        };
-    };
-    warning: {
-        wrapper: {};
-        content: {};
-        icon: {
-            name: string;
-            fill: string;
-        };
-    };
-    error: {
-        wrapper: {};
-        content: {};
-        icon: {
-            name: string;
-            fill: string;
-        };
-    };
-    info: {
-        wrapper: {};
-        content: {};
-        icon: {
-            name: string;
-            fill: string;
-        };
-    };
-    basic: {
-        wrapper: {
-            border: string;
-            boxShadow: string;
-            padding: string;
-        };
-        content: {
-            fontWeight: number;
-        };
-        icon: {
-            name: string;
-        };
-    };
-};

package/tokens/inlineNotification.js

@@ -1,75 +0,0 @@
-import { spacing as i } from "./spacing.js";
-import { shadows as e } from "./shadow.js";
-import { borders as r } from "./borders.js";
-import { values as t } from "./values.js";
-import { colors as n } from "./colors.js";
-import { flexAlignItems as a, display as l } from "./display.js";
-import { font as o } from "./font.js";
-const w = {
-  default: {
-    wrapper: {
-      display: l.inlineFlex,
-      alignItems: a.center,
-      gap: i.xs,
-      width: "max-content"
-    },
-    content: {
-      flex: 1,
-      fontFamily: o.family,
-      fontWeight: o.weight.medium,
-      fontSize: o.size.small,
-      lineHeight: o.line.height.small
-    }
-  },
-  success: {
-    wrapper: {},
-    content: {},
-    icon: {
-      name: "success",
-      fill: n.icon.success
-    }
-  },
-  warning: {
-    wrapper: {},
-    content: {},
-    icon: {
-      name: "warning",
-      fill: n.icon.warning
-    }
-  },
-  error: {
-    wrapper: {},
-    content: {},
-    icon: {
-      name: "error",
-      fill: n.icon.error
-    }
-  },
-  info: {
-    wrapper: {},
-    content: {},
-    icon: {
-      name: "info",
-      fill: n.icon.info
-    }
-  },
-  basic: {
-    wrapper: {
-      border: r.generic({
-        width: t.borderThin,
-        color: n.border.default
-      }),
-      boxShadow: e.inlineNotification.default,
-      padding: `${i.sm} ${i.md} ${i.sm} ${i.md}`
-    },
-    content: {
-      fontWeight: o.weight.normal
-    },
-    icon: {
-      name: ""
-    }
-  }
-};
-export {
-  w as inlineNotification
-};

package/tokens/input.d.ts

@@ -1,212 +0,0 @@
-import { FlexDirection } from '../types';
-export declare const input: {
-    wrapper: {
-        default: {
-            boxSizing: string;
-            display: string;
-            alignSelf: string;
-            alignItems: string;
-            borderRadius: number;
-            position: string;
-        };
-        withGap: {
-            flexDirection: FlexDirection;
-            alignItems: string;
-            gap: string;
-        };
-    };
-    input: {
-        default: {
-            borderRadius: number;
-            padding: string;
-            outline: string;
-            position: string;
-            cursor: string;
-            border: number;
-            backgroundColor: string;
-            '&::placeholder': {
-                color: string;
-            };
-            '&:not([type="radio"], [type="checkbox"], [type="range"])': {
-                height: string;
-                width: string;
-                zIndex: number;
-            };
-            '&[type="number"]': {
-                appearance: string;
-                '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
-                    appearance: string;
-                    margin: number;
-                };
-            };
-            '&[readonly], &:disabled': {
-                color: string;
-                cursor: string;
-            };
-            '&[type="checkbox"]': {
-                cursor: string;
-                appearance: string;
-                height: string;
-                width: string;
-                backgroundColor: string;
-                border: string;
-                backgroundImage: string;
-                '&:focus-visible': {
-                    position: string;
-                    '&::after': {
-                        content: string;
-                        position: string;
-                        top: `${number}px` | `${number}rem` | `${number}%` | `${number}em`;
-                        right: `${number}px` | `${number}rem` | `${number}%` | `${number}em`;
-                        bottom: `${number}px` | `${number}rem` | `${number}%` | `${number}em`;
-                        left: `${number}px` | `${number}rem` | `${number}%` | `${number}em`;
-                        border: string;
-                        borderRadius: `${number}px` | `${number}rem` | `${number}%` | `${number}em` | undefined;
-                    };
-                };
-            };
-            '&[type="checkbox"]:not(:checked)': {
-                '&[readonly], &:disabled': {
-                    opacity: number;
-                };
-            };
-            '&[type="checkbox"]:checked': {
-                backgroundRepeat: string;
-                backgroundPosition: string;
-                backgroundSize: string;
-                backgroundColor: string;
-                border: string;
-                backgroundImage: string;
-                '&[readonly], &:disabled': {
-                    backgroundImage: string;
-                };
-            };
-            '&[type="radio"]': {
-                cursor: string;
-                appearance: string;
-                height: string;
-                width: string;
-                border: string;
-                backgroundImage: string;
-                '&:focus-visible': {
-                    position: string;
-                    '&::after': {
-                        content: string;
-                        position: string;
-                        top: `${number}px` | `${number}rem` | `${number}%` | `${number}em`;
-                        right: `${number}px` | `${number}rem` | `${number}%` | `${number}em`;
-                        bottom: `${number}px` | `${number}rem` | `${number}%` | `${number}em`;
-                        left: `${number}px` | `${number}rem` | `${number}%` | `${number}em`;
-                        border: string;
-                        borderRadius: `${number}px` | `${number}rem` | `${number}%` | `${number}em` | undefined;
-                    };
-                };
-                '&[readonly], &:disabled': {
-                    opacity: number;
-                };
-            };
-            '&[type="radio"]:checked': {
-                backgroundImage: string;
-            };
-        };
-        defaultInteraction: {
-            "&:focus-visible ~ .Input__outline": {
-                position: string;
-                top: number;
-                left: number;
-                bottom: number;
-                width: string;
-                outline: string;
-                outlineOffset: string;
-            };
-        };
-        mouseInteraction: {};
-        primary: {
-            "& + .Input__border": {
-                position: string;
-                top: number;
-                left: number;
-                width: string;
-                height: string;
-                border: string;
-            };
-        };
-        success: {
-            "& + .Input__border": {
-                position: string;
-                top: number;
-                left: number;
-                width: string;
-                height: string;
-                border: string;
-            };
-        };
-        warning: {
-            "& + .Input__border": {
-                position: string;
-                top: number;
-                left: number;
-                width: string;
-                height: string;
-                border: string;
-            };
-        };
-        error: {
-            "& + .Input__border": {
-                position: string;
-                top: number;
-                left: number;
-                width: string;
-                height: string;
-                border: string;
-            };
-        };
-    };
-    helper: {
-        default: {
-            sm: {
-                fontSize: string;
-                fontWeight: number;
-                lineHeight: string;
-            };
-            md: {
-                fontSize: string;
-                fontWeight: number;
-                lineHeight: string;
-                color: string;
-            };
-        };
-        primary: {
-            sm: {
-                color: string;
-            };
-            md: {};
-        };
-        success: {
-            sm: {
-                color: string;
-            };
-            md: {};
-        };
-        warning: {
-            sm: {
-                color: string;
-            };
-            md: {};
-        };
-        error: {
-            sm: {
-                color: string;
-            };
-            md: {};
-        };
-    };
-    adornment: {
-        default: {
-            display: string;
-            alignItems: string;
-            position: string;
-            zIndex: number;
-        };
-    };
-};

package/tokens/input.js

@@ -1,191 +0,0 @@
-import u from "../assets/svg/checkbox_border.svg.js";
-import b from "../assets/svg/checkbox_bg_checked.svg.js";
-import g from "../assets/svg/checkbox_disabled_bg_checked.svg.js";
-import f from "../assets/svg/radio_bg.svg.js";
-import x from "../assets/svg/radio_bg_checked.svg.js";
-import { borders as t } from "./borders.js";
-import { typography as a } from "./typography.js";
-import { flexAlignItems as d, display as h } from "./display.js";
-import { spacing as p } from "./spacing.js";
-import { colors as e } from "./colors.js";
-import { cursors as i } from "./cursors.js";
-import { values as y } from "./values.js";
-import { getImgSrc as r, getFocusStyles as c } from "./utils.js";
-import { InputColorVariant as o } from "../types/input.js";
-import { Z_INDEX as s } from "../constants/positioning.js";
-import { FlexDirection as k } from "../types/layout.js";
-import { TypographyVariant as l } from "../types/typography.js";
-const n = (m) => ({
-  position: "absolute",
-  top: 0,
-  left: 0,
-  width: "100%",
-  height: "100%",
-  border: t.generic({
-    width: y.borderThin,
-    color: m
-  })
-}), G = {
-  wrapper: {
-    default: {
-      boxSizing: "border-box",
-      display: "inline-flex",
-      alignSelf: "stretch",
-      alignItems: "center",
-      borderRadius: t.none,
-      position: "relative"
-    },
-    withGap: {
-      flexDirection: k.Column,
-      alignItems: d.start,
-      gap: p.xs
-    }
-  },
-  input: {
-    default: {
-      borderRadius: t.none,
-      padding: p.sm,
-      outline: "none",
-      position: "relative",
-      cursor: i.text,
-      border: t.none,
-      backgroundColor: "transparent",
-      "&::placeholder": {
-        color: e.text.disabled
-      },
-      '&:not([type="radio"], [type="checkbox"], [type="range"])': {
-        height: "40px",
-        width: "100%",
-        zIndex: s.FIRST
-      },
-      '&[type="number"]': {
-        appearance: "textfield",
-        "&::-webkit-outer-spin-button, &::-webkit-inner-spin-button": {
-          appearance: "none",
-          margin: 0
-        }
-      },
-      "&[readonly], &:disabled": {
-        color: e.text.disabled,
-        cursor: i.default
-      },
-      // CHECKBOX
-      '&[type="checkbox"]': {
-        cursor: i.pointer,
-        appearance: "none",
-        height: "18px",
-        width: "18px",
-        backgroundColor: "transparent",
-        border: "none",
-        backgroundImage: r(u),
-        "&:focus-visible": c({
-          inset: "-4px",
-          borderRadius: "3px"
-        })
-      },
-      '&[type="checkbox"]:not(:checked)': {
-        "&[readonly], &:disabled": {
-          opacity: 0.5
-        }
-      },
-      '&[type="checkbox"]:checked': {
-        backgroundRepeat: "no-repeat",
-        backgroundPosition: "center",
-        backgroundSize: "18px",
-        backgroundColor: e.neutral.white,
-        border: "none",
-        backgroundImage: r(b),
-        "&[readonly], &:disabled": {
-          backgroundImage: r(g)
-        }
-      },
-      // RADIO
-      '&[type="radio"]': {
-        cursor: i.pointer,
-        appearance: "none",
-        height: "20px",
-        width: "20px",
-        border: "none",
-        backgroundImage: r(f),
-        "&:focus-visible": c({
-          inset: "-4px",
-          borderRadius: "50%"
-        }),
-        "&[readonly], &:disabled": {
-          opacity: 0.5
-        }
-      },
-      '&[type="radio"]:checked': {
-        backgroundImage: r(x)
-      }
-    },
-    defaultInteraction: {
-      "&:focus-visible ~ .Input__outline": {
-        position: "absolute",
-        top: 0,
-        left: 0,
-        bottom: 0,
-        width: "100%",
-        outline: t.focus,
-        outlineOffset: "3px"
-      }
-    },
-    mouseInteraction: {},
-    [o.Primary]: {
-      "& + .Input__border": n(e.border.default)
-    },
-    [o.Success]: {
-      "& + .Input__border": n(e.border.success)
-    },
-    [o.Warning]: {
-      "& + .Input__border": n(e.primary.default)
-    },
-    [o.Error]: {
-      "& + .Input__border": n(e.border.error)
-    }
-  },
-  helper: {
-    default: {
-      sm: a[l.Caption],
-      md: {
-        color: e.text.disabled,
-        ...a[l.Body2]
-      }
-    },
-    [o.Primary]: {
-      sm: {
-        color: e.text.caption
-      },
-      md: {}
-    },
-    [o.Success]: {
-      sm: {
-        color: e.text.success
-      },
-      md: {}
-    },
-    [o.Warning]: {
-      sm: {
-        color: e.text.caption
-      },
-      md: {}
-    },
-    [o.Error]: {
-      sm: {
-        color: e.text.error
-      },
-      md: {}
-    }
-  },
-  adornment: {
-    default: {
-      display: h.flex,
-      alignItems: d.center,
-      position: "relative",
-      zIndex: s.FIRST
-    }
-  }
-};
-export {
-  G as input
-};

package/tokens/inputfile.d.ts

@@ -1,14 +0,0 @@
-export declare const inputfile: {
-    default: {
-        overflow: string;
-        position: string;
-    };
-    input: {
-        opacity: number;
-        inset: number;
-        width: string;
-        height: string;
-        position: string;
-        zIndex: number;
-    };
-};