qstd 0.3.74 → 0.3.75

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

@@ -1 +1 @@
-{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../src/block/drawer.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,MAAM,SAAS,CAAC;AAma9B,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,gBAAgB,2CAMxD;AAID,wBAAgB,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,mBAAmB,2CAYrD;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,mBAAmB,uDAkDrD"}
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../src/block/drawer.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,MAAM,SAAS,CAAC;AA6a9B,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,gBAAgB,2CAMxD;AAID,wBAAgB,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,mBAAmB,2CAYrD;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,mBAAmB,uDAkDrD"}

package/dist/react/index.cjs

@@ -2670,6 +2670,7 @@ var accordion_default = Accordion;
 var MotionDiv4 = motionTags.div;
 var MotionBtn2 = motionTags.button;
 var breakpoint = ["(min-width: 600px)"];
+var mobileOvershootCoverPx = 96;
 function requirePortalRootForDrawer() {
   if (typeof document === "undefined") {
     throw new Error(
@@ -2707,6 +2708,7 @@ function DrawerComponent(props) {
   const dragControls = framerMotion.useDragControls();
   const { open, setOpen } = useDrawer();
   const { onClose, onExitComplete, ...rest } = props;
+  const drawerBg = rest.bg ?? { base: "neutral.100", _dark: "neutral.900" };
   const [mounted, setMounted] = React3__namespace.default.useState(false);
   React3__namespace.default.useEffect(() => {
     setMounted(true);
@@ -2801,115 +2803,127 @@ function DrawerComponent(props) {
         initial: false,
         mode: "wait",
         onExitComplete,
-        children: open && /* @__PURE__ */ jsxRuntime.jsx(
+        children: open && /* @__PURE__ */ jsxRuntime.jsxs(
           Backdrop,
           {
             onClick: () => onBackdropClick(),
-            children: /* @__PURE__ */ jsxRuntime.jsxs(
-              MotionDiv4,
-              {
-                grid: true,
-                onClick: (e) => e.stopPropagation(),
-                position: "fixed",
-                initial: "initial",
-                animate: "animate",
-                exit: "exit",
-                ...isDesktop ? {
-                  drag: false,
-                  style: void 0,
-                  dragControls: null,
-                  dragConstraints: void 0,
-                  // style: null,
-                  // dragConstraints: null,
-                  height: props.height ?? "max-content!",
-                  // "min(50%, 300px)",
-                  width: props.width ?? "clamp(50%, 700px, 90%)",
-                  pt: 6,
-                  // px: 4,
-                  margin: "auto",
-                  borderRadius: 12,
-                  zIndex: 1,
-                  variants: {
-                    initial: { opacity: 0, scale: 0.5 },
-                    animate: {
-                      opacity: 1,
-                      scale: 1,
-                      transition: {
-                        type: "spring",
-                        damping: 20,
-                        stiffness: 300
-                      }
-                    },
-                    exit: {
-                      opacity: 0,
-                      scale: 0.3,
-                      transition: { type: "spring", duration: 0.45 }
-                    }
-                  }
-                } : {
-                  w: "100vw",
+            children: [
+              !isDesktop && /* @__PURE__ */ jsxRuntime.jsx(
+                MotionDiv4,
+                {
+                  fixed: true,
                   left: 0,
                   right: 0,
                   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: {
-                      transform: "translateY(100%)",
-                      opacity: 0.5
-                    },
-                    animate: {
-                      transform: "translateY(0%)",
-                      opacity: 1,
-                      transition: {
-                        type: "spring",
-                        damping: 22,
-                        stiffness: 400,
-                        mass: 0.7
+                  h: mobileOvershootCoverPx,
+                  pointerEvents: "none",
+                  bg: drawerBg
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                MotionDiv4,
+                {
+                  grid: true,
+                  onClick: (e) => e.stopPropagation(),
+                  position: "fixed",
+                  initial: "initial",
+                  animate: "animate",
+                  exit: "exit",
+                  ...isDesktop ? {
+                    drag: false,
+                    style: void 0,
+                    dragControls: null,
+                    dragConstraints: void 0,
+                    // style: null,
+                    // dragConstraints: null,
+                    height: props.height ?? "max-content!",
+                    // "min(50%, 300px)",
+                    width: props.width ?? "clamp(50%, 700px, 90%)",
+                    pt: 6,
+                    // px: 4,
+                    margin: "auto",
+                    borderRadius: 12,
+                    zIndex: 1,
+                    variants: {
+                      initial: { opacity: 0, scale: 0.5 },
+                      animate: {
+                        opacity: 1,
+                        scale: 1,
+                        transition: {
+                          type: "spring",
+                          damping: 20,
+                          stiffness: 300
+                        }
+                      },
+                      exit: {
+                        opacity: 0,
+                        scale: 0.3,
+                        transition: { type: "spring", duration: 0.45 }
+                      }
+                    }
+                  } : {
+                    w: "100vw",
+                    left: 0,
+                    right: 0,
+                    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: {
+                        transform: "translateY(100%)",
+                        opacity: 0.5
+                      },
+                      animate: {
+                        transform: "translateY(0%)",
+                        opacity: 1,
+                        transition: {
+                          type: "spring",
+                          damping: 22,
+                          stiffness: 400,
+                          mass: 0.7
+                        }
+                      },
+                      exit: {
+                        transform: "translateY(100%)",
+                        opacity: 0,
+                        transition: {
+                          type: "tween",
+                          duration: 0.2,
+                          ease: [0.4, 0, 1, 1]
+                          // ease-in for quick exit
+                        }
                       }
                     },
-                    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 },
+                    dragControls,
+                    onPointerDown: (e) => onDragStart(e),
+                    //   drag={hasBackdrop ? "y" : false}
+                    dragElastic: 0,
+                    // prevent drawer from being dragged higher than what its opened to
+                    dragConstraints: { top: 0 },
+                    onDragEnd: (_, drag) => {
+                      if (props.drag === false) return;
+                      const pageHeight = document.documentElement.scrollHeight;
+                      const yCoord = drag.point.y;
+                      const velocity = drag.velocity.y;
+                      const releaseThreshold = 0.8;
+                      const releasePct = yCoord / pageHeight;
+                      if (velocity > 25 && releasePct >= releaseThreshold || velocity > 750) {
+                        props.onClose?.();
                       }
                     }
                   },
-                  drag: "y",
-                  style: { y },
-                  dragControls,
-                  onPointerDown: (e) => onDragStart(e),
-                  //   drag={hasBackdrop ? "y" : false}
-                  dragElastic: 0,
-                  // prevent drawer from being dragged higher than what its opened to
-                  dragConstraints: { top: 0 },
-                  onDragEnd: (_, drag) => {
-                    if (props.drag === false) return;
-                    const pageHeight = document.documentElement.scrollHeight;
-                    const yCoord = drag.point.y;
-                    const velocity = drag.velocity.y;
-                    const releaseThreshold = 0.8;
-                    const releasePct = yCoord / pageHeight;
-                    if (velocity > 25 && releasePct >= releaseThreshold || velocity > 750) {
-                      props.onClose?.();
-                    }
-                  }
-                },
-                boxSizing: "border-box",
-                boxShadow: "hsl(0deg 0% 0% / 60%) 0px -4px 20px",
-                bg: { base: "neutral.100", _dark: "neutral.900" },
-                color: "text-primary",
-                ref,
-                ...rest,
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs(
+                  boxSizing: "border-box",
+                  boxShadow: "hsl(0deg 0% 0% / 60%) 0px -4px 20px",
+                  bg: { base: "neutral.100", _dark: "neutral.900" },
+                  color: "text-primary",
+                  ref,
+                  ...rest,
+                  children: /* @__PURE__ */ jsxRuntime.jsxs(
                     MotionDiv4,
                     {
                       grid: true,
@@ -2933,24 +2947,11 @@ function DrawerComponent(props) {
                         props.children
                       ]
                     }
-                  ),
-                  !isDesktop && /* @__PURE__ */ jsxRuntime.jsx(
-                    MotionDiv4,
-                    {
-                      position: "absolute",
-                      left: 0,
-                      right: 0,
-                      bottom: 0,
-                      h: 100,
-                      transform: "translateY(100%)",
-                      bg: { base: "neutral.100", _dark: "neutral.900" },
-                      pointerEvents: "none"
-                    }
                   )
-                ]
-              },
-              "drawer"
-            )
+                },
+                "drawer"
+              )
+            ]
           }
         )
       }

package/dist/react/index.css

@@ -996,6 +996,12 @@
   .stk-w_4 path {
     stroke-width: 4;
   }
+  .fixed_true {
+    position: fixed;
+  }
+  .pointer-events_none {
+    pointer-events: none;
+  }
   .pos_fixed {
     position: fixed;
   }
@@ -1020,24 +1026,18 @@
   .justify-self_center {
     justify-self: center;
   }
-  .pos_absolute {
-    position: absolute;
-  }
-  .trf_translateY\(100\%\) {
-    transform: translateY(100%);
-  }
-  .pointer-events_none {
-    pointer-events: none;
-  }
   .rg_14 {
     row-gap: 14px;
   }
-  .place-i_true,
-  .center_true {
+  .place-i_true {
     place-items: center;
   }
+  .pos_absolute {
+    position: absolute;
+  }
   .center_true {
     place-content: center;
+    place-items: center;
   }
   .fs_16 {
     font-size: 16px;
@@ -1239,6 +1239,18 @@
   .w_100\% {
     width: 100%;
   }
+  .left_0 {
+    left: var(--spacing-0);
+  }
+  .right_0 {
+    right: var(--spacing-0);
+  }
+  .bottom_0 {
+    bottom: var(--spacing-0);
+  }
+  .h_96 {
+    height: 96px;
+  }
   .h_max-content\! {
     height: max-content !important;
   }
@@ -1251,15 +1263,6 @@
   .w_100vw {
     width: 100vw;
   }
-  .left_0 {
-    left: var(--spacing-0);
-  }
-  .right_0 {
-    right: var(--spacing-0);
-  }
-  .bottom_0 {
-    bottom: var(--spacing-0);
-  }
   .bdr-tl_12 {
     border-top-left-radius: 12px;
   }
@@ -1278,9 +1281,6 @@
   .mb_4 {
     margin-bottom: var(--spacing-4);
   }
-  .h_100 {
-    height: 100px;
-  }
   .top_0 {
     top: var(--spacing-0);
   }

package/dist/react/index.js

@@ -2647,6 +2647,7 @@ var accordion_default = Accordion;
 var MotionDiv4 = motionTags.div;
 var MotionBtn2 = motionTags.button;
 var breakpoint = ["(min-width: 600px)"];
+var mobileOvershootCoverPx = 96;
 function requirePortalRootForDrawer() {
   if (typeof document === "undefined") {
     throw new Error(
@@ -2684,6 +2685,7 @@ function DrawerComponent(props) {
   const dragControls = useDragControls();
   const { open, setOpen } = useDrawer();
   const { onClose, onExitComplete, ...rest } = props;
+  const drawerBg = rest.bg ?? { base: "neutral.100", _dark: "neutral.900" };
   const [mounted, setMounted] = React3__default.useState(false);
   React3__default.useEffect(() => {
     setMounted(true);
@@ -2778,115 +2780,127 @@ function DrawerComponent(props) {
         initial: false,
         mode: "wait",
         onExitComplete,
-        children: open && /* @__PURE__ */ jsx(
+        children: open && /* @__PURE__ */ jsxs(
           Backdrop,
           {
             onClick: () => onBackdropClick(),
-            children: /* @__PURE__ */ jsxs(
-              MotionDiv4,
-              {
-                grid: true,
-                onClick: (e) => e.stopPropagation(),
-                position: "fixed",
-                initial: "initial",
-                animate: "animate",
-                exit: "exit",
-                ...isDesktop ? {
-                  drag: false,
-                  style: void 0,
-                  dragControls: null,
-                  dragConstraints: void 0,
-                  // style: null,
-                  // dragConstraints: null,
-                  height: props.height ?? "max-content!",
-                  // "min(50%, 300px)",
-                  width: props.width ?? "clamp(50%, 700px, 90%)",
-                  pt: 6,
-                  // px: 4,
-                  margin: "auto",
-                  borderRadius: 12,
-                  zIndex: 1,
-                  variants: {
-                    initial: { opacity: 0, scale: 0.5 },
-                    animate: {
-                      opacity: 1,
-                      scale: 1,
-                      transition: {
-                        type: "spring",
-                        damping: 20,
-                        stiffness: 300
-                      }
-                    },
-                    exit: {
-                      opacity: 0,
-                      scale: 0.3,
-                      transition: { type: "spring", duration: 0.45 }
-                    }
-                  }
-                } : {
-                  w: "100vw",
+            children: [
+              !isDesktop && /* @__PURE__ */ jsx(
+                MotionDiv4,
+                {
+                  fixed: true,
                   left: 0,
                   right: 0,
                   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: {
-                      transform: "translateY(100%)",
-                      opacity: 0.5
-                    },
-                    animate: {
-                      transform: "translateY(0%)",
-                      opacity: 1,
-                      transition: {
-                        type: "spring",
-                        damping: 22,
-                        stiffness: 400,
-                        mass: 0.7
+                  h: mobileOvershootCoverPx,
+                  pointerEvents: "none",
+                  bg: drawerBg
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                MotionDiv4,
+                {
+                  grid: true,
+                  onClick: (e) => e.stopPropagation(),
+                  position: "fixed",
+                  initial: "initial",
+                  animate: "animate",
+                  exit: "exit",
+                  ...isDesktop ? {
+                    drag: false,
+                    style: void 0,
+                    dragControls: null,
+                    dragConstraints: void 0,
+                    // style: null,
+                    // dragConstraints: null,
+                    height: props.height ?? "max-content!",
+                    // "min(50%, 300px)",
+                    width: props.width ?? "clamp(50%, 700px, 90%)",
+                    pt: 6,
+                    // px: 4,
+                    margin: "auto",
+                    borderRadius: 12,
+                    zIndex: 1,
+                    variants: {
+                      initial: { opacity: 0, scale: 0.5 },
+                      animate: {
+                        opacity: 1,
+                        scale: 1,
+                        transition: {
+                          type: "spring",
+                          damping: 20,
+                          stiffness: 300
+                        }
+                      },
+                      exit: {
+                        opacity: 0,
+                        scale: 0.3,
+                        transition: { type: "spring", duration: 0.45 }
+                      }
+                    }
+                  } : {
+                    w: "100vw",
+                    left: 0,
+                    right: 0,
+                    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: {
+                        transform: "translateY(100%)",
+                        opacity: 0.5
+                      },
+                      animate: {
+                        transform: "translateY(0%)",
+                        opacity: 1,
+                        transition: {
+                          type: "spring",
+                          damping: 22,
+                          stiffness: 400,
+                          mass: 0.7
+                        }
+                      },
+                      exit: {
+                        transform: "translateY(100%)",
+                        opacity: 0,
+                        transition: {
+                          type: "tween",
+                          duration: 0.2,
+                          ease: [0.4, 0, 1, 1]
+                          // ease-in for quick exit
+                        }
                       }
                     },
-                    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 },
+                    dragControls,
+                    onPointerDown: (e) => onDragStart(e),
+                    //   drag={hasBackdrop ? "y" : false}
+                    dragElastic: 0,
+                    // prevent drawer from being dragged higher than what its opened to
+                    dragConstraints: { top: 0 },
+                    onDragEnd: (_, drag) => {
+                      if (props.drag === false) return;
+                      const pageHeight = document.documentElement.scrollHeight;
+                      const yCoord = drag.point.y;
+                      const velocity = drag.velocity.y;
+                      const releaseThreshold = 0.8;
+                      const releasePct = yCoord / pageHeight;
+                      if (velocity > 25 && releasePct >= releaseThreshold || velocity > 750) {
+                        props.onClose?.();
                       }
                     }
                   },
-                  drag: "y",
-                  style: { y },
-                  dragControls,
-                  onPointerDown: (e) => onDragStart(e),
-                  //   drag={hasBackdrop ? "y" : false}
-                  dragElastic: 0,
-                  // prevent drawer from being dragged higher than what its opened to
-                  dragConstraints: { top: 0 },
-                  onDragEnd: (_, drag) => {
-                    if (props.drag === false) return;
-                    const pageHeight = document.documentElement.scrollHeight;
-                    const yCoord = drag.point.y;
-                    const velocity = drag.velocity.y;
-                    const releaseThreshold = 0.8;
-                    const releasePct = yCoord / pageHeight;
-                    if (velocity > 25 && releasePct >= releaseThreshold || velocity > 750) {
-                      props.onClose?.();
-                    }
-                  }
-                },
-                boxSizing: "border-box",
-                boxShadow: "hsl(0deg 0% 0% / 60%) 0px -4px 20px",
-                bg: { base: "neutral.100", _dark: "neutral.900" },
-                color: "text-primary",
-                ref,
-                ...rest,
-                children: [
-                  /* @__PURE__ */ jsxs(
+                  boxSizing: "border-box",
+                  boxShadow: "hsl(0deg 0% 0% / 60%) 0px -4px 20px",
+                  bg: { base: "neutral.100", _dark: "neutral.900" },
+                  color: "text-primary",
+                  ref,
+                  ...rest,
+                  children: /* @__PURE__ */ jsxs(
                     MotionDiv4,
                     {
                       grid: true,
@@ -2910,24 +2924,11 @@ function DrawerComponent(props) {
                         props.children
                       ]
                     }
-                  ),
-                  !isDesktop && /* @__PURE__ */ jsx(
-                    MotionDiv4,
-                    {
-                      position: "absolute",
-                      left: 0,
-                      right: 0,
-                      bottom: 0,
-                      h: 100,
-                      transform: "translateY(100%)",
-                      bg: { base: "neutral.100", _dark: "neutral.900" },
-                      pointerEvents: "none"
-                    }
                   )
-                ]
-              },
-              "drawer"
-            )
+                },
+                "drawer"
+              )
+            ]
           }
         )
       }

package/package.json

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

package/styled-system/styles.css

@@ -1017,6 +1017,14 @@
     stroke-width: 4;
 }
 
+  .fixed_true {
+    position: fixed;
+}
+
+  .pointer-events_none {
+    pointer-events: none;
+}
+
   .pos_fixed {
     position: fixed;
 }
@@ -1049,28 +1057,21 @@
     justify-self: center;
 }
 
-  .pos_absolute {
-    position: absolute;
-}
-
-  .trf_translateY\(100\%\) {
-    transform: translateY(100%);
-}
-
-  .pointer-events_none {
-    pointer-events: none;
-}
-
   .rg_14 {
     row-gap: 14px;
 }
 
-  .place-i_true,.center_true {
+  .place-i_true {
     place-items: center;
 }
 
+  .pos_absolute {
+    position: absolute;
+}
+
   .center_true {
     place-content: center;
+    place-items: center;
 }
 
   .fs_16 {
@@ -1330,6 +1331,22 @@
     width: 100%;
 }
 
+  .left_0 {
+    left: var(--spacing-0);
+}
+
+  .right_0 {
+    right: var(--spacing-0);
+}
+
+  .bottom_0 {
+    bottom: var(--spacing-0);
+}
+
+  .h_96 {
+    height: 96px;
+}
+
   .h_max-content\! {
     height: max-content !important;
 }
@@ -1346,18 +1363,6 @@
     width: 100vw;
 }
 
-  .left_0 {
-    left: var(--spacing-0);
-}
-
-  .right_0 {
-    right: var(--spacing-0);
-}
-
-  .bottom_0 {
-    bottom: var(--spacing-0);
-}
-
   .bdr-tl_12 {
     border-top-left-radius: 12px;
 }
@@ -1382,10 +1387,6 @@
     margin-bottom: var(--spacing-4);
 }
 
-  .h_100 {
-    height: 100px;
-}
-
   .top_0 {
     top: var(--spacing-0);
 }