@blerp/design 1.2.16 → 1.2.17

package/dist/index.cjs.js

@@ -1573,7 +1573,10 @@ Blerp$1.propTypes = {
 var UserCard$1 = function UserCard(_ref) {
   var _user$twitchChannelIn, _user$twitchChannelIn2;
 
-  var user = _ref.user;
+  var user = _ref.user,
+      onUsernameClick = _ref.onUsernameClick,
+      onFollowerClick = _ref.onFollowerClick,
+      onCreatedClick = _ref.onCreatedClick;
   return /*#__PURE__*/React__default['default'].createElement(Stack, {
     direction: "row",
     sx: {
@@ -1623,8 +1626,14 @@ var UserCard$1 = function UserCard(_ref) {
       whiteSpace: "nowrap",
       textOverflow: "ellipsis",
       marginBottom: "10px",
-      overflow: "hidden"
-    }
+      overflow: "hidden",
+      cursor: "pointer",
+      transition: "0.3s",
+      "&:hover": {
+        textDecoration: "underline"
+      }
+    },
+    onClick: onUsernameClick
   }, user === null || user === void 0 ? void 0 : user.username), /*#__PURE__*/React__default['default'].createElement(Stack, {
     direction: "row",
     sx: {
@@ -1632,30 +1641,50 @@ var UserCard$1 = function UserCard(_ref) {
       justifyContent: "space-around"
     }
   }, /*#__PURE__*/React__default['default'].createElement(Stack, {
-    alignItems: "center"
+    alignItems: "center",
+    sx: {
+      cursor: "poiner",
+      transition: "0.3s",
+      "&:hover": {
+        textDecoration: "underline"
+      }
+    },
+    onClick: onFollowerClick
   }, /*#__PURE__*/React__default['default'].createElement(Text, {
     sx: {
       fontSize: "14px",
-      fontWeight: "400"
+      fontWeight: "400",
+      cursor: "inherit"
     }
   }, (user === null || user === void 0 ? void 0 : user.followerCount) || 0), /*#__PURE__*/React__default['default'].createElement(Text, {
     sx: {
       fontSize: "12px",
       fontWeight: "300",
-      color: "grey7.main"
+      color: "grey7.main",
+      cursor: "inherit"
     }
   }, "followers")), /*#__PURE__*/React__default['default'].createElement(Stack, {
-    alignItems: "center"
+    alignItems: "center",
+    sx: {
+      cursor: "poiner",
+      transition: "0.3s",
+      "&:hover": {
+        textDecoration: "underline"
+      }
+    },
+    onClick: onCreatedClick
   }, /*#__PURE__*/React__default['default'].createElement(Text, {
     sx: {
       fontSize: "14px",
-      fontWeight: "400"
+      fontWeight: "400",
+      cursor: "inherit"
     }
   }, (user === null || user === void 0 ? void 0 : user.created) || 0), /*#__PURE__*/React__default['default'].createElement(Text, {
     sx: {
       fontSize: "12px",
       fontWeight: "300",
-      color: "grey7.main"
+      color: "grey7.main",
+      cursor: "inherit"
     }
   }, "created")))));
 };
@@ -2081,7 +2110,8 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
   var Waveform = _ref8.Waveform,
       bite = _ref8.bite,
       playState = _ref8.playState,
-      play = _ref8.play;
+      play = _ref8.play,
+      onTitleClick = _ref8.onTitleClick;
 
   var _useState9 = React.useState(false),
       _useState10 = _slicedToArray__default['default'](_useState9, 2),
@@ -2277,8 +2307,14 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
       overflowY: "auto",
       lineHeight: "1",
       height: "23px",
