gd-design-library 0.7.0 → 0.7.2

package/tokens/typography.js

@@ -1,134 +0,0 @@
-import { font as i } from "./font.js";
-import { spacing as n } from "./spacing.js";
-import { TypographyStyleVariant as o, TypographyVariant as e } from "../types/typography.js";
-import { SizeVariant as t } from "../types/common.js";
-const a = {
-  base: {
-    fontFamily: i.family
-  },
-  [e.Inherit]: {
-    fontSize: "inherit",
-    fontWeight: "inherit",
-    lineHeight: "inherit"
-  },
-  [e.H1]: {
-    fontSize: i.size[e.H1],
-    fontWeight: i.weight.normal,
-    lineHeight: i.line.height[e.H1],
-    marginTop: n[t.Xl],
-    marginBottom: n[t.Xl]
-  },
-  [e.H2]: {
-    fontSize: i.size[e.H2],
-    fontWeight: i.weight.normal,
-    lineHeight: i.line.height[e.H2],
-    marginTop: n[t.Lg],
-    marginBottom: n[t.Lg]
-  },
-  [e.H3]: {
-    fontSize: i.size[e.H3],
-    fontWeight: i.weight.normal,
-    lineHeight: i.line.height[e.H3],
-    marginTop: n[t.Md],
-    marginBottom: n[t.Md]
-  },
-  [e.H4]: {
-    fontSize: i.size[e.H4],
-    fontWeight: i.weight.normal,
-    lineHeight: i.line.height[e.H4],
-    marginTop: n[t.Md],
-    marginBottom: n[t.Md]
-  },
-  [e.H5]: {
-    fontSize: i.size[e.H5],
-    fontWeight: i.weight.normal,
-    lineHeight: i.line.height[e.H5],
-    marginTop: n[t.Sm],
-    marginBottom: n[t.Sm]
-  },
-  [e.H6]: {
-    fontSize: i.size[e.H6],
-    fontWeight: i.weight.normal,
-    lineHeight: i.line.height[e.H6],
-    marginTop: n[t.Sm],
-    marginBottom: n[t.Sm]
-  },
-  [e.Bold]: {
-    fontWeight: i.weight.bold
-  },
-  [e.Italic]: {
-    fontStyle: "italic"
-  },
-  [e.Body1]: {
-    fontSize: i.size[e.Body1],
-    fontWeight: i.weight.normal,
-    lineHeight: i.line.height[e.Body1]
-  },
-  [e.Body2]: {
-    fontSize: i.size[e.Body2],
-    fontWeight: i.weight.normal,
-    lineHeight: i.line.height[e.Body2]
-  },
-  [e.Caption]: {
-    fontSize: i.size[e.Caption],
-    fontWeight: i.weight.normal,
-    lineHeight: i.line.height[e.Caption]
-  },
-  [e.Display]: {
-    [t.Xs]: {
-      fontSize: i.size[t.Xs],
-      lineHeight: i.line.height[t.Xs]
-    },
-    [t.Sm]: {
-      fontSize: i.size[t.Sm],
-      lineHeight: i.line.height[t.Sm]
-    },
-    [t.Md]: {
-      fontSize: i.size[t.Md],
-      lineHeight: i.line.height[t.Md]
-    },
-    [t.Lg]: {
-      fontSize: i.size[t.Lg],
-      lineHeight: i.line.height[t.Lg]
-    },
-    [t.Xl]: {
-      fontSize: i.size[t.Xl],
-      lineHeight: i.line.height[t.Xl]
-    }
-  },
-  styleVariant: {
-    [o.Light]: {
-      fontWeight: i.weight.light
-    },
-    [o.Normal]: {
-      fontWeight: i.weight.normal
-    },
-    [o.Semibold]: {
-      fontWeight: i.weight.medium
-    },
-    [o.Bold]: {
-      fontWeight: i.weight.bold
-    },
-    [o.Italic]: {
-      fontStyle: "italic"
-    },
-    [o.Small]: {
-      fontSize: i.size[e.Body2]
-    },
-    [o.Uppercase]: {
-      textTransform: "uppercase"
-    },
-    [o.Lowercase]: {
-      textTransform: "lowercase"
-    },
-    [o.Underline]: {
-      textDecoration: "underline"
-    },
-    [o.Strike]: {
-      textDecoration: "line-through"
-    }
-  }
-};
-export {
-  a as typography
-};

package/tokens/utils.d.ts

