@baodev/mini-app-component 1.0.1 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@baodev/mini-app-component",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "type": "module",
   "description": "WEBVIEW COMPONENT",
   "main": "src/index.ts",
@@ -26,12 +26,11 @@
     "tailwindcss": "^3.4.19",
     "tsup": "latest",
     "typescript": "latest",
-    "vitest": "^4.1.7"
-  },
-  "dependencies": {
+    "vitest": "^4.1.7",
     "@storybook/react": "^10.4.1",
     "framer-motion": "^12.40.0"
   },
+  "dependencies": {},
   "scripts": {
     "build": "tsup",
     "storybook": "storybook dev -p 6006",

package/src/components/BottomSheet.tsx

@@ -23,10 +23,9 @@ export function BottomSheet({
   children,
   snapPoints = "auto",
 }: BottomSheetProps) {
-  // Điều khiển vùng vuốt bằng Framer Motion
   const dragControls = useDragControls();
 
-  // Lock scroll
+  // Khóa cuộn trang khi mở Sheet
   useEffect(() => {
     document.body.style.overflow = isOpen ? "hidden" : "";
     return () => {
@@ -40,61 +39,73 @@ export function BottomSheet({
     <AnimatePresence>
       {isOpen && (
         <>
-          {/* Backdrop */}
+          {/* Backdrop với hiệu ứng làm mờ nhẹ nhàng */}
           <motion.div
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
-            transition={{ duration: 0.3 }}
-            className="fixed inset-0 bg-black/40 z-40 pointer-events-auto"
+            transition={{ duration: 0.25, ease: "linear" }}
+            className="fixed inset-0 bg-black/40 z-40 pointer-events-auto backdrop-blur-[1px]"
             onClick={onClose}
           />
 
-          {/* Sheet */}
+          {/* Sheet Container */}
           <motion.div
             initial={{ y: "100%" }}
             animate={{ y: 0 }}
             exit={{ y: "100%" }}
-            transition={{ type: "spring", damping: 25, stiffness: 250 }}
-            // --- LOGIC VUỐT CỦA FRAMER MOTION ---
+            // CHỈNH SỬA 1: Ép chạy bằng GPU chuyển động Tween mượt như iOS, bỏ Spring nặng nề
+            transition={{
+              type: "tween",
+              ease: [0.32, 0.94, 0.6, 1],
+              duration: 0.35,
+            }}
+            // LOGIC VUỐT TỐI ƯU
             drag="y"
             dragControls={dragControls}
-            dragListener={false} // Tắt drag toàn sheet, chỉ bật ở handle
-            dragConstraints={{ top: 0 }} // Không cho vuốt lên quá trần
-            dragElastic={0.2} // Độ rít khi cố vuốt lên
+            dragListener={false}
+            dragConstraints={{ top: 0 }}
+            dragElastic={0.15} // Giảm độ nảy quá đà khi cố kéo lên
             onDragEnd={(e, info) => {
-              // Vuốt xuống nhanh hoặc dài hơn 100px thì đóng
-              if (info.offset.y > 100 || info.velocity.y > 500) {
+              // Vuốt xuống nhanh (velocity) hoặc kéo dài quá 80px là đóng luôn cho nhạy
+              if (info.offset.y > 80 || info.velocity.y > 400) {
                 onClose();
               }
             }}
-            // ------------------------------------
+            // CHỈNH SỬA 2: Ép willChange tăng tốc đồ họa phần cứng phần cứng
+            style={{ willChange: "transform" }}
             className={`fixed bottom-0 left-0 right-0 z-50 bg-white rounded-t-3xl shadow-2xl flex flex-col ${snapStyles[snapPoints]}`}
           >
-            {/* Handle bar — chỉ vùng này mới swipe được */}
+            {/* CHỈNH SỬA 3: Gom cả cụm Handle + Header thành vùng nhận sự kiện kéo để vuốt nhạy hơn */}
             <div
-              onPointerDown={(e) => dragControls.start(e)} // Kích hoạt kéo ở đây
-              className="flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing touch-none"
+              onPointerDown={(e) => dragControls.start(e)}
+              className="w-full flex flex-col flex-shrink-0 cursor-grab active:cursor-grabbing touch-none select-none"
             >
-              <div className="w-10 h-1 bg-gray-300 rounded-full" />
-            </div>
-
-            {/* Header */}
-            {title && (
-              <div className="flex items-center justify-between px-5 py-3 border-b border-gray-100 flex-shrink-0">
-                <h3 className="text-base font-semibold text-gray-900">
-                  {title}
-                </h3>
-                <button
-                  onClick={onClose}
-                  className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 transition-colors text-gray-500 text-lg"
-                >
-                  ✕
-                </button>
+              {/* Handle bar */}
+              <div className="flex justify-center pt-3 pb-2">
+                <div className="w-10 h-1 bg-gray-300 rounded-full" />
               </div>
-            )}
 
-            {/* Content — scroll độc lập */}
+              {/* Header nằm trong vùng kéo luôn */}
+              {title && (
+                <div className="flex items-center justify-between px-5 pb-3 border-b border-gray-100">
+                  <h3 className="text-base font-semibold text-gray-900 pointer-events-none">
+                    {title}
+                  </h3>
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation(); // Ngăn sự kiện kéo kích hoạt khi bấm nút X
+                      onClose();
+                    }}
+                    className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 transition-colors text-gray-500 text-lg pointer-events-auto"
+                  >
+                    ✕
+                  </button>
+                </div>
+              )}
+            </div>
+
+            {/* Content — Cuộn độc lập */}
             <div
               className="flex-1 overflow-y-auto overscroll-contain px-5 py-4"
               style={{