-      margin: "10px 0 5px 0"
-    }
+      margin: "10px 0 5px 0",
+      cursor: "pointer",
+      transition: "0.3s",
+      "&:hover": {
+        textDecoration: "underline"
+      }
+    },
+    onClick: onTitleClick
   }, bite === null || bite === void 0 ? void 0 : bite.title), /*#__PURE__*/React__default['default'].createElement(Stack, {
     direction: "row",
     alignItems: "center",
@@ -2342,30 +2378,20 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
   })))), /*#__PURE__*/React__default['default'].createElement(FavoriteIconWithCounter, {
     saved: bite === null || bite === void 0 ? void 0 : bite.saved,
     count: saveCount
-  }), /*#__PURE__*/React__default['default'].createElement(Text, {
-    sx: {
-      fontWeight: "300",
-      fontSize: "12px",
-      color: "grey7.main",
-      maxWidth: "95px",
-      whiteSpace: "nowrap",
-      overflow: "hidden",
-      margin: "0 10px"
-    },
+  }), /*#__PURE__*/React__default['default'].createElement(Stack, {
+    direction: "row",
     onClick: function onClick(e) {
       setUserCardRef(e.target);
-    } // onMouseLeave={() => {
-    //     setUserCardRef(null);
-    // }}
-
-  }, bite === null || bite === void 0 ? void 0 : (_bite$ownerObject = bite.ownerObject) === null || _bite$ownerObject === void 0 ? void 0 : _bite$ownerObject.username), /*#__PURE__*/React__default['default'].createElement(Text, {
-    sx: {
-      fontWeight: "300",
-      fontSize: "12px",
-      color: "grey7.main"
+    },
+    onMouseEnter: function onMouseEnter(e) {
+      setTimeout(function () {
+        setUserCardRef(e.target);
+      }, [500]);
+    },
+    onMouseLeave: function onMouseLeave(e) {
+      setUserCardRef(null);
     }
-  }, ((bite === null || bite === void 0 ? void 0 : bite.audioDuration) / 1000).toFixed(0), "s")))), /*#__PURE__*/React__default['default'].createElement(Popover, {
-    id: "user-card-".concat(bite === null || bite === void 0 ? void 0 : bite._id, "-").concat(bite === null || bite === void 0 ? void 0 : (_bite$ownerObject2 = bite.ownerObject) === null || _bite$ownerObject2 === void 0 ? void 0 : _bite$ownerObject2._id),
+  }, /*#__PURE__*/React__default['default'].createElement(Popover, {
     open: openUserCard,
     anchorEl: userCardRef,
     anchorOrigin: {
@@ -2376,23 +2402,48 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
       vertical: "top",
       horizontal: "left"
     },
+    disablePortal: true,
+    hideBackdrop: true,
+    sx: {
+      pointerEvents: "none"
+    },
     PaperProps: {
       // onMouseEnter: (e) => {
       //     setUserCardRef(e.target);
       // },
+      id: "user-card-".concat(bite === null || bite === void 0 ? void 0 : bite._id, "-").concat(bite === null || bite === void 0 ? void 0 : (_bite$ownerObject = bite.ownerObject) === null || _bite$ownerObject === void 0 ? void 0 : _bite$ownerObject._id),
       sx: {
+        pointerEvents: "auto",
         backgroundColor: "transparent"
       },
-      onMouseLeave: function onMouseLeave() {
+      onMouseLeave: function onMouseLeave(e) {
         setUserCardRef(null);
       }
-    },
-    onClose: function onClose() {
-      return setUserCardRef(null);
-    }
+    } // onClose={() => setUserCardRef(null)}
+
   }, /*#__PURE__*/React__default['default'].createElement(UserCard$1, {
     user: bite === null || bite === void 0 ? void 0 : bite.ownerObject
-  })));
+  })), /*#__PURE__*/React__default['default'].createElement(Text, {
+    sx: {
+      fontWeight: "300",
+      fontSize: "12px",
+      color: "grey7.main",
+      maxWidth: "95px",
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      margin: "0 10px",
+      cursor: "pointer",
+      "&:hover": {
+        textDecoration: "underline"
+      }
+    }
+  }, bite === null || bite === void 0 ? void 0 : (_bite$ownerObject2 = bite.ownerObject) === null || _bite$ownerObject2 === void 0 ? void 0 : _bite$ownerObject2.username)), /*#__PURE__*/React__default['default'].createElement(Text, {
+    sx: {
+      fontWeight: "300",
+      fontSize: "12px",
+      color: "grey7.main"
+    }
+  }, ((bite === null || bite === void 0 ? void 0 : bite.audioDuration) / 1000).toFixed(0), "s")))));
 };
 
 var _templateObject$f;