@@ -1,47 +0,0 @@
-import { CSSObject } from '@emotion/react';
-import { BoxComputedStyles, BoxStyles, EnumOrPrimitive, InlineBoxStyles, TabIndex } from '../types';
-import { FocusStyles, SpacingKey, Unit } from './types/index.types';
-import { colors } from './colors';
-export declare const generateStateStyles: (color: keyof typeof colors) => {
-    focus: {
-        outline: string;
-    };
-    disabled: {
-        cursor: string;
-        border: number;
-    };
-};
-export declare const convertJsonToCssKeyframeCss: (keyframeJson?: Record<string, CSSObject>) => {
-    name: string;
-    styles: string;
-    anim: 1;
-    toString: () => string;
-} & string;
-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;
-export declare const getFocusStyles: ({ inset, borderRadius, border }: FocusStyles) => {
-    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;
-    };
-};
-export declare const getBoxStyles: (boxStyles?: BoxStyles<number>) => {
-    boxStyles: BoxComputedStyles<TabIndex>;
-    restProps: BoxComputedStyles<TabIndex>;
-};
-export declare const convertToInlineBoxStyles: (boxStyles?: InlineBoxStyles) => Record<string, string | number | never>;
-export declare const getImgSrc: (src: string, metaData?: string) => string;
-export declare const getMediaQuery: (breakpoints: {
-    min?: string;
-    max?: string;
-}, styles: CSSObject) => {
-    [x: string]: CSSObject;
-};

package/tokens/utils.js

@@ -1,88 +0,0 @@
-import { keyframes as u } from "@emotion/react";
-import { Unit as s } from "./types/index.types.js";
-import { BOX_STYLE_PROPS as f } from "./constants.js";
-import { colors as p } from "./colors.js";
-import { spacing as i } from "./spacing.js";
-import { borders as $ } from "./borders.js";
-import { SizeVariant as m } from "../types/common.js";
-const N = (t) => {
-  var r;
-  return {
-    // hover: { background: get(colors, `types.${color}.dark`, colors?.hover) },
-    // active: { background: get(colors, `types.${color}.darker`, colors?.active) },
-    // todo: rework border in object form
-    focus: {
-      outline: `${l(2, s.Rem)} solid ${(r = p) == null ? void 0 : r[t]}`
-    },
-    disabled: {
-      // background: colors?.disabled,
-      // color: colors?.disabledText,
-      cursor: "not-allowed",
-      border: 0
-    }
-  };
-}, B = (t = {}) => {
-  const r = Object.entries(t).reduce((e, o) => {
-    const [n, a] = o;
-    for (const c in a)
-      e += `${n} { ${c}: ${a[c]} } `;
-    return e;
-  }, "");
-  return u`${r}`;
-}, l = (t, r = s.Px) => {
-  const e = typeof t == "number" ? t : parseFloat(t);
-  switch (r) {
-    case s.Rem:
-      return `${e / 16}${r}`;
-    // Assuming 1rem = 16px
-    case s.Percents:
-      return `${e / 100}${r}`;
-    default:
-      return `${e}${r}`;
-  }
-}, O = (t = m.Sm, r = s.Px) => {
-  const e = typeof t == "number" ? parseFloat(i[m.Xs]) * t : i[t];
-  return l(e, r);
-}, R = (t, r = 1) => {
-  let e = 0, o = 0, n = 0;
-  return t.length === 4 ? (e = parseInt(t[1] + t[1], 16), o = parseInt(t[2] + t[2], 16), n = parseInt(t[3] + t[3], 16)) : t.length === 7 && (e = parseInt(t[1] + t[2], 16), o = parseInt(t[3] + t[4], 16), n = parseInt(t[5] + t[6], 16)), `rgba(${isNaN(e) ? 0 : e}, ${isNaN(o) ? 0 : o}, ${isNaN(n) ? 0 : n}, ${r})`;
-}, T = ({
-  inset: t,
-  borderRadius: r,
-  border: e = $.focus
-}) => ({
-  position: "relative",
-  "&::after": {
-    content: '""',
-    position: "absolute",
-    top: t,
-    right: t,
-    bottom: t,
-    left: t,
-    border: e,
-    borderRadius: r
-  }
-}), j = (t = {}) => Object.entries(t).reduce((r, [e, o]) => {
-  const n = e.replace("$", ""), a = f.includes(n);
-  return typeof o < "u" && (r[a ? "boxStyles" : "restProps"][n] = o), r;
-}, {
-  boxStyles: {},
-  restProps: {}
-}), w = (t = {}) => Object.entries(t).reduce((r, [e, o]) => {
-  const n = f.includes(e) ? `$${e}` : e;
-  return o && (r[n] = o), r;
-}, {}), C = (t, r = "data:image/svg+xml") => `url("${r},${encodeURIComponent(t)}")`, F = (t, r) => !t.min && !t.max ? {} : {
-  [`@media ${[t.min && `(min-width: ${t.min})`, t.max && `(max-width: ${t.max})`].filter(Boolean).join(" and ")}`]: r
-};
-export {
-  B as convertJsonToCssKeyframeCss,
-  w as convertToInlineBoxStyles,
-  l as convertToUnit,
-  N as generateStateStyles,
-  j as getBoxStyles,
-  T as getFocusStyles,
-  C as getImgSrc,
-  F as getMediaQuery,
-  O as getSpacing,
-  R as hexToRgba
-};

