qstd 0.2.15 → 0.2.17

package/dist/block/drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../src/block/drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,KAAK,EAAE,MAAM,SAAS,CAAC;AAE9B,QAAA,MAAM,SAAS,sKAAoB,CAAC;AACpC,QAAA,MAAM,SAAS,4KAAuB,CAAC;AA0TvC,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,gBAAgB,2CAMxD;AAID,wBAAgB,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,2CAYrE;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,uDAuDrE"}
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../src/block/drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,KAAK,EAAE,MAAM,SAAS,CAAC;AAE9B,QAAA,MAAM,SAAS,sKAAoB,CAAC;AACpC,QAAA,MAAM,SAAS,4KAAuB,CAAC;AAmWvC,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,gBAAgB,2CAMxD;AAID,wBAAgB,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,2CAYrE;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,uDAkDrE"}

package/dist/react/index.cjs

@@ -2496,6 +2496,7 @@ function DrawerComponent(props) {
   const dragHandleRef = React12__namespace.default.useRef(null);
   const [isDesktop] = useMatchMedia(breakpoint);
   const closeFnRef = React12__namespace.default.useRef(null);
+  const prevOpenRef = React12__namespace.default.useRef(null);
   const dragControls = framerMotion.useDragControls();
   const { open, setOpen } = useDrawer();
   const { onClose, ...rest } = props;
@@ -2505,7 +2506,10 @@ function DrawerComponent(props) {
     y.set(0);
     setOpen(true);
   };
-  const closeDrawer = () => setOpen(false);
+  const closeDrawer = () => {
+    y.stop();
+    setOpen(false);
+  };
   React12__namespace.default.useEffect(() => {
     closeFnRef.current = () => {
       closeDrawer();
@@ -2526,9 +2530,15 @@ function DrawerComponent(props) {
       );
     }
   };
-  React12__namespace.default.useEffect(() => {
-    if (props.open) openDrawer();
-    else closeFnRef.current?.();
+  React12__namespace.default.useLayoutEffect(() => {
+    const wasOpen = prevOpenRef.current;
+    const isOpen = props.open;
+    if (isOpen) {
+      openDrawer();
+    } else if (wasOpen === true) {
+      closeFnRef.current?.();
+    }
+    prevOpenRef.current = isOpen;
   }, [props.open]);
   React12__namespace.default.useEffect(() => {
     const container = ref.current;
@@ -2553,6 +2563,7 @@ function DrawerComponent(props) {
     };
   }, [open, props.closeOnEsc]);
   React12__namespace.default.useEffect(() => {
+    if (!props.open) return;
     const unsubscribeY = y.on("change", (latestY) => {
       if (latestY > 150) {
         console.log("[close] latestY > 150");
@@ -2561,8 +2572,9 @@ function DrawerComponent(props) {
     });
     return () => {
       unsubscribeY();
+      y.stop();
     };
-  }, [y]);
+  }, [y, props.open]);
   const onBackdropClick = () => {
     const outsideClickClose = props.outsideClickClose ?? true;
     if (!outsideClickClose) return;
@@ -2622,15 +2634,34 @@ function DrawerComponent(props) {
               bottom: 0,
               borderTopLeftRadius: 12,
               borderTopRightRadius: 12,
+              overflow: "hidden",
+              // Note: Can't use framer-motion's `y` prop because it conflicts
+              // with the drag motion value. Use CSS transform instead.
               variants: {
-                initial: { height: 0, opacity: 0 },
+                initial: {
+                  transform: "translateY(100%)",
+                  opacity: 0.5
+                },
                 animate: {
-                  height: "auto",
+                  transform: "translateY(0%)",
                   opacity: 1,
-                  // transition: { type: "spring", damping: 26, stiffness: 300 },
-                  transition: { type: "spring", duration: 0.3 }
+                  transition: {
+                    type: "spring",
+                    damping: 22,
+                    stiffness: 400,
+                    mass: 0.7
+                  }
                 },
-                exit: { height: 0, opacity: 0 }
+                exit: {
+                  transform: "translateY(100%)",
+                  opacity: 0,
+                  transition: {
+                    type: "tween",
+                    duration: 0.2,
+                    ease: [0.4, 0, 1, 1]
+                    // ease-in for quick exit
+                  }
+                }
               },
               drag: "y",
               style: { y },
@@ -2750,6 +2781,8 @@ function CloseBtn(props) {
           bg: { base: "neutral.200", _dark: "neutral.800" }
         },
         position: "absolute",
+        flex: true,
+        center: true,
         h: 32,
         w: 32,
         top: -2,
@@ -2757,17 +2790,7 @@ function CloseBtn(props) {
         borderRadius: 32,
         cursor: "pointer",
         ...rest,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          Icon,
-          {
-            icon: "times",
-            placeC: true,
-            h: 16,
-            w: 16,
-            fontSize: 16,
-            color: "currentColor"
-          }
-        )
+        children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: "times", fontSize: 16, lineHeight: 1, color: "currentColor" })
       }
     );
   } else if (children) {
@@ -2777,7 +2800,7 @@ function CloseBtn(props) {
   }
 }
 function Backdrop(props) {
-  const [allowOutsideClick, setAllowOutsideClick] = React12__namespace.default.useState(true);
+  const allowOutsideClickRef = React12__namespace.default.useRef(true);
   const [isDesktop] = useMatchMedia(breakpoint);
   return /* @__PURE__ */ jsxRuntime.jsx(
     MotionDiv4,
@@ -2790,10 +2813,10 @@ function Backdrop(props) {
       animate: { opacity: 1, transition: { duration: 0.2 } },
       exit: { opacity: 0, transition: { duration: 0.3 } },
       onAnimationStart: () => {
-        setAllowOutsideClick(false);
+        allowOutsideClickRef.current = false;
       },
       onAnimationComplete: () => {
-        setAllowOutsideClick(true);
+        allowOutsideClickRef.current = true;
       },
       position: "fixed",
       top: 0,
@@ -2801,25 +2824,26 @@ function Backdrop(props) {
       height: "100%",
       width: "100%",
       ...isDesktop ? { placeI: true } : {},
-      onClick: () => allowOutsideClick ? props.onClick() : void 0,
+      onClick: () => allowOutsideClickRef.current ? props.onClick() : void 0,
       children: props.children
     }
   );
 }
-function useMatchMedia(queries, defaultValues = []) {
-  const initialValues = defaultValues.length ? defaultValues : Array(queries.length).fill(false);
-  const mediaQueryLists = queries.map((q) => window.matchMedia(q));
-  const getValue = () => {
-    const matchedQueries = mediaQueryLists.map((mql) => mql.matches);
-    return matchedQueries;
-  };
-  const [value, setValue] = React12__namespace.default.useState(getValue);
+function useMatchMedia(queries) {
+  const [value, setValue] = React12__namespace.default.useState(() => {
+    return queries.map((q) => window.matchMedia(q).matches);
+  });
   React12__namespace.default.useLayoutEffect(() => {
-    const handler = () => setValue(getValue);
-    mediaQueryLists.forEach((mql) => mql.addListener(handler));
-    return () => mediaQueryLists.forEach((mql) => mql.removeListener(handler));
-  }, []);
-  if (typeof window === "undefined") return initialValues;
+    const mediaQueryLists = queries.map((q) => window.matchMedia(q));
+    const handler = () => {
+      setValue(mediaQueryLists.map((mql) => mql.matches));
+    };
+    handler();
+    mediaQueryLists.forEach((mql) => mql.addEventListener("change", handler));
+    return () => mediaQueryLists.forEach(
+      (mql) => mql.removeEventListener("change", handler)
+    );
+  }, [queries]);
   return value;
 }
 var MotionDiv5 = motionTags.div;

package/dist/react/index.css

@@ -871,6 +871,9 @@
   .rounded_12 {
     border-radius: 12px;
   }
+  .ov_hidden {
+    overflow: hidden;
+  }
   .rounded_20 {
     border-radius: 20px;
   }
@@ -886,9 +889,6 @@
   .rounded_50\% {
     border-radius: 50%;
   }
-  .ov_hidden {
-    overflow: hidden;
-  }
   .trs_200ms_cubic-bezier\(0\,_0\,_0\.2\,_1\)_0ms\,_\.2s_color_ease-in-out\,_\.2s_background_ease-in-out {
     transition:
       200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
@@ -1030,12 +1030,16 @@
   .pos_absolute {
     position: absolute;
   }
-  .place-c_true {
+  .center_true {
     place-content: center;
+    place-items: center;
   }
   .fs_16 {
     font-size: 16px;
   }
+  .lh_1 {
+    line-height: 1;
+  }
   .c_currentColor {
     color: currentColor;
   }
@@ -1268,12 +1272,6 @@
   .right_3 {
     right: var(--spacing-3);
   }
-  .h_16 {
-    height: 16px;
-  }
-  .w_16 {
-    width: 16px;
-  }
   .w_12px {
     width: 12px;
   }

package/dist/react/index.js

@@ -2473,6 +2473,7 @@ function DrawerComponent(props) {
   const dragHandleRef = React12__default.useRef(null);
   const [isDesktop] = useMatchMedia(breakpoint);
   const closeFnRef = React12__default.useRef(null);
+  const prevOpenRef = React12__default.useRef(null);
   const dragControls = useDragControls();
   const { open, setOpen } = useDrawer();
   const { onClose, ...rest } = props;
@@ -2482,7 +2483,10 @@ function DrawerComponent(props) {
     y.set(0);
     setOpen(true);
   };
-  const closeDrawer = () => setOpen(false);
+  const closeDrawer = () => {
+    y.stop();
+    setOpen(false);
+  };
   React12__default.useEffect(() => {
     closeFnRef.current = () => {
       closeDrawer();
@@ -2503,9 +2507,15 @@ function DrawerComponent(props) {
       );
     }
   };
-  React12__default.useEffect(() => {
-    if (props.open) openDrawer();
-    else closeFnRef.current?.();
+  React12__default.useLayoutEffect(() => {
+    const wasOpen = prevOpenRef.current;
+    const isOpen = props.open;
+    if (isOpen) {
+      openDrawer();
+    } else if (wasOpen === true) {
+      closeFnRef.current?.();
+    }
+    prevOpenRef.current = isOpen;
   }, [props.open]);
   React12__default.useEffect(() => {
     const container = ref.current;
@@ -2530,6 +2540,7 @@ function DrawerComponent(props) {
     };
   }, [open, props.closeOnEsc]);
   React12__default.useEffect(() => {
+    if (!props.open) return;
     const unsubscribeY = y.on("change", (latestY) => {
       if (latestY > 150) {
         console.log("[close] latestY > 150");
@@ -2538,8 +2549,9 @@ function DrawerComponent(props) {
     });
     return () => {
       unsubscribeY();
+      y.stop();
     };
-  }, [y]);
+  }, [y, props.open]);
   const onBackdropClick = () => {
     const outsideClickClose = props.outsideClickClose ?? true;
     if (!outsideClickClose) return;
@@ -2599,15 +2611,34 @@ function DrawerComponent(props) {
               bottom: 0,
               borderTopLeftRadius: 12,
               borderTopRightRadius: 12,
+              overflow: "hidden",
+              // Note: Can't use framer-motion's `y` prop because it conflicts
+              // with the drag motion value. Use CSS transform instead.
               variants: {
-                initial: { height: 0, opacity: 0 },
+                initial: {
+                  transform: "translateY(100%)",
+                  opacity: 0.5
+                },
                 animate: {
-                  height: "auto",
+                  transform: "translateY(0%)",
                   opacity: 1,
-                  // transition: { type: "spring", damping: 26, stiffness: 300 },
-                  transition: { type: "spring", duration: 0.3 }
+                  transition: {
+                    type: "spring",
+                    damping: 22,
+                    stiffness: 400,
+                    mass: 0.7
+                  }
                 },
-                exit: { height: 0, opacity: 0 }
+                exit: {
+                  transform: "translateY(100%)",
+                  opacity: 0,
+                  transition: {
+                    type: "tween",
+                    duration: 0.2,
+                    ease: [0.4, 0, 1, 1]
+                    // ease-in for quick exit
+                  }
+                }
               },
               drag: "y",
               style: { y },
@@ -2727,6 +2758,8 @@ function CloseBtn(props) {
           bg: { base: "neutral.200", _dark: "neutral.800" }
         },
         position: "absolute",
+        flex: true,
+        center: true,
         h: 32,
         w: 32,
         top: -2,
@@ -2734,17 +2767,7 @@ function CloseBtn(props) {
         borderRadius: 32,
         cursor: "pointer",
         ...rest,
-        children: /* @__PURE__ */ jsx(
-          Icon,
-          {
-            icon: "times",
-            placeC: true,
-            h: 16,
-            w: 16,
-            fontSize: 16,
-            color: "currentColor"
-          }
-        )
+        children: /* @__PURE__ */ jsx(Icon, { icon: "times", fontSize: 16, lineHeight: 1, color: "currentColor" })
       }
     );
   } else if (children) {
@@ -2754,7 +2777,7 @@ function CloseBtn(props) {
   }
 }
 function Backdrop(props) {
-  const [allowOutsideClick, setAllowOutsideClick] = React12__default.useState(true);
+  const allowOutsideClickRef = React12__default.useRef(true);
   const [isDesktop] = useMatchMedia(breakpoint);
   return /* @__PURE__ */ jsx(
     MotionDiv4,
@@ -2767,10 +2790,10 @@ function Backdrop(props) {
       animate: { opacity: 1, transition: { duration: 0.2 } },
       exit: { opacity: 0, transition: { duration: 0.3 } },
       onAnimationStart: () => {
-        setAllowOutsideClick(false);
+        allowOutsideClickRef.current = false;
       },
       onAnimationComplete: () => {
-        setAllowOutsideClick(true);
+        allowOutsideClickRef.current = true;
       },
       position: "fixed",
       top: 0,
@@ -2778,25 +2801,26 @@ function Backdrop(props) {
       height: "100%",
       width: "100%",
       ...isDesktop ? { placeI: true } : {},
-      onClick: () => allowOutsideClick ? props.onClick() : void 0,
+      onClick: () => allowOutsideClickRef.current ? props.onClick() : void 0,
       children: props.children
     }
   );
 }
-function useMatchMedia(queries, defaultValues = []) {
-  const initialValues = defaultValues.length ? defaultValues : Array(queries.length).fill(false);
-  const mediaQueryLists = queries.map((q) => window.matchMedia(q));
-  const getValue = () => {
-    const matchedQueries = mediaQueryLists.map((mql) => mql.matches);
-    return matchedQueries;
-  };
-  const [value, setValue] = React12__default.useState(getValue);
+function useMatchMedia(queries) {
+  const [value, setValue] = React12__default.useState(() => {
+    return queries.map((q) => window.matchMedia(q).matches);
+  });
   React12__default.useLayoutEffect(() => {
-    const handler = () => setValue(getValue);
-    mediaQueryLists.forEach((mql) => mql.addListener(handler));
-    return () => mediaQueryLists.forEach((mql) => mql.removeListener(handler));
-  }, []);
-  if (typeof window === "undefined") return initialValues;
+    const mediaQueryLists = queries.map((q) => window.matchMedia(q));
+    const handler = () => {
+      setValue(mediaQueryLists.map((mql) => mql.matches));
+    };
+    handler();
+    mediaQueryLists.forEach((mql) => mql.addEventListener("change", handler));
+    return () => mediaQueryLists.forEach(
+      (mql) => mql.removeEventListener("change", handler)
+    );
+  }, [queries]);
   return value;
 }
 var MotionDiv5 = motionTags.div;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qstd",
-  "version": "0.2.15",
+  "version": "0.2.17",
   "description": "Standard Block component and utilities library with Panda CSS",
   "author": "malin1",
   "license": "MIT",