package/dist/index.esm.js

@@ -1498,7 +1498,10 @@ Blerp$1.propTypes = {
 var UserCard$1 = function UserCard(_ref) {
   var _user$twitchChannelIn, _user$twitchChannelIn2;
 
-  var user = _ref.user;
+  var user = _ref.user,
+      onUsernameClick = _ref.onUsernameClick,
+      onFollowerClick = _ref.onFollowerClick,
+      onCreatedClick = _ref.onCreatedClick;
   return /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row",
     sx: {
@@ -1548,8 +1551,14 @@ var UserCard$1 = function UserCard(_ref) {
       whiteSpace: "nowrap",
       textOverflow: "ellipsis",
       marginBottom: "10px",
-      overflow: "hidden"
-    }
+      overflow: "hidden",
+      cursor: "pointer",
+      transition: "0.3s",
+      "&:hover": {
+        textDecoration: "underline"
+      }
+    },
+    onClick: onUsernameClick
   }, user === null || user === void 0 ? void 0 : user.username), /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row",
     sx: {
@@ -1557,30 +1566,50 @@ var UserCard$1 = function UserCard(_ref) {
       justifyContent: "space-around"
     }
   }, /*#__PURE__*/React__default.createElement(Stack, {
-    alignItems: "center"
+    alignItems: "center",
+    sx: {
+      cursor: "poiner",
+      transition: "0.3s",
+      "&:hover": {
+        textDecoration: "underline"
+      }
+    },
+    onClick: onFollowerClick
   }, /*#__PURE__*/React__default.createElement(Text, {
     sx: {
       fontSize: "14px",
-      fontWeight: "400"
+      fontWeight: "400",
+      cursor: "inherit"
     }
   }, (user === null || user === void 0 ? void 0 : user.followerCount) || 0), /*#__PURE__*/React__default.createElement(Text, {
     sx: {
       fontSize: "12px",
       fontWeight: "300",
-      color: "grey7.main"
+      color: "grey7.main",
+      cursor: "inherit"
     }
   }, "followers")), /*#__PURE__*/React__default.createElement(Stack, {
-    alignItems: "center"
+    alignItems: "center",
+    sx: {
+      cursor: "poiner",
+      transition: "0.3s",
+      "&:hover": {
+        textDecoration: "underline"
+      }
+    },
+    onClick: onCreatedClick
   }, /*#__PURE__*/React__default.createElement(Text, {
     sx: {
       fontSize: "14px",
-      fontWeight: "400"
+      fontWeight: "400",
+      cursor: "inherit"
     }
   }, (user === null || user === void 0 ? void 0 : user.created) || 0), /*#__PURE__*/React__default.createElement(Text, {
     sx: {
       fontSize: "12px",
       fontWeight: "300",
-      color: "grey7.main"
+      color: "grey7.main",
+      cursor: "inherit"
     }
   }, "created")))));
 };
@@ -2006,7 +2035,8 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
   var Waveform = _ref8.Waveform,
       bite = _ref8.bite,
       playState = _ref8.playState,
-      play = _ref8.play;
+      play = _ref8.play,
+      onTitleClick = _ref8.onTitleClick;
 
   var _useState9 = useState(false),
       _useState10 = _slicedToArray(_useState9, 2),
@@ -2202,8 +2232,14 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
       overflowY: "auto",
       lineHeight: "1",
       height: "23px",
-      margin: "10px 0 5px 0"
-    }
+      margin: "10px 0 5px 0",
+      cursor: "pointer",
+      transition: "0.3s",
+      "&:hover": {
+        textDecoration: "underline"
+      }
+    },
+    onClick: onTitleClick
   }, bite === null || bite === void 0 ? void 0 : bite.title), /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row",
     alignItems: "center",
