@lets-events/react 12.3.3 → 12.3.4

package/dist/index.mjs

@@ -1236,6 +1236,9 @@ var {
     lineHeights,
     radii,
     space
+  },
+  media: {
+    md: "(max-width: 690px)"
   }
 });
 
@@ -8033,27 +8036,70 @@ var DrawerOverlayStyled = styled("div", {
   right: 0,
   width: "100vw",
   height: "100vh",
-  background: "rgba(0, 0, 0, 0.4)"
+  background: "rgba(0, 0, 0, 0.4)",
+  transition: "opacity 200ms ease",
+  variants: {
+    open: {
+      true: {
+        opacity: "1"
+      },
+      false: {
+        pointerEvents: "none",
+        opacity: "0"
+      }
+    }
+  }
+});
+var DrawerWrapper = styled("div", {
+  position: "absolute",
+  top: 0,
+  right: 0,
+  height: "100vh",
+  overflow: "hidden",
+  variants: {
+    open: {
+      true: {},
+      false: {
+        pointerEvents: "none"
+      }
+    }
+  }
 });
 var DrawerContainerStyled = styled("div", {
   position: "absolute",
   top: 0,
   right: 0,
-  maxWidth: "calc(100% - 2rem)",
-  height: "100%",
+  height: "100vh",
   background: "$neutral50",
   display: "flex",
   flexDirection: "column",
   boxShadow: "-4px 0 12px rgba(0, 0, 0, 0.2)",
-  padding: "1.5rem 0",
-  overflowY: "auto"
+  overflowY: "auto",
+  width: "100%",
+  boxSizing: "border-box",
+  "@md": {
+    minWidth: "100vw",
+    maxWidth: "100vw"
+  },
+  transition: "transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1)",
+  paddingBottom: "1.5rem",
+  variants: {
+    open: {
+      true: {
+        transform: "translateX(0) scale(1)"
+      },
+      false: {
+        transform: "translateX(110%) scale(0.98)"
+      }
+    }
+  }
 });
 var DrawerHeaderDiv = styled("div", {
   display: "flex",
   justifyContent: "space-between",
   alignItems: "center",
   borderBottom: "1px solid $neutral300",
-  padding: "0 1.5rem 1rem",
+  padding: "1.5rem 1rem",
   position: "relative"
 });
 var DrawerHeaderTitle = styled("h2", {
@@ -8088,7 +8134,6 @@ function Drawer({
   goBackAction,
   zIndex = 1e3
 }) {
-  if (!isOpen) return null;
   return /* @__PURE__ */ jsxs7(Fragment, { children: [
     /* @__PURE__ */ jsx16(
       DrawerOverlayStyled,
@@ -8096,27 +8141,43 @@ function Drawer({
         css: {
           zIndex
         },
-        onClick: onClose
+        onClick: onClose,
+        open: isOpen
       }
     ),
-    /* @__PURE__ */ jsxs7(
-      DrawerContainerStyled,
+    /* @__PURE__ */ jsx16(
+      DrawerWrapper,
       {
-        style: {
-          width: width != null ? width : "34.25rem",
-          backgroundColor: colors[backgroundColor != null ? backgroundColor : "neutral50"],
-          zIndex: zIndex + 1
+        css: {
+          zIndex: zIndex + 1,
+          width: width != null ? width : "34.25rem"
         },
-        children: [
-          /* @__PURE__ */ jsxs7(DrawerHeaderDiv, { children: [
-            /* @__PURE__ */ jsxs7(Flex2, { gap: 8, align: "center", children: [
-              goBackIcon && goBackIcon && /* @__PURE__ */ jsx16(GoBackButtonStyled, { type: "button", onClick: goBackAction, children: goBackIcon }),
-              /* @__PURE__ */ jsx16(DrawerHeaderTitle, { children: title })
-            ] }),
-            /* @__PURE__ */ jsx16(DrawerHeaderCloseButton, { onClick: onClose, children: /* @__PURE__ */ jsx16(Icon_default, { size: "xl", color: "$dark600", name: "xmark" }) })
-          ] }),
-          children
-        ]
+        children: /* @__PURE__ */ jsxs7(
+          DrawerContainerStyled,
+          {
+            open: isOpen,
+            css: {
+              backgroundColor: colors[backgroundColor != null ? backgroundColor : "neutral50"]
+            },
+            children: [
+              /* @__PURE__ */ jsxs7(DrawerHeaderDiv, { children: [
+                /* @__PURE__ */ jsxs7(Flex2, { gap: 8, align: "center", children: [
+                  goBackIcon && goBackIcon && /* @__PURE__ */ jsx16(GoBackButtonStyled, { type: "button", onClick: goBackAction, children: goBackIcon }),
+                  /* @__PURE__ */ jsx16(DrawerHeaderTitle, { children: title })
+                ] }),
+                /* @__PURE__ */ jsx16(DrawerHeaderCloseButton, { onClick: onClose, children: /* @__PURE__ */ jsx16(Icon_default, { size: "xl", color: "$dark600", name: "xmark" }) })
+              ] }),
+              isOpen ? children : null,
+              isOpen ? children : null,
+              isOpen ? children : null,
+              isOpen ? children : null,
+              isOpen ? children : null,
+              isOpen ? children : null,
+              isOpen ? children : null,
+              isOpen ? children : null
+            ]
+          }
+        )
       }
     )
   ] });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lets-events/react",
-  "version": "12.3.3",
+  "version": "12.3.4",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/components/Drawer/index.tsx

@@ -8,6 +8,7 @@ import {
   DrawerHeaderTitle,
   DrawerHeaderCloseButton,
   GoBackButtonStyled,
+  DrawerWrapper,
 } from "./styledComponents";
 import { useOnClickOutside } from "../../hooks/useOnClickOutside";
 import { Flex } from "../Flex";
@@ -35,8 +36,6 @@ export function Drawer({
   goBackAction,
   zIndex = 1000,
 }: DrawerProps) {
-  if (!isOpen) return null;
-
   return (
     <>
       <DrawerOverlayStyled
@@ -44,29 +43,43 @@ export function Drawer({
           zIndex,
         }}
         onClick={onClose}
+        open={isOpen}
       />
-      <DrawerContainerStyled
-        style={{
-          width: width ?? "34.25rem",
-          backgroundColor: colors[backgroundColor ?? "neutral50"],
+      <DrawerWrapper
+        css={{
           zIndex: zIndex + 1,
+          width: width ?? "34.25rem",
         }}
       >
-        <DrawerHeaderDiv>
-          <Flex gap={8} align="center">
-            {goBackIcon && goBackIcon && (
-              <GoBackButtonStyled type="button" onClick={goBackAction}>
-                {goBackIcon}
-              </GoBackButtonStyled>
-            )}
-            <DrawerHeaderTitle>{title}</DrawerHeaderTitle>
-          </Flex>
-          <DrawerHeaderCloseButton onClick={onClose}>
-            <Icon size={"xl"} color="$dark600" name="xmark" />
-          </DrawerHeaderCloseButton>
-        </DrawerHeaderDiv>
-        {children}
-      </DrawerContainerStyled>
+        <DrawerContainerStyled
+          open={isOpen}
+          css={{
+            backgroundColor: colors[backgroundColor ?? "neutral50"],
+          }}
+        >
+          <DrawerHeaderDiv>
+            <Flex gap={8} align="center">
+              {goBackIcon && goBackIcon && (
+                <GoBackButtonStyled type="button" onClick={goBackAction}>
+                  {goBackIcon}
+                </GoBackButtonStyled>
+              )}
+              <DrawerHeaderTitle>{title}</DrawerHeaderTitle>
+            </Flex>
+            <DrawerHeaderCloseButton onClick={onClose}>
+              <Icon size={"xl"} color="$dark600" name="xmark" />
+            </DrawerHeaderCloseButton>
+          </DrawerHeaderDiv>
+          {isOpen ? children : null}
+          {isOpen ? children : null}
+          {isOpen ? children : null}
+          {isOpen ? children : null}
+          {isOpen ? children : null}
+          {isOpen ? children : null}
+          {isOpen ? children : null}
+          {isOpen ? children : null}
+        </DrawerContainerStyled>
+      </DrawerWrapper>
     </>
   );
 }

package/src/components/Drawer/styledComponents.ts

@@ -7,20 +7,71 @@ export const DrawerOverlayStyled = styled("div", {
   width: "100vw",
   height: "100vh",
   background: "rgba(0, 0, 0, 0.4)",
+
+  transition: "opacity 200ms ease",
+
+  variants: {
+    open: {
+      true: {
+        opacity: "1",
+      },
+      false: {
+        pointerEvents: "none",
+        opacity: "0",
+      },
+    },
+  },
+});
+
+export const DrawerWrapper = styled("div", {
+  position: "absolute",
+  top: 0,
+  right: 0,
+  height: "100vh",
+  overflow: "hidden",
+
+  variants: {
+    open: {
+      true: {},
+      false: {
+        pointerEvents: "none",
+      },
+    },
+  },
 });
 
 export const DrawerContainerStyled = styled("div", {
   position: "absolute",
   top: 0,
   right: 0,
-  maxWidth: "calc(100% - 2rem)",
-  height: "100%",
+  height: "100vh",
   background: "$neutral50",
   display: "flex",
   flexDirection: "column",
   boxShadow: "-4px 0 12px rgba(0, 0, 0, 0.2)",
-  padding: "1.5rem 0",
   overflowY: "auto",
+  width: "100%",
+  boxSizing: 'border-box',
+
+  "@md": {
+    minWidth: "100vw",
+    maxWidth: "100vw",
+  },
+
+  transition: "transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1)",
+
+  paddingBottom: "1.5rem",
+
+  variants: {
+    open: {
+      true: {
+        transform: "translateX(0) scale(1)",
+      },
+      false: {
+        transform: "translateX(110%) scale(0.98)",
+      },
+    },
+  },
 });
 
 export const DrawerHeaderDiv = styled("div", {
@@ -28,9 +79,10 @@ export const DrawerHeaderDiv = styled("div", {
   justifyContent: "space-between",
   alignItems: "center",
   borderBottom: "1px solid $neutral300",
-  padding: "0 1.5rem 1rem",
+  padding: "1.5rem 1rem",
   position: "relative",
 });
+
 export const DrawerHeaderTitle = styled("h2", {
   fontSize: "1.125rem",
   fontWeight: "400",

package/src/styles/index.ts

@@ -6,9 +6,9 @@ import {
   lineHeights,
   radii,
   space,
-} from '@lets-events/tokens'
+} from "@lets-events/tokens";
 
-import { createStitches, defaultThemeMap } from '@stitches/react'
+import { createStitches, defaultThemeMap } from "@stitches/react";
 
 export const {
   styled,
@@ -22,9 +22,9 @@ export const {
 } = createStitches({
   themeMap: {
     ...defaultThemeMap,
-    height: 'space',
-    width: 'space',
-    gap: 'space'
+    height: "space",
+    width: "space",
+    gap: "space",
   },
   theme: {
     colors,
@@ -35,4 +35,7 @@ export const {
     radii,
     space,
   },
-})
+  media: {
+    md: "(max-width: 690px)",
+  },
+});