gd-design-library 1.0.2 → 1.2.0

package/tokens/index.js

@@ -2,8 +2,8 @@ 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 p } from "./radiogroup.js";
-import { draganddropfiles as i } from "./draganddropfiles.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";
@@ -15,46 +15,46 @@ import { font as d } from "./font.js";
 import { colors as b } from "./colors.js";
 import { breakpoints as u } from "./breakpoints.js";
 import { scale as g, space as h, spacing as k } from "./spacing.js";
-import { radius as T } from "./radius.js";
-import { typography as x } from "./typography.js";
-import { borders as w } from "./borders.js";
-import { button as A } from "./button.js";
-import { input as y } from "./input.js";
-import { label as D } from "./label.js";
-import { textarea as _ } from "./textarea.js";
-import { link as v } from "./link.js";
-import { form as B } from "./form.js";
-import { wrapper as C } from "./wrapper.js";
-import { loader as E } from "./loader.js";
-import { switchToggle as F } from "./toggle.js";
-import { skeleton as H } from "./skeleton.js";
-import { animations as I } from "./animations.js";
-import { snackbar as K } from "./snackbar.js";
-import { DEFAULT_SNACKBAR_WIDTH as Jr } from "./snackbar.js";
-import { list as L } from "./list.js";
-import { select as M } from "./select.js";
-import { search as N } from "./search.js";
-import { breadcrumbs as R } from "./breadcrumbs.js";
-import { icon as S } from "./icon.js";
-import { reset as U } from "./reset.js";
-import { tabs as W } from "./tabs.js";
-import { stepper as j } from "./stepper.js";
-import { rating as q } from "./rating.js";
-import { header as z } from "./header.js";
-import { switchToken as G } from "./switch.js";
-import { chat as J } from "./chat.js";
-import { slider as O } from "./slider.js";
-import { menu as P } from "./menu.js";
-import { scroll as Q } from "./scroll.js";
-const qr = {
-  button: A,
+import { radius as x } from "./radius.js";
+import { typography as w } from "./typography.js";
+import { borders as T } from "./borders.js";
+import { button as y } from "./button.js";
+import { input as v } from "./input.js";
+import { label as z } from "./label.js";
+import { textarea as I } from "./textarea.js";
+import { link as M } from "./link.js";
+import { form as j } from "./form.js";
+import { wrapper as q } from "./wrapper.js";
+import { loader as A } from "./loader.js";
+import { switchToggle as B } from "./toggle.js";
+import { skeleton as C } from "./skeleton.js";
+import { animations as D } from "./animations.js";
+import { snackbar as E } from "./snackbar.js";
+import { list as F } from "./list.js";
+import { select as G } from "./select.js";
+import { search as H } from "./search.js";
+import { breadcrumbs as J } from "./breadcrumbs.js";
+import { icon as K } from "./icon.js";
+import { reset as L } from "./reset.js";
+import { tabs as N } from "./tabs.js";
+import { stepper as O } from "./stepper.js";
+import { rating as P } from "./rating.js";
+import { header as Q } from "./header.js";
+import { switchToken as R } from "./switch.js";
+import { chat as S } from "./chat.js";
+import { slider as U } from "./slider.js";
+import { menu as V } from "./menu.js";
+import { scroll as W } from "./scroll.js";
+import { zIndex as X } from "./zIndex.js";
+const Rr = {
+  button: y,
   breakpoints: u,
   separator: r,
   draganddrop: o,
   avatar: m,
   chatbubble: t,
-  radiogroup: p,
-  draganddropfiles: i,
+  radiogroup: i,
+  draganddropfiles: p,
   inputfile: f,
   carousel: e,
   searchModal: a,
@@ -64,89 +64,90 @@ const qr = {
   counter: l,
   font: d,
   colors: b,
-  borders: w,
-  scroll: Q,
-  radius: T,
-  input: y,
-  label: D,
-  link: v,
-  form: B,
-  typography: x,
-  textarea: _,
-  wrapper: C,
-  loader: E,
-  switchToggle: F,
-  skeleton: H,
-  animations: I,
-  snackbar: K,
-  list: L,
-  select: M,
-  search: N,
-  breadcrumbs: R,
-  icon: S,
-  reset: U,
-  tabs: W,
-  stepper: j,
-  rating: q,
-  header: z,
-  switchToken: G,
-  chat: J,
-  slider: O,
-  menu: P,
+  borders: T,
+  scroll: W,
+  radius: x,
+  input: v,
+  label: z,
+  link: M,
+  form: j,
+  typography: w,
+  textarea: I,
+  wrapper: q,
+  loader: A,
+  switchToggle: B,
+  skeleton: C,
+  animations: D,
+  snackbar: E,
+  list: F,
+  select: G,
+  search: H,
+  breadcrumbs: J,
+  icon: K,
+  reset: L,
+  tabs: N,
+  stepper: O,
+  rating: P,
+  header: Q,
+  switchToken: R,
+  chat: S,
+  slider: U,
+  menu: V,
   spacing: k,
   space: h,
-  scale: g
+  scale: g,
+  zIndex: X
 };
 export {
-  Jr as DEFAULT_SNACKBAR_WIDTH,
-  I as animations,
+  D as animations,
   m as avatar,
-  w as borders,
+  T as borders,
   c as box,
-  R as breadcrumbs,
+  J as breadcrumbs,
   u as breakpoints,
-  A as button,
+  y as button,
   n as card,
   e as carousel,
-  J as chat,
+  S as chat,
   t as chatbubble,
   b as colors,
   l as counter,
-  qr as defaultTokens,
+  Rr as defaultTokens,
   o as draganddrop,
-  i as draganddropfiles,
+  p as draganddropfiles,
   d as font,
-  B as form,
-  z as header,
-  S as icon,
-  y as input,
+  j as form,
+  Q as header,
+  K as icon,
+  v as input,
   f as inputfile,
-  D as label,
-  v as link,
-  L as list,
-  E as loader,
-  P as menu,
+  z as label,
+  M as link,
+  F as list,
+  A as loader,
+  V as menu,
   s as progressbar,
-  p as radiogroup,
-  T as radius,
-  q as rating,
-  U as reset,
+  i as radiogroup,
+  x as radius,
+  P as rating,
+  L as reset,
   g as scale,
-  Q as scroll,
-  N as search,
+  W as scroll,
+  H as search,
   a as searchModal,
-  M as select,
+  G as select,
   r as separator,
-  H as skeleton,
-  O as slider,
-  K as snackbar,
+  C as skeleton,
+  U as slider,
+  E as snackbar,
   h as space,
   k as spacing,
-  j as stepper,
-  F as switchToggle,
-  G as switchToken,
-  W as tabs,
-  _ as textarea,
-  x as typography,
-  C as wrapper
+  O as stepper,
+  B as switchToggle,
+  R as switchToken,
+  N as tabs,
+  I as textarea,
+  w as typography,
+  q as wrapper,
+  X as zIndex
 };

package/tokens/input.d.ts

@@ -30,7 +30,7 @@ export declare const input: {
             '&:not([type="radio"], [type="checkbox"], [type="range"])': {
                 height: string;
                 width: string;
-                zIndex: number;
+                zIndex: (theme: Record<symbol, unknown>) => string;
             };
             '&[type="number"]': {
                 appearance: string;
@@ -206,7 +206,7 @@ export declare const input: {
             display: string;
             alignItems: string;
             position: string;
-            zIndex: number;
+            zIndex: (theme: Record<symbol, unknown>) => string;
         };
     };
 };

package/tokens/input.js

@@ -1,25 +1,24 @@
-import m from "../assets/svg/checkbox_border.svg.js";
-import h from "../assets/svg/checkbox_bg_checked.svg.js";
-import b from "../assets/svg/checkbox_disabled_bg_checked.svg.js";
-import u from "../assets/svg/radio_bg.svg.js";
-import g from "../assets/svg/radio_bg_checked.svg.js";
+import p from "../assets/svg/checkbox_border.svg.js";
+import m from "../assets/svg/checkbox_bg_checked.svg.js";
+import h from "../assets/svg/checkbox_disabled_bg_checked.svg.js";
+import b from "../assets/svg/radio_bg.svg.js";
+import u from "../assets/svg/radio_bg_checked.svg.js";
 import { borders as t } from "./borders.js";
-import { flexAlignItems as l, display as f } from "./display.js";
+import { flexAlignItems as l, display as g } from "./display.js";
 import { cursors as n } from "./cursors.js";
 import { getImgSrc as i, getFocusStyles as c } from "./utils.js";
 import { InputColorVariant as r } from "../types/input.js";
-import { Z_INDEX as d } from "../constants/positioning.js";
 import { get as o } from "../utils/helpers.js";
-import { FlexDirection as x } from "../types/layout.js";
-import { TypographyVariant as a } from "../types/typography.js";
-const s = (e, p) => ({
+import { FlexDirection as f } from "../types/layout.js";
+import { TypographyVariant as s } from "../types/typography.js";
+const a = (e, d) => ({
   position: "absolute",
   top: 0,
   left: 0,
   width: "100%",
   height: "100%",
   border: t.generic({
-    width: p,
+    width: d,
     color: e
   })
 }), W = {
@@ -33,7 +32,7 @@ const s = (e, p) => ({
       position: "relative"
     },
     withGap: {
-      flexDirection: x.Column,
+      flexDirection: f.Column,
       alignItems: l.start,
       gap: (e) => o(e, "spacing.xs", "theme.spacing.xs")
     }
@@ -53,7 +52,7 @@ const s = (e, p) => ({
       '&:not([type="radio"], [type="checkbox"], [type="range"])': {
         height: "40px",
         width: "100%",
-        zIndex: d.FIRST
+        zIndex: (e) => o(e, "zIndex.first", "theme.zIndex.first")
       },
       '&[type="number"]': {
         appearance: "textfield",
@@ -74,7 +73,7 @@ const s = (e, p) => ({
         width: "18px",
         backgroundColor: "transparent",
         border: "none",
-        backgroundImage: i(m),
+        backgroundImage: i(p),
         "&:focus-visible": (e) => c({
           inset: "-4px",
           borderRadius: "3px",
@@ -95,9 +94,9 @@ const s = (e, p) => ({
         backgroundSize: "18px",
         backgroundColor: (e) => o(e, "colors.neutral.white", "theme.colors.neutral.white"),
         border: "none",
-        backgroundImage: i(h),
+        backgroundImage: i(m),
         "&[readonly], &:disabled": {
-          backgroundImage: i(b)
+          backgroundImage: i(h)
         }
       },
       // RADIO
@@ -107,7 +106,7 @@ const s = (e, p) => ({
         height: "20px",
         width: "20px",
         border: "none",
-        backgroundImage: i(u),
+        backgroundImage: i(b),
         "&:focus-visible": c({
           inset: "-4px",
           borderRadius: "50%"
@@ -117,7 +116,7 @@ const s = (e, p) => ({
         }
       },
       '&[type="radio"]:checked': {
-        backgroundImage: i(g)
+        backgroundImage: i(u)
       }
     },
     defaultInteraction: {
@@ -133,24 +132,24 @@ const s = (e, p) => ({
     },
     mouseInteraction: {},
     [r.Primary]: {
-      "& + .Input__border": (e) => s(o(e, "colors.border.default", "theme.colors.border.default"), o(e, "values.borderThin", "theme.values.borderThin"))
+      "& + .Input__border": (e) => a(o(e, "colors.border.default", "theme.colors.border.default"), o(e, "values.borderThin", "theme.values.borderThin"))
     },
     [r.Success]: {
-      "& + .Input__border": (e) => s(o(e, "colors.border.success", "theme.colors.border.success"), o(e, "values.borderThin", "theme.values.borderThin"))
+      "& + .Input__border": (e) => a(o(e, "colors.border.success", "theme.colors.border.success"), o(e, "values.borderThin", "theme.values.borderThin"))
     },
     [r.Warning]: {
-      "& + .Input__border": (e) => s(o(e, "colors.primary.default", "theme.colors.primary.default"), o(e, "values.borderThin", "theme.values.borderThin"))
+      "& + .Input__border": (e) => a(o(e, "colors.primary.default", "theme.colors.primary.default"), o(e, "values.borderThin", "theme.values.borderThin"))
     },
     [r.Error]: {
-      "& + .Input__border": (e) => s(o(e, "colors.border.error", "theme.colors.border.error"), o(e, "values.borderThin", "theme.values.borderThin"))
+      "& + .Input__border": (e) => a(o(e, "colors.border.error", "theme.colors.border.error"), o(e, "values.borderThin", "theme.values.borderThin"))
     }
   },
   helper: {
     default: {
       sm: {
-        fontSize: (e) => o(e, `font.size.${a.Caption}`, `font.size.${a.Caption}`),
+        fontSize: (e) => o(e, `font.size.${s.Caption}`, `font.size.${s.Caption}`),
         fontWeight: (e) => o(e, "font.weight.normal", "theme.font.weight.normal"),
-        lineHeight: (e) => o(e, `font.line.height.${a.Caption}`, `theme.font.line.height.${a.Caption}`)
+        lineHeight: (e) => o(e, `font.line.height.${s.Caption}`, `theme.font.line.height.${s.Caption}`)
       },
       md: {
         color: (e) => o(e, "colors.text.disabled", "theme.colors.text.disabled"),
@@ -186,10 +185,10 @@ const s = (e, p) => ({
   },
   adornment: {
     default: {
-      display: f.flex,
+      display: g.flex,
       alignItems: l.center,
       position: "relative",
-      zIndex: d.FIRST
+      zIndex: (e) => o(e, "zIndex.first", "theme.zIndex.first")
     }
   }
 };

package/tokens/inputfile.d.ts

@@ -9,6 +9,6 @@ export declare const inputfile: {
         width: string;
         height: string;
         position: string;
-        zIndex: number;
+        zIndex: (theme: Record<symbol, unknown>) => string;
     };
 };

package/tokens/inputfile.js

@@ -1,5 +1,5 @@
-import { Z_INDEX as i } from "../constants/positioning.js";
-const o = {
+import { get as t } from "../utils/helpers.js";
+const n = {
   default: {
     overflow: "hidden",
     position: "relative"
@@ -10,9 +10,9 @@ const o = {
     width: "100%",
     height: "100%",
     position: "absolute",
-    zIndex: i.NEGATIVE
+    zIndex: (e) => t(e, "zIndex.negative", "theme.zIndex.negative")
   }
 };
 export {
-  o as inputfile
+  n as inputfile
 };

package/tokens/link.d.ts

@@ -1,4 +1,9 @@
 import { Cursors } from '../types';
+/**
+ * @TODO: Cerebra
+ * - Align with design
+ * - Add support for hover and active states
+ */
 export declare const link: {
     default: {
         fontFamily: (theme: Record<symbol, unknown>) => string;

package/tokens/loader.d.ts

@@ -2,6 +2,9 @@ export declare const loader: {
     default: {
         display: string;
     };
+    attrs: {
+        rounded: string;
+    };
     inline: {};
     section: {};
     fullPage: {};

package/tokens/loader.js

@@ -5,6 +5,9 @@ const l = {
   default: {
     display: "block"
   },
+  attrs: {
+    rounded: "none"
+  },
   inline: {},
   section: {},
   fullPage: {},

package/tokens/menu.d.ts

@@ -6,6 +6,7 @@ export declare const menu: {
         default: {
             backgroundColor: (theme: Record<symbol, unknown>) => string;
             position: string;
+            overflow: string;
             boxShadow: (theme: Record<symbol, unknown>) => string;
         };
     };

package/tokens/menu.js

@@ -7,6 +7,7 @@ const r = {
     default: {
       backgroundColor: (o) => e(o, "colors.neutral.white", "theme.colors.neutral.white"),
       position: "absolute",
+      overflow: "auto",
       boxShadow: (o) => e(o, 'shadows.box["1"]', 'theme.shadows.box["1"]')
     }
   }

package/tokens/modal.d.ts

@@ -5,8 +5,6 @@ export declare const modal: {
             alignItems: string;
             justifyContent: string;
             padding: string;
-            fontSize: (theme: Record<symbol, unknown>) => string;
-            fontWeight: string;
             borderBottom: (theme: Record<symbol, unknown>) => string;
         };
         withTitle: {
@@ -17,6 +15,9 @@ export declare const modal: {
         default: {
             display: string;
             alignItems: string;
+            fontSize: (theme: Record<symbol, unknown>) => string;
+            fontWeight: (theme: Record<symbol, unknown>) => string;
+            color: (theme: Record<symbol, unknown>) => string;
             padding: (theme: Record<symbol, unknown>) => string;
             margin: (theme: Record<symbol, unknown>) => string;
         };
@@ -60,7 +61,7 @@ export declare const modal: {
     closeButton: {
         default: {
             background: (theme: Record<symbol, unknown>) => string;
-            border: number;
+            border: string;
             cursor: string;
             padding: (theme: Record<symbol, unknown>) => string;
         };
@@ -76,12 +77,13 @@ export declare const modal: {
             display: string;
             alignItems: string;
             justifyContent: string;
-            zIndex: number;
+            zIndex: (theme: Record<symbol, unknown>) => string;
         };
     };
     icons: {
         close: {
             name: string;
+            fill: string;
             width: number;
             height: number;
         };