qstd 0.2.16 → 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;AAuUvC,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

@@ -2506,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();
@@ -2527,7 +2530,7 @@ function DrawerComponent(props) {
       );
     }
   };
-  React12__namespace.default.useEffect(() => {
+  React12__namespace.default.useLayoutEffect(() => {
     const wasOpen = prevOpenRef.current;
     const isOpen = props.open;
     if (isOpen) {
@@ -2560,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");
@@ -2568,8 +2572,9 @@ function DrawerComponent(props) {
     });
     return () => {
       unsubscribeY();
+      y.stop();
     };
-  }, [y]);
+  }, [y, props.open]);
   const onBackdropClick = () => {
     const outsideClickClose = props.outsideClickClose ?? true;
     if (!outsideClickClose) return;
@@ -2629,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 },
@@ -2757,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,
@@ -2764,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) {
@@ -2784,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,
@@ -2797,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,
@@ -2808,13 +2824,12 @@ 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 = []) {
-  defaultValues.length ? defaultValues : Array(queries.length).fill(false);
+function useMatchMedia(queries) {
   const [value, setValue] = React12__namespace.default.useState(() => {
     return queries.map((q) => window.matchMedia(q).matches);
   });

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

@@ -2483,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();
@@ -2504,7 +2507,7 @@ function DrawerComponent(props) {
       );
     }
   };
-  React12__default.useEffect(() => {
+  React12__default.useLayoutEffect(() => {
     const wasOpen = prevOpenRef.current;
     const isOpen = props.open;
     if (isOpen) {
@@ -2537,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");
@@ -2545,8 +2549,9 @@ function DrawerComponent(props) {
     });
     return () => {
       unsubscribeY();
+      y.stop();
     };
-  }, [y]);
+  }, [y, props.open]);
   const onBackdropClick = () => {
     const outsideClickClose = props.outsideClickClose ?? true;
     if (!outsideClickClose) return;
@@ -2606,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 },
@@ -2734,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,
@@ -2741,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) {
@@ -2761,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,
@@ -2774,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,
@@ -2785,13 +2801,12 @@ 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 = []) {
-  defaultValues.length ? defaultValues : Array(queries.length).fill(false);
+function useMatchMedia(queries) {
   const [value, setValue] = React12__default.useState(() => {
     return queries.map((q) => window.matchMedia(q).matches);
   });

package/package.json

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