@@ -2267,30 +2303,20 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
   })))), /*#__PURE__*/React__default.createElement(FavoriteIconWithCounter, {
     saved: bite === null || bite === void 0 ? void 0 : bite.saved,
     count: saveCount
-  }), /*#__PURE__*/React__default.createElement(Text, {
-    sx: {
-      fontWeight: "300",
-      fontSize: "12px",
-      color: "grey7.main",
-      maxWidth: "95px",
-      whiteSpace: "nowrap",
-      overflow: "hidden",
-      margin: "0 10px"
-    },
+  }), /*#__PURE__*/React__default.createElement(Stack, {
+    direction: "row",
     onClick: function onClick(e) {
       setUserCardRef(e.target);
-    } // onMouseLeave={() => {
-    //     setUserCardRef(null);
-    // }}
-
-  }, bite === null || bite === void 0 ? void 0 : (_bite$ownerObject = bite.ownerObject) === null || _bite$ownerObject === void 0 ? void 0 : _bite$ownerObject.username), /*#__PURE__*/React__default.createElement(Text, {
-    sx: {
-      fontWeight: "300",
-      fontSize: "12px",
-      color: "grey7.main"
+    },
+    onMouseEnter: function onMouseEnter(e) {
+      setTimeout(function () {
+        setUserCardRef(e.target);
+      }, [500]);
+    },
+    onMouseLeave: function onMouseLeave(e) {
+      setUserCardRef(null);
     }
-  }, ((bite === null || bite === void 0 ? void 0 : bite.audioDuration) / 1000).toFixed(0), "s")))), /*#__PURE__*/React__default.createElement(Popover, {
-    id: "user-card-".concat(bite === null || bite === void 0 ? void 0 : bite._id, "-").concat(bite === null || bite === void 0 ? void 0 : (_bite$ownerObject2 = bite.ownerObject) === null || _bite$ownerObject2 === void 0 ? void 0 : _bite$ownerObject2._id),
+  }, /*#__PURE__*/React__default.createElement(Popover, {
     open: openUserCard,
     anchorEl: userCardRef,
     anchorOrigin: {
@@ -2301,23 +2327,48 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
       vertical: "top",
       horizontal: "left"
     },
+    disablePortal: true,
+    hideBackdrop: true,
+    sx: {
+      pointerEvents: "none"
+    },
     PaperProps: {
       // onMouseEnter: (e) => {
       //     setUserCardRef(e.target);
       // },
+      id: "user-card-".concat(bite === null || bite === void 0 ? void 0 : bite._id, "-").concat(bite === null || bite === void 0 ? void 0 : (_bite$ownerObject = bite.ownerObject) === null || _bite$ownerObject === void 0 ? void 0 : _bite$ownerObject._id),
       sx: {
+        pointerEvents: "auto",
         backgroundColor: "transparent"
       },
-      onMouseLeave: function onMouseLeave() {
+      onMouseLeave: function onMouseLeave(e) {
         setUserCardRef(null);
       }
-    },
-    onClose: function onClose() {
-      return setUserCardRef(null);
-    }
+    } // onClose={() => setUserCardRef(null)}
+
   }, /*#__PURE__*/React__default.createElement(UserCard$1, {
     user: bite === null || bite === void 0 ? void 0 : bite.ownerObject
-  })));
+  })), /*#__PURE__*/React__default.createElement(Text, {
+    sx: {
+      fontWeight: "300",
+      fontSize: "12px",
+      color: "grey7.main",
+      maxWidth: "95px",
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      margin: "0 10px",
+      cursor: "pointer",
+      "&:hover": {
+        textDecoration: "underline"
+      }
+    }
+  }, bite === null || bite === void 0 ? void 0 : (_bite$ownerObject2 = bite.ownerObject) === null || _bite$ownerObject2 === void 0 ? void 0 : _bite$ownerObject2.username)), /*#__PURE__*/React__default.createElement(Text, {
+    sx: {
+      fontWeight: "300",
+      fontSize: "12px",
+      color: "grey7.main"
+    }
+  }, ((bite === null || bite === void 0 ? void 0 : bite.audioDuration) / 1000).toFixed(0), "s")))));
 };
 
 var _templateObject$f;

package/dist/index.umd.js

