gd-design-library 1.0.2 → 1.2.0

package/tokens/card.js

@@ -1,21 +1,18 @@
-import { display as o, flexAlignItems as l } from "./display.js";
-import { CardVariant as e, CardSizeVariant as n } from "../types/card.js";
 import { get as i } from "../utils/helpers.js";
-import { FlexDirection as a } from "../types/layout.js";
-const h = {
+const e = {
   default: {},
   title: {
     default: (t) => ({
       margin: i(t, "spacing.none", "theme.spacing.none"),
       padding: i(t, "spacing.none", "theme.spacing.none")
     }),
-    [e.Vertical]: {
-      [n.Default]: {},
-      [n.Sm]: {}
+    vertical: {
+      default: {},
+      sm: {}
     },
-    [e.Horizontal]: {
-      [n.Default]: {},
-      [n.Sm]: {}
+    horizontal: {
+      default: {},
+      sm: {}
     }
   },
   description: {
@@ -23,46 +20,46 @@ const h = {
       margin: i(t, "spacing.none", "theme.spacing.none"),
       padding: i(t, "spacing.none", "theme.spacing.none")
     }),
-    [e.Vertical]: {
-      [n.Default]: {},
-      [n.Sm]: {}
+    vertical: {
+      default: {},
+      sm: {}
     },
-    [e.Horizontal]: {
-      [n.Default]: {},
-      [n.Sm]: {}
+    horizontal: {
+      default: {},
+      sm: {}
     }
   },
   rating: {
     default: (t) => ({
-      display: o.flex,
-      alignItems: l.start,
+      display: "flex",
+      alignItems: "flex-start",
       gap: i(t, "spacing.sm", "theme.spacing.sm")
     }),
-    [e.Vertical]: {
-      [n.Default]: (t) => ({
+    vertical: {
+      default: (t) => ({
         color: i(t, "colors.text.caption", "theme.colors.text.caption"),
         fontSize: i(t, "font.size.caption", "theme.font.size.caption"),
         fontWeight: i(t, "font.weight.normal", "theme.font.weight.normal"),
         lineHeight: i(t, "font.line.height.caption", "theme.font.line.height.caption")
       }),
-      [n.Sm]: (t) => ({
+      sm: (t) => ({
         color: i(t, "colors.text.caption", "theme.colors.text.caption"),
-        flexDirection: a.Column,
+        flexDirection: "column",
         fontSize: i(t, "font.size.caption", "theme.font.size.caption"),
         fontWeight: i(t, "font.weight.normal", "theme.font.weight.normal"),
         lineHeight: i(t, "font.line.height.caption", "theme.font.line.height.caption")
       })
     },
-    [e.Horizontal]: {
-      [n.Default]: (t) => ({
+    horizontal: {
+      default: (t) => ({
         color: i(t, "colors.text.caption", "theme.colors.text.caption"),
         fontSize: i(t, "font.size.caption", "theme.font.size.caption"),
         fontWeight: i(t, "font.weight.normal", "theme.font.weight.normal"),
         lineHeight: i(t, "font.line.height.caption", "theme.font.line.height.caption")
       }),
-      [n.Sm]: (t) => ({
+      sm: (t) => ({
         color: i(t, "colors.text.caption", "theme.colors.text.caption"),
-        flexDirection: a.Column,
+        flexDirection: "column",
         fontSize: i(t, "font.size.caption", "theme.font.size.caption"),
         fontWeight: i(t, "font.weight.normal", "theme.font.weight.normal"),
         lineHeight: i(t, "font.line.height.caption", "theme.font.line.height.caption")
@@ -71,46 +68,46 @@ const h = {
   },
   button: {
     default: {
-      display: o.flex
+      display: "flex"
     },
-    [e.Vertical]: {
-      [n.Default]: {},
-      [n.Sm]: {}
+    vertical: {
+      default: {},
+      sm: {}
     },
-    [e.Horizontal]: {
-      [n.Default]: {},
-      [n.Sm]: {}
+    horizontal: {
+      default: {},
+      sm: {}
     }
   },
   image: {
     default: {},
-    [e.Vertical]: {
-      [n.Default]: {},
-      [n.Sm]: {}
+    vertical: {
+      default: {},
+      sm: {}
     },
-    [e.Horizontal]: {
-      [n.Default]: {},
-      [n.Sm]: {}
+    horizontal: {
+      default: {},
+      sm: {}
     }
   },
   counter: {
     default: {},
-    [e.Vertical]: {
-      [n.Default]: {},
-      [n.Sm]: {}
+    vertical: {
+      default: {},
+      sm: {}
     },
-    [e.Horizontal]: {
-      [n.Default]: {},
-      [n.Sm]: {}
+    horizontal: {
+      default: {},
+      sm: {}
     }
   },
   price: {
     default: {
-      display: o.flex
+      display: "flex"
     },
-    [e.Vertical]: {
-      [n.Default]: {},
-      [n.Sm]: (t) => ({
+    vertical: {
+      default: {},
+      sm: (t) => ({
         "& > div > *": {
           fontSize: i(t, "font.size.h6", "theme.font.size.h6"),
           fontWeight: i(t, "font.weight.medium", "theme.font.weight.medium"),
@@ -120,9 +117,9 @@ const h = {
         }
       })
     },
-    [e.Horizontal]: {
-      [n.Default]: {},
-      [n.Sm]: (t) => ({
+    horizontal: {
+      default: {},
+      sm: (t) => ({
         "& > div > *": {
           fontSize: i(t, "font.size.h6", "theme.font.size.h6"),
           fontWeight: i(t, "font.weight.medium", "theme.font.weight.medium"),
@@ -135,5 +132,5 @@ const h = {
   }
 };
 export {
-  h as card
+  e as card
 };

package/tokens/carousel.d.ts

@@ -7,7 +7,7 @@ export declare const carousel: {
             overflow: string;
             width: string;
             display: string;
-            zIndex: number;
+            zIndex: (theme: Record<symbol, unknown>) => string;
             gap: string;
         };
         variant: {
@@ -84,7 +84,7 @@ export declare const carousel: {
         transform: string;
         width: string;
         padding: string;
-        zIndex: number;
+        zIndex: (theme: Record<symbol, unknown>) => string;
     };
     carouselDots: {
         display: string;

package/tokens/carousel.js

@@ -1,12 +1,11 @@
 import { display as o, flexAlignItems as n } from "./display.js";
 import { cursors as a } from "./cursors.js";
-import { ButtonVariant as s } from "../types/button.js";
+import { ButtonVariant as l } from "../types/button.js";
 import { get as t } from "../utils/helpers.js";
-import { FlexDirection as c } from "../types/layout.js";
+import { FlexDirection as s } from "../types/layout.js";
 import { calculateJustify as i } from "../utils/layout.js";
-import { Z_INDEX as l } from "../constants/positioning.js";
 import { SizeVariant as r } from "../types/common.js";
-const b = {
+const u = {
   default: {},
   container: {
     default: {
@@ -14,7 +13,7 @@ const b = {
       overflow: "hidden",
       width: "100%",
       display: o.flex,
-      zIndex: l.FIRST,
+      zIndex: (e) => t(e, "zIndex.first", "theme.zIndex.first"),
       gap: "1rem"
     },
     variant: {
@@ -91,7 +90,7 @@ const b = {
     transform: "translateY(-50%)",
     width: "100%",
     padding: "0.5rem 1rem",
-    zIndex: l.HIGH
+    zIndex: (e) => t(e, "zIndex.high", "theme.zIndex.high")
   },
   carouselDots: {
     display: o.flex,
@@ -124,7 +123,7 @@ const b = {
       gap: "0.5rem"
     },
     vertical: {
-      flexDirection: c.Column,
+      flexDirection: s.Column,
       flex: "0 0 50px",
       overflowX: "hidden",
       alignItems: n.center
@@ -184,7 +183,7 @@ const b = {
       height: (e) => t(e, `spacing.${r.Xl}`, `theme.spacing.${r.Xl}`)
     },
     attrs: {
-      variant: s.Text,
+      variant: l.Text,
       isIcon: !0
     }
   },
@@ -202,5 +201,5 @@ const b = {
   }
 };
 export {
-  b as carousel
+  u as carousel
 };

package/tokens/chat.d.ts

@@ -1,10 +1,8 @@
-import { ButtonVariant } from '../types';
 export declare const chat: {
     wrapper: {
         default: {
             display: string;
             position: string;
-            minHeight: string;
             height: string;
             width: string;
             overflow: string;
@@ -23,18 +21,17 @@ export declare const chat: {
             paddingBottom: string | number;
             gap: string | number;
             minHeight: number;
+            margin: string;
         };
         md: {
             paddingLeft: string;
             paddingRight: string;
         };
         mdXl: {
-            paddingLeft: string;
-            paddingRight: string;
+            maxWidth: string;
         };
         xl: {
-            paddingLeft: string;
-            paddingRight: string;
+            maxWidth: string;
         };
     };
     mainHeader: {
@@ -53,52 +50,76 @@ export declare const chat: {
         flexDirection: string;
     };
     sidebar: {
-        minWidth: string;
-        maxWidth: string;
-        overflow: string;
-        borderRight: string;
-        backgroundColor: (theme: Record<symbol, unknown>) => string;
-        borderColor: (theme: Record<symbol, unknown>) => string;
-        flex: string;
-        display: string;
-        flexDirection: string;
-        minHeight: string;
+        default: {
+            overflow: string;
+            borderRight: string;
+            position: string;
+            transition: (theme: Record<symbol, unknown>) => string;
+            backgroundColor: (theme: Record<symbol, unknown>) => string;
+            borderColor: (theme: Record<symbol, unknown>) => string;
+            display: string;
+            flexDirection: string;
+            minHeight: string;
+            transform: string;
+            pointerEvents: string;
+        };
+        open: {
+            width: string;
+        };
+        close: {
+            width: number;
+            transform: string;
+            pointerEvents: string;
+        };
+    };
+    sidebarMinified: {
+        default: {
+            overflow: string;
+            borderRight: string;
+            position: string;
+            transition: (theme: Record<symbol, unknown>) => string;
+            backgroundColor: (theme: Record<symbol, unknown>) => string;
+            borderColor: (theme: Record<symbol, unknown>) => string;
+            display: string;
+            flexDirection: string;
+            minHeight: string;
+            transform: string;
+            pointerEvents: string;
+            opacity: number;
+        };
+        open: {};
+        close: {
+            opacity: number;
+            width: number;
+            transform: string;
+            pointerEvents: string;
+        };
     };
     sidebarWrapper: {
-        default: {};
-        auto: {
-            default: {};
-            md: (theme: Record<symbol, unknown>) => {
-                position: string;
-                display: string;
-                flexDirection: string;
-                left: number;
-                top: number;
-                right: number;
-                bottom: number;
-                backgroundColor: string;
-                zIndex: number;
-            };
+        default: {
+            transition: (theme: Record<symbol, unknown>) => string;
         };
-        desktop: {
-            default: {};
-            md: {};
-        };
-        drawer: {
-            default: {
-                position: string;
-                display: string;
-                flexDirection: string;
-                left: number;
-                top: number;
-                right: number;
-                bottom: number;
-                backgroundColor: (theme: Record<symbol, unknown>) => string;
-                zIndex: number;
-            };
-            md: {};
+        open: {
+            opacity: number;
+            pointerEvents: string;
+        };
+        close: {
+            opacity: number;
+            pointerEvents: string;
+        };
+        md: (theme: Record<symbol, unknown>) => {
+            position: string;
+            display: string;
+            flexDirection: string;
+            left: number;
+            top: number;
+            right: number;
+            bottom: number;
+            backgroundColor: string;
+            zIndex: string;
         };
     };
+    sidebarContentWrapper: {};
     sidebarHeader: {
         minHeight: string;
         height: string;
@@ -120,7 +141,7 @@ export declare const chat: {
             };
         };
         attrs: {
-            variant: ButtonVariant;
+            variant: string;
         };
         open: {
             transform: string;

package/tokens/chat.js

@@ -1,15 +1,10 @@
-import { hexToRgba as i, getSpacing as n } from "./utils.js";
-import { flexAlignItems as r, display as t } from "./display.js";
-import { ChatLayoutVariant as l } from "../types/chat.js";
-import { ButtonVariant as d } from "../types/button.js";
+import { hexToRgba as r, getSpacing as t } from "./utils.js";
 import { get as o } from "../utils/helpers.js";
-import { Z_INDEX as a } from "../constants/positioning.js";
-const x = {
+const n = {
   wrapper: {
     default: {
-      display: t.flex,
+      display: "flex",
       position: "relative",
-      minHeight: "500px",
       height: "100%",
       width: "100%",
       overflow: "hidden"
@@ -21,98 +16,121 @@ const x = {
       position: "relative",
       width: "100%",
       height: "100%",
-      display: t.flex,
+      display: "flex",
       flexDirection: "column",
       justifyContent: "flex-end",
-      alignItems: r.end,
-      paddingBottom: n(8),
-      gap: n(4),
-      minHeight: 0
+      alignItems: "flex-end",
+      paddingBottom: t(8),
+      gap: t(4),
+      minHeight: 0,
+      margin: "0 auto"
     },
     md: {
       paddingLeft: "24px",
       paddingRight: "24px"
     },
     mdXl: {
-      paddingLeft: "80px",
-      paddingRight: "80px"
+      maxWidth: "80%"
     },
     xl: {
-      paddingLeft: "260px",
-      paddingRight: "260px"
+      maxWidth: "70%"
     }
   },
   mainHeader: {
     minHeight: "56px",
     height: "56px",
-    display: t.flex,
+    display: "flex",
     overflow: "hidden",
-    alignItems: r.center,
+    alignItems: "center",
     padding: "0 24px",
     borderBottom: "1px solid",
-    borderColor: (e) => o(e, 'colors.neutral["grey.30"]', 'theme.colors.neutral["grey.30"]')
+    borderColor: (e) => o(e, "colors.border.default", "theme.colors.border.default")
   },
   body: {
-    display: t.flex,
+    display: "flex",
     flex: 1,
     flexDirection: "column"
   },
   sidebar: {
-    minWidth: "250px",
-    maxWidth: "250px",
-    overflow: "hidden",
-    borderRight: "1px solid",
-    backgroundColor: (e) => o(e, "colors.neutral.white", "theme.colors.neutral.white"),
-    borderColor: (e) => o(e, 'colors.neutral["grey.30"]', 'theme.colors.neutral["grey.30"]'),
-    flex: "0 0 250px",
-    display: t.flex,
-    flexDirection: "column",
-    minHeight: "100%"
+    default: {
+      overflow: "hidden",
+      borderRight: "1px solid",
+      position: "relative",
+      transition: (e) => o(e, "values.transitions.chat.sidebar", "theme.values.transitions.chat.sidebar"),
+      backgroundColor: (e) => o(e, "colors.bg.surface", "theme.colors.bg.surface"),
+      borderColor: (e) => o(e, "colors.border.default", "theme.colors.border.default"),
+      display: "flex",
+      flexDirection: "column",
+      minHeight: "100%",
+      transform: "translateX(0)",
+      pointerEvents: "auto"
+    },
+    open: {
+      width: "250px"
+    },
+    close: {
+      width: 0,
+      transform: "translateX(-100%)",
+      pointerEvents: "none"
+    }
+  },
+  sidebarMinified: {
+    default: {
+      overflow: "hidden",
+      borderRight: "1px solid",
+      position: "relative",
+      transition: (e) => o(e, "values.transitions.chat.sidebar", "theme.values.transitions.chat.sidebar"),
+      backgroundColor: (e) => o(e, "colors.bg.surface", "theme.colors.bg.surface"),
+      borderColor: (e) => o(e, "colors.border.default", "theme.colors.border.default"),
+      display: "flex",
+      flexDirection: "column",
+      minHeight: "100%",
+      transform: "translateX(0)",
+      pointerEvents: "auto",
+      opacity: 1
+    },
+    open: {},
+    close: {
+      opacity: 0,
+      width: 0,
+      transform: "translateX(-100%)",
+      pointerEvents: "none"
+    }
   },
   sidebarWrapper: {
-    default: {},
-    [l.Auto]: {
-      default: {},
-      md: (e) => ({
-        position: "absolute",
-        display: t.block,
-        flexDirection: "column",
-        left: 0,
-        top: 0,
-        right: 0,
-        bottom: 0,
-        backgroundColor: i(o(e, "colors.neutral.black", "theme.colors.neutral.black"), 0.1),
-        zIndex: a.MEDIUM
-      })
+    default: {
+      transition: (e) => o(e, "values.transitions.chat.sidebar", "theme.values.transitions.chat.sidebarWrapper")
     },
-    [l.Desktop]: {
-      default: {},
-      md: {}
+    open: {
+      opacity: 1,
+      pointerEvents: "auto"
     },
-    [l.Drawer]: {
-      default: {
-        position: "absolute",
-        display: t.block,
-        flexDirection: "column",
-        left: 0,
-        top: 0,
-        right: 0,
-        bottom: 0,
-        backgroundColor: (e) => i(o(e, "colors.neutral.black", "theme.colors.neutral.black"), 0.1),
-        zIndex: a.MEDIUM
-      },
-      md: {}
-    }
+    close: {
+      opacity: 0,
+      pointerEvents: "none"
+    },
+    md: (e) => ({
+      position: "absolute",
+      display: "block",
+      flexDirection: "column",
+      left: 0,
+      top: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: r(o(e, "colors.neutral.black", "theme.colors.neutral.black"), 0.1),
+      zIndex: o(e, "zIndex.medium", "theme.zIndex.medium")
+    })
   },
+  sidebarContentWrapper: {},
   sidebarHeader: {
     minHeight: "56px",
     height: "56px",
-    display: t.flex,
+    display: "flex",
     overflow: "hidden",
-    alignItems: r.center,
+    alignItems: "center",
     padding: "0 24px",
     borderBottom: "1px solid",
-    borderColor: (e) => o(e, 'colors.neutral["grey.30"]', 'theme.colors.neutral["grey.30"]')
+    borderColor: (e) => o(e, "colors.border.default", "theme.colors.border.default")
   },
   toggleButton: {
     default: {
@@ -125,7 +143,7 @@ const x = {
       }
     },
     attrs: {
-      variant: d.Text
+      variant: "text"
     },
     open: {
       transform: "rotate(90deg)"
@@ -133,11 +151,11 @@ const x = {
   },
   toggleIcon: {
     name: "arrowDown",
-    fill: 'neutral["grey.90"]',
+    fill: "icon.black",
     width: 24,
     height: 24
   }
 };
 export {
-  x as chat
+  n as chat
 };

package/tokens/constants.d.ts

@@ -1,2 +1 @@
-export declare const EXCLUDED_BOX_STYLE_PROPS: string[];
 export declare const BOX_STYLE_PROPS: string[];

package/tokens/constants.js

@@ -1,4 +1,4 @@
-const i = ["overflow", "border", "minWidth", "width", "maxWidth", "minHeight", "height", "maxHeight", "margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "padding", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "zIndex", "position", "top", "right", "left", "bottom", "flex", "flexWrap", "flexGrow", "flexBasis", "flexDirection", "flexShrink", "alignItems", "alignSelf", "justifyContent", "justifySelf", "order", "gap"];
+const i = ["display", "overflow", "border", "minWidth", "width", "maxWidth", "minHeight", "height", "maxHeight", "margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "padding", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "zIndex", "position", "top", "right", "left", "bottom", "flex", "flexWrap", "flexGrow", "flexBasis", "flexDirection", "flexShrink", "alignContent", "alignItems", "alignSelf", "justifyContent", "justifySelf", "order", "gap"];
 export {
   i as BOX_STYLE_PROPS
 };