gd-design-library 1.0.2 → 1.2.0

package/tokens/snackbar.js

@@ -1,47 +1,50 @@
-import { getSpacing as l } from "./utils.js";
-import { borders as C } from "./borders.js";
-import { cursors as v } from "./cursors.js";
-import { icon as m } from "./icon.js";
-import { flexAlignItems as s, display as c } from "./display.js";
-import { SnackbarPosition as a } from "../types/snackbar.js";
-import { FlexDirection as i } from "../types/layout.js";
-import { get as e } from "../utils/helpers.js";
-import { SizeVariant as n } from "../types/common.js";
-import { TypographyVariant as g } from "../types/typography.js";
-const y = "302px";
-var p, h, d, f, b, u, w, x, k, S, $, I;
-const V = {
+import { getSpacing as n } from "./utils.js";
+import { borders as o } from "./borders.js";
+import { get as t } from "../utils/helpers.js";
+const i = {
+  title: {
+    attrs: {
+      as: "div",
+      align: "start",
+      variant: "small",
+      styleVariant: "semibold",
+      color: "text.black"
+    }
+  },
+  description: {
+    attrs: {
+      as: "div",
+      align: "start",
+      variant: "small",
+      styleVariant: "normal",
+      color: "text.black"
+    }
+  },
   container: {
     default: {
       position: "fixed",
-      display: c.flex,
-      flexDirection: i.Column,
-      gap: (o) => e(o, `spacing.${n.Sm}`, `theme.spacing.${n.Sm}`),
-      padding: (o) => e(o, `spacing.${n.Sm}`, `theme.spacing.${n.Sm}`),
+      display: "flex",
+      flexDirection: "column",
+      gap: (e) => t(e, "spacing.sm", "theme.spacing.sm"),
+      padding: (e) => t(e, "spacing.sm", "theme.spacing.sm"),
       boxSizing: "border-box",
-      maxHeight: (o) => `calc(100vh - ${e(o, `spacing.${n.Xs}`, `theme.spacing.${n.Xs}`)})`,
+      maxHeight: (e) => `calc(100vh - ${t(e, "spacing.xs", "theme.spacing.xs")})`,
       overflowY: "auto",
       overflowX: "hidden",
       scrollbarWidth: "thin",
-      scrollbarColor: (o) => `${e(o, "colors.transparent", "theme.colors.transparent")} ${e(o, "colors.transparent", "theme.colors.transparent")}`,
-      zIndex: (o) => e(o, "values.zIndex.snackbar", "theme.values.zIndex.snackbar"),
+      scrollbarColor: (e) => `${t(e, "colors.transparent", "theme.colors.transparent")} ${t(e, "colors.transparent", "theme.colors.transparent")}`,
+      zIndex: (e) => t(e, "values.zIndex.snackbar", "theme.values.zIndex.snackbar"),
       // to be under modal, could be rewritten by theme
       "&::-webkit-scrollbar": {
-        width: (o) => {
-          var t, r;
-          return e(o, `spacing.${(t = n) == null ? void 0 : t.Sm}`, `theme.spacing.${(r = n) == null ? void 0 : r.Sm}`);
-        },
-        background: (o) => e(o, "colors.transparent", "theme.colors.transparent")
+        width: (e) => t(e, "spacing.sm", "theme.spacing.sm"),
+        background: (e) => t(e, "colors.transparent", "theme.colors.transparent")
       },
       "&::-webkit-scrollbar-thumb": {
-        background: (o) => e(o, "colors.transparent", "theme.colors.transparent"),
-        borderRadius: (o) => {
-          var t, r;
-          return e(o, `radius.${(t = n) == null ? void 0 : t.Sm}`, `theme.radius.${(r = n) == null ? void 0 : r.Sm}`);
-        }
+        background: (e) => t(e, "colors.transparent", "theme.colors.transparent"),
+        borderRadius: (e) => t(e, "radius.sm", "theme.radius.sm")
       },
       "&::-webkit-scrollbar-track": {
-        background: (o) => e(o, "colors.transparent", "theme.colors.transparent")
+        background: (e) => t(e, "colors.transparent", "theme.colors.transparent")
       },
       "&:hover::-webkit-scrollbar-thumb": {
         background: "rgba(0, 0, 0, 0.3)"
@@ -54,79 +57,76 @@ const V = {
   snackbar: {
     default: {
       position: "relative",
-      boxShadow: (o) => e(o, "shadows.snackbar.default", "theme.shadows.snackbar.default"),
-      width: y,
-      fontSize: (o) => {
-        var t, r;
-        return e(o, `font.size.${(t = g) == null ? void 0 : t.Body1}`, `theme.font.size.${(r = g) == null ? void 0 : r.Body1}`);
-      },
-      display: c.flex,
-      flexDirection: i.Column,
-      gap: (o) => e(o, "spacing.sm", "theme.spacing.sm"),
-      color: (o) => e(o, "colors.text.default", "theme.colors.text.default"),
-      padding: (o) => `${e(o, "spacing.sm", "theme.spacing.sm")} ${e(o, "spacing.md", "theme.spacing.md")}`
+      boxShadow: (e) => t(e, "shadows.snackbar.default", "theme.shadows.snackbar.default"),
+      width: "302px",
+      fontSize: (e) => t(e, "font.size.p", "theme.font.size.p"),
+      display: "flex",
+      flexDirection: "column",
+      gap: (e) => t(e, "spacing.sm", "theme.spacing.sm"),
+      color: (e) => t(e, "colors.text.default", "theme.colors.text.default"),
+      padding: (e) => `${t(e, "spacing.sm", "theme.spacing.sm")} ${t(e, "spacing.md", "theme.spacing.md")}`
     },
     background: {
-      default: (o) => e(o, "colors.bg.surface", "theme.colors.bg.surface"),
+      default: (e) => t(e, "colors.bg.surface", "theme.colors.bg.surface"),
       variants: {
-        success: (o) => e(o, "colors.bg.toast.success", "theme.colors.bg.toast.success"),
-        error: (o) => e(o, "colors.bg.toast.error", "theme.colors.bg.toast.error"),
-        warning: (o) => e(o, "colors.bg.toast.warning", "theme.colors.bg.toast.warning"),
-        info: (o) => e(o, "colors.bg.toast.info", "theme.colors.bg.toast.info")
+        success: (e) => t(e, "colors.bg.toast.success", "theme.colors.bg.toast.success"),
+        error: (e) => t(e, "colors.bg.toast.error", "theme.colors.bg.toast.error"),
+        warning: (e) => t(e, "colors.bg.toast.warning", "theme.colors.bg.toast.warning"),
+        info: (e) => t(e, "colors.bg.toast.info", "theme.colors.bg.toast.info")
       }
     },
     animation: {
-      duration: "300ms",
-      timing: "ease-in-out"
+      closeEffect: "300ms ease-in-out 50ms forwards",
+      openEffect: "300ms ease-in-out forwards"
     }
   },
   positions: {
-    [(p = a) == null ? void 0 : p.TopLeft]: {
+    "top-left": {
       top: 0,
       left: 0,
-      alignItems: s.start
+      alignItems: "flex-start"
     },
-    [(h = a) == null ? void 0 : h.TopCenter]: {
-      top: (o) => e(o, "spacing.none", "theme.spacing.none"),
+    "top-center": {
+      top: (e) => t(e, "spacing.none", "theme.spacing.none"),
       left: "50%",
       transform: "translateX(-50%)",
-      alignItems: s.center
+      alignItems: "center"
     },
-    [(d = a) == null ? void 0 : d.TopRight]: {
-      top: (o) => e(o, "spacing.none", "theme.spacing.none"),
-      right: (o) => e(o, "spacing.none", "theme.spacing.none"),
-      alignItems: s.end
+    "top-right": {
+      top: (e) => t(e, "spacing.none", "theme.spacing.none"),
+      right: (e) => t(e, "spacing.none", "theme.spacing.none"),
+      alignItems: "flex-end"
     },
-    [(f = a) == null ? void 0 : f.BottomLeft]: {
-      bottom: (o) => e(o, "spacing.none", "theme.spacing.none"),
-      left: (o) => e(o, "spacing.none", "theme.spacing.none"),
-      alignItems: s.start,
-      flexDirection: i.ColumnReverse
+    "bottom-left": {
+      bottom: (e) => t(e, "spacing.none", "theme.spacing.none"),
+      left: (e) => t(e, "spacing.none", "theme.spacing.none"),
+      alignItems: "flex-start",
+      flexDirection: "column-reverse"
     },
-    [(b = a) == null ? void 0 : b.BottomCenter]: {
-      bottom: (o) => e(o, "spacing.none", "theme.spacing.none"),
+    "bottom-center": {
+      bottom: (e) => t(e, "spacing.none", "theme.spacing.none"),
       left: "50%",
       transform: "translateX(-50%)",
-      alignItems: s.center,
-      flexDirection: i.ColumnReverse
+      alignItems: "center",
+      flexDirection: "column-reverse"
     },
-    [(u = a) == null ? void 0 : u.BottomRight]: {
-      bottom: (o) => e(o, "spacing.none", "theme.spacing.none"),
-      right: (o) => e(o, "spacing.none", "theme.spacing.none"),
-      alignItems: s.end,
-      flexDirection: i.ColumnReverse
+    "bottom-right": {
+      bottom: (e) => t(e, "spacing.none", "theme.spacing.none"),
+      right: (e) => t(e, "spacing.none", "theme.spacing.none"),
+      alignItems: "flex-end",
+      flexDirection: "column-reverse"
     }
   },
   closeButton: {
     position: "absolute",
-    top: (o) => e(o, "spacing.sm", "theme.spacing.sm"),
-    right: (o) => e(o, "spacing.md", "theme.spacing.md"),
-    background: (o) => e(o, "colors.transparent", "theme.colors.transparent"),
-    border: C.none,
-    cursor: v.pointer,
+    top: (e) => t(e, "spacing.sm", "theme.spacing.sm"),
+    right: (e) => t(e, "spacing.md", "theme.spacing.md"),
+    background: (e) => t(e, "colors.transparent", "theme.colors.transparent"),
+    border: o.none,
+    cursor: "pointer",
     padding: 3,
-    width: (k = (x = (w = m) == null ? void 0 : w.size) == null ? void 0 : x[n.Sm]) == null ? void 0 : k.width,
-    height: (I = ($ = (S = m) == null ? void 0 : S.size) == null ? void 0 : $[n.Sm]) == null ? void 0 : I.height
+    width: 16,
+    height: 16
   },
   icons: {
     close: {
@@ -136,46 +136,45 @@ const V = {
     },
     success: {
       name: "success",
-      fill: (o) => e(o, "colors.icon.success", "theme.colors.icon.success"),
+      fill: "icon.success",
       width: 20,
       height: 20
     },
     error: {
       name: "error",
-      fill: (o) => e(o, "colors.icon.error", "theme.colors.icon.error"),
+      fill: "icon.error",
       width: 20,
       height: 20
     },
     warning: {
       name: "warning",
-      fill: (o) => e(o, "colors.icon.warning", "theme.colors.icon.warning"),
+      fill: "icon.warning",
       width: 20,
       height: 20
     },
     info: {
       name: "info",
-      fill: (o) => e(o, "colors.icon.info", "theme.colors.icon.info"),
+      fill: "icon.info",
       width: 20,
       height: 20
     }
   },
   snackbarBody: {
-    display: c.flex,
-    alignItems: s.start,
-    gap: (o) => e(o, "spacing.sm", "theme.spacing.sm")
+    display: "flex",
+    alignItems: "flex-start",
+    gap: (e) => t(e, "spacing.sm", "theme.spacing.sm")
   },
   snackbarContent: {
-    display: c.flex,
-    flexDirection: i.Column,
-    alignItems: s.start,
-    gap: l(1),
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    gap: n(1),
     flex: 1
   },
   actionsContainer: {
-    paddingTop: l(1)
+    paddingTop: n(1)
   }
 };
 export {
-  y as DEFAULT_SNACKBAR_WIDTH,
-  V as snackbar
+  i as snackbar
 };

package/tokens/stepper.d.ts

@@ -10,7 +10,7 @@ export declare const stepper: {
         default: {
             width: string;
             position: string;
-            zIndex: number;
+            zIndex: (theme: Record<symbol, unknown>) => number;
             top: string;
             marginLeft: string;
             marginRight: string;

package/tokens/stepper.js

@@ -6,7 +6,7 @@ import { get as r } from "../utils/helpers.js";
 import { Cursors as f } from "../types/cursors.js";
 import { SizeVariant as i } from "../types/common.js";
 import { TypographyVariant as s } from "../types/typography.js";
-const m = l.size[i.Xxl], c = 104, x = {
+const m = l.size[i.Xxl], c = 104, S = {
   default: {
     display: a.flex,
     flexDirection: "row",
@@ -17,7 +17,7 @@ const m = l.size[i.Xxl], c = 104, x = {
     default: {
       width: "100%",
       position: "relative",
-      zIndex: -100,
+      zIndex: (e) => -r(e, "zIndex.low", 100),
       top: `${m.height / 2}px`,
       marginLeft: `-${c / 2}px`,
       marginRight: `-${c / 2}px`,
@@ -137,5 +137,5 @@ const m = l.size[i.Xxl], c = 104, x = {
   }
 };
 export {
-  x as stepper
+  S as stepper
 };

package/tokens/tabs.d.ts

@@ -15,7 +15,7 @@ export declare const tabs: {
                 position: string;
                 width: string;
                 bottom: number;
-                zIndex: number;
+                zIndex: (theme: Record<symbol, unknown>) => number;
                 borderBottom: (theme: Record<symbol, unknown>) => string;
             };
         };

package/tokens/tabs.js

@@ -20,7 +20,7 @@ const u = {
         position: "absolute",
         width: "100%",
         bottom: 0,
-        zIndex: -100,
+        zIndex: (o) => -e(o, "zIndex.low", 100),
         borderBottom: (o) => r.generic({
           width: e(o, "values.borderThin", "theme.values.borderThin"),
           color: e(o, "colors.border.default", "theme.colors.border.default")

package/tokens/textarea.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @TODO: Cerebra
+ * - Align with design
+ */
 export declare const textarea: {
     default: {
         width: string;

package/tokens/tooltip.d.ts

@@ -3,9 +3,13 @@ export declare const tooltip: {
         position: string;
         display: string;
         whiteSpace: string;
+        color: (theme: Record<symbol, unknown>) => string;
         backgroundColor: (theme: Record<symbol, unknown>) => string;
         padding: (theme: Record<symbol, unknown>) => string;
-        zIndex: number;
+        zIndex: (theme: Record<symbol, unknown>) => string;
+        fontSize: (theme: Record<symbol, unknown>) => string;
+        fontWeight: (theme: Record<symbol, unknown>) => string;
+        lineHeight: (theme: Record<symbol, unknown>) => string;
         '&::after': {
             position: string;
             content: string;

package/tokens/tooltip.js

@@ -1,67 +1,69 @@
-import { display as e } from "./display.js";
 import { get as o } from "../utils/helpers.js";
-import { Z_INDEX as l } from "../constants/positioning.js";
-const t = 7, g = {
+const l = 6, r = {
   default: {
     position: "absolute",
     display: "block",
     whiteSpace: "nowrap",
-    backgroundColor: (r) => o(r, 'colors.neutral["grey.40"]', 'theme.colors.neutral["grey.40"]'),
-    padding: (r) => o(r, "spacing.md", "theme.spacing.md"),
-    zIndex: l.TOP,
+    color: (t) => o(t, "colors.text.black", "theme.colors.text.black"),
+    backgroundColor: (t) => o(t, "colors.bg.fill.tooltip.default", "theme.colors.bg.fill.tooltip.default"),
+    padding: (t) => `${o(t, "spacing.xs", "theme.spacing.xs")} ${o(t, "spacing.sm", "theme.spacing.sm")}`,
+    zIndex: (t) => o(t, "zIndex.top", "theme.zIndex.top"),
+    fontSize: (t) => o(t, "font.size.caption", "font.size.caption"),
+    fontWeight: (t) => o(t, "font.weight.normal", "theme.font.weight.normal"),
+    lineHeight: (t) => o(t, "font.line.height.caption", "theme.font.line.height.caption"),
     "&::after": {
       position: "absolute",
       content: '""',
-      border: `${t}px solid transparent`
+      border: `${l}px solid transparent`
     },
     "&.tooltip-bottom": {
       transform: "translateX(-50%)",
       "&::after": {
-        top: -t,
+        top: -l,
         left: "50%",
-        borderLeftColor: (r) => o(r, 'colors.neutral["grey.40"]', 'theme.colors.neutral["grey.40"]'),
-        borderTopColor: (r) => o(r, 'colors.neutral["grey.40"]', 'theme.colors.neutral["grey.40"]'),
+        borderLeftColor: (t) => o(t, "colors.bg.fill.tooltip.default", "theme.colors.bg.fill.tooltip.default"),
+        borderTopColor: (t) => o(t, "colors.bg.fill.tooltip.default", "theme.colors.bg.fill.tooltip.default"),
         transform: "translateX(-50%) rotate(45deg)"
       }
     },
     "&.tooltip-top": {
       transform: "translateX(-50%)",
       "&::after": {
-        bottom: -t,
+        bottom: -l,
         left: "50%",
-        borderRightColor: (r) => o(r, 'colors.neutral["grey.40"]', 'theme.colors.neutral["grey.40"]'),
-        borderBottomColor: (r) => o(r, 'colors.neutral["grey.40"]', 'theme.colors.neutral["grey.40"]'),
+        borderRightColor: (t) => o(t, "colors.bg.fill.tooltip.default", "theme.colors.bg.fill.tooltip.default"),
+        borderBottomColor: (t) => o(t, "colors.bg.fill.tooltip.default", "theme.colors.bg.fill.tooltip.default"),
         transform: "translateX(-50%) rotate(45deg)"
       }
     },
     "&.tooltip-left": {
       transform: "translateY(-50%)",
       "&::after": {
-        right: -t,
+        right: -l,
         top: "50%",
-        borderRightColor: (r) => o(r, 'colors.neutral["grey.40"]', 'theme.colors.neutral["grey.40"]'),
-        borderTopColor: (r) => o(r, 'colors.neutral["grey.40"]', 'theme.colors.neutral["grey.40"]'),
+        borderRightColor: (t) => o(t, "colors.bg.fill.tooltip.default", "theme.colors.bg.fill.tooltip.default"),
+        borderTopColor: (t) => o(t, "colors.bg.fill.tooltip.default", "theme.colors.bg.fill.tooltip.default"),
         transform: "translateY(-50%) rotate(45deg)"
       }
     },
     "&.tooltip-right": {
       transform: "translateY(-50%)",
       "&::after": {
-        left: -t,
+        left: -l,
         top: "50%",
-        borderLeftColor: (r) => o(r, 'colors.neutral["grey.40"]', 'theme.colors.neutral["grey.40"]'),
-        borderBottomColor: (r) => o(r, 'colors.neutral["grey.40"]', 'theme.colors.neutral["grey.40"]'),
+        borderLeftColor: (t) => o(t, "colors.bg.fill.tooltip.default", "theme.colors.bg.fill.tooltip.default"),
+        borderBottomColor: (t) => o(t, "colors.bg.fill.tooltip.default", "theme.colors.bg.fill.tooltip.default"),
         transform: "translateY(-50%) rotate(45deg) "
       }
     }
   },
   wrapper: {
     default: {
-      display: e.inlineBlock,
+      display: "inline-block",
       position: "relative"
     }
   }
 };
 export {
-  g as tooltip
+  r as tooltip
 };