@@ -1518,7 +1518,10 @@
     var UserCard$1 = function UserCard(_ref) {
       var _user$twitchChannelIn, _user$twitchChannelIn2;
 
-      var user = _ref.user;
+      var user = _ref.user,
+          onUsernameClick = _ref.onUsernameClick,
+          onFollowerClick = _ref.onFollowerClick,
+          onCreatedClick = _ref.onCreatedClick;
       return /*#__PURE__*/React__default['default'].createElement(Stack, {
         direction: "row",
         sx: {
@@ -1568,8 +1571,14 @@
           whiteSpace: "nowrap",
           textOverflow: "ellipsis",
           marginBottom: "10px",
-          overflow: "hidden"
-        }
+          overflow: "hidden",
+          cursor: "pointer",
+          transition: "0.3s",
+          "&:hover": {
+            textDecoration: "underline"
+          }
+        },
+        onClick: onUsernameClick
       }, user === null || user === void 0 ? void 0 : user.username), /*#__PURE__*/React__default['default'].createElement(Stack, {
         direction: "row",
         sx: {
@@ -1577,30 +1586,50 @@
           justifyContent: "space-around"
         }
       }, /*#__PURE__*/React__default['default'].createElement(Stack, {
-        alignItems: "center"
+        alignItems: "center",
+        sx: {
+          cursor: "poiner",
+          transition: "0.3s",
+          "&:hover": {
+            textDecoration: "underline"
+          }
+        },
+        onClick: onFollowerClick
       }, /*#__PURE__*/React__default['default'].createElement(Text, {
         sx: {
           fontSize: "14px",
-          fontWeight: "400"
+          fontWeight: "400",
+          cursor: "inherit"
         }
       }, (user === null || user === void 0 ? void 0 : user.followerCount) || 0), /*#__PURE__*/React__default['default'].createElement(Text, {
         sx: {
           fontSize: "12px",
           fontWeight: "300",
-          color: "grey7.main"
+          color: "grey7.main",
+          cursor: "inherit"
         }
       }, "followers")), /*#__PURE__*/React__default['default'].createElement(Stack, {
-        alignItems: "center"
+        alignItems: "center",
+        sx: {
+          cursor: "poiner",
+          transition: "0.3s",
+          "&:hover": {
+            textDecoration: "underline"
+          }
+        },
+        onClick: onCreatedClick
       }, /*#__PURE__*/React__default['default'].createElement(Text, {
         sx: {
           fontSize: "14px",
-          fontWeight: "400"
+          fontWeight: "400",
+          cursor: "inherit"
         }
       }, (user === null || user === void 0 ? void 0 : user.created) || 0), /*#__PURE__*/React__default['default'].createElement(Text, {
         sx: {
           fontSize: "12px",
           fontWeight: "300",
-          color: "grey7.main"
+          color: "grey7.main",
+          cursor: "inherit"
         }
       }, "created")))));
     };
@@ -2026,7 +2055,8 @@
       var Waveform = _ref8.Waveform,
           bite = _ref8.bite,
           playState = _ref8.playState,
-          play = _ref8.play;
+          play = _ref8.play,
+          onTitleClick = _ref8.onTitleClick;
 
       var _useState9 = React.useState(false),
           _useState10 = _slicedToArray__default['default'](_useState9, 2),
@@ -2222,8 +2252,14 @@
           overflowY: "auto",
           lineHeight: "1",
           height: "23px",