package/tokens/values.d.ts

@@ -1,65 +0,0 @@
-export declare const values: {
-    borderThin: string;
-    borderMedium: string;
-    borderThick: string;
-    borderNone: number;
-    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;
-        };
-        button: {
-            default: string;
-        };
-        scroll: {
-            scrollbar: string;
-            thumb: string;
-        };
-        rating: {
-            label: string;
-        };
-        progressbar: {
-            styledDeterminateFill: string;
-        };
-        accordion: {
-            toggle: string;
-            icon: string;
-        };
-        select: {
-            arrowIconWrapper: string;
-        };
-        tabs: {
-            label: string;
-        };
-    };
-    transform: {
-        rotateUp: string;
-        rotateReset: string;
-    };
-    separator: {
-        thickness: {
-            xs: string;
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-            xxl: string;
-        };
-    };
-};

package/tokens/values.js

@@ -1,76 +0,0 @@
-import { convertToUnit as r } from "./utils.js";
-import { radius as s } from "./radius.js";
-import { borders as t } from "./borders.js";
-import { Unit as o } from "./types/index.types.js";
-import { Z_INDEX as a } from "../constants/positioning.js";
-import { SizeVariant as e } from "../types/common.js";
-const c = {
-  // Border tokens
-  borderThin: r(1, o.Rem),
-  borderMedium: r(2, o.Rem),
-  borderThick: r(4, o.Rem),
-  borderNone: t.none,
-  border: {
-    radius: {
-      none: s.none
-    }
-  },
-  // Layout tokens
-  screenSmall: "480px",
-  screenMedium: "768px",
-  screenLarge: "1024px",
-  screenXLarge: "1280px",
-  responsiveSmall: "20%",
-  responsiveMedium: "40%",
-  responsiveLarge: "60%",
-  responsiveXLarge: "80%",
-  zIndex: {
-    snackbar: a.HIGH
-  },
-  transitions: {
-    stepper: {
-      separator: "border 0.2s ease-in-out",
-      stepIcon: "background 0.2s ease-in-out, border 0.2s ease-in-out"
-    },
-    button: {
-      default: "background 0.2s ease-in-out, border 0.2s ease-in-out"
-    },
-    scroll: {
-      scrollbar: "opacity 0.2s ease-in-out",
-      thumb: "top 0.1s cubic-bezier(0.4,0,0.2,1)"
-    },
-    rating: {
-      label: "transform 0.2s ease-in-out"
-    },
-    progressbar: {
-      styledDeterminateFill: "width 300ms ease"
-    },
-    accordion: {
-      toggle: "0.15s ease-out",
-      icon: "transform 0.3s ease"
-    },
-    select: {
-      arrowIconWrapper: "transform 0.3s ease"
-    },
-    tabs: {
-      label: "border 0.2s ease-in"
-    }
-  },
-  transform: {
-    rotateUp: "rotate(180deg)",
-    rotateReset: "rotate(0deg)"
-  },
-  separator: {
-    thickness: {
-      [e.Xs]: "0.5px",
-      [e.Sm]: "1px",
-      [e.Md]: "2px",
-      [e.Lg]: "3px",
-      [e.Xl]: "4px",
-      [e.Xxl]: "5px"
-    }
-  }
-};
-export {
-  c as values
-};

package/tokens/wrapper.d.ts

@@ -1,29 +0,0 @@
-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/tokens/wrapper.js

