gd-design-library 1.0.2 → 1.2.0

package/tokens/typography.js

@@ -1,150 +1,148 @@
-import { TypographyStyleVariant as o, TypographyVariant as i } from "../types/typography.js";
-import { get as e } from "../utils/helpers.js";
-import { SizeVariant as n } from "../types/common.js";
-const m = {
+import { get as t } from "../utils/helpers.js";
+const n = {
   base: {
-    fontFamily: (t) => e(t, "font.family", "theme.font.family")
+    fontFamily: (e) => t(e, "font.family", "theme.font.family")
   },
-  [i.Inherit]: {
+  span: {
     fontSize: "inherit",
     fontWeight: "inherit",
     lineHeight: "inherit"
   },
-  [i.H1]: {
-    fontSize: (t) => e(t, `font.size.${i.H1}`, `font.size.${i.H1}`),
-    fontWeight: (t) => e(t, "font.weight.normal", "theme.font.weight.normal"),
-    lineHeight: (t) => e(t, `font.line.height.${i.H1}`, `font.line.height.${i.H1}`),
-    marginTop: (t) => e(t, "spacing.xl", "theme.spacing.xl"),
-    marginBottom: (t) => e(t, "spacing.xl", "theme.spacing.xl")
-  },
-  [i.H2]: {
-    fontSize: (t) => e(t, `font.size.${i.H2}`, `font.size.${i.H2}`),
-    fontWeight: (t) => e(t, "font.weight.normal", "theme.font.weight.normal"),
-    lineHeight: (t) => e(t, `font.line.height.${i.H2}`, `font.line.height.${i.H2}`),
-    marginTop: (t) => e(t, "spacing.lg", "theme.spacing.lg"),
-    marginBottom: (t) => e(t, "spacing.lg", "theme.spacing.lg")
-  },
-  [i.H3]: {
-    fontSize: (t) => e(t, `font.size.${i.H3}`, `font.size.${i.H3}`),
-    fontWeight: (t) => e(t, "font.weight.normal", "theme.font.weight.normal"),
-    lineHeight: (t) => e(t, `font.line.height.${i.H3}`, `font.line.height.${i.H3}`),
-    marginTop: (t) => e(t, "spacing.md", "theme.spacing.md"),
-    marginBottom: (t) => e(t, "spacing.md", "theme.spacing.md")
-  },
-  [i.H4]: {
-    fontSize: (t) => e(t, `font.size.${i.H4}`, `font.size.${i.H4}`),
-    fontWeight: (t) => e(t, "font.weight.normal", "theme.font.weight.normal"),
-    lineHeight: (t) => e(t, `font.line.height.${i.H4}`, `font.line.height.${i.H4}`),
-    marginTop: (t) => e(t, "spacing.md", "theme.spacing.md"),
-    marginBottom: (t) => e(t, "spacing.md", "theme.spacing.md")
-  },
-  [i.H5]: {
-    fontSize: (t) => e(t, `font.size.${i.H5}`, `font.size.${i.H5}`),
-    fontWeight: (t) => e(t, "font.weight.normal", "theme.font.weight.normal"),
-    lineHeight: (t) => e(t, `font.line.height.${i.H5}`, `font.line.height.${i.H5}`),
-    marginTop: (t) => e(t, "spacing.sm", "theme.spacing.sm"),
-    marginBottom: (t) => e(t, "spacing.sm", "theme.spacing.sm")
-  },
-  [i.H6]: {
-    fontSize: (t) => e(t, `font.size.${i.H6}`, `font.size.${i.H6}`),
-    fontWeight: (t) => e(t, "font.weight.normal", "theme.font.weight.normal"),
-    lineHeight: (t) => e(t, `font.line.height.${i.H6}`, `font.line.height.${i.H6}`),
-    marginTop: (t) => e(t, "spacing.sm", "theme.spacing.sm"),
-    marginBottom: (t) => e(t, "spacing.sm", "theme.spacing.sm")
-  },
-  [i.Bold]: {
-    fontWeight: (t) => e(t, "font.weight.bold", "theme.font.weight.bold")
-  },
-  [i.Italic]: {
+  h1: {
+    fontSize: (e) => t(e, "font.size.h1", "font.size.h1"),
+    fontWeight: (e) => t(e, "font.weight.normal", "theme.font.weight.normal"),
+    lineHeight: (e) => t(e, "font.line.height.h1", "font.line.height.h1"),
+    marginTop: (e) => t(e, "spacing.xl", "theme.spacing.xl"),
+    marginBottom: (e) => t(e, "spacing.xl", "theme.spacing.xl")
+  },
+  h2: {
+    fontSize: (e) => t(e, "font.size.h2", "font.size.h2"),
+    fontWeight: (e) => t(e, "font.weight.normal", "theme.font.weight.normal"),
+    lineHeight: (e) => t(e, "font.line.height.h2", "font.line.height.h2"),
+    marginTop: (e) => t(e, "spacing.lg", "theme.spacing.lg"),
+    marginBottom: (e) => t(e, "spacing.lg", "theme.spacing.lg")
+  },
+  h3: {
+    fontSize: (e) => t(e, "font.size.h3", "font.size.h3"),
+    fontWeight: (e) => t(e, "font.weight.normal", "theme.font.weight.normal"),
+    lineHeight: (e) => t(e, "font.line.height.h3", "font.line.height.h3"),
+    marginTop: (e) => t(e, "spacing.md", "theme.spacing.md"),
+    marginBottom: (e) => t(e, "spacing.md", "theme.spacing.md")
+  },
+  h4: {
+    fontSize: (e) => t(e, "font.size.h4", "font.size.h4"),
+    fontWeight: (e) => t(e, "font.weight.normal", "theme.font.weight.normal"),
+    lineHeight: (e) => t(e, "font.line.height.h4", "font.line.height.h4"),
+    marginTop: (e) => t(e, "spacing.md", "theme.spacing.md"),
+    marginBottom: (e) => t(e, "spacing.md", "theme.spacing.md")
+  },
+  h5: {
+    fontSize: (e) => t(e, "font.size.h5", "font.size.h5"),
+    fontWeight: (e) => t(e, "font.weight.normal", "theme.font.weight.normal"),
+    lineHeight: (e) => t(e, "font.line.height.h5", "font.line.height.h5"),
+    marginTop: (e) => t(e, "spacing.sm", "theme.spacing.sm"),
+    marginBottom: (e) => t(e, "spacing.sm", "theme.spacing.sm")
+  },
+  h6: {
+    fontSize: (e) => t(e, "font.size.h6", "font.size.h6"),
+    fontWeight: (e) => t(e, "font.weight.normal", "theme.font.weight.normal"),
+    lineHeight: (e) => t(e, "font.line.height.h6", "font.line.height.h6"),
+    marginTop: (e) => t(e, "spacing.sm", "theme.spacing.sm"),
+    marginBottom: (e) => t(e, "spacing.sm", "theme.spacing.sm")
+  },
+  strong: {
+    fontWeight: (e) => t(e, "font.weight.bold", "theme.font.weight.bold")
+  },
+  i: {
     fontStyle: "italic"
   },
-  [i.Body1]: {
-    fontSize: (t) => e(t, `font.size.${i.Body1}`, `font.size.${i.Body1}`),
-    fontWeight: (t) => e(t, "font.weight.normal", "theme.font.weight.normal"),
-    lineHeight: (t) => e(t, `font.line.height.${i.Body1}`, `font.line.height.${i.Body1}`)
-  },
-  [i.Body2]: {
-    fontSize: (t) => e(t, `font.size.${i.Body2}`, `font.size.${i.Body2}`),
-    fontWeight: (t) => e(t, "font.weight.normal", "theme.font.weight.normal"),
-    lineHeight: (t) => e(t, `font.line.height.${i.Body2}`, `theme.font.line.height.${i.Body2}`)
-  },
-  [i.Caption]: {
-    fontSize: (t) => e(t, `font.size.${i.Caption}`, `font.size.${i.Caption}`),
-    fontWeight: (t) => e(t, "font.weight.normal", "theme.font.weight.normal"),
-    lineHeight: (t) => e(t, `font.line.height.${i.Caption}`, `theme.font.line.height.${i.Caption}`)
-  },
-  [i.Caption2]: {
-    fontSize: (t) => e(t, `font.size.${i.Caption2}`, `font.size.${i.Caption2}`),
-    fontWeight: (t) => e(t, "font.weight.normal", "theme.font.weight.normal"),
-    lineHeight: (t) => e(t, `font.line.height.${i.Caption2}`, `theme.font.line.height.${i.Caption2}`)
-  },
-  [i.Code]: {
-    fontFamily: (t) => e(t, 'font["family.code"]', 'theme.font["family.code"]'),
-    fontSize: (t) => e(t, `font.size.${i.Code}`, `font.size.${i.Code}`),
-    fontWeight: (t) => e(t, "font.weight.normal", "theme.font.weight.normal"),
-    lineHeight: (t) => e(t, `font.line.height.${i.Code}`, `theme.font.line.height.${i.Code}`)
-  },
-  [i.Code2]: {
-    fontFamily: (t) => e(t, 'font["family.code"]', 'theme.font["family.code"]'),
-    fontSize: (t) => e(t, `font.size.${i.Code2}`, `font.size.${i.Code2}`),
-    fontWeight: (t) => e(t, "font.weight.normal", "theme.font.weight.normal"),
-    lineHeight: (t) => e(t, `font.line.height.${i.Code2}`, `theme.font.line.height.${i.Code2}`)
-  },
-  [i.Display]: {
-    [n.Xs]: {
-      fontSize: (t) => e(t, `font.size.${n.Xs}`, `theme.font.size.${n.Xs}`),
-      lineHeight: (t) => e(t, `font.line.height.${n.Xs}`, `font.line.height.${n.Xs}`)
+  p: {
+    fontSize: (e) => t(e, "font.size.p", "font.size.p"),
+    fontWeight: (e) => t(e, "font.weight.normal", "theme.font.weight.normal"),
+    lineHeight: (e) => t(e, "font.line.height.p", "font.line.height.p")
+  },
+  small: {
+    fontSize: (e) => t(e, "font.size.small", "font.size.small"),
+    fontWeight: (e) => t(e, "font.weight.normal", "theme.font.weight.normal"),
+    lineHeight: (e) => t(e, "font.line.height.small", "theme.font.line.height.small")
+  },
+  caption: {
+    fontSize: (e) => t(e, "font.size.caption", "font.size.caption"),
+    fontWeight: (e) => t(e, "font.weight.normal", "theme.font.weight.normal"),
+    lineHeight: (e) => t(e, "font.line.height.caption", "theme.font.line.height.caption")
+  },
+  header: {
+    fontSize: (e) => t(e, "font.size.header", "font.size.header"),
+    fontWeight: (e) => t(e, "font.weight.normal", "theme.font.weight.normal"),
+    lineHeight: (e) => t(e, "font.line.height.header", "theme.font.line.height.header")
+  },
+  code: {
+    fontFamily: (e) => t(e, 'font["family.code"]', 'theme.font["family.code"]'),
+    fontSize: (e) => t(e, "font.size.code", "font.size.code"),
+    fontWeight: (e) => t(e, "font.weight.normal", "theme.font.weight.normal"),
+    lineHeight: (e) => t(e, "font.line.height.code", "theme.font.line.height.code")
+  },
+  kbd: {
+    fontFamily: (e) => t(e, 'font["family.code"]', 'theme.font["family.code"]'),
+    fontSize: (e) => t(e, "font.size.kbd", "font.size.kbd"),
+    fontWeight: (e) => t(e, "font.weight.normal", "theme.font.weight.normal"),
+    lineHeight: (e) => t(e, "font.line.height.kbd", "theme.font.line.height.kbd")
+  },
+  div: {
+    xs: {
+      fontSize: (e) => t(e, "font.size.xs", "theme.font.size.xs"),
+      lineHeight: (e) => t(e, "font.line.height.xs", "font.line.height.xs")
     },
-    [n.Sm]: {
-      fontSize: (t) => e(t, `font.size.${n.Sm}`, `theme.font.size.${n.Sm}`),
-      lineHeight: (t) => e(t, `font.line.height.${n.Sm}`, `font.line.height.${n.Sm}`)
+    sm: {
+      fontSize: (e) => t(e, "font.size.sm", "theme.font.size.sm"),
+      lineHeight: (e) => t(e, "font.line.height.sm", "font.line.height.sm")
     },
-    [n.Md]: {
-      fontSize: (t) => e(t, `font.size.${n.Md}`, `font.size.${n.Md}`),
-      lineHeight: (t) => e(t, `font.line.height.${n.Md}`, `font.line.height.${n.Md}`)
+    md: {
+      fontSize: (e) => t(e, "font.size.md", "font.size.md"),
+      lineHeight: (e) => t(e, "font.line.height.md", "font.line.height.md")
     },
-    [n.Lg]: {
-      fontSize: (t) => e(t, `font.size.${n.Lg}`, `theme.font.size.${n.Lg}`),
-      lineHeight: (t) => e(t, `font.line.height.${n.Lg}`, `font.line.height.${n.Lg}`)
+    lg: {
+      fontSize: (e) => t(e, "font.size.lg", "theme.font.size.lg"),
+      lineHeight: (e) => t(e, "font.line.height.lg", "font.line.height.lg")
     },
-    [n.Xl]: {
-      fontSize: (t) => e(t, `font.size.${n.Xl}`, `theme.font.size.${n.Xl}`),
-      lineHeight: (t) => e(t, `font.line.height.${n.Xl}`, `font.line.height.${n.Xl}`)
+    xl: {
+      fontSize: (e) => t(e, "font.size.xl", "theme.font.size.xl"),
+      lineHeight: (e) => t(e, "font.line.height.xl", "font.line.height.xl")
     }
   },
   styleVariant: {
-    [o.Light]: {
-      fontWeight: (t) => e(t, `font.weight.${o.Light}`, `theme.font.weight.${o.Light}`)
+    light: {
+      fontWeight: (e) => t(e, "font.weight.light", "theme.font.weight.light")
     },
-    [o.Normal]: {
-      fontWeight: (t) => e(t, `font.weight.${o.Normal}`, `theme.font.weight.${o.Normal}`)
+    normal: {
+      fontWeight: (e) => t(e, "font.weight.normal", "theme.font.weight.normal")
     },
-    [o.Semibold]: {
-      fontWeight: (t) => e(t, "font.weight.medium", "theme.font.weight.medium")
+    semibold: {
+      fontWeight: (e) => t(e, "font.weight.medium", "theme.font.weight.medium")
     },
-    [o.Bold]: {
-      fontWeight: (t) => e(t, `font.weight.${o.Bold}`, `theme.font.weight.${o.Bold}`)
+    bold: {
+      fontWeight: (e) => t(e, "font.weight.bold", "theme.font.weight.bold")
     },
-    [o.Italic]: {
+    italic: {
       fontStyle: "italic"
     },
-    [o.Small]: {
-      fontSize: (t) => e(t, `font.size.${i.Body2}`, `theme.font.size.${i.Body2}`)
+    small: {
+      fontSize: (e) => t(e, "font.size.small", "theme.font.size.small")
     },
-    [o.Uppercase]: {
+    uppercase: {
       textTransform: "uppercase"
     },
-    [o.Lowercase]: {
+    lowercase: {
       textTransform: "lowercase"
     },
-    [o.Underline]: {
+    underline: {
       textDecoration: "underline"
     },
-    [o.Strike]: {
+    strike: {
       textDecoration: "line-through"
     }
   }
 };
 export {
-  m as typography
+  n as typography
 };

package/tokens/values.d.ts

@@ -17,7 +17,7 @@ export declare const values: {
     responsiveLarge: string;
     responsiveXLarge: string;
     zIndex: {
-        snackbar: number;
+        snackbar: (theme: Record<symbol, unknown>) => string;
     };
     transitions: {
         stepper: {
@@ -47,6 +47,10 @@ export declare const values: {
         tabs: {
             label: string;
         };
+        chat: {
+            sidebar: string;
+            sidebarWrapper: string;
+        };
     };
     transform: {
         rotateUp: string;

package/tokens/values.js

@@ -1,18 +1,18 @@
 import { convertToUnit as r } from "./utils.js";
-import { radius as s } from "./radius.js";
-import { borders as t } from "./borders.js";
+import { radius as t } from "./radius.js";
+import { borders as a } from "./borders.js";
 import { Unit as o } from "./types/index.types.js";
-import { Z_INDEX as a } from "../constants/positioning.js";
+import { get as n } from "../utils/helpers.js";
 import { SizeVariant as e } from "../types/common.js";
-const b = {
+const u = {
   // Border tokens
   borderThin: r(1, o.Rem),
   borderMedium: r(2, o.Rem),
   borderThick: r(4, o.Rem),
-  borderNone: t.none,
+  borderNone: a.none,
   border: {
     radius: {
-      none: s.none
+      none: t.none
     }
   },
   // Layout tokens
@@ -25,7 +25,7 @@ const b = {
   responsiveLarge: "60%",
   responsiveXLarge: "80%",
   zIndex: {
-    snackbar: a.HIGH
+    snackbar: (s) => n(s, "zIndex.high", "theme.zIndex.high")
   },
   transitions: {
     stepper: {
@@ -54,6 +54,10 @@ const b = {
     },
     tabs: {
       label: "border 0.2s ease-in"
+    },
+    chat: {
+      sidebar: "transform 0.3s ease-in-out, width 0.3s ease-in-out, opacity 0.3s ease-in-out",
+      sidebarWrapper: "opacity 0.2s ease-in"
     }
   },
   transform: {
@@ -72,5 +76,5 @@ const b = {
   }
 };
 export {
-  b as values
+  u as values
 };

package/tokens/wrapper.d.ts

@@ -15,7 +15,7 @@ export declare const wrapper: {
         width: string;
         height: string;
         position: string;
-        zIndex: number;
+        zIndex: (theme: Record<symbol, unknown>) => string;
     };
     fullPage: {
         display: string;
@@ -24,6 +24,6 @@ export declare const wrapper: {
         left: number;
         width: string;
         height: string;
-        zIndex: number;
+        zIndex: (theme: Record<symbol, unknown>) => string;
     };
 };

package/tokens/wrapper.js

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

package/tokens/zIndex.d.ts

@@ -0,0 +1,9 @@
+export declare const zIndex: {
+    zero: number;
+    negative: number;
+    first: number;
+    low: number;
+    medium: number;
+    high: number;
+    top: number;
+};

package/tokens/zIndex.js

@@ -0,0 +1,12 @@
+const e = {
+  zero: 0,
+  negative: -1,
+  first: 1,
+  low: 100,
+  medium: 500,
+  high: 900,
+  top: 1e3
+};
+export {
+  e as zIndex
+};

package/types/index.d.ts

@@ -16,6 +16,5 @@ export * from './link';
 export * from './list';
 export * from './skeleton';
 export * from './snackbar';
-export * from './chat';
 export * from './separator';
 export * from './carousel';

package/types/styles.d.ts

@@ -1,3 +1,4 @@
 export type BoxStyles<T = number> = Record<string, string | boolean | T | undefined>;
 export type BoxComputedStyles<T = number> = Record<string, string | boolean | T | never>;
 export type InlineBoxStyles = Record<string, string | number | undefined>;
+export type Rounded = 'none' | 'default' | 'round' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';

package/utils/helpers.js

@@ -1,6 +1,6 @@
-const y = (e) => Array.isArray(e), l = (e) => typeof e == "object" && e !== null && !Array.isArray(e), A = (e, r, s) => {
+const y = (e) => Array.isArray(e), c = (e, r, s) => {
   let f;
-  Array.isArray(r) ? f = r : typeof r == "string" ? f = o(r) : f = Object.keys(r);
+  Array.isArray(r) ? f = r : typeof r == "string" ? f = l(r) : f = Object.keys(r);
   let i = e;
   for (const n of f) {
     if (i == null || typeof i != "object")
@@ -8,7 +8,7 @@ const y = (e) => Array.isArray(e), l = (e) => typeof e == "object" && e !== null
     i = i[n];
   }
   return i === void 0 ? s : i;
-}, o = (e) => {
+}, l = (e) => {
   if (!e) return [];
   const r = [];
   let s = "", f = !1, i = "", n = "";
@@ -18,8 +18,8 @@ const y = (e) => Array.isArray(e), l = (e) => typeof e == "object" && e !== null
 ` && (n += t) : t === "[" ? (s && (r.push(s), s = ""), f = !0, n = "") : t === "." && s ? (r.push(s), s = "") : t !== "." && (s += t);
   }
   return s && r.push(s), r;
-}, a = (e, r, s, f = !1) => {
-  const i = Array.isArray(r) || l(r) ? r : r.split(".");
+}, g = (e, r, s, f = !1) => {
+  const i = Array.isArray(r) ? r : typeof r == "string" ? l(r) : Object.keys(r);
   let n = e;
   try {
     for (let u = 0; u < i.length; u++) {
@@ -35,12 +35,12 @@ const y = (e) => Array.isArray(e), l = (e) => typeof e == "object" && e !== null
   } catch (u) {
     return console.error(u), e;
   }
-}, g = (e, ...r) => e.filter((s) => !r.includes(s)), k = (e) => e == null ? 0 : Array.isArray(e) || typeof e == "string" ? e.length : Object.keys(e).length, b = (e) => {
+}, k = (e, ...r) => e.filter((s) => !r.includes(s)), A = (e) => e == null ? 0 : Array.isArray(e) || typeof e == "string" ? e.length : Object.keys(e).length, a = (e) => {
   if (typeof e == "number") return e;
   if (!e) return null;
   const r = Number(e);
   return isNaN(r) ? null : r;
-}, m = (e, r) => {
+}, b = (e, r) => {
   let s;
   return (...f) => {
     s && clearTimeout(s), s = setTimeout(() => {
@@ -49,13 +49,12 @@ const y = (e) => Array.isArray(e), l = (e) => typeof e == "object" && e !== null
   };
 };
 export {
-  m as debounce,
-  A as get,
+  b as debounce,
+  c as get,
   y as isArray,
-  l as isObject,
-  o as parsePathString,
-  a as set,
-  k as size,
-  b as toNumber,
-  g as without
+  l as parsePathString,
+  g as set,
+  A as size,
+  a as toNumber,
+  k as without
 };