gd-design-library 1.0.2 → 1.2.0

package/tokens/modal.js

@@ -1,63 +1,50 @@
-import { hexToRgba as f, getSpacing as p } from "./utils.js";
-import { flexAlignItems as m, display as r } from "./display.js";
-import { borders as s } from "./borders.js";
-import { cursors as g } from "./cursors.js";
-import { Z_INDEX as h } from "../constants/positioning.js";
-import { calculateJustify as i } from "../utils/layout.js";
-import { get as o } from "../utils/helpers.js";
-import { SizeVariant as a } from "../types/common.js";
-import { TypographyVariant as d } from "../types/typography.js";
-const k = {
+import { hexToRgba as i, getSpacing as o } from "./utils.js";
+import { display as n } from "./display.js";
+import { borders as a } from "./borders.js";
+import { get as t } from "../utils/helpers.js";
+const c = {
   header: {
     default: {
-      display: r.flex,
-      alignItems: m.center,
-      justifyContent: i("end"),
-      padding: `${p(4)} ${p(6)}`,
-      fontSize: (e) => {
-        var t, n;
-        return o(e, `font.size.${(t = d) == null ? void 0 : t.H6}`, `theme.font.size.${(n = d) == null ? void 0 : n.H6}`);
-      },
-      fontWeight: "bold",
-      borderBottom: (e) => s.generic({
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-end",
+      padding: `${o(4)} ${o(6)}`,
+      borderBottom: (e) => a.generic({
         width: "1px",
-        color: o(e, "colors.border.default", "theme.colors.border.default")
+        color: t(e, "colors.border.default", "theme.colors.border.default")
       })
     },
     withTitle: {
-      justifyContent: i("between")
+      justifyContent: "space-between"
     }
   },
   title: {
     default: {
       display: "flex",
       alignItems: "center",
-      padding: (e) => o(e, "spacing.none", "theme.spacing.none"),
-      margin: (e) => o(e, "spacing.none", "theme.spacing.none")
+      fontSize: (e) => t(e, "font.size.h6", "theme.font.size.h6"),
+      fontWeight: (e) => t(e, "font.weight.medium", "theme.font.weight.medium"),
+      color: (e) => t(e, "colors.text.default", "theme.colors.text.default"),
+      padding: (e) => t(e, "spacing.none", "theme.spacing.none"),
+      margin: (e) => t(e, "spacing.none", "theme.spacing.none")
     }
   },
   body: {
     default: {
-      padding: (e) => {
-        var t, n;
-        return o(e, `spacing.${(t = a) == null ? void 0 : t.Lg}`, `theme.spacing.${(n = a) == null ? void 0 : n.Lg}`);
-      },
-      fontSize: (e) => {
-        var t, n;
-        return o(e, `font.size.${(t = d) == null ? void 0 : t.Body1}`, `theme.font.size.${(n = d) == null ? void 0 : n.Body1}`);
-      },
-      color: (e) => o(e, "colors.text.default", "theme.colors.text.default"),
+      padding: (e) => t(e, "spacing.lg", "theme.spacing.lg"),
+      fontSize: (e) => t(e, "font.size.p", "theme.font.size.p"),
+      color: (e) => t(e, "colors.text.default", "theme.colors.text.default"),
       overflowY: "auto"
     }
   },
   content: {
     default: {
-      background: (e) => o(e, "colors.bg.surface", "theme.colors.bg.surface"),
-      padding: (e) => o(e, "spacing.none", "theme.spacing.none"),
-      borderRadius: (e) => o(e, "values.border.radius.none", "theme.values.border.radius.none"),
-      boxShadow: (e) => o(e, "shadows.modal.default", "theme.shadows.modal.default"),
+      background: (e) => t(e, "colors.bg.surface", "theme.colors.bg.surface"),
+      padding: (e) => t(e, "spacing.none", "theme.spacing.none"),
+      borderRadius: (e) => t(e, "values.border.radius.none", "theme.values.border.radius.none"),
+      boxShadow: (e) => t(e, "shadows.modal.default", "theme.shadows.modal.default"),
       position: "relative",
-      display: r.flex,
+      display: n.flex,
       flexDirection: "column",
       width: "100%",
       maxWidth: "654px",
@@ -71,28 +58,22 @@ const k = {
   },
   footer: {
     default: {
-      display: r.flex,
-      justifyContent: i("end"),
-      gap: (e) => {
-        var t, n;
-        return `calc(${o(e, `spacing.${(t = a) == null ? void 0 : t.Xs}`, `theme.spacing.${(n = a) == null ? void 0 : n.Xs}`)} * 3)`;
-      },
-      padding: (e) => {
-        var t, n, l, c;
-        return `${o(e, `spacing.${(t = a) == null ? void 0 : t.Md}`, `theme.spacing.${(n = a) == null ? void 0 : n.Md}`)} ${o(e, `spacing.${(l = a) == null ? void 0 : l.Lg}`, `theme.spacing.${(c = a) == null ? void 0 : c.Lg}`)}`;
-      },
-      borderTop: (e) => s.generic({
+      display: n.flex,
+      justifyContent: "flex-end",
+      gap: (e) => `calc(${t(e, "spacing.xs", "theme.spacing.xs")} * 3)`,
+      padding: (e) => `${t(e, "spacing.md", "theme.spacing.md")} ${t(e, "spacing.lg", "theme.spacing.lg")}`,
+      borderTop: (e) => a.generic({
         width: "1px",
-        color: o(e, "colors.border.default", "theme.colors.border.default")
+        color: t(e, "colors.border.default", "theme.colors.border.default")
       })
     }
   },
   closeButton: {
     default: {
-      background: (e) => o(e, "colors.transparent", "theme.colors.transparent"),
-      border: s.none,
-      cursor: g.pointer,
-      padding: (e) => o(e, "spacing.none", "theme.spacing.none")
+      background: (e) => t(e, "colors.transparent", "theme.colors.transparent"),
+      border: "none",
+      cursor: "pointer",
+      padding: (e) => t(e, "spacing.none", "theme.spacing.none")
     }
   },
   overlay: {
@@ -102,21 +83,22 @@ const k = {
       left: 0,
       width: "100vw",
       height: "100vh",
-      background: (e) => f(o(e, "colors.neutral.black", "theme.colors.neutral.black"), 0.5),
-      display: r.flex,
-      alignItems: m.center,
-      justifyContent: i("center"),
-      zIndex: h.HIGH
+      background: (e) => i(t(e, "colors.neutral.black", "theme.colors.neutral.black"), 0.5),
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      zIndex: (e) => t(e, "zIndex.high", "theme.zIndex.high")
     }
   },
   icons: {
     close: {
       name: "cross",
+      fill: "icon.black",
       width: 14,
       height: 14
     }
   }
 };
 export {
-  k as modal
+  c as modal
 };

package/tokens/scroll.d.ts

@@ -16,7 +16,7 @@ export declare const scroll: {
     content: {
         default: {
             position: string;
-            zIndex: number;
+            zIndex: (theme: Record<symbol, unknown>) => string;
             flex: number;
             flexBasis: string;
             height: string;
@@ -27,7 +27,7 @@ export declare const scroll: {
             position: string;
             top: string;
             left: string;
-            zIndex: number;
+            zIndex: (theme: Record<symbol, unknown>) => string;
             minWidth: string;
             minHeight: string;
             maxWidth: string;
@@ -61,6 +61,16 @@ export declare const scroll: {
             right: string;
             height: string;
         };
+        autoHide: {
+            opacity: number;
+            transition: string;
+        };
+        autoHideScrolling: {
+            opacity: number;
+            '&:hover': {
+                opacity: number;
+            };
+        };
     };
     thumb: {
         default: {
@@ -87,5 +97,12 @@ export declare const scroll: {
             minWidth: (theme: Record<symbol, unknown>) => string;
             transition: (theme: Record<symbol, unknown>) => string;
         };
+        autoHide: {
+            opacity: number;
+            transition: string;
+        };
+        autoHideScrolling: {
+            opacity: number;
+        };
     };
 };

package/tokens/scroll.js

@@ -1,11 +1,10 @@
-import { display as l } from "./display.js";
+import { display as e } from "./display.js";
 import { get as o } from "../utils/helpers.js";
-import { Z_INDEX as e } from "../constants/positioning.js";
-const i = 8, s = {
+const i = 8, r = {
   container: {
     default: {
       position: "relative",
-      display: l.flex,
+      display: e.flex,
       overflow: "auto",
       isolation: "isolate",
       maxBlockSize: "100%",
@@ -19,7 +18,7 @@ const i = 8, s = {
   content: {
     default: {
       position: "relative",
-      zIndex: e.ZERO,
+      zIndex: (t) => o(t, "zIndex.zero", "theme.zIndex.zero"),
       flex: 1,
       flexBasis: "auto",
       height: "max-content"
@@ -30,7 +29,7 @@ const i = 8, s = {
       position: "sticky",
       top: "0",
       left: "0",
-      zIndex: e.FIRST,
+      zIndex: (t) => o(t, "zIndex.first", "theme.zIndex.first"),
       minWidth: "calc(100% - 1px)",
       minHeight: "calc(100% - 1px)",
       maxWidth: "calc(100% - 1px)",
@@ -63,6 +62,16 @@ const i = 8, s = {
       bottom: 0,
       right: `${i}px`,
       height: `${i}px`
+    },
+    autoHide: {
+      opacity: 0,
+      transition: "opacity 0.2s ease-in-out"
+    },
+    autoHideScrolling: {
+      opacity: 0.2,
+      "&:hover": {
+        opacity: 1
+      }
     }
   },
   thumb: {
@@ -89,9 +98,16 @@ const i = 8, s = {
       height: `${i}px`,
       minWidth: (t) => o(t, "spacing.md", "theme.spacing.md"),
       transition: (t) => o(t, "values.transitions.scroll.thumb", "theme.values.transitions.scroll.thumb")
+    },
+    autoHide: {
+      opacity: 0,
+      transition: "opacity 0.2s ease-in-out"
+    },
+    autoHideScrolling: {
+      opacity: 1
     }
   }
 };
 export {
-  s as scroll
+  r as scroll
 };

package/tokens/select.d.ts

@@ -26,7 +26,7 @@ export declare const select: {
         listStyleType: string;
         margin: (theme: Record<symbol, unknown>) => string;
         padding: (theme: Record<symbol, unknown>) => string;
-        zIndex: number;
+        zIndex: (theme: Record<symbol, unknown>) => string;
         overflowY: string;
     };
     button: {
@@ -74,11 +74,13 @@ export declare const select: {
             };
         };
     };
-    arrowIcon: {
-        name: string;
-        fill: string;
-        width: number;
-        height: number;
+    icons: {
+        arrowIcon: {
+            name: string;
+            fill: string;
+            width: number;
+            height: number;
+        };
     };
     adornment: {
         default: {
@@ -86,7 +88,7 @@ export declare const select: {
             alignItems: string;
             flexDirection: FlexDirection;
             position: string;
-            zIndex: number;
+            zIndex: (theme: Record<symbol, unknown>) => string;
         };
     };
 };

package/tokens/select.js

@@ -1,14 +1,13 @@
-import { Z_INDEX as r } from "../constants/positioning.js";
-import { getSpacing as d } from "./utils.js";
-import { borders as f } from "./borders.js";
-import { flexAlignItems as t, display as n } from "./display.js";
-import { FlexDirection as p } from "../types/layout.js";
+import { getSpacing as s } from "./utils.js";
+import { borders as d } from "./borders.js";
+import { flexAlignItems as t, display as r } from "./display.js";
 import { get as o } from "../utils/helpers.js";
-import { Cursors as i } from "../types/cursors.js";
-import { ButtonVariant as m } from "../types/button.js";
-import { TextAlign as c, TypographyVariant as a } from "../types/typography.js";
-var l, s;
-const T = {
+import { FlexDirection as f } from "../types/layout.js";
+import { Cursors as n } from "../types/cursors.js";
+import { ButtonVariant as p } from "../types/button.js";
+import { TextAlign as m, TypographyVariant as i } from "../types/typography.js";
+var a, l;
+const v = {
   default: {
     display: "inline-block",
     position: "relative"
@@ -30,46 +29,46 @@ const T = {
     background: (e) => o(e, "colors.bg.surface", "theme.colors.bg.surface"),
     boxShadow: (e) => o(e, 'shadows.box["3"]', 'theme.shadows.box["3"]'),
     fontFamily: (e) => o(e, "font.family", "theme.font.family"),
-    fontSize: (e) => o(e, `font.size.${a.Body1}`, `theme.font.size.${a.Body1}`),
+    fontSize: (e) => o(e, `font.size.${i.Body1}`, `theme.font.size.${i.Body1}`),
     fontWeight: (e) => o(e, "font.weight.normal", "theme.font.weight.normal"),
     listStyleType: "none",
     margin: (e) => o(e, "spacing.none", "theme.spacing.none"),
     padding: (e) => o(e, "spacing.none", "theme.spacing.none"),
-    zIndex: r.TOP,
+    zIndex: (e) => o(e, "zIndex.top", "theme.zIndex.top"),
     overflowY: "auto"
   },
   button: {
     default: {
-      border: (e) => f.generic({
+      border: (e) => d.generic({
         width: o(e, "values.borderThin", "theme.values.borderThin"),
         color: o(e, "colors.border.default", "theme.colors.border.default")
       }),
       padding: (e) => o(e, "spacing.sm", "theme.spacing.sm"),
       width: "100%",
-      display: (l = n) == null ? void 0 : l.flex,
+      display: (a = r) == null ? void 0 : a.flex,
       flexDirection: "row",
       justifyContent: "space-between",
-      alignItems: (s = t) == null ? void 0 : s.center,
-      textAlign: c.Left,
+      alignItems: (l = t) == null ? void 0 : l.center,
+      textAlign: m.Left,
       ".gd-button__content": {
         justifyContent: t.start
       }
     },
     attrs: {
-      variant: m.Inherit
+      variant: p.Inherit
     }
   },
   item: {
     default: {
-      cursor: i.Pointer,
-      padding: d(2),
+      cursor: n.Pointer,
+      padding: s(2),
       "&:hover, &.active": {
         backgroundColor: (e) => o(e, "colors.bg.fill.hover", "theme.colors.bg.fill.hover")
       }
     },
     disabled: {
       opacity: 0.5,
-      cursor: i.NotAllowed,
+      cursor: n.NotAllowed,
       pointerEvents: "none"
     }
   },
@@ -86,22 +85,24 @@ const T = {
       }
     }
   },
-  arrowIcon: {
-    name: "arrowDown",
-    fill: 'neutral["grey.90"]',
-    width: 18,
-    height: 18
+  icons: {
+    arrowIcon: {
+      name: "arrowDown",
+      fill: 'neutral["grey.90"]',
+      width: 18,
+      height: 18
+    }
   },
   adornment: {
     default: {
-      display: n.flex,
+      display: r.flex,
       alignItems: t.center,
-      flexDirection: p.Row,
+      flexDirection: f.Row,
       position: "relative",
-      zIndex: r.FIRST
+      zIndex: (e) => o(e, "zIndex.first", "theme.zIndex.first")
     }
   }
 };
 export {
-  T as select
+  v as select
 };

package/tokens/snackbar.d.ts

@@ -1,11 +1,27 @@
-import { FlexDirection } from '../types';
-export declare const DEFAULT_SNACKBAR_WIDTH = "302px";
 export declare const snackbar: {
+    title: {
+        attrs: {
+            as: string;
+            align: string;
+            variant: string;
+            styleVariant: string;
+            color: string;
+        };
+    };
+    description: {
+        attrs: {
+            as: string;
+            align: string;
+            variant: string;
+            styleVariant: string;
+            color: string;
+        };
+    };
     container: {
         default: {
             position: string;
             display: string;
-            flexDirection: FlexDirection;
+            flexDirection: string;
             gap: (theme: Record<symbol, unknown>) => string;
             padding: (theme: Record<symbol, unknown>) => string;
             boxSizing: string;
@@ -41,7 +57,7 @@ export declare const snackbar: {
             width: string;
             fontSize: (theme: Record<symbol, unknown>) => string;
             display: string;
-            flexDirection: FlexDirection;
+            flexDirection: string;
             gap: (theme: Record<symbol, unknown>) => string;
             color: (theme: Record<symbol, unknown>) => string;
             padding: (theme: Record<symbol, unknown>) => string;
@@ -56,45 +72,45 @@ export declare const snackbar: {
             };
         };
         animation: {
-            duration: string;
-            timing: string;
+            closeEffect: string;
+            openEffect: string;
         };
     };
     positions: {
-        "top-left": {
+        'top-left': {
             top: number;
             left: number;
             alignItems: string;
         };
-        "top-center": {
+        'top-center': {
             top: (theme: Record<symbol, unknown>) => string;
             left: string;
             transform: string;
             alignItems: string;
         };
-        "top-right": {
+        'top-right': {
             top: (theme: Record<symbol, unknown>) => string;
             right: (theme: Record<symbol, unknown>) => string;
             alignItems: string;
         };
-        "bottom-left": {
+        'bottom-left': {
             bottom: (theme: Record<symbol, unknown>) => string;
             left: (theme: Record<symbol, unknown>) => string;
             alignItems: string;
-            flexDirection: FlexDirection;
+            flexDirection: string;
         };
-        "bottom-center": {
+        'bottom-center': {
             bottom: (theme: Record<symbol, unknown>) => string;
             left: string;
             transform: string;
             alignItems: string;
-            flexDirection: FlexDirection;
+            flexDirection: string;
         };
-        "bottom-right": {
+        'bottom-right': {
             bottom: (theme: Record<symbol, unknown>) => string;
             right: (theme: Record<symbol, unknown>) => string;
             alignItems: string;
-            flexDirection: FlexDirection;
+            flexDirection: string;
         };
     };
     closeButton: {
@@ -116,25 +132,25 @@ export declare const snackbar: {
         };
         success: {
             name: string;
-            fill: (theme: Record<symbol, unknown>) => string;
+            fill: string;
             width: number;
             height: number;
         };
         error: {
             name: string;
-            fill: (theme: Record<symbol, unknown>) => string;
+            fill: string;
             width: number;
             height: number;
         };
         warning: {
             name: string;
-            fill: (theme: Record<symbol, unknown>) => string;
+            fill: string;
             width: number;
             height: number;
         };
         info: {
             name: string;
-            fill: (theme: Record<symbol, unknown>) => string;
+            fill: string;
             width: number;
             height: number;
         };
@@ -146,7 +162,7 @@ export declare const snackbar: {
     };
     snackbarContent: {
         display: string;
-        flexDirection: FlexDirection;
+        flexDirection: string;
         alignItems: string;
         gap: string | number;
         flex: number;