@@ -1,34 +0,0 @@
-import { WrapperVariant as e } from "../types/wrapper.js";
-import { Z_INDEX as t } from "../constants/positioning.js";
-const l = {
-  default: {
-    justifyContent: "center",
-    alignItems: "center",
-    backdropFilter: "blur(2px)",
-    backgroundColor: "rgba(0, 0, 0, 0.1)"
-  },
-  [e.Inline]: {
-    display: "inline-flex"
-  },
-  [e.Section]: {
-    display: "flex",
-    top: 0,
-    left: 0,
-    width: "100%",
-    height: "100%",
-    position: "absolute",
-    zIndex: t.HIGH
-  },
-  [e.FullPage]: {
-    display: "flex",
-    position: "fixed",
-    top: 0,
-    left: 0,
-    width: "100vw",
-    height: "100vh",
-    zIndex: t.TOP
-  }
-};
-export {
-  l as wrapper
-};

package/types/accesability.d.ts

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

package/types/accesability.js

@@ -1,4 +0,0 @@
-var r = /* @__PURE__ */ ((i) => (i[i.Default = 0] = "Default", i[i.Disabled = -1] = "Disabled", i[i.HighPriority = 1] = "HighPriority", i))(r || {});
-export {
-  r as TabIndex
-};

package/types/button.d.ts

@@ -1,28 +0,0 @@
-export declare enum ButtonVariant {
-    Contained = "contained",
-    Outlined = "outlined",
-    Text = "text",
-    Inherit = "inherit"
-}
-export declare enum ButtonColorVariant {
-    Primary = "primary",
-    Secondary = "secondary"
-}
-export declare enum ButtonTypes {
-    Button = "button",
-    Submit = "submit",
-    Reset = "reset"
-}
-export declare enum ButtonAriaLabel {
-    Button = "Button",
-    Submit = "Submit",
-    Cancel = "Cancel",
-    Close = "Close"
-}
-export declare enum ButtonRole {
-    Button = "button",
-    Link = "link",
-    Checkbox = "checkbox",
-    Switch = "switch",
-    Tab = "tab"
-}

package/types/button.js

@@ -1,7 +0,0 @@
-var e = /* @__PURE__ */ ((r) => (r.Contained = "contained", r.Outlined = "outlined", r.Text = "text", r.Inherit = "inherit", r))(e || {}), i = /* @__PURE__ */ ((r) => (r.Primary = "primary", r.Secondary = "secondary", r))(i || {}), b = /* @__PURE__ */ ((r) => (r.Button = "button", r.Submit = "submit", r.Reset = "reset", r))(b || {}), c = /* @__PURE__ */ ((r) => (r.Button = "button", r.Link = "link", r.Checkbox = "checkbox", r.Switch = "switch", r.Tab = "tab", r))(c || {});
-export {
-  i as ButtonColorVariant,
-  c as ButtonRole,
-  b as ButtonTypes,
-  e as ButtonVariant
-};

package/types/card.d.ts

@@ -1,8 +0,0 @@
-export declare enum CardVariant {
-    Vertical = "Vertical",
-    Horizontal = "Horizontal"
-}
-export declare enum CardSizeVariant {
-    Default = "default",
-    Sm = "sm"
-}

package/types/card.js

@@ -1,5 +0,0 @@
-var t = /* @__PURE__ */ ((r) => (r.Vertical = "Vertical", r.Horizontal = "Horizontal", r))(t || {}), e = /* @__PURE__ */ ((r) => (r.Default = "default", r.Sm = "sm", r))(e || {});
-export {
-  e as CardSizeVariant,
-  t as CardVariant
-};

package/types/carousel.d.ts

@@ -1,12 +0,0 @@
-export declare enum CarouselVariantTypes {
-    Cards = "cards",
-    Single = "single"
-}
-export declare enum LayoutType {
-    Horizontal = "horizontal",
-    Vertical = "vertical"
-}
-export declare enum ThumbsPosition {
-    Start = "start",
-    End = "end"
-}

package/types/carousel.js

@@ -1,6 +0,0 @@
-var t = /* @__PURE__ */ ((r) => (r.Cards = "cards", r.Single = "single", r))(t || {}), a = /* @__PURE__ */ ((r) => (r.Horizontal = "horizontal", r.Vertical = "vertical", r))(a || {}), n = /* @__PURE__ */ ((r) => (r.Start = "start", r.End = "end", r))(n || {});
-export {
-  t as CarouselVariantTypes,
-  a as LayoutType,
-  n as ThumbsPosition
-};

package/types/chat.d.ts

@@ -1,5 +0,0 @@
-export declare enum ChatLayoutVariant {
-    Auto = "auto",
-    Desktop = "desktop",
-    Drawer = "drawer"
-}

package/types/chat.js

@@ -1,4 +0,0 @@
-var r = /* @__PURE__ */ ((e) => (e.Auto = "auto", e.Desktop = "desktop", e.Drawer = "drawer", e))(r || {});
-export {
-  r as ChatLayoutVariant
-};

package/types/common.d.ts

@@ -1,12 +0,0 @@
-export declare enum SizeVariant {
-    Xs = "xs",
-    Sm = "sm",
-    Md = "md",
-    Lg = "lg",
-    Xl = "xl",
-    Xxl = "xxl"
-}
-export declare enum Orientation {
-    Vertical = "vertical",
-    Horizontal = "horizontal"
-}

package/types/common.js

@@ -1,5 +0,0 @@
-var x = /* @__PURE__ */ ((l) => (l.Xs = "xs", l.Sm = "sm", l.Md = "md", l.Lg = "lg", l.Xl = "xl", l.Xxl = "xxl", l))(x || {}), r = /* @__PURE__ */ ((l) => (l.Vertical = "vertical", l.Horizontal = "horizontal", l))(r || {});
-export {
-  r as Orientation,
-  x as SizeVariant
-};

package/types/cursors.d.ts

@@ -1,14 +0,0 @@
-export declare enum Cursors {
-    Default = "default",
-    Pointer = "pointer",
-    Text = "text",
-    Move = "move",
-    Wait = "wait",
-    Crosshair = "crosshair",
-    NotAllowed = "not-allowed",
-    Help = "help",
-    ZoomIn = "zoom-in",
-    ZoomOut = "zoom-out",
-    Grab = "grab",
-    Grabbing = "grabbing"
-}

package/types/cursors.js

@@ -1,4 +0,0 @@
-var e = /* @__PURE__ */ ((t) => (t.Default = "default", t.Pointer = "pointer", t.Text = "text", t.Move = "move", t.Wait = "wait", t.Crosshair = "crosshair", t.NotAllowed = "not-allowed", t.Help = "help", t.ZoomIn = "zoom-in", t.ZoomOut = "zoom-out", t.Grab = "grab", t.Grabbing = "grabbing", t))(e || {});
-export {
-  e as Cursors
-};

package/types/index.d.ts

@@ -1,21 +0,0 @@
-export * from './keys';
-export * from './accesability';
-export * from './styles';
-export * from './misc';
-export * from './common';
-export * from './card';
-export * from './typography';
-export * from './layout';
-export * from './input';
-export * from './button';
-export * from './label';
-export * from './cursors';
-export * from './stepper';
-export * from './wrapper';
-export * from './link';
-export * from './list';
-export * from './skeleton';
-export * from './snackbar';
-export * from './chat';
-export * from './separator';
-export * from './carousel';

package/types/input.d.ts

@@ -1,30 +0,0 @@
-export declare enum InputVariantType {
-    Text = "text",
-    Password = "password",
-    Email = "email",
-    Search = "search",
-    Url = "url",
-    Tel = "tel",
-    Date = "date",
-    Time = "time",
-    Month = "month",
-    Week = "week",
-    Color = "color",
-    Range = "range",
-    Number = "number",
-    Radio = "radio",
-    Checkbox = "checkbox"
-}
-export declare enum InputColorVariant {
-    Primary = "primary",
-    Success = "success",
-    Warning = "warning",
-    Error = "error"
-}
-export declare enum InputRole {
-    Textbox = "textbox",
-    Checkbox = "checkbox",
-    Radio = "radio",
-    Radiogroup = "radiogroup",
-    Combobox = "combobox"
-}

package/types/input.js

@@ -1,6 +0,0 @@
-var r = /* @__PURE__ */ ((o) => (o.Text = "text", o.Password = "password", o.Email = "email", o.Search = "search", o.Url = "url", o.Tel = "tel", o.Date = "date", o.Time = "time", o.Month = "month", o.Week = "week", o.Color = "color", o.Range = "range", o.Number = "number", o.Radio = "radio", o.Checkbox = "checkbox", o))(r || {}), c = /* @__PURE__ */ ((o) => (o.Primary = "primary", o.Success = "success", o.Warning = "warning", o.Error = "error", o))(c || {}), e = /* @__PURE__ */ ((o) => (o.Textbox = "textbox", o.Checkbox = "checkbox", o.Radio = "radio", o.Radiogroup = "radiogroup", o.Combobox = "combobox", o))(e || {});
-export {
-  c as InputColorVariant,
-  e as InputRole,
-  r as InputVariantType
-};