-          margin: "10px 0 5px 0"
-        }
+          margin: "10px 0 5px 0",
+          cursor: "pointer",
+          transition: "0.3s",
+          "&:hover": {
+            textDecoration: "underline"
+          }
+        },
+        onClick: onTitleClick
       }, bite === null || bite === void 0 ? void 0 : bite.title), /*#__PURE__*/React__default['default'].createElement(Stack, {
         direction: "row",
         alignItems: "center",
@@ -2287,30 +2323,20 @@
       })))), /*#__PURE__*/React__default['default'].createElement(FavoriteIconWithCounter, {
         saved: bite === null || bite === void 0 ? void 0 : bite.saved,
         count: saveCount
-      }), /*#__PURE__*/React__default['default'].createElement(Text, {
-        sx: {
-          fontWeight: "300",
-          fontSize: "12px",
-          color: "grey7.main",
-          maxWidth: "95px",
-          whiteSpace: "nowrap",
-          overflow: "hidden",
-          margin: "0 10px"
-        },
+      }), /*#__PURE__*/React__default['default'].createElement(Stack, {
+        direction: "row",
         onClick: function onClick(e) {
           setUserCardRef(e.target);
-        } // onMouseLeave={() => {
-        //     setUserCardRef(null);
-        // }}
-
-      }, bite === null || bite === void 0 ? void 0 : (_bite$ownerObject = bite.ownerObject) === null || _bite$ownerObject === void 0 ? void 0 : _bite$ownerObject.username), /*#__PURE__*/React__default['default'].createElement(Text, {
-        sx: {
-          fontWeight: "300",
-          fontSize: "12px",
-          color: "grey7.main"
+        },
+        onMouseEnter: function onMouseEnter(e) {
+          setTimeout(function () {
+            setUserCardRef(e.target);
+          }, [500]);
+        },
+        onMouseLeave: function onMouseLeave(e) {
+          setUserCardRef(null);
         }
-      }, ((bite === null || bite === void 0 ? void 0 : bite.audioDuration) / 1000).toFixed(0), "s")))), /*#__PURE__*/React__default['default'].createElement(Popover, {
-        id: "user-card-".concat(bite === null || bite === void 0 ? void 0 : bite._id, "-").concat(bite === null || bite === void 0 ? void 0 : (_bite$ownerObject2 = bite.ownerObject) === null || _bite$ownerObject2 === void 0 ? void 0 : _bite$ownerObject2._id),
+      }, /*#__PURE__*/React__default['default'].createElement(Popover, {
         open: openUserCard,
         anchorEl: userCardRef,
         anchorOrigin: {
@@ -2321,23 +2347,48 @@
           vertical: "top",
           horizontal: "left"
         },
+        disablePortal: true,
+        hideBackdrop: true,
+        sx: {
+          pointerEvents: "none"
+        },
         PaperProps: {
           // onMouseEnter: (e) => {
           //     setUserCardRef(e.target);
           // },
+          id: "user-card-".concat(bite === null || bite === void 0 ? void 0 : bite._id, "-").concat(bite === null || bite === void 0 ? void 0 : (_bite$ownerObject = bite.ownerObject) === null || _bite$ownerObject === void 0 ? void 0 : _bite$ownerObject._id),
           sx: {
+            pointerEvents: "auto",
             backgroundColor: "transparent"
           },
-          onMouseLeave: function onMouseLeave() {
+          onMouseLeave: function onMouseLeave(e) {
             setUserCardRef(null);
           }
-        },
-        onClose: function onClose() {
-          return setUserCardRef(null);
-        }
+        } // onClose={() => setUserCardRef(null)}
+
       }, /*#__PURE__*/React__default['default'].createElement(UserCard$1, {
         user: bite === null || bite === void 0 ? void 0 : bite.ownerObject
-      })));
+      })), /*#__PURE__*/React__default['default'].createElement(Text, {
+        sx: {
+          fontWeight: "300",
+          fontSize: "12px",
+          color: "grey7.main",
+          maxWidth: "95px",
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          margin: "0 10px",
+          cursor: "pointer",
+          "&:hover": {
+            textDecoration: "underline"
+          }
+        }
+      }, bite === null || bite === void 0 ? void 0 : (_bite$ownerObject2 = bite.ownerObject) === null || _bite$ownerObject2 === void 0 ? void 0 : _bite$ownerObject2.username)), /*#__PURE__*/React__default['default'].createElement(Text, {
+        sx: {
+          fontWeight: "300",
+          fontSize: "12px",
+          color: "grey7.main"
+        }
+      }, ((bite === null || bite === void 0 ? void 0 : bite.audioDuration) / 1000).toFixed(0), "s")))));
     };
 
     var _templateObject$f;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@blerp/design",
-    "version": "1.2.16",
+    "version": "1.2.17",
     "description": "Blerp UI",
     "main": "dist/index.cjs.js",
     